jQuery Mobile and ASP.NET Update Panel problem

Question

I have an ASP.NET website that also utilizes jQuery Mobile for rendering. Mostly, this works very well, however I am having one small problem. The site runs a survey. There are several "submit" buttons on the page. In order to keep the entire site from reloading, the Submit buttons are in UpdatePanels, so that only the button re-renders.

(I should also mention that we have a Report control on another page, that is having the same problem I'm about to describe).

When the submit button is clicked, the button re-renders, however now it looks like a "normal" button, as all the CSS added by jQuery Mobile is now lost.

So... I know that the problem is that, because the entire page is not reloading, jQuery Mobile is not intercepting the postback and injecting the necessary CSS to the button.

What I don't know is how to fix it.

I think I know enough to make a javascript call on the postback, but I don't know what jQuery Mobile routine to call (I assume there is some kind of document.Ready() call, but heck if I can find it) in order to fix it.

I did post this question on the jQuery Mobile site and did not get a reply. I'm kind of desperate at this point as the client is breathing down my neck about it.

Any help would be appreciated.

Answer 1

I found a solution to this and wanted to post it here for others. My solution is slightly overkill, but as such should "just work" in most cases. At the end of the day, what you need to do is trigger the "create" event on the element(s) that need updating. This is what jQuery Mobile is looking for and what kicks it off to re-parse the HTML. The following statement will grab all <div>'s (which naturally includes all update panels) on the page, and will re-render any controls within them. I added it to the submit button's Click() event in the ASP.NET code behind. (Note that adding the javascript to the button's client side onclick() didn't seem to work)

ScriptManager.RegisterStartupScript(Page, GetType(), "temp", "<script type='text/javascript'>$('div').trigger('create');</script>", false);  

Be aware that if you have a better handle on the content you want to re-parse, then instead of grabbing every single <div> on the page, you could target the exact <div> that needs updating and just update only what is necessary. This would provide better performance, however the parsing is pretty darn fast even on a complicated page.

Answer 2

UpdatePanel essentially means that you have ASP.NET AJAX running in your site.
pageLoad ( not exactly DOM Ready ) is called after every partial postback. Work with that event and write your corrective code in that.

function pageLoad(sender, args){
    //Jquery Code
}

P.S: UpdatePanels are really dangerous. I have had my fair share of tears with that.
Please do not use that together with another libraries in future.

Hope this helps, really.