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');

Answer 2

For people like me who has the same issue, even with:

Yii::app()->clientscript->scriptMap['jquery.js'] = false;

in the renderPartial and still not work. I've found another solution, way more effective I think. The easiest solution is to set the 4th parameter of renderPartial.

RenderPartial-detail

public string renderPartial(string $view, array $data=NULL, boolean $return=false, boolean $processOutput=false)

It is about processOutput.If you put it to true, then Jquery will be loaded in your render Partial.

Hope this will help someone...