jqModal/JQuery problem, div not updating with new content?

Question

I'm hoping someone can point a relative jQuery/jqModal newbie in the right direction for debugging this error. I'm loading an html fragment into a div and then use jqModal to display that div as a modal dialog. The problem is that the div is displayed but not with my updated html.

I'm showing my jqModal dialog in the response from a jquery call, function foo is called from an onclick event:

function foo(url)
{
    $.ajax({
        type: "GET",
        url: url,
        success: function(msg)
        {
            $('#ajaxmodal').html(msg);
            $('#ajaxmodal').jqmShow();
        }
    });
}

ajaxmodal is a simple div.

Initially I thought the problem must be in the html snippet (msg) I'm passing to the callback, but I don't think that's it, I get the err (see below) even when I comment out the $('#ajaxmodal').html(msg) line or pass it hardcode html. I think I have jqModal configured correctly, other calls using our ajaxmodal div work correctly, I'm able to display the modal, update the content based the server response, etc.

When I try to debug in firebug, I get the following error following the call to .jqmShow(). I have seen the err on occasion in other places when it seemed maybe the page hadn't loaded yet, and I confess I'm confused about that, since we've wrapped our jqModal selectors in a $(document).ready() call, so maybe I have a larger issue that this call just happens to trigger?

From the jquery.jqModal.js file, line 64: js err is $(':input:visible',h.w)[0] is undefined in the line:

f=function(h){try{$(':input:visible',h.w)[0].focus();}catch(_){}}

When I step through this in firefox, h.w[0] seems ok, it references our '#ajaxmodal' div.

Thanks in advance for any suggestions in tracking this down?

Answer 1

I'm not familiar with jqModal, but you might want to try

append()

Rather than

html()

I'm not sure if that will help, but it's worth a shot

Answer 2

Found a soln to my problem, posting the result in case it helps someone else, though I don't quite understand it.

The issue (I think) has something to do with ajaxmodal not quite being initializel as a jqModal element when I make .html() call. Calling .jqmShow initializes the div with our default text. I had thought putting this in document ready function was sufficient to initialize the dialog:

$('#ajaxmodal').jqm({ajax: '@href', trigger: 'a[rel*=modal]', ajaxText: 'Loading...'});

but to solve my problem I had to reverse the calls:

$('#ajaxmodal').jqmShow(); $('#ajaxmodal').html(msg);

Answer 3

This question is a little on the old side, but this was one of the only results I could find on google for a similar situation so I thought I'd share my experience.

The line in question in jqModal is attempting to focus the first input element it finds within your pop-up form, and if there is none, an exception is thrown. This is why it is in the exception block - nothing bad happens if you disable firebug.

However, if you are like me and find errors bubbling up to be a bit on the annoying side, a workaround is to add a dummy input element to the element you are executing jqmShow on.