I've got a problem with a jQuerymobile list like the following example from the Demos site:
http://jsfiddle.net/wm4Ku/
I grouped my list with list-dividers and I want, that the list-dividers disappear as well when they don't have any search result included.
This works perfectly out of the box with jQuerymobile 1.3.1 like in fiddle, but won't work with 1.4
Does anyone has an idea how I can get the same functionality using 1.4?
Thank you already very much guys..!!
Adding data-hide-dividers="true" will remove dividers when searching.
http://jsfiddle.net/wm4Ku/2/
<ul data-role="listview" data-inset="true" data-hide-dividers="true" data-filter="true" data-filter-placeholder="Filtern"> </ul>
Reference to issue on JQM: https://github.com/jquery/jquery-mobile/issues/6261
Related
I am using Dotclear blog software, which provide a widget for the blog categories with a resulting code looking like this:
<div class="widget categories ">
<h3>Catégories</h3>
<ul>
<li>Cat1</li>
<li>Cat2
<ul>
<li>Subcat1</li>
</ul>
</li>
<li>Cat3
<ul>
<li>Subcat2</li>
</ul>
</li>
<li>Cat4</li>
</ul>
</div>
What I am trying to achieve here is using the <a> tag (for Cat2 or Cat3) as header (or a dynamically added <h4> around it) and fold the subcategory list. If I call the accordion like this :
$(".categories").accordion({
header: "li:has(ul) > a",
});
the accordion does work, but when I click on the link it just folds/unfolds the item and doesn’t let me go to the link target (the category page, that is).
I tried wrapping the <a> in an <h4> tag and use that tag as header, but it doesn’t seem to make a difference. Is there a way to do what I seek or should I abandon the idea of collapsing subcategories and have functioning links within the header ?
Thanks for your time.
Well, after reading your comments, I realized I was using the wrong tool to achieve my objective. I have replaced jquery-ui’s accordion with a treemenu jQuery plugin which is actually made for my use. Sorry to have wasted your time and thanks for your kind answers.
I can't seem to get Watir to locate a link on a page, which reveals another two fields. But, the link isn't a link, but a li that is a legend:
<li>
<legend role="button" tabindex="1" id="alpha-trigger" class="trigger legend shown " aria-label="alpha Search"" for="alpha">
Alpha Search
</legend>
</li>
I've tried using .exists? and looking for that dom object, but I've always come up empty. I see that it isn't a timing issue, as I'm not using headless for chrome.
Can anybody recommend how I can see this link to .click it? Cheers
The problem is that the element is in a shadow DOM, which does not yet have support in Selenium/Watir. At this point, the fastest solution seems to be executing everything by JavaScript.
For example, clicking the Marriage link:
browser.execute_script('return document
.querySelector("fs-search-form")
.shadowRoot
.querySelector("[group-id=event]")
.shadowRoot
.querySelector("#marriage-trigger")
.click();')
Note that you need to explicitly navigate to the element containing the shadow DOM and call shadowRoot to go inside.
I'm using jQuery mobile 1.3.0 and trying to style dynamic elements of a listview. I have a list defined in a pages markup and can add elements to it from an object.
<div data-role="content">
<ul data-role="listview" id="list_logs">
</ul>
</div>
This is then the code to read items from an object and build the list:
for(log in data.logs) {
$('<li><h2>'+data.logs[log].date+'</h2><p>'+data.logs[log].event+'</p><p>'+data.logs[log].type+'</p></li>').appendTo('#list_logs').trigger("refresh");
}
From what I can understand from the documentation calling trigger("refresh") should style the list content but neither it or trigger("create") are doing much at all. Does anyone have any further insight into this? Thanks in advance.
EDIT: I should add that the stylesheets are in place in the document head and that adding elements statically results in correct styling.
Every component has a designed function for markup enhancement, listview uses:
$('#listviewID').listview('refresh');
In case this is fully dynamically create listview, not just li elements then this line should be used:
$('#listviewID').listview().listview('refresh');
Full list and examples can be found in my other ARTICLE, to be transparent it is my blog. Or it can be found HERE.
Trying to add scrollbars to a listview within a dialog in JQueryMobile with no joy.
I'm using the following code:
<div class="content-primary">
<ul id="lvPages" data-role="listview" data-filter="true" data-inset="true" data-scroll="true"></ul>
</div>
Which works perfect on desktop browsers yet when I test this on an iPad the scrollbars don't appear.
Is there something obvious I'm missing?
Sorry, should actually add:
I'm adding the items via Javascript and am calling a " $("#lvPages").listview('refresh');" upon the end of these additions.
According to this forum article, you have to include the jquery.mobile.scrollview.js script (and its associated CSS file) for the data-scroll attribute to be recognized and acted upon.
I am created a demo of autocomplete using http://jqueryui.com/demos/autocomplete/
plugin.
Now the suggested list which appears on pressing key is
<ul>
<li>
Suggestion
</li>
</ul>
I have to edit the list like :
<ul>
<li>
<a>Suggestion</a>
<br />
<a>data1</a><a>data2</a>
</li>
</ul>
how can I do this? I seen script for autocomplete but not found any hint.
You can configure the autocomplete with the formatItem, and the parse properties of the configuration object.
This question has been answered here:
JQuery AutoComplete results format?
Looks like you want to add some HTML to the result. If that is correct, the jquery ui docs point to a resource (at the bottom of the docs page):
The label is always treated as text, if you want the label to be treated as html you can use Scott González' html extension. The demos all focus on different variations of the source-option - look for the one that matches your use case, and take a look at the code.
Or, you can add custom data using the open event of the autocomplete. See example here:
http://www.jensbits.com/2011/03/03/jquery-autocomplete-with-html-in-dropdown-selection-menu/