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-21 19:00:29Z

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, 2013 at 19:00

answered Oct 21, 2013 at 18:48

Pitchinnate

7,5561 gold badge22 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

bonez Over a year ago

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 Over a year ago

I wonder if it has something to do with Jquery UI keybinding stuff for draggable

Pitchinnate Over a year ago

Do you have any errors showing up in your javascript error console?

bonez Over a year ago

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.

Pitchinnate Over a year ago

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?

|

Ghislain · Accepted Answer · 2015-07-23 14:39:01Z

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

answered Jul 23, 2015 at 14:39

Ghislain

315 bronze badges

Collectives™ on Stack Overflow

Yii renderPartial with external javascript

2 Answers 2

15 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

15 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related