Question

I am writing an ajax call to a python backend which generates the HTML for a modal dialog box and pops up said dialog box afterward. However, recently I’ve been having issues here. My code (thus far) is as follows for the JS frontend.

var deletegroup = function(group){
        $.ajax({
                url: "ajax.py/get_orphaned_networks",
                data: {group: group},
                success: function(result){
                        if (result == 0){
                                alert("Group does not contain networks, no networks will be deleted.");
                        } else {
                                $("#dgf_modal").html(result);
                                $("#dgf_modal").css('visibility', 'visible');
                                $("#dgf_modal").dialog({
                                        modal: true,
                                        closeOnEscape: false,
                                        resizable: false,
                                        draggable: false,
                                        title: "Deleting Group",
                                        width: 500,
                                        height: 500,
                                        buttons: {
                                                "Yes" : function(){
                                                        alert("Well, okay then.");
                                                        $("#dgf_modal").dialog("close");
                                                },
                                                "Cancel" : function(){
                                                        $("#dgf_modal").dialog("close");
                                                }
                                        },
                                        close: function(){
                                                $("#dgf_modal").html("");
                                                $("#dgf_modal").css('visibility', 'hidden');
                                                $(this).dialog("destroy");
                                        }
                                });
                                $("#dgf_modal").dialog("open");
                        }
                },
                error: function(){
                        setlongmessage("An error has occurred. Contact your system administrator.");
                        $("#dgf_status").html("<img src='images/error.png' alt='An error occured.'/>");
                        setTimeout(function(){$("#dgf_status").html("");}, 3000);
                }
        });
}

I’ve got similar code in another section of my application which works just fine. However, with this one I’m getting the following error:

Error: cannot call methods on dialog prior to initialization;
attempted to call method ‘open’

throw new Error( msg );

jquery.js (line 477)

EDIT: I get the same error message if I call dialog(“open”) or dialog(“close”) on the div. Same stack trace, the only error that changes is that it attempted to call method ‘close’ instead of ‘open’.

I’m using the latest versions of jQueryUI and jQuery, as I thought that perhaps updating them would resolve this issue. No dice. Perhaps I’m messing up somewhere in this function, but I do know for sure that the ajax call is returning the proper HTML that it should be returning.

Everything else checks out – I do have my div with the ID dgf_modal, and that works fine. Not exactly sure what’s messing up on me now though.

Answer 1

Well, I’ve figured it out. It was my AJAX call after all, returning two divs with the id “dgf_modal”. Accidentally tossed that into my for loop when I’m automatically generating table cells as opposed to at the end when I actually close off the table.

In short, I’m an idiot.