I’m loading an HTML template file, which contains templates that I’m using throughout my application. The file looks like this:
<!DOCTYPE html><html><head><title>static_listview_templates</title></head><body>
<ul id="tmp_listview_basic" class="ui-listview"></ul>
<ul id="tmp_listview_inset" class="ui-listview ui-listview-inset ui-corner-all ui-shadow"></ul>
<li id="tmp_listview_divider" data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-bar-[theme] ui-corner-top"><span class="ui-divider-text"></span></li>
...
</body></html>
The template is pulled in via requireJS which gives me back the HTML code as a text string.
I have converted the string into a jQuery object using var el = $( string ) but I still can’t access any of the elements (I assume because they are not in the DOM yet).
Question:
Is there a way in jQuery/javascript to
el.find('#tmp_listview_divider') // which gives me an empty object []
to select an element from my template object? If so, how can I access and pull out one of the sub_templates? If not, how would I select a strubstring “by ID”? I can add a start and end identifier, but I have no idea how to regex "from start-to-end"
Thanks!
EDIT:
My HTML template:
<!DOCTYPE html><html><head><title>static_listview_templates</title></head><body><form id="tmp_listview_filter" class="ui-listview-filter ui-bar-[theme] ui-listview-filter-inset" role="search"><div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-[theme]"><input placeholder="" data-type="search" class="ui-input-text ui-body-[theme]"><a title="" class="ui-input-clear ui-btn ui-btn-up-x ui-shadow ui-btn-corner-all ui-fullsize ui-btn-icon-notext ui-input-clear-hidden" href="#" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="delete" data-iconpos="notext" data-theme="[theme]" data-mini="false">><span class="ui-btn-text"></span><span class="ui-icon ui-icon-delete ui-icon-shadow"> </span></span></a></div></form><ul id="tmp_listview_basic" class="ui-listview"></ul><ul id="tmp_listview_inset" class="ui-listview ui-listview-inset ui-corner-all ui-shadow"></ul><li id="tmp_listview_divider" data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-bar-[theme] ui-corner-top"><span class="ui-divider-text"></span></li><li id="tmp_listview_item" data-filtertext="[filtertext]" data-theme="c" class="ui-li ui-btn ui-btn-icon-right ui-li-has-arrow ui-first-child ui-last-child ui-btn-up-[theme]"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="[link]" class="ui-link-inherit">[link_content]</a></div><span class="ui-icon ui-icon-[link-icon] ui-icon-shadow"> </span></div></li></body></html>
In my application controller I’m doing this:
... on pagebeforeshow ...
// pull template and language
require(['text!../tx/static_listview.html','i18n!nls/locale_search'],
function ( tmp_listview, lib_search ) {
// element config JSON
var dyn = $.parseJSON( page.find(':jqmData(template="true")').jqmData("config") );
console.log( dyn );
// template
console.log( tmp_listview )
var tmp = $( tmp_listview ),
el = tmp.find('#tmp_listview_divider');
// always []
console.log( el )
};
You can use
el.find()on your document fragment once you’ve put the HTML string into a jQuery object as you’ve done, but your selector'#tmp_listview_divider#'looks wrong. There should not be a trailing#.If you show us the relevant piece of HTML, we could help you get the selector right.
Edit: Based on the HTML you’ve now added to your question, you should be able to just use this: