如何激活由 ajax datepicker 事件生成的选项卡小部件内返回的 jquery 对话框？

Posted 2023-05-09

【中文标题】如何激活由 ajax datepicker 事件生成的选项卡小部件内返回的 jquery 对话框？

【英文标题】：How do I activate jquery dialog boxes returned inside the tabs widget generated by an ajax datepicker event?

【发布时间】：2011-07-29 10:30:32

【问题描述】：

一定有一个简单的解决方案可以避开我。但是我对 jquery 很陌生，所以我确信这是问题的一部分。

我有一个 datepicker 实例，它通过 ajax 提交日期并通过选项卡小部件返回 xhtml。我正在尝试在那些返回的选项卡中创建对话框，以解释可能返回的每种不同的图像产品是什么。根据特定日期发生的成像事件的数量，可以返回任意数量的选项卡。并且每个或那些选项卡都会有不同的图像，但图像“类型”的解释是相同的。目前我有大约 9 种不同的图像“类型”，但随时可能改变，所以我应该灵活一些。例如，几乎每个选项卡中都会出现海面温度图像。叶绿素图像只会在白天的事件中返回。在不同的选项卡（不同的图片）中会有许多相同“类型”的图像，但我只需要为每个“类型”提供一个对话框说明。

我目前在页面上使用 jquery 对话框，但由于这些是 onLoad() 创建的，因此这些对话框没有问题。例如：

// 对话框提示 $('#dialog_tip').dialog( 自动打开：假， 宽度：600， 按钮： “好的”：函数（） $(this).dialog("close"); , );

// 对话框提示链接 $('#dialog_tip_link').click(function() $('#dialog_tip').dialog('open'); 返回错误; );

我可以在编写两端时控制服务器端 ajax 请求的输出。实际的原始 xhtml 文档是从服务器端开始编写的。 minDate 和 ma​​xDate 在最初运行服务器端脚本时进行解析，以确保存在有效的数据日期范围。

这是该事件的当前内容，它工作正常。

$('#datepicker').datepicker( 内联：真， 更改月份：真， 更改年份：是的， minDate: "minDate", maxDate: "最大日期", 默认日期：“最大日期”， onSelect: function(dateText, inst) //警报（日期文本）； 日期=日期文本； $.ajax( 数据类型：“html”， 类型：“POST”， url : "http://HOST/cgi-bin/image_data", 数据："roi=SITE&date="+date, 成功：函数（数据） $("#pagetabs").html(数据); // 找出有多少个选项卡 last_tab = $('#tabs li').length - 1; $('#tabs').tabs( selected: last_tab ); 截图预览（）； // 这样做是为了让我可以制作 // js 适用于较大的 // 要弹出的缩略图（有效） // tab_dialogs();希望我必须在这里打电话 // 初始化对话框 //成功 );//ajax //安装 );//日期选择器

但是，我无法完全弄清楚如何有效地创建对话框，然后隐藏然后打开。我知道我必须在 datepicker 事件中触发它。问题是我不确定将什么放入上面引用的 tab_dialogs 函数中。我不能为某种类型的所有图像提供与破坏 DOM 相同的 id。似乎对话框小部件使用 id 作为输入。

例如 "$('#dialog_tip_link').click(function()"

我可以在每种图像类型中为它们提供所有相同的类。我不想创建 54 个隐藏对话框，其中实际上只有 9 个唯一实例。所以理想情况下，每种图像类型都有一个类。希望我可以循环通过 a.product_info （只是一个名称）标签来让它工作。显然，我不能使用现有的 onload javascript，因为 ajax 事件不会改变它。

任何想法都非常感谢，我的一天/一周似乎都消失了？

PS，下一步是将选项卡放入手风琴小部件中，以便首先显示每日图像，然后合成图像位于较低的手风琴样式部分。

【参考方案1】：

这有点适用于 tab_dialog，除了现在我为每个链接有几个事件处理程序，所以必须考虑以某种方式使用 .one()？

函数 tab_dialogs()

$("div.product_info a").each(function() var className = $(this).attr('class'); var $linkclassName = 类名 + '_link'; var $divlinkclassName = "div." + 类名 + '_link';

$($divlinkclassName).dialog(
 autoOpen: false,
 width: 600,
 buttons: 
  "Ok": function()  
  $(this).dialog("close"); 
  , 
 
);


$(this).click(function()
 $($divlinkclassName).dialog('open');
 return false;
);

);

【讨论】：

对上述内容不做任何更改，当我选择另一天，然后回到原来的日期时，我必须多次点击关闭 X 或确定按钮才能关闭。跨度>

我以为我可以 $($divlinkclassName).dialog("destroy");但不是。我有几个其他日期的 datepicker 并更改了 $divlinkclassName 类的内容，旧的仍然存在。在我创造新的之前，我必须以某种方式摧毁它。我无法删除（）对话框，因为它也会删除最新的对话框。

我在对话框 div 中添加了一个名为 product_description 的单独类名，然后在返回新的 product_description 类 div 之前在 datepicker 调用中将它们删除。 // 摆脱旧对话框 $(".product_description").remove();