Object loses all functions after Dialog.open

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 understa开发者_高级运维nd 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!

Fix the top code:

if ('undefined' !== typeof (listCtrls))
{
  for (ctrlName in listCtrls)
  {

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

You were never defining anything outside the scope.

When a jQuery dialog is created the html it is moved out of the body! This is probably where your problem is stemming from...

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.

I can' find where you call DialogSubstitutes method. But I solved same problem with a simple line, if you are calling a jquery function with a link or button, that link or button keeps doing his DOM work, so you must avoid that work, like stop it.

Jquery has a method called e.preventDefault() that does the trick, default action for links is to go to the top of the page, with e.preventDefault() page will stay where it is.

but you must change the way you call your functions to this way:

$(".SomeButtonOrLinkOrDomObjectId").click(function (e) {

    e.preventDefault(); //this does the trick.

    //then, your code...

});

hope it helps.

Bye.