Hi All, relatively new to jQuery and trying to get to grips with the UI dialog. I have created a function that allows me to create a dialog of whatever size, text, buttons, etc. I want and it's working pretty well. The last problem I have is relating to the buttons on the dialog. I am passing a string of label/functionName pairs that define the buttons to be created and the functions to call when each one is clicked but this is what is not working.

I am getting the buttons with the right labels but when clicked they are all calling the same function, that being the last one in the list. I'm sure it's all down to how the function name is referenced but I just can't crack it.

This is an example of the button string I am passing:

'Save=save,Abort=abort,Help=help,focuson=Abort'

It should create 3 buttons: Save, Abort and Help, each one calling the function save(), abort() or help(). The last parameter focuson defines the button to be given the default focus so doesn't create a button.

Here is the code that parses the string to create the buttons code for the dialog:

1.   // If defined convert the buttons string to an array of objects for
     // the jqeury dialog
     var focuson, focuscode = "", firstbutton = true;
     if ((dButtons != "") && (dButtons != "undefined")) {
       var buttons, pairs, option, setting, count, i, btnvalue;
       buttons = dButtons.split(",");
       count = buttons.length;
       for (i=0; i<count; i++) {
         pairs = buttons[i].split("=");
         option = pairs[0];
         btnvalue = pairs[1];
         if (option == "focuson") {
           focuson = pairs[1];
         } else {
          setting = window[pairs[1]];
           if (focuson == "") {focuson = option};
           if (firstbutton) {
       firstbutton = false;
             var buttonsObj = [{ text: option, click: function() {if ((setting) && (typeof setting == "function")) {setting()};$( this ).dialog( "close" );}}];
           } else {
             buttonsObj[i] = { text: option, click: function() {if ((setting) && (typeof setting == "function")) {setting()};$( this ).dialog( "close" );}};
           }
         }
       }
       if (focuson == "") {
         focuson = "Close";
       }
     }
   

In the above code the function name passed in the string ends up in settings, I just think I am referencing this wrong and that's why its the same for all the buttons. I am using window[] to translate the function name coming in as a string to the function and that seems to work and calls a function...just the wrong one.

Now here is the code that creates the dialog using buttonsJob created above:

1.    $(jqdialogid).dialog({  //create dialog, but keep it closed
       autoOpen: false,
    title: dTitle,
       height: dHeight,
       width: dWidth,
    resizable: dAllowResize,
       modal: dDisableParent,
       position: {my: myPosition, at: atPosition, of: window},
       open: function( event, ui ) {$(jqdialogid).css('overflow', ScrollCode);$(".ui-dialog-titlebar-close").hide();$('.ui-dialog :button').blur();$(":button:contains('"+focuson+"')").focus();},
    close: function( event, ui ) {$(jqdialogid).remove();},
    buttons: buttonsObj,
      });
2. 
   
3.   // if URL supplied load into dialog
     if (dURL != '') {
       $(jqdialogid).load(dURL);
     }
    
     // display the dialog
     $(jqdialogid).dialog("open");    
    
   
   

I'm sure the problem is the way I'm referencing the function to call when the button is clicked, I think they are all referencing the same item, ie the last one, I just don't know how to correct it. Still trying to figure out all of the methods and the way functions and objects are passed around.

Any help would be appreciated.

Doug.