Модальное поле jquery на странице jsp с динамическим содержимым ajax

Question

Я хочу создать модальное всплывающее окно, используя jquery, в зависимости от нажатого элемента tr на странице.

но я не мог собрать свой ум, чтобы использовать jquery с этой целью.

структура tr равна <tr><td><a><image></image></a></td></tr>, каждый элемент отправляет мою страницу jsp с идентификатором. (скажем <a href ="target.jsp?id=<dynamic_id_here>">

что я должен сделать, чтобы показать пользователю результат target.jsp на той же странице с модальным всплывающим окном?

заранее спасибо ..

Answer 1

Вот как бы я подошел к этому ...

Для модального диалога я действительно рекомендую использовать "JQuery UI", который поставляется с красивым модальным диалогом.

http://jqueryui.com/demos/dialog/#modal

Для вызова ajax большая часть того, что вам нужно, уже есть в jQuery:

http://api.jquery.com/jQuery.ajax/

Итак, вкратце, вы должны создать div где-то невидимым на странице, готовый принять ваш текст:

<div style='display:none'>
  <div id="dialog-modal" title="Basic modal dialog">
    <p>Loading</p>
    </div>
<div>

Вам нужен якорь, чтобы выглядеть примерно так.

Для custom_id = 123:

<a href='#' id='anchor_123'>

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

$( "#anchor_123" )
.click(function() {
    $( "#dialog-modal" ).dialog({
        height: 140,
        modal: true
    });
            $.ajax({
                    url: "target.jsp?id=123",
                    success: function(data){
                        $('#dialog-modal p').html(data);
                    }
            });

    });

Я оставлю вас, чтобы разобраться, как динамически устанавливать custom_id в jquery. Это должно поставить вас на пути.

НТН