Как открыть содержимое со страницы html в диалоге с другой страницы html с помощью href, используя jQuery?

0

Я пытаюсь получить содержимое с html-страницы для загрузки в диалоговое окно jQuery ui, когда пользователь нажимает на главную страницу html. Однако, хотя это казалось простым, оно не работает.

Вот мой код jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$('#modal' ).dialog({ modal : true });

$(function() {
     $('a[name=Test]').on('click', function(e){
     $('#modal').load(this.href).dialog('open');
  });
});
</script>
</head>

Код HTML:

<body>
    <p><a name="Test" href="test/test2.html">Click Here!</a></p>
</body>

Как только я получу эту работу, я переведу ее в jsp с реальным кодом, но сначала я пытаюсь заставить его работать автономно.

Я видел другие примеры, но мне не удалось заставить это запустить диалог с контентом. Он перенаправляет меня только на страницу test2.html.

Любые идеи о том, как заставить это работать?

  • 1
    Видите ли вы какие-либо ошибки JavaScript в консоли браузера, связанные с этим dialog ?
  • 0
    Вы можете прикрепить идентификатор к тегу и использовать его в качестве селектора? <a name="Test" id="test" href="test/test2.html"> Нажмите здесь! </a>, затем используйте $ ('# test'). on ('event', 'function () { ...} ')
Показать ещё 3 комментария
Теги:
jsp

2 ответа

1
Лучший ответ

Попробуй это

HTML

<p><a name="Test" href="test/test2.html">Click Here!</a></p>

<div id="modal"></div>

Jquery

$(function() {
     $('a[name=Test]').on('click', function(e){
         e.preventDefault(); //stops from going to test2.html
         $('#modal').load(this.href).dialog({ modal : true });
  });
});

Скрипт http://jsfiddle.net/becLJ/

Поделиться
  • 0
    Спасибо за помощь в этом! У меня были похожие фрагменты кода, но я не мог заставить его работать.
1

Вот как я это делаю:

<html>
    <head>
        <script src="Scripts/Global/jquery-1.10.2.js"></script>
        <script src="Scripts/Global/jquery-ui-1.10.2.js"></script>
       <script>
            function openDialog() {
                (function () {
                    $('#dialog').dialog({
                        modal: true,
                        resizable: false,
                        draggable: false,
                        width: '1100',
                        height: '900',
                        title: 'Sample Dialog'
                    });
                })();
            }
        </script>
    </head>
    <body>
        <div id="dialog" style="display:none;"><iframe style="width:98%;height:98%;" id="modalDialogBox" src="dialogPage.htm"></iframe></div>
        <a onclick="openDialog()">Click Me</a>
    </body>
</html>
Поделиться
  • 0
    Я должен был упомянуть, что мне не нравится использовать iFrames для решений. Только в крайнем случае.
  • 0
    Нет проблем, рад, что вы все равно нашли нужный ответ.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню