jsp页面中的jquery模式框具有动态ajax内容

发布于 2024-10-21 21:03:33 字数 269 浏览 2 评论 0原文

我想根据页面单击的 tr 元素使用 jquery 创建模式弹出框。

但我无法集中精力使用jquery来达到这个目的。

tr 的结构是每个元素发送带有 id 的 jsp 页面。（假设

我应该怎么做才能在同一页面上通过模式弹出窗口向用户显示 target.jsp 的结果？

提前致谢..

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

千年*琉璃梦 2024-10-28 21:03:33

以下是我的处理方法...

对于模式对话框，我真的建议使用“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>

您需要锚点看起来像这样。

For custom_id = 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);
                    }
            });

    });

我将让您了解如何在 jquery 中动态设置 custom_id。这应该会让你上路。

华泰

Here's how I'd approach it...

For the modal dialog, I really recommend using "JQuery UI", which comes with a nice-looking modal dialog.

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

For the ajax call, most of what you need is here within jQuery already:

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

So, in brief, you'd create a div somewhere invisible on the page, ready to receive your text:

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

You'd need the anchor to look something like this.

For custom_id = 123:

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

Then, to launch the dialog, you'd need to have something like this inside a script tag.

$( "#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);
                    }
            });

    });

I'll leave you to work out how to dynamically set the custom_id in jquery. This should set you on your way.

HTH

回复收藏 0 原文

~没有更多了~