[英]dynamically creating a popup in jquery mobile
I am attempting to dynamically create popup tooltips with minimal markup (as there will be a lot of them in the end). 我正在尝试以最少的标记动态创建弹出工具提示(因为最后会有很多提示)。
In my markup I have <div id='help_roles-description'>...</div>
在我的标记中,我有<div id='help_roles-description'>...</div>
I make an ajax call to the server to retrieve the helptexts and process them like this: 我对服务器进行ajax调用以检索帮助文本并按如下方式处理它们:
// If there are helptext updates, setup them accordingly
if (typeof response.helptexts != "undefined") {
for (var i = 0; i < response.helptexts.length; i++) {
if(response.helptexts[i].html.length) {
var help_label = $("#help_" + response.helptexts[i].id + "");
if(help_label) {
// First of call, create the popup
help_label.closest('div[data-role=dialog]').append($("<div></div>")
.attr("id", "#helptext_" + response.helptexts[i].id + "")
.attr("data-role", "popup")
.addClass("ui-content")
.html(response.helptexts[i].html)
.trigger("create")
);
// Store the html DOM that is inside the label, so we can wrap it in an anchor
var html = help_label.html();
help_label.empty();
help_label.append($("<a></a>")
.attr("href", "#helptext_" + response.helptexts[i].id)
.attr("data-rel", "popup")
.addClass("helper_link")
.html(html)
);
// Output happyness
logger("Setting help for '" + "#helptext_" + response.helptexts[i].id + "" + "' to '" + response.helptexts[i].html+ "'");
}
}
}
}
In one example an id is roles-description
. 在一个示例中,id是roles-description
。 I do not get a div created with the id helptext_roles-description
, populated with the html in the response as I expected, Instead I get this: 我没有得到用id helptext_roles-description
创建的div,正如我期望的那样,在响应中填充了html,相反,我得到了:
<div style="display: none;" id="#helptext_roles-description-placeholder">
<!-- placeholder for #helptext_roles-description -->
</div>
I have tried googling this but there seems to a woeful lack of things with my search terms, and searching placeholders brings back lots of stuff on inputs. 我曾尝试使用谷歌搜索,但是我的搜索词似乎很糟糕,搜索占位符会带回很多输入内容。
Where I use the closest('div').prepend
I have tried appending, pre and appending directly to the help_label
, and doing it to help_label.parent()
在我使用closest('div').prepend
我尝试了附加,直接附加到help_label
,然后将其添加到help_label.parent()
I have even taken out the .html, and .trigger bits to be outside the creation process. 我什至已经删除了.html和.trigger位,使其超出了创建过程。
I also tried creating the div with the id like this $("<div id='...
but I always only get the placeholder. 我也尝试用$("<div id='...
这样的ID创建div,但我总是只得到占位符。
What am I doing wrong? 我究竟做错了什么?
Based on the comments by @Omar above i did a little more digging. 根据上面@Omar的评论,我进行了更多的挖掘。
Even though you can specifically write the HTML markup to work fine with a dialog, the attr("data-rel", "popup")
and $.popup()
have something special in them that stops this form working unless there is a parent with data-role="content"
. 即使您可以专门编写HTML标记以使对话框正常工作,但是attr("data-rel", "popup")
和$.popup()
也有一些特殊之处,除非有父级,否则它们会停止这种形式的工作与data-role="content"
。 Since dialogs have a data-role='main'
You cannot programmatically create popups to use as tooltips in a dialog. 由于对话框具有data-role='main'
您无法以编程方式创建弹出窗口以用作对话框中的工具提示。
I have currently resorted to using the title attribute of a span not an anchor in my text above. 目前,我在上面的文本中使用了span的title属性而不是锚。
It's unfortuante that this cannot be handed within jquery, but adding qtip makes these work a whole lot better. 不能在jquery中处理它是不幸的,但是添加qtip使这些工作更好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.