JqueryUI Dialog. Unable to trigger from html form

Question

Works fine with a text link to fire dialog - but lasts for about .5 second if triggered from an html form submit button. Sounds crazy! Yep, just cannot get it to work. Help!

  $(document).ready(function() {
    $('#rating-0').click(function() { $('#dialog').dialog('open'); }); $('#dialog').dialog({ autoOpen: false, height: 280, modal: true, resizable: false, buttons: { Continue: function() {
      $(this).dialog('close'); // Submit Rating 
    }, 'Change Rating': function() {
      $(this).dialog('close'); // Update Rating
    } }
    });
  });

<form action="https://www.etc" id="rating-0"> 
  <input type="hidden" name="cmd" value="_s-xclick" />
  <input name="submit" type="image" src="https://www.paypal.com/en_GB/i/btn/btn_cart_LG.gif" /> 
</form> 
<div id="dialog" title="Are you sure?"> 
  <p>You've assigned the current celebrity a rating of 0…</p> <p>Perhaps you are just judging them on the terrible last movie…</p>
</div>

Answer 1

Add return false; to your submit or click handler to prevent the browser from submitting the form and reloading the page.

EDIT:

  $(document).ready(function() {
    $('#rating-0').submit(function() { 
         $('#dialog').dialog('open'); 
         return false;
     }); 
     ...
  });