Yii renderPartial with external javascript

Question

I have a page view that makes an ajax call and updates the contents of the page with renderPartial.

So page.php -> _pagePartial.php (ajax update)

in page.php I want to include the javascript files once, then have the DOM modifications apply after the ajax rendering happens. It doesn't make sense to have this JS file load on every AJAX refresh.

For example in page.php

$baseUrl  = Yii::app()->baseUrl;
$basePath = Yii::app()->basePath;
$cs       = Yii::app()->getClientScript();
$cs->registerScriptFile($baseUrl . '/js/jquery.ui.js'); // load one time! 

then in pagePartial.php

    // every ajax partial load
    $('#sortable-list-left').sortable({
                connectWith:'.productEntryCol',
                placeholder: 'ui-state-highlight',
                update: function(event, ui) {
                    var sortOrderLeft = getSortOrder('sortable-list-left');
                    var sortOrderRight = getSortOrder('sortable-list-right');
                    var projectId =  '" . $project_id . "';
                    $.ajax({
                        data: { left: sortOrderLeft, right : sortOrderRight,  id : projectId},
                        url: '/project/ajaxUpdateOrder',
                        type: 'POST',
                        success: function(response){
                          // process JSON response
                          var obj = jQuery.parseJSON(response);
                        }
                    });
                 }
            });

The problem is after _pagePartial loads via AJAX, it can't use the .sortable() method.

What is the proper way to handle this ?

Thanks

Answer 1

The way I handle this is on the main view on the $.load or $.ajax or whatever it is, add your code on the success function.

So for example:

$.get('_pagePartial.php', null, function(html) {
    $('#result').html(html);
    $('#sortable-list-left').sortable({
        //all your sortable code
    });
});

Another option is to add your javascript on your ajax loaded page ('_pagePartial.php') into a function like so:

function firejs() {
    $('#sortable-list-left').sortable({
        //all your sortable code
    });
}

Then on your successful ajax call on your main view ('page.php') simply add this:

$.get('_pagePartial.php', null, function(html) {
    $('#result').html(html);
    firejs();
});

You can bind to an object until it is added to the DOM and it isn't added to the DOM until the ajax call has finished successfully and the result is added to the DOM.

Also just an FYI yii has jqueryui built in you can simply say:

Yii::app()->clientScript->registerCoreScript('jquery.ui');
Yii::app()->clientScript->registerCoreScript('jquery');