Why doesn't this jquery confirm dialog work? RSS

• • Reply
  

  duckkiller53

  Member

  165 Points

  212 Posts

  Why doesn't this jquery confirm dialog work?

  Feb 12, 2013 04:49 PM|LINK

  Could someone help.  I would like to tie a jQuery dialog popup to an asp.net button that acts as an "OK"/"Cancel" dialog the same way the javascript OnClientClick="return confirm('Click Ok to proceed')" would work.  I can get the jquery popup to fire from the click even of a button but nothing happens after that.

  Would anyone know what I'm doing wrong with the Confirm() function.

  Thanks Dave.

   $('#<%= btnTestDialog.ClientID %>').click(function (e) {	            
  	  e.preventDefault(); 
  	  return ConfirmOKCancel('Press Ok to continue!');
   });
  
  

   function ConfirmOKCancel(msg) {
        $('#confirmdialog p').text(msg);
        $('#confirmdialog').dialog({
           buttons: {
              'OK': function () { $(this).dialog('close'); return true; },
              'Cancel': function () { $(this).dialog('close'); return false; }
            }
         });
   }   

  <div id="confirmdialog" title="Test Dialog">
      <center>
  	<p style="font-weight: bold;"></p>
      </center>
  </div>

  Duckkiller53
  
  Duckkiller53@gmail.com
  • Edited by duckkiller53 on Feb 12, 2013 07:27 PM
  • Edited by duckkiller53 on Feb 12, 2013 07:27 PM
  • Edited by duckkiller53 on Feb 12, 2013 07:33 PM
• • Reply
  

  Talal Tayyab

  Participant

  902 Points

  132 Posts

  Re: Why doesn't this jquery confirm dialog work?

  Feb 12, 2013 08:01 PM|LINK

  You should initialize the dialog first and than call the open method. This code is working for me. 

  $(document).ready(function ()
  {
      $("#confirmdialog").dialog(
          {
              autoOpen: false,
              buttons: {
                  'OK': function () { $(this).dialog('close'); return true; },
                  'Cancel': function () { $(this).dialog('close'); return false; }
              }
          });
  }

  function ConfirmOKCancel(msg) {
      $('#confirmdialog p').text(msg);
      $('#confirmdialog').dialog('open');
  };

  
  
   

   

  Please remember to mark as Answer if the post helps you out.
• • Reply
  

  duckkiller53

  Member

  165 Points

  212 Posts

  Re: Why doesn't this jquery confirm dialog work?

  Feb 12, 2013 08:34 PM|LINK

  Talal:  Thanks for the quick response.  Because I'm using an update panel I implimented the "function pageLoad() {}"  I use pageLoad() because I need to bind other jquery after postpack.  Where Do I place the dialog initializing code in pageLoad() ?   Note: the following code does not work.

  for example.

  function pageLoad() {
  
  

         $("#confirmdialog").dialog(
         {
            autoOpen: false,
            buttons: {
                  'OK': function () { $(this).dialog('close'); return true; },
                  'Cancel': function () { $(this).dialog('close'); return false; }
            }
         });   
  
  
  

         $('#<%= btnTest.ClientID %>').click(function (e) {
  	            e.preventDefault();
  	            return ConfirmOKCancel('Press Ok to continue!');
         });
  
  }
  
  // Then place the function ConfirmOKCancel() outside pageload

  function ConfirmOKCancel(msg) {
              $('#confirmdialog p').text(msg);
              $('#confirmdialog').dialog('open');
  };

  Duckkiller53
  
  Duckkiller53@gmail.com
• • Reply
  

  bruce (sqlwo...

  All-Star

  37614 Points

  5573 Posts

  Re: Why doesn't this jquery confirm dialog work?

  Feb 13, 2013 04:06 AM|LINK

  almost all javascript popup dialogs are async. 

     return ConfirmOKCancel('Press Ok to continue!');

  always return void, as the function ConfirmOkCancel always return void. infact it will return before the user clicks on any button. also other calling the user supplied function on the button clicks, it does not read the return value, so there is no point your return statements.

  in a nomal confirm you would have:

    if (confirm('ok)') {
       // ok code
    } else {
       // not ok code
    }
    // common code 

  change to 

   if (confirm('ok)') {
      doOK();
    } else {
      doNotOk();
    }
    doCommon();
    // no code allowed here 

  then to

  $('#dilaog').dialog({
        buttons: {
            'OK': function() { doOK(); doCommon(); },
            'Cancel': function() {doNotOK(); doCommon(); }
        }
    });

   

  bruce (sqlwork.com)
  • Edited by bruce (sqlwork.com) on Feb 13, 2013 04:07 AM
  • Edited by bruce (sqlwork.com) on Feb 13, 2013 04:08 AM
• • Reply
  

  Talal Tayyab

  Participant

  902 Points

  132 Posts

  Re: Why doesn't this jquery confirm dialog work?

  Feb 13, 2013 05:32 AM|LINK

  If  I understand correctly, your dialog is not showing. Can you put the initialization function in JQuery ready event, you can declare the div in your html and set the style as hidden. If this does not solve it could you post your simplified HTML?

  <div id="confirmdialog" title="Test Dialog" style="display:none" >
          <center>
  	        <p style="font-weight: bold;"></p>
          </center>
      </div>

  In your script bind to the onready event and initialize the dialog:

  $(document).ready(function () {
  
    $("#confirmdialog").dialog(
         {
             autoOpen: false,
             buttons: {
                 'OK': function () { $(this).dialog('close'); return true; },
                 'Cancel': function () { $(this).dialog('close'); return false; }
             }
         });
  
  }

  
  
  

   

  Please remember to mark as Answer if the post helps you out.
• • Reply
  

  duckkiller53

  Member

  165 Points

  212 Posts

  Re: Why doesn't this jquery confirm dialog work?

  Feb 13, 2013 02:25 PM|LINK

  Actually it does show show the dialog, but no matter what button I click 'OK' or 'Cancel' all that happens is that th dialog closes.  The code behind never executes.  It appears the  e.preventDefault(); cancels the normal click event of the button (which calls the code behind).  If I remove the e.preventDefault(); the button click will throw the error below.

  "Microsoft JScript runtime error: Sys.WebForms.PageRequestManagerParserErrorException: The message received from the server could not be parsed"

  Here is a simplified version of my HTML.  http://pastebin.com/3WpSrrRg

  Again my goal is to aquire the same functionality as the javascript 'Confirm("Press OK to continue")' function, but use the nicer styled jQuery dialog popup. 

  Thanks

  Dave.

  Duckkiller53
  
  Duckkiller53@gmail.com
  • Edited by duckkiller53 on Feb 13, 2013 02:27 PM