Question

I have a javascript function that calls another function, I am now facing a problem where I have to click a button twice to display a modal dialog box, I know the issue most likely lies in this line:

 $('#dialog_link').click(function()  because I already called 'modaldialog' with an onclick like this:

<input id="dialog_link" type="button" value="Save" onclick ="javascript:modaldialog();"  />

How can I rewrite this line $(‘#dialog_link’).click(function() to call function() without another click?

Thanks!

<script type="text/javascript"> 

function modaldialog() {
             window.Page_ClientValidate();  

 if (window.Page_IsValid) {


                $('#dialog_link').click(function() {
                     $('#dialog').dialog('open');

                return false;
                 });
             }}

 </script>


<script type="text/javascript">
     $(function() {

        // Accordion
         $("#accordion").accordion({ header: "h3" });

        // Tabs
         $('#tabs').tabs();


        // Dialog   
         $('#dialog').dialog({
                 autoOpen: false,
                 width: 600,
                 modal:true,

                close: function() {
                     document.getElementById('dialog').style.display = 'block';
                     document.getElementById('fade').style.display = 'None';
                 },


                buttons: {
                     "Ok": function() {
                         $(this).dialog("close");
                         document.getElementById('dialog').style.display = 'block';
                         document.getElementById('fade').style.display = 'None';
                     },
                     "Cancel": function() {
                         $(this).dialog("close");
                         document.getElementById('dialog').style.display = 'block';
                         document.getElementById('fade').style.display = 'None';
                     }
                 }
             });


        // Dialog Link
         //$('#dialog_link').click(function() {
         //    $('#dialog').dialog('open');
         //    return false;
         //});

        // Datepicker
         $('#datepicker').datepicker({
                 inline: true
             });

        // Slider
         $('#slider').slider({
                 range: true,
                 values: [17, 67]
             });

        // Progressbar
         $("#progressbar").progressbar({
                 value: 20
             });

        //hover states on the static widgets
         $('#dialog_link, ul#icons li').hover(
             function() { $(this).addClass('ui-state-hover'); },
             function() { $(this).removeClass('ui-state-hover'); }
     );

    });
 </script>

Answer 1

I’m not sure what your goal really is, but I don’t think .click(func) does what you think it does. Since .click(func) adds that function as a click event listener every time you execute this line you would get an additional function in the listener set. You seem to be running this in your onClick meaning every time someone clicks your link you’ll add another listener that does the same thing ($('#dialog').dialog('open');). If you just want your verification to be done before substituting the onClick handler you’ll have to unbind the current function as well, but you might be better off just doing the check every time and calling $('#dialog').dialog('open') inside your if (window.Page_IsValid) block.

If what you really want is for modaldialog to be called only once and $('#dialog').dialog('open'); to be executed that time and every consecutive clicks do the following inside your conditional:

$('#dialog_link').unbind('click', this);
var f = function () { $('#dialog').dialog('open') }; // Function to replace onClick function.
$('#dialog_link').click(f);
f(); // Execute replacement function after assigning it.