如何在我的应用程序中正确使用厚盒?

发布于 2024-08-12 02:42:36 字数 518 浏览 4 评论 0原文

我有几个关于厚盒的问题。我正在开发一个网站,需要在主页上放置一些厚框以在不同时间显示。当厚盒显示时,它将触发 API 调用并在厚盒中显示反馈。

我决定内联显示厚盒以减少 Ajax 调用量。看起来很简单,但出现了一些问题。第一个是当显示thickbox 时,包含thickbox 内容的div 会被删除。 Thickbox 将 HTML 替换为自定义 HTML,以正确显示内容。这没问题,但是当我希望 AJAX 响应更新厚盒内的某些内容并且我将其设置为通过选择其容器 ID 来访问厚盒时,就会出现问题。那已经不可用了。当然,我可以为响应指定唯一标识符,但我只是希望为它们提供所有类“响应”,并根据外部包含的 DIV 选择它们。 $("#login_lightbox > .response").html(ajax_response); 这有意义吗?

我的另一个担忧是也许有更好的方法来处理厚盒。我是否应该进行 AJAX 调用来获取厚盒内容,然后在加载时进行 API 调用?这对我来说似乎不是一个好的选择,但以前的开发人员就是这样设置的,所以我希望得到一些意见。

I have a couple questions regarding thickboxes. I am developing a site that needs a few thickboxes on the home page to be displayed at different times. When the thickboxes are shown, it will trigger an API call and display feedback in the thickbox.

I decided to go with displaying the thickboxes inline to reduce the amount of Ajax calls. Seems simple enough but a couple issues come up. The first is that div containing the thickbox content is removed when the thickbox is shown. Thickbox replaces the HTML with custom HTML to display the content properly. This is OK but it is problematic when I want my AJAX response to update something inside the thickbox and I have it set up to access the thickbox by selecting it's container ID. That is not available anymore. Of course I could specify unique identifiers for the response but I was just hoping to give them all the class "response" and select them based on the outer containing DIV. $("#login_lightbox > .response").html(ajax_response); Does this make sense?

My other concern is that maybe there is a better way to handle thickboxes. Should I be making the AJAX call to get the thickbox content which would then make the API call when it loads? That doesn't seem to be a good choice to me but a previous developer had it set up that way so I was hoping to get some opinions on it.

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

不打扰别人 2024-08-19 02:42:36

为了在中打开新的 Ajax 内容
一个打开的 Ajax ThickBox,其代码必须
还包含适当的 HTML
(class="thickbox") 启动 Ajax
ThickBox(例如,请参阅演示)。

您可能想阅读&查看演示 http://jquery.com/demo/thickbox/#sectionf-1

HTH

编辑:

嘿托尼,以上内容适用于 Thickbox 内的新内容链接,而不是打开 Thickbox。为了配合上面的演示页面,初始内容包含一个链接:

<p>What is jquery? <a href="newTBcontent.html?height=200&width=300" class="thickbox">Answer</a></p>

以便将内容加载到 Thickbox 中。

为了回答你的问题,当我执行以下操作时,效果非常好。也许我误解了你的问题?

初始页面上的某处:

<p><a href="atb.php?height=200&width=300" class="thickbox">Open AJAX Thickbox</a></p>

厚盒内容(文件“atb.php”):

<script language="javascript" type="text/javascript">
jQuery(document).ready( function()
{
    jQuery.ajax(
    {
        type: "GET",
        url: "atbd.php",
        success: function(rsp)
        {
            jQuery( ".response" ).html(rsp);
        }
    });
});
</script>
<div id="container">
    <div class="response">RSP 1</div>
    <div class="response">RSP 2</div>
    <div class="response">RSP 3</div>
    <div class="response">RSP 4</div>
</div>

文件“atbd.php”:

<?php
echo date('Y-m-d H:i:s', time());
?>

In order to open new Ajax content in
an open Ajax ThickBox, its code must
also contain the appropriate HTML
(class="thickbox") to launch an Ajax
ThickBox (see demo for example).

You may want to read & check the demos over at http://jquery.com/demo/thickbox/#sectionf-1

HTH

Edit:

Hey Tony, the above applies to new content links within a Thickbox, not to open a Thickbox. To go with the demo page above, the initial content contains a link:

<p>What is jquery? <a href="newTBcontent.html?height=200&width=300" class="thickbox">Answer</a></p>

so that content is loaded into the Thickbox.

To go with your question, when I do the following, it works pretty well. Maybe I misunderstood your question?

Somewhere on the initial Page:

<p><a href="atb.php?height=200&width=300" class="thickbox">Open AJAX Thickbox</a></p>

Thickbox content (File 'atb.php'):

<script language="javascript" type="text/javascript">
jQuery(document).ready( function()
{
    jQuery.ajax(
    {
        type: "GET",
        url: "atbd.php",
        success: function(rsp)
        {
            jQuery( ".response" ).html(rsp);
        }
    });
});
</script>
<div id="container">
    <div class="response">RSP 1</div>
    <div class="response">RSP 2</div>
    <div class="response">RSP 3</div>
    <div class="response">RSP 4</div>
</div>

File 'atbd.php':

<?php
echo date('Y-m-d H:i:s', time());
?>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文