views:

46

answers:

1

Hello,

I have one modal dialog in my application that works very nice. I do setup and open of the dialog with the following functions

$(document).ready(function () {
    $("#__gsl_DialogPanel").dialog({
        autoOpen: false,
        resizable: false,
        position: 'center',
        stack: true,
        height: 'auto',
        width: 'auto',
        modal: true
    });
});

function loadDialog(action, id, title, onCloseHandler) {
    $("#__gsl_DialogPanel").dialog("option", "title", title);
    var url = action;
    if (id != "") url = url + "/" + id;
    $.ajax({
        type: "get",
        dataType: "html",
        url: url,
        data: {},
        success: function(response) {
            $("#__gsl_DialogPanel").html('').html(response).dialog('open');
        }
    });
}

Now I have the requirement to open another dialog from a button that's inside the previous dialog. I have created another div ("__gsl_DialogPanel_2L") and cloned the setup and open function referring to the new dialog as in the following code

$("__gsl_DialogPanel_2L").dialog({
    autoOpen: false,
    resizable: false,
    position: 'center',
    stack: true,
    height: 'auto',
    width: 'auto',
    modal: true
});

function loadDialog2L(action, id, title, onCloseHandler) {
    $("#__gsl_DialogPanel_2L").dialog("option", "title", title);
    var url = action;
    if (id != "") url = url + "/" + id;
    $.ajax({
        type: "get",
        dataType: "html",
        url: url,
        data: {},
        success: function (response) {
            $("#__gsl_DialogPanel_2L").html('').html(response).dialog('open');
        }
    });
}

The problem is that the second dialog does not open at all. I have checked with Chrome Developer tools and I can see that the div contains the right HTML that has been received from the ajax call but still has "display: none" in its style property.

Where I am doing wrong?

Update:

These are the div's used. They are in the master page immediately after the BODY tag.

<!-- Generic Dialog Panel  -->
<div id="__gsl_DialogPanel" style="display:none" title=""></div>
<!-- 2 Level Dialog Panel  -->
<div id="__gsl_DialogPanel_2L" style="display:none" title=""></div>

2nd Update:

I have created a simplified sample on JSBin. You can find it here. Any help?

A: 

I was able to get your example on jsbin to work by changing the second div id (and references to it) to "foo". I suspect there is some kind of name collision occurring -- perhaps there is a maximum number of significant characters on the variable name in Javascript or the div id's? (Searched briefly and I can't seem to find that stated anywhere, however).

Eric Asberry
Hello Eric. Thanks for helping but I did just found the solution. It's not a matter of name collision. In the second DIV setup I have missed the "#" character and I have lost almost one entire day before getting rid of it... :(
Lorenzo
Ah, guess I didn't notice that when I changed the name. Isn't Javascript programming fun? :)
Eric Asberry