Модал Fancybox-Lightbox2 с небольшим количеством Ajax в Rails 3 - PullRequest
Новая
       57

Модал Fancybox-Lightbox2 с небольшим количеством Ajax в Rails 3

0 голосов
/ 26 апреля 2011

Попытка построить несколько модальных окон, чтобы показать грубость в более приятном интерфейсе. Желательно сделать это с помощью Jquery, так как намерены использовать jquery-ui в других частях приложения.

У меня есть div в макете моего приложения 

<div id="modal-container"></div>
<div id="modal">
  <a href="#" class="close">close</a>
</div>

, которые затем призваны с Ajax 

$(function(){
  var $modal = $('#modal'),
      $modal_close = $modal.find('.close'),
      $modal_container = $('#modal-container');

  $('a[data-remote]').live('ajax:beforeSend', function(e, xhr, settings){
    xhr.setRequestHeader('accept', '*/*;q=0.5, text/html, ' + settings.accepts.html);
  });

  $('a[data-remote]').live('ajax:success', function(xhr, data, status){
    $modal
      .html(data)
      .prepend($modal_close)
      .css('top', $(window).scrollTop() + 40)
      .show();
    $modal_container.show();
  });

  $('.close', '#modal').live('click', function(){
    $modal_container.hide();
    $modal.hide();
    return false;
  });
});

Так вот, есть еще стиль и т. Д., Однако, хорошо ... он просто не выглядит на высшем уровне. Я надеялся использовать лайтбокс, лицевую панель или другие плагины, которые выглядят действительно круто, но до сих пор не были в состоянии из-за отсутствия онлайн-учебников.

Может кто-нибудь помочь с реализацией в Rails 3 из них?

Большое спасибо!

1 Ответ

1 голос
/ 27 апреля 2011

Давайте попробуем подытожить, как вы все организовали.

Поместили ли вы файлы jquery и плагины в папку: / public / javascripts?

В вашем основном файле макета (/app / views / layout) вы загружаете скрипты? 

<%= javascript_include_tag 'jquery-1.4.4.min' %>
<%= javascript_include_tag 'rails' %>
<%= javascript_include_tag 'jquery-ui-1.8.7.custom.min' %>
<%= javascript_include_tag 'application' %>

Вам следует избавиться от всех других javascript-скриптов, включая прототип.

Вам не обязательно нужен файл application.js для тестирования.Вы можете просто поместить свой ajax-код в раздел HEAD своего представления.

Этот ajax-код должен быть заключен в $ (document) .ready () следующим образом: 

<script type="text/javascript">
    $(document).ready(function() {
        $('.delete_phone').bind('ajax:success', function() {  
            $(this).closest('tr').fadeOut();  
        });
    });
</script>

Всписок телефонных номеров (внутри HTML-таблицы), этот код удаляет 1 строку, когда вы нажимаете на соответствующую ссылку для удаления, подобную этой: 

<%= link_to image_tag("editdelete.png", :size => "16x16", "Delete Phone"),
    { :controller => 'phone_controller',
        :action => 'destroy_phone',
        :id => phone },
        :method => :delete, :confirm => "Are you sure?",
        :remote => true, :class=>'delete_phone'
%>

Изменяет ли что-то подобное организацию вашего кода?

РЕДАКТИРОВАТЬ:

Вы должны изменить несколько вещей в файле phone_controller: 

  def destroy_phone
      @phone = Phone.find(params[:id])
      @phone.destroy
      respond_to do |format|
          format.js   { render :nothing => true }
      end
  end

Запишите код response_to.Он сообщает rails, что это действие javascript и что контроллер не должен отображать ничего, кроме js.

...