I'm trying to call a javascript function with arguments on the click of a button in a dialog. Here is the flow of a simplified version that I can post here: 1) On click of an HTML button, pass a function and the button ID as arguments to a 'confirm' dialog. 2) On click of a 'Yes' in the confirmation dialog, call the passed in function that would just update the ID and value of the HTML button.
For some reason, the dialog keeps using the original argument and never gets the updated one. I think the code would do a better job of explaining the issue. Here is the HTML snippet:
- <script type="text/javascript" src="jquery-1.3.2.js"></script>
- <script type="text/javascript" src="jquery-ui-1.7.2.custom.js"></script>
- <div id="confirmDialog"></div>
- <div id="div_input">
- <input type="button" id="1" value="1" onClick="javascript:confirmAction(updateButton, this.id)" />
- </div>
And here is the javascript snippet:
- function confirmAction(onSuccessFunction, functionArg)
- {
- var message = "Are you sure?";
- $('#confirmDialog').html(message);
- $('#confirmDialog').dialog({
- modal: true,
- autoOpen: false,
- title: 'Confirm',
- width: 400,
- height: 150,
- buttons: {
- 'Yes': function() {
- $(this).dialog('close');
- onSuccessFunction(functionArg);
- },
- 'No': function() {
- $(this).dialog('close');
- }
- }
- });
- $("#confirmDialog").dialog('open');
- };
- function updateButton(buttonId)
- {
- alert(buttonId);
- var buttonHTML = '';
- if(buttonId == '1')
- {
- buttonHTML = "<input type='button' id='2' value='2' onClick='javascript:confirmAction(updateButton, this.id)' />";
- }
- else
- {
- buttonHTML = "<input type='button' id='1' value='1' onClick='javascript:confirmAction(updateButton, this.id)' />";
- }
- document.getElementById("div_input").innerHTML = buttonHTML;
- };
confirmAction(...) always calls updateButton(...) with buttonId as '1'.
It works fine if I call updateButton(...) directly 'onClick'. Am I
missing something here?
Debugging in Chrome or Firebug shows me the correct value of functionArg when function confirmAction(onSuccessFunction, functionArg) is called, but as soon as the click event on 'Yes' is invoked, the value of functionArg in that scope changes to '1'. It looks like it is cached, but I am not sure where.