YiiFramework - no javascript functions after ajax load

Question

I have a form in Yii and want to load the next step via Ajax. So I have the following request:

$.ajax({
url: jQuery("#form-1").attr("action"),
type: "POST",
data: jQuery(form).serialize()
}).done(function(data) {
jQuery("body").html(data);
});

The url leads us to the following:

$this->render('formStep2', array('model' => $model));

so the complete view will be overwritten. The problem is, that all event triggered javascript functions don't work. (for example afterValidateAttribute aswell as events with mouseover etc)

How do i get these working?

binding code is for example:

jQuery("#collapsor").mouseover(function(e) {
...
 jQuery("#collapsing").collapse('show');
...
}

there the console says: "Uncaught TypeError: Object [object Object] has no method 'collapse'" (bootstrap). When I do collapsing only with the from bootstrap suggested html code (and a click) then it works...

Or like I said the automatic generated Yii functions "afterValidateAttribute" and so on, but there isn't a console-error at all.

edit: when I use document.write(ajaxContnent) the collapse-thing is working, but without animations and the Yii form functions are still not working...

Answer 1

The way to handle dynamically added content, is to attach the event to the document and target the event and selector that you require. use jquery's on

jQuery('body').on("mouseover","#collapsor", function(e) {
   jQuery("#collapsing").collapse('show');
});

Read more here about delegated events :http://api.jquery.com/on/