JQuery Modal won't tie-in with dotnet ClientID

Question

Hi,

Simple problem which is causing enormous headaches.

I'm using the JQuery modal plugin (jqm) which is normally initiallised with a function that looks like this:

 $().ready(function () {
    $('#popup').jqm({ trigger: $('.trigger') });
 });

Where #popup is the ID of the element you want to show when the modal is displayed and 'trigger is the css class of elements which cause the modal to be displayed.

This works find with static ID's, but as soon as you replace the #popup ID with a dynamic clientID the whole thing falls over:

 $().ready(function () {
    $('#<%= popup.clientID %>').jqm({ trigger: $('.trigger') });
 });

I'm not sure why this is happening - I assume there's some sort of timing issue with the javascript initialising before the element in question has had it's dynamic ID assigned. Certainly once the page is loaded, looking at the ID's in the element and in the JavaScript function they match as expected. I've tried placing the javascript directly in the page and also injecting it dynamically with REgisterStartUpScript but neither work.

Any suggestions gratefully received.

Cheers, Matt

Answer 1

You could use a class selector:

$(function() {
    $('.popup').jqm({ trigger: $('.trigger') });
});

and assign the popup class to the DOM element you would like to attach the modal to.

Also maybe I am wrong but wasn't $().ready(function () a deprecated syntax (I remember having read about it somewhere but don't recall exactly at the moment)?