2013-05-17 3 views
6

У меня есть простой формы, которая в настоящее время добавляется к контейнеру:Вставка данных форм-пульт с помощью JavaScript в Rails приложение, UJS не ловя удаленного

<form action="/something" data-remote="true" method="post"> 
    <input type="submit" /> 
</form> 

Мое понимание было то, что rails_ujs.js захватывает все представить события, так Мне не нужно было присоединять какие-либо события при вставке новых форм. Однако эта форма не воспринимается как удаленная форма. Даже когда я помещаю отладчик в rails_ujs.js на общее событие отправки, эта форма не запускает это событие. Все формы, обработанные серверной, не вызовут никаких проблем.

Я пропустил что-то, связанное с тем, чтобы прикрепить событие к динамически вставленной форме?

ответ

0

Я не уверен, как работает rails_ujs.js, но я думаю, что ваши проблемы связаны с тем, что содержимое html, которое вы добавляете на стороне клиента, не отвечает на события, которые уже были привязаны. Решение состоит в том, что всякий раз, когда вы добавляете новый элемент HTML на стороне клиента, вам также необходимо привязать к нему какое-либо событие.

Рассмотрим следующий пример:

<html> 
<head> 
    <title>My Page</title> 
    <script src="jquery.js"></script> 
</head> 
<body> 
    <div id="content"> 
     <a href="#" class="link">Click me</a> 
    </div> 
    <a href="#" class="add_link">Add link</a> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.link').click(function(){ 
      alert('Click me'); 
     }); 

     $('.add_link').click(function(){ 
      $("#content").append("<a href='#' class='link'>Click me no alert...</a>"); 
     }); 
    }); 
    </script> 
</body> 
</html> 

При нажатии на кнопку «Добавить ссылку» ссылку будет добавить ссылку, которая говорит жми меня, и имеет класс «ссылка». Однако, если вы нажмете эту ссылку, он не отобразит предупреждение, то есть событие события события не срабатывает, оно запускается только для созданного на стороне сервера контента.

Решение описано более подробно в этом вопросе: In jQuery, how to attach events to dynamic html elements?

Однако я не знаю, как применить его к rails_ujs, вы, вероятно, придется сделать некоторые изменения там.

0

rails_ujs использует делегирование документов, а не привязки к определенным элементам onload, поэтому он должен забрать вашу форму.

Не может быть, что в вашей форме нет скрытого поля auth_token, и поэтому вставка маркера csrf не выполняется? Или он идет на сервер, а затем не проходит проверку подлинности?

А затем, тупой вопрос: вы уверены, что ваша отлаженная версия rails_ujs присутствует на странице? Загружено rails_ujs? console.log($.rails) для проверки.

+0

Это то, что я думал, что заставляет это разочаровываться. Мой фактический код вводит токен csrf и устанавливает форму для utf-8. – bcardarella

1

после инъекции FOR, вам нужно прикрепить событие к йоту с помощью JQuery-х live & rails_ujs игровой handleRemote() события в форму представить

$(function(){ 
    $("body") 
     .live('ajax:complete', function(){ 
      $("form[data-remote]").live('submit', function(e){ 
        $.rails.handleRemote($("form[data-remote]")); 
        e.preventDefault(); 
      }); 
     }); 
}); 

В настоящее время это выглядит для всех форм на странице, вы возможно, захочет сделать его более конкретным для повышения производительности.

PS: Если вы используете последний jQuery (jQuery 1.7 или новее), вы можете знать, что в последних версиях jQuery функция live() устарела в пользу on(). здесь хорошее объяснение on() vs live()

+0

Это должно быть необходимо? https: // GitHub.com/rails/jquery-ujs/blob/master/src/rails.js # L326 показывает, что rails_ujs использует делегирование событий в документе, который должен записывать все события отправки – bcardarella

+0

^^^ Не нужно, но эй, в настоящее время его не работает , поэтому попробуйте, он может работать или не работать. Но нет никакого вреда в попытках. Incase, он не работает, отправляйте обратно с примером приложения на github, который воспроизводит эту проблему, поэтому мы можем помочь дальше :) – CuriousMind

+0

Хорошая точка :) Я постараюсь воссоздать – bcardarella

8

Оказалось, что я представляю форму внутри формы, и это вызывало проблему. Я идиот: p

+0

Удивительный, я тоже был идиотом :) – Nycen

+0

Удивительно, я тоже. :) – Bang