jQuery dialog call redirecting page

I'm using the jQuery dialog plugin.

The dialog div is set up (but not opened) on page load:

$(document).ready(function(){
  $('#foo').dialog({autoOpen:false});
});

Then a hyperlink is supposed to open the dialog:

<a hre开发者_开发问答f="javascript:$('#foo').dialog('open');">Show dialogue box</a>

But this opens the dialog then a fraction later redirects to a page with the URL javascript:$('#foo').dialog('open');!

I have tried returning false:

<a href="javascript:$('#foo').dialog('open');return false;">Show dialogue box</a>

But then the link doesn't respond at all when I click on it.

I know this must be to do with one of JavaScript's infamous subtleties but I can't work it out.

Can anyone help?

---

Then a hyperlink is supposed to open the dialog:

<a href="javascript:$('#foo').dialog('open');">Show dialogue box</a>

But this opens the dialog then a fraction later redirects to a page with the URL javascript:$('#foo').dialog('open');!

That shouldn't be happening. The pseudo-protocol javascript: doesn't involve a page load, and certainly not one via HTTP. I don't recommend it (I'd use jQuery's click handler instead), but it should work.

I have tried returning false: ... But then the link doesn't respond at all when I click on it.

That also shouldn't be happening.

Your code as quoted is fine (works here, for instance: http://jsbin.com/inixa5), so the problem must lie in some other part of the page.

Update: Okay, that's weird, IE6 and IE7 didn't like that; I think it's because dialog returns a value. You can get around that either by wrapping up your call to open the dialog in a function and doesn't explicitly return anything:

<a href="javascript:showDialog('#foo');">Click Me</a>
<script>
  $("#foo").dialog({autoOpen: false});
  function showDialog(selector) {
    $(selector).dialog('open');
  }
</script>

Or (and this is mega-hacky) by making sure the last expression in the javascript: block is undefined:

<a href="javascript:$('#foo').dialog('open');undefined;">Click Me</a>
<script>
  $("#foo").dialog({autoOpen: false});
</script>

Or by using onclick:

<a href="#" onclick="$('#foo').dialog('open'); return false;">Click Me</a>
<script>
  $("#foo").dialog({autoOpen: false});
</script>

But in any case, strongly recommend hooking things up with a DOM2 style event handler:

<a href="#" name='openSesame'>Click Me</a>
<script>
  // This _can_ be immediately after the anchor, but I'd put it in
  // a separate, since .js file for the page that you load just before
  // the closing body tag.
  $("#foo").dialog({autoOpen: false});
  $("a[name=openSesame]").click(function() {
    $("#foo").dialog('open');
    return false;
  });
</script>

Live example (Obviously, you can use any selector that makes sense, you don't have to give the anchor a name [or id].)

One of the nice things about this is that you can then have the anchor take the user somewhere meaningful and/or useful if JavaScript is disabled (something called progressive enhancement).

---

Change the link to:

<a href="javascript:void(0)" onclick="$('#foo').dialog('open')">
   Show dialogue box
</a>

Best avoid putting javascript in the href. Even better would be giving it a class and than adding a click event to it through jquery.