Using Widgets On Views Loaded By Ajax

The title tells mostly everthing I need: I have to use widgets (just like CJuiAutoComplete) as a the part of the html returned by AJAX request and that is printed on a dialog. Autocomplete falls once its generated by AJAX.

Could you give my an idea how should I try to resolve this problem? I could imagine that I need to preset some JS functions in the main page request reload, but instead of immediately copy pasting JS there, I would like to have your point of view to such a sitation? How should you generally approach/avoid this problem?

You did not provide your code, it will be very hard to point out what error you got.

But first suggestion is search CJuiAutoComplete as key word, you will get bunch of good examples.

Hi docc,

The general rule that works for me is like the following:

  1. Provide all js in the initial page loading.

Even if some widgets will be invoked afterwards, I would load the js for them beforehand.

  1. Do not include js in ajax responses.

I just include plain html or json data in ajax responses. This will greatly reduce the complexity.

  1. Do not rely heavily on Yii’s CHtml::ajaxSomething and CJuiSomething.

I don’t say that they are useless. I do use them. But I believe that calling jQuery and/or jQueryUI functions directly would be a simpler and cleaner solution when the use case is rather complicated.

  1. Remember that some widgets need to be re-initialized after ajax updating.

jQuery UI widgets like Datepicker and Autocomplete need to be re-initialized after they are updated by ajax. For example, if an autocomplete is located inside a div which will be updated by ajax call, the autocomplete widget will be returned to a plain text field every time it is updated by ajax. You need to call something like:




$('#input-id-for-autocomplete').autocomplete();



after every ajax updating.

Thanks softark, you understood my question well and I’m almost satisfied with idea how should I work with these kind of complicated situations.

So you recommend not to use JS at all (in AJAX response HTML). I was just thinking what about if JS is really needed, like: Let say I have two tables in database: clients and orders:

I’m creating an order via user interface by setting up all information to order. Then I need to add the client for the order. I can’t find the client on the Dropdownlist or autocomplete list, so I probably want to add a new client by clicking “new client”. In this place, if the form to create new client is reload by normal page request, the filling order form will get interrupted, right? So in that case I suppose AJAX on dialog could make the deal. I call “client/create” by ajax. If “client/create” is using JS or some Yii widgets(Just like autocomplete for the client country example)), The things are getting complicated because instead of simply using existing functions and views for creating new client, I have to redo create.php, _form.php and equivalent controllers functions over again to support the case when they are loaded by AJAX(?)

So the result inside /protected/views/client folder would be:

_form.php

_formAjax.php

view.php

viewAjax.php

etc.

I just thought there would be nice a way to get advantage of the existing view templates and controllers functions even thought they are called by AJAX.

Hi docc,

I’m sory, but I couldn’t get what you are talking about in the 3rd paragraph.

But, yes, I agree with you that we want to and have to include JS in our ajax response in a certain situation. I really don’t think that my rule in the previous post IS the right choice for all the use cases. In fact, my rule could be less handy and flexible when the situation get more large and complicated.

You can set the 4th parameter of renderPartial to include JS in the ajax response. But personally I’ve never used it, because, well, I didn’t want to.

[P.S.]

Probably you have to share your code, as Johnny has suggested, if you want to have further discussion about the subject. A concrete code may let people suggest you more useful tips.