Execute a jQuery function after an Ajax response made by a different JS library

Question

I have to use jQuery mobile on an application that uses Prototype JS. After an Ajax response (initiated using prototype) new elements are brought into the page so jQuery mobile doesn't recognize them and no classes are applied to these.

I want to execute a jQuery function after this ajax event. (I'm also unsure if it'd be correct to use jquery's .on('pageinit') in this instance.

onSuccess: function(transport) {
            try {
                if (transport.responseText.isJSON()) {
                    var response = transport.responseText.evalJSON();
                    var needUpdate = true;
                    if (response.error) {
                        alert(response.message);
                        needUpdate = false;
                    }
                    if(response.ajaxExpired && response.ajaxRedirect) {
                        setLocation(response.ajaxRedirect);
                        needUpdate = false;
                    }
                    if (needUpdate){
                        if (response.content){
                            $(categoryContainer).update(response.content);
                        }
                        if (response.messages){
                            $(messagesContainer).update(response.messages);
                        }
                    }
                } else {
                    $(categoryContainer).update(transport.responseText);
                }
            }
            catch (e) {
                $(categoryContainer).update(transport.responseText);
            }
        }
    });

I've been struggling for several hours with this. and I've found questions regarding Ajax requests made by jQuery, but nothing when prototype is handling the ajax requests. I know it's not the most optimal way to do it but in this instance is fully justified.

Any help is greatly appreciated.

Answer 1

Ok, I thought I'd post the solution to my own dilemma in case someone else runs into the same issue in the future.

What I needed to do was to invoke jQueryMobile at the end of my Ajax response. From their website: http://demos.jquerymobile.com/1.0.1/docs/pages/page-scripting.html

If you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).

For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the create event to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions.

So in this case I did: $jq('#myElement').trigger( "create" );

($jq = it's my jquery alias in nonConflict mode, as prototype is using $)