Callback function with arguments using jQuery dialog

Question

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?

I strongly recommend using document.getElementByid('..').setAttribute('id', ...); instead of .innerHTML. (Deleted my earlier comment because I hadn't fully read OP) — taz
– taz, Commented Jul 5, 2012 at 16:29
taz, thanks for the tip. I changed the code, but that did not solve this issue. I would keep the modified code regardless since that is a better way of doing it. — ybh6336
– ybh6336, Commented Jul 5, 2012 at 16:49
I think that either the browser or jQuery is caching the value of the argument at some point. You shouldn't have to reset the callback assigned to the button - once you've changed the value of the id attribute, this.id should reflect this change. Your code looks OK to me unless I'm missing something also. Try it without javascript: in the text, and use something like Chrome's inspector to debug the script step by step and see what the value of id actually is when the function is called, and where the value it's using is coming from. — taz
– taz, Commented Jul 5, 2012 at 17:20
Removing javascript: did not help. 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 does look like it is cached, but I am not sure where. Is there a way to "destroy" the dialog and create it every time? — ybh6336
– ybh6336, Commented Jul 5, 2012 at 18:38

ybh6336 · Accepted Answer · 2012-07-06 01:42:40Z

2

I posted this on jQuery forums too - https://forum.jquery.com/topic/jquery-dialog-callback-function-with-arguments. As it turns out, this was a bug in older versions of jQuery and has now been fixed.

answered Jul 6, 2012 at 1:42

ybh6336

611 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Callback function with arguments using jQuery dialog

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related