Question

I have a Javascript object that (very simplified) looks like this

if('undefined' !== typeof(listCtrls)){ for (ctrlName in listCtrls) {
var ctrl = listCtrls[ctrlName];

ctrl.Initialize = function() {
    //Save a reference to the 'tbody' element
    this.tbody = $("#"+this.id+"_tbody");
    this.dataFetched = false;
}
ctrl.Update = function(command){
    //Go and fetch some data
    $.post(url, function(ssResponse){ ... }
    this.tbody = "fill with AJAX data";
}
ctrls.SomeMoreFunctionsAsWell() {}
}});

As you can see in function Initialize(), it have a reference to a HTML element.
Everything is working great until I place the referenced HTML elements inside a JQuery dialog.

As soon as the dialog opens, ctrl loses all its functions. And I cant understand why! It would have made sense if something went wrong when Dialog.Destroy() is called, but this error happens directly after the dialog is opened.

Now, I don’t get an regular javascript error during Dialog.Open(). Rather I get an error when i click on a element inside the dialog which calls ctrl.Update().

Uncaught TypeError: Object # has no method ‘Update

HTML code:

<div id="dialog_Substitute" style="display:none;" title="test">
    <div><span class="ui-icon ui-icon-info" style="style"></span>
<table style="width:100%" id="substitutelist_table">
<thead id="substitutelist_thead"><tr><th style="cursor: pointer; ">Name</th><th style="cursor: pointer; ">Valid from</th><th style="cursor: pointer; ">Valid through</th><th style="cursor: pointer; ">Incl. Authorities</th><th style="cursor: pointer; "></th></tr></thead>
<tbody class="tbodydata" id="substitutelist_tbody">
<tr style="background-color:#F2F2F2;"><td class="left" style="">Lager, Patrik</td><td class="left" style="">2011-04-15</td><td class="left" style="">2011-07-01</td><td class="left" style=""></td><td class="action left" onclick="if(¤7¤==true) {var a=¤6¤; var b='2011-04-15'; deleteItem(a,b);};return kill(event);" style=""><img src="../Styles\sctrls/delete_16.png" alt="Ta bort"></td></tr>
<tr style=""><td class="left" style="">Svensson, Marie</td><td class="left" style="">2011-04-15</td><td class="left" style="">2011-05-12</td><td class="left" style=""></td><td class="action left" onclick="if(¤7¤==true) {var a=¤6¤; var b='2011-04-15'; deleteItem(a,b);};return kill(event);" style=""><img src="../Styles/sctrls/delete_16.png" alt="Ta bort"></td></tr>
<tr style="background-color:#F2F2F2;"><td class="left" style="">Lind, Linda</td><td class="left" style="">2011-02-05</td><td class="left" style="">2011-02-27</td><td class="left" style=""></td><td class="action left" onclick="if(¤7¤==true) {var a=¤6¤; var b='2011-02-05'; deleteItem(a,b);};return kill(event);" style=""><img     src="../Styles/sctrls/delete_16.png" alt="Ta bort"></td></tr>
</tbody></table>
    </div> 

JS code that opens the dialog:

function dialogSubstitutes(user_id, user_name)
{
    //list ID=substitutelist
    //dialog ID =dialog_Substitute

    //Reset form (it might have been used before)
    //$("#frm_newsubstitute")[0].reset();

    //Fetch substitutes for this user and populate the List
    listCtrls["substitutelist"].dataSrcParams.user_id = user_id;
    listCtrls["substitutelist"].Update(-1);


    $("#dialog_Substitute").dialog({
        resizable: false,
        width: 650,
        modal: true,
        overlay: {
            backgroundColor: 'black',
            opacity: 0.5
        },
        buttons: {
            'OK': function() {
                $("#dialog_Substitute").dialog('close');
                //$("#dialog_Substitute").dialog('destroy');
            }
        }
    });
}

Do you have any idea why this happens?

thanks!

Answer 1

It turns out (love that expression) that when a JQuery.Dialog() is opened, not only does it move the innerHTML code of the dialog, it also executes any inline javascript code.

And because the ctrl had its initializer code placed right beside, it was executed a 2nd time and thus, it lost data.