I'm developing a web app using jQuery Mobile.
I have a single html file that contains more jQM pages.
These jQM pages have fixed headers and content loaded dynamically via jQuery (in this case I'm using a Listview with filtering option).
This is the HTML structure of all jQM pages:
<div data-role="page" data-theme="a" id="pageTemplateList">
<div class="ui-header ui-bar-a" role="banner" data-role="header" data-theme="a" data-position="fixed" data-tap-toggle="false">
<a role="button" data-role="button" href="#" class="ui-btn-left ui-alt-icon ui-nodisc-icon ui-btn ui-icon-action ui-btn-icon-notext" data-theme="a">Pubblica</a>
<h1 aria-level="1" role="heading" class="ui-title">Videothron</h1>
<a role="button" data-role="button" href="#panelMenu" class="ui-btn-right ui-alt-icon ui-nodisc-icon ui-btn ui-icon-bars ui-btn-icon-notext" data-theme="a">Menù</a>
</div>
<div data-role="content" id="templateListViewContainer">
<ul id="templateListView" data-role="listview" data-inset="true" data-hide-dividers="false" data-filter="true" data-filter-placeholder="Cerca template...">
</ul>
</div>
</div>
The jQuery code that I call for moving between jQM pages is the following:
location.href = "#pageTemplateList";
When I move from the "first" page (in the image below is "BEFORE") to a "second" page and then come back to the "first" page (in the image below is "AFTER") the Listview content is positioned under the fixed toolbar and the filter input field is partially hidden.
What do you suggest to solve this issue? Do you need further information?
Thanks,
Alex.
I executed each single line of JS code until I found that this issue was caused calling this:
$('div[data-role="page"]').trigger("create");
Removing this line of code (that I was calling after adding input text fields via jQuery) solved the issue.
Instead of calling .trigger("create") on the page div, create a div inside of the page div (eg. <div id="insideThePageDiv">) and call .trigger("create") for the inside div (eg. $("#insideThePageDiv").trigger("create");).
Related
I've got a page with three tabs on it, each with different content. I also have a div with a select and a button. I would like this div to display on the first two tabs but not the third. I know one option would be to just duplicate the content on both tabs, but then I would have to keep their data in sync with javascript and I feel like there has to be a better solution than that.
So I tried putting the div between where the tabs are defined and where the tab content starts, which works fine, but it makes it show in all three tabs. In the javascript, I tried binding click events to the tab buttons
$("#pushingInfoTabButton").click(function () {
$("#addInspection").show();
});
$("#pushingInspTabButton").click(function () {
$("#addInspection").show();
});
$("#pushingGridTabButton").click(function () {
$("#addInspection").hide();
});
and showing the div in two tabs and hiding with the third, but after putting debugger inside of the click events, they never fire. Is there an easier way to do this that I'm just unaware of?
Here's the corresponding HTML. Sorry for not having it at first.
<div data-role="tabs" class="ui-content insetContent infoContent" >
<div data-role="navbar">
<ul>
<li><a id="pushingInfoTabButton" href="#pushingInfoTab" data-theme="a">Info</a></li>
<li><a id="pushingInspTabButton" href="#pushingInspTab" data-theme="a">Insp</a></li>
<li><a id="pushingGridTabButton" href="#pushingGridTab" data-theme="a">Grid</a></li>
</ul>
</div>
<div id="addInspection">
<div class="ui-block-a" style="width:30%;margin-right:0px;">
<a data-role="button" data-inline="false" data-theme="b" style="padding-left:0px; padding-right:0px;" id="A1">Add</a>
</div>
<div class="ui-block-b" text-align:right" style="width:70%; margin-left:0px;">
<select data-inline="true" data-native-menu="true">
<option value="" id="Option1">Select</option>
</select>
<a data-role="button" data-inline="true" data-theme="g" style="margin-left:-7px;" id="A2">Clr</a>
</div>
</div>
<div id="pushingInfoTab" class="ui-content insetContent infoContent">
</div>
<div id="pushingInspTab" class="ui-content insetContent infoContent">
</div>
<div id="pushingGridTab" class="ui-content insetContent infoContent">
</div>
Notice: Didn't put any of the content that's actually in the tabs, because it's hundreds of lines of unnecessary markup, and I don't think it's the issue.
There is a typo error here:
text-align:right" style="wi
Then, put the JS at the bottom of the body, or at jQuery Document Ready.
Here is the working demo.
My jQuery mobile popup header doesn't have the same size as the content.
jQuery 1.8.3 and jQuery mobile 1.2.0.
<div data-role="popup" id="commentPopup" style="width: 800px;" class="ui-corner-all">
<div data-role="header" data-theme="b" class="ui-corner-top">
<h1>Please enter your comment</h1>
</div>
<div data-role="content" data-theme="b" class="ui-corner-bottom ui-content">
<textarea></textarea>
OK
CANCEL
</div>
</div>
For info, I open it with $('#commentPopup').popup("open");.
Is it possible to disable the scroll while the popup is opened?
Is it possible to prevent the user from closing the popup when clicking in another place of the page?
Thanks
I was overriding a CSS .ui-content class as #Omar found it.
The problem is solved.
Concerning the dismissible, this is not possible with jQM version < 1.3.0.
I'm having some trouble with the JQuery Mobile collapsible content (http://jquerymobile.com/demos/1.2.0-rc.2/docs/content/content-collapsible.html)
This HTML:
<div data-role="collapsible" data-collapsed="true">
<h3>Address</h3>
<div id="address_container">
Some hidden content here
</div>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>About Us</h3>
<div id="descriptions_container">
Some more hidden content here
</div>
</div>
Should be appearing like so:
Is looking like this:
In the broken example the buttons do not expand to show the hidden content. The html on the page is as in the example on the jquery mobile site. When the page loads it is initially fine, however in a moment the page flashes, and then displays incorrectly as above. What's worse is that it's not consistent. Sometimes it works and others it doesn't.
The HTML on the broken version shows that it's inserting an entire hidden content container inside the div that contains the hidden content. Here it is after load:
Any advice or ideas about what causes this and how it can be addressed would be greatly appreciated.
Edit:
Well I've stopped it happening. I had some debug text being Response.Written to the page outside of the HTML elements at the very beginning of the page and stopping this seems to have stopped the above issue occurring. I suppose JQuery Mobile must be throwing its toys out of the pram in an unusual way because of it.
As the example on jquerymobile.com shows, try using paragraph instead of div for the content. Your code would be
<div data-role="collapsible" data-collapsed="true">
<h3>Address</h3>
<p id="address_container">
Some hidden content here
</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>About Us</h3>
<p id="descriptions_container">
Some more hidden content here
</p>
</div>
I am trying to append buttons to a header if a case is true, but it ends up looking like this:
The edit and new event buttons are supposed to be a control group...
HTML
<div data-role="header">
<h1 class="ui-title" role="heading" id="hdr"></h1>
<div class="ui-btn-right" id ="addbuttons" data-role="controlgroup" data-type="horizontal">
</div>
</div>
JAVASCRIPT
$('#addbuttons').append('<div data-role="button" data-icon="gears" data-theme="b">Edit</div>');
$('#addbuttons').append('<div data-role="button" data-icon="plus" data-theme="b">New Event</div>');
Whenever you do any changes to header or footer, you need to re-enhance the markup this way.
$('[data-role=page]').trigger('pagecreate');
You also can use this,
$('[data-role=header]').trigger('create');
I have one main page and other sources on other pages. Since I can't use ajax loading because of the server limitation, I have to use target="_webapp" attribute to load on new page
<div id="home">
Link to external page
... content ...
</div>
Since normal back button ( a href="#") doesn't work with external page, I'm using javascript:history.go(-1)
<div id="the-external-page">
<div class="toolbar">
<h1>The External Page</h1>
<a class="back" href="javascript:history.go(-1)">Back</a>
</div>
<ul>
<li>Internal page</li>
<li>Internal page</li>
</ul>
... content ...
</div>
<div id="page1">
<div class="toolbar">
<h1>Page 1</h1>
<a class="back" href="#">Back</a>
</div>
.. content...
</div>
<div id="page2">
<div class="toolbar">
<h1>Page 2</h1>
<a class="back" href="#">Back</a>
</div>
.. content...
</div>
It works if user navigate #home -> #the-external-page -> #home
but since the other pages have multiple link within it when user visit #page1, #page2 all the history stack and the back button doesn't work until pressed multiple time.
I can't put absolute link in the back button either because the list of original pages are dynamically generated.
Is there way to go back to resolve this ?
Did not test with your code, but I suspect .goBack() in the jQtouch object may be what you're looking for: https://code.google.com/p/jqtouch/wiki/PublicObject
Relevant section:
goBack( to:object )
Forces jQTouch to go back to a certain page in the history. You can pass a specific page ID, a number of pages to go back, or nothing to go back one page. If the specified page can not be found, jQTouch will go back one page by default.