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.
Related
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'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
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.
I'm using the jquery Mobile AutoDivider for a web project of mine and it works great in IE8, but for some reason in Chrome it's not generating the headers for me.
My question is: How exactly does the AutoDivider determine what to make a 'divider'? Is is just the first item within your <li></li>?
Here's my basic HTML structure (it's ultimately placed in a ASP.Net Repeater:
<ul data-role="listview" data-autodividers="true">
<li>
<img src="mySource.jpg" alt="" />
<h3>John Doe</h3>
<p><strong>Company Name Here</strong></p>
<p>User Address</p>
<p class="ui-li-aside">
<strong style="display: none;"><!-- This is what seems to make the headers in IE, placing this right here: -->
Last Name of Employee</strong>
</p>
</li>
</ul>
see the docu http://jquerymobile.com/demos/1.2.0/docs/lists/docs-lists.html
Autodividers
A listview can be configured to automatically generate dividers for its items. This is
done by adding a data-autodividers="true" attribute to any listview.
By default, the text used to create dividers is the uppercased first letter of the
item's text. Alternatively you can specify divider text by setting the > autodividersSelector option on the listview programmatically.
I have Jquery Mobile working and have found the best way to get it to work is by including it in the /client/ directory. So, I have the following files in my /client/ directory
jquery.js
jquery-mobile.js
jquery-mobile.css
Then I include this in my index.html
<script type="text/javascript">
$( document ).bind( "mobileinit", function( event, data ){
$.mobile.autoInitializePage = false;
}
</script>
I tried creating a smart package but then the loading order invalidated jquery plugins for some reason. I tried just using references in the HEAD but that do invalidated jquery plug ins for some reason. The above works, pages transition, views render and I can even use the Meteor auth branch and render subscriptions.
The problem I am having now is when Meteor updates the DOM with data and renders the data it is not rendered with JQM.
For example, if I try to use a JQM Listview to display a Meteor subscription it just formats like a regular un-ordered list .
Here is the template code.
{{#each get_groups}}
<ul data-role="listview" data-theme="a">
<li>{{name}}</li>
</ul>
{{/each}}
Which just renders as bulleted items. If I use static data like the JQM tuts show it renders fine.
<ul data-role="listview" data-theme="a">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
</ul>
I am suspect I may need to call some kind of refresh, which means I would have to use observe on the collection subscriptions I imagine.
I am having the same problem with a custom login button. I use a template helper to return the Meteor.user().username and the button doesn't get formatted by JQM. If I don't use return the username the button of course renders find through JQM.
I also have the same problem when I try to access the Handlebars current user. If I try to do the following the publicPage will load.
{{#if currentUser}}
{{>privatePage}}
{{else}}
{{>publicPage}}
{{/if}}
Once I login the privatePage flickers quickly and then just a white screen. If I remove the references to currentUser then I can login and use the JQM changePage method to load the privatePage.
$.mobile.changePage("#privatePage");
I only have a rough understanding but I believe it is related to how and when JQM formats data for rendering vs. how and when Meteor formats data for rendering.
Does anyone has any ideas on how I might get JQM to behave nicely with Meteor? or if I should even bother and maybe use another mobile front end alongside Meteor?
Thanks
Steeve
You do have to refresh when data changes. Here's a full sample app with Meteor and JQM:
http://jqm.meteor.com/
Source code here:
https://github.com/snez/jqm-meteor
Notice on lines 17 and 38 that when an element is rendered, you have to refresh it and rebind any custom events to it.