Pass a function as an argument in jQuery dialog

Question

I want to create a dialog with function for button in this dialog by call a function. But it does not work.
My code below //Function initial dialog

function inti_dlg(selector, autoOpen, height, width, modal, num_button, fn_apply, fn_cancel, fn_close)
    {
        if (num_button>1)
        {
            selector.dialog({
                autoOpen: autoOpen,
                height:height,
                width:width,
                modal:modal,
                buttons:{
                    Apply:function(){fn_apply},
                    Cancel:function(){fn_cancel}
                },
                close:function(){fn_close}
            });
        }
        else{
            selector.dialog({
                autoOpen: autoOpen,
                height:height,
                width:width,
                modal:modal,
                buttons:{
                    Apply:function(){fn_apply}
                },
                close:function(){fn_close}
            });
        }
    }

//Function abc

function abc()
{
    alert("abc");
}

// Call initial dialog function

$(function (){
    inti_dlg($('#cde'), false, 440, 480, true, 1, abc(), '', abc());
    $('#clickhere').click(function(){$('#cde').dialog('open');});
});

Html :

<div id="clickhere">Click here</div>
<div id="cde">
     <div>Test : pass argument as a function</div>
</div>

Zahid Riaz · Accepted Answer · 2012-06-06 05:22:42Z

2

http://devlicio.us/blogs/sergio_pereira/archive/2009/02/09/javascript-5-ways-to-call-a-function.aspx

Use

Function.apply()

Function.call()

to call the function passed as parameter. and you don't need to add paranthesis along with function name to pass as argument. just pass function name.

function inti_dlg(selector, autoOpen, height, width, modal, num_button, fn_apply, fn_cancel, fn_close)
{
    if (num_button>1)
    {
        selector.dialog({
            autoOpen: autoOpen,
            height:height,
            width:width,
            modal:modal,
            buttons:{
                Apply:function(){fn_apply.apply()},
                Cancel:function(){fn_cancel.apply()}
            },
            close:function(){fn_close.apply()}
        });
    }
    else{
        selector.dialog({
            autoOpen: autoOpen,
            height:height,
            width:width,
            modal:modal,
            buttons:{
                Apply:function(){fn_apply.apply()}
            },
            close:function(){fn_close.apply()}
        });
    }
}

and for calling this

$(function (){
inti_dlg($('#cde'), false, 440, 480, true, 1, abc, '', abc);
$('#clickhere').click(function(){$('#cde').dialog('open');});
});

edited Jun 6, 2012 at 5:22

answered Jun 5, 2012 at 12:01

Zahid Riaz

2,8893 gold badges30 silver badges38 bronze badges

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

7 Comments

Hainlp Over a year ago

Thanks Riaz, I'm beginer, so hard to understand. Can you explain more for my case. Anyway i will try to improve my skill :)

Hainlp Over a year ago

:Thanks Riaz, it works well. Can i ask more : If i pass arguments to abc function => how to call abc function in inti_dlg

Hainlp Over a year ago

Do you have another way? Because inti_dlg is must static, when i need initial Dialog, i will call it.

Zahid Riaz Over a year ago

I am afraid I couldn't get this. What you are trying to do. Needs little more explanation

Hainlp Over a year ago

I want to create a function that can dynamic initial dialog and pass functions to all button in this dialog

|

John Culviner · Accepted Answer · 2012-06-06 05:39:59Z

You are actually executing the function rather than passing it in by mistake. In order to pass in the function and make it very clear what is going on I suggest doing something like this:

var abc = function ()
{
    alert("abc");
}


$(function (){
    inti_dlg($('#cde'), false, 440, 480, true, 1, abc, '', abc);
    $('#clickhere').click(function(){$('#cde').dialog('open');});
});

Then when you are inside "inti_dlg" do not do anything to "fn_apply, fn_cancel or fn_close". You want to pass the function untouched into jQuery Dialog for execution there.

It can be tough to grasp at first but in order to be effective at JavaScript you might need to adapt your understanding of what a "function" is depending on what languages you are used to. Since JavaScript is a functional language (more or less) a function is a first class citizen and can be passed around just like any other variable like a string or an int and later executed by appending () to the function variable name (and passing in any arguments to the function)

Collectives™ on Stack Overflow

Pass a function as an argument in jQuery dialog

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related