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

Pitchinnate · Accepted Answer · 2013-10-21T19:00:29.687

2

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

edited Oct 21 '13 at 19:00

answered Oct 21 '13 at 18:48

Pitchinnate

7,517
1
20
37

Seems to load and work with most stuff but the JQuery UI draggable-item only works one time per page load then doesn't work again, vs actually putting the JS in the partialView it works all the time. – bonez Oct 21 '13 at 19:58
I wonder if it has something to do with Jquery UI keybinding stuff for draggable – bonez Oct 21 '13 at 19:59
Do you have any errors showing up in your javascript error console? – Pitchinnate Oct 21 '13 at 20:05
No errors. I'm just thinking JQueryUi does some kind of keybinding for draggable elements on page load, that isn't being refreshed on ajax content reload. – bonez Oct 21 '13 at 20:09
You mean items that are sortable via drag and drop are no longer able to be dragged and dropped after one drag and drop is done? – Pitchinnate Oct 21 '13 at 20:16
Do you have firebug installed? Do you see your ajax call to `/project/ajaxUpdateOrder` ? – Pitchinnate Oct 21 '13 at 20:21
Exactly. It works the first on drag drop after an ajax load, then nothing is selectable. Yes firebug is installed. I see the first call to ajaxUpdateOrder and I console.log the return output. Then nothing works. In _pagePartial it works fine. – bonez Oct 21 '13 at 20:21
I would try changing it to `$('#sortable-list-left').sortable();` with no other options to see if the problem persists. – Pitchinnate Oct 21 '13 at 20:31
Also just wondering how do you have your javascript in the pagepartial.php is it in `registerScript()` or is it just embedded in the html that gets returned? – Pitchinnate Oct 21 '13 at 20:41
registerScript, I'm going to try to use sortable('destroy') before I call sortable. Almost positive there is some kind of mouseDown binding going on when JqueryUI.js is loaded in the page, and needs 'refreshed' – bonez Oct 21 '13 at 20:43
Your not loading Jquery or JQueryUI in the pagepartial.php are you? – Pitchinnate Oct 21 '13 at 20:46
No, when I do, everything works, but obviously that slow as hell to reload every ajax call – bonez Oct 21 '13 at 20:46
You are forcing it to load in main view though correct? Also I would try moving your javascript in the partial view out of `RegisterScript()` – Pitchinnate Oct 21 '13 at 20:51
Right, Okay I'll try that. – bonez Oct 21 '13 at 20:52
No dice, I have an assload of JS on this page. I'm going to post another question. Original question is answered though and I will accpet – bonez Oct 21 '13 at 21:09

score 2 · Answer 2 · answered Jul 23 '15 at 14:39

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...

Yii renderPartial with external javascript

2 Answers2