Страница перенаправления вызова диалога jQuery - PullRequest
Новая
       7

Страница перенаправления вызова диалога jQuery

0 голосов
/ 28 апреля 2011

Я использую плагин диалога jQuery.

Диалоговое окно div устанавливается (но не открывается) при загрузке страницы: 

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

Тогда гиперссылка должна открывать диалог: 

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

Но при этом открывается диалоговое окно, а затем часть перенаправляется на страницу с URL javascript:$('#foo').dialog('open');!

Я пытался вернуть false: 

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

Но тогда ссылка вообще не отвечает, когда я нажимаю на нее.

Я знаю, что это должно быть связано с одной из позорных тонкостей JavaScript, но я не могу решить это.

Может кто-нибудь помочь?

Ответы [ 2 ]

0 голосов
/ 28 апреля 2011

Изменить ссылку на: 

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

Лучше всего избегать помещения javascript в href. Еще лучше было бы дать ему класс и добавить в него событие click через jquery.

0 голосов
/ 28 апреля 2011

Тогда гиперссылка должна открывать диалог:

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

Но при этом открывается диалоговое окно, а затем часть перенаправляется на страницу с URL-адресом javascript: $ ('# foo'). Dialog ('open');!

Этого не должно быть. Псевдопротокол javascript: не связан с загрузкой страницы, и уж точно не через HTTP. Я не рекомендую его (вместо этого я бы использовал обработчик jQuery click), но он должен работать.

Я попытался вернуть false: ... Но тогда ссылка вообще не отвечает, когда я нажимаю на нее.

То, что также не должно происходить.

Ваш код в кавычках в порядке (работает здесь, например: http://jsbin.com/inixa5),, поэтому проблема должна лежать в какой-то другой части страницы.

Обновление : Хорошо, это странно, IE6 и IE7 это не понравилось; Я думаю, это потому, что dialog возвращает значение. Вы можете обойти это, либо свернув свой вызов, чтобы открыть диалог в функции, и ничего не возвращая явно: 

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

Или (и это мега-хаки), убедившись, что последнее выражение в блоке javascript: равно undefined: 

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

Или используя onclick: 

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

Но в любом случае, настоятельно рекомендуем подключить обработчик событий в стиле DOM2: 

<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>

Живой пример (Очевидно, вы можете использовать любой селектор, который имеет смысл, вам не нужно давать якору name [или id].)

Одна из приятных вещей в этом - то, что вы можете сделать так, чтобы якорь взял пользователя куда-то значимым и / или полезным, если JavaScript отключен (что называется прогрессивное улучшение ).

...