Question

I have a piece of jQuery code that fills an element on the page with some content:

 var content = $("#note_"+note.id).html();
 $("another_div").html(content);

This replaces the html of the other div fine, but the problem is that any data-remote attributes no longer function on any content inside “another_div”. I think the problem is that jquery_ujs is working great for the items on the page at pageload, but if I remotely load content, I lose that functionality.

How do I work around this? I am interested in this as well for its ramifications of remotely loaded partials

Answer 1

I’ve experienced this before, the problem is that jQuery has already parsed all of the DOM elements on load, therefore won’t be called again automatically when the DOM is changed. You need to manually recall validation parse for your another_div. You can do this by using the following:

$.validator.unobtrusive.parse("#another_div")

Edit: Bit of a hack, but we may need to kick jQuery in the ass

var $main= $(“top level tag”);

// Unbind validation
$main.unbind();
$main.data("validator", null);

// Reparse document
$.validator.unobtrusive.parse(document);

//Re add to Main
$main.validate($main.data("unobtrusiveValidation").options);