I have successfully implemented a rendering partial with UJS, but there's a problem:
The partial is able to update the form's markup that triggers the onchange action. However, the JavaScript on this newly updated markup stops working.
As a result, the code works only once and then fails to work again.
I suspect that the UJS binding occurs during the initial loading (document.ready), but not on the elements updated by the partial.
--> How can I bind the same action to the new markup returned from the ajax request? --> Is it feasible to re-trigger the "binding" of the UJS function as done during the document load? Do I need to create an additional function?
Markup:
<form action="/loopview/1/show" data-remote="true" id="breadcrumb_form" method="post">
<select class="auto_update">
<option value="1970" selected="selected">test</option>
</select>
</form>
UJS :
$(document).ready(function() {
...
$('select.auto_update').change(function(){
...
$(this).submit(); // never triggered on newly loaded markup
});
}