I wrote a widget that uses some nice jquery ui stuff. It works nice when using the page, putting some initialisation code into the jQuery(document).ready event.
Now, I try to use the same widget within a block that gets read through an Ajax call and not the full page is reloaded. Obviously, my simple approach for the widget breaks, as this does not update the ready event and the needed calls are not made.
Can anyone think of a nice way to fix this and call the same functions that I put into the ready event by other means after loading a block with Ajax? Could it be implemented in the widget so it would work seamlessly in both worlds, page load and ajax requests?
I suggest you take a loook at the jQuery builtin live(), or the livequery extension. Similar problems has been brought up several times in the forum. I think there’s not an one and only solution since the problem has many flavors.
The idea behind the live/livequery, if I understand it correctly, is to add hooks to certain DOM updates thus being able to get in control and rearm events in the replaced code. But I don’t see the whole picture yet and can’t tell what will work in a widget. (I have to start creating widgets.)
You might also take a look at this example here (german, but mainly code anyway). The key to success for me was to return executable javascript as AJAX responses. That opens a wide range of possibilities: Re-connect event handlers on the clientside, add/show/hide DOM elements, etc…
Yes, this looks like a nice approach. I was thinking about a more general approach, that could work for any widget. Let me think a little bit, early stage, mostly bla bla, I guess
So what if there was a widget, that forms some kind of an ajax stage, a div block, that registers an eventhandler for on page level. Each time the content is changed, that event gets fired. It is responsible for late loading/adding js eventhandlers or even css.
We would need to make the new stuff available for it. So if the registerxxx methods for a widget would distinguish between normal calls and ajax calls, it could recon that if it’s an ajax call all page level registrations will do nothing and add the stuff at the end of the block in a parsable manner. The eventhandler for the ajax block on the page - the stage - could then take care of removing the stuff he added on the last call and add the new stuff.
I have no clue if this can be done at all, but if so, it would be a nice feature of Yii. What do you think? Is there a way?
Not sure if i understand. But at Stay i used a similar approach. A widget can either be rendered in a "standard" page view or as part of an AJAX response. So as you suggested in the first case i register the js init script with clientScript. But if it was an AJAX request the init script is appended to the widget code in a script block.
I still try to find a way to make widgets generally work that way. So, add a way that what it does now on page level could also be done with an ajax request, but all registered stuff appended in a div at the end of the widget output.
On page level, the div that gets the new content inserted would need an eventhandler that reads the information from the end of the data received and inject it into the page. I am not that deep in jQuery, but I am sure there is a way to register new eventhandlers. Maybe also a way to remove the leftovers from the last request, which may not be needed anymore. I’m not so sure about css though.
Having that, any widget that registers ressources could be used either in a page or ajax request without changes. But as I said - currently only blablaing It may be impossible.
It may be impossible.