In my webapp i dynamicaly load data via ajax. After loading i trigger a "create" on the page i have changed. But after the create, the navbar on bottom (fixed) stays on bottom, even when i switch to another page without any navbar.
Problem is, that inside the dynamic content are some jQuery Mobile elements which have to be redrawed (buttons)
Page looks like this:
<div data-role="page" id="fax" data-title="Fax" data-theme="b">
<div data-role="header" data-theme="b">
back
<h1>Fax</h1>
</div>
<div data-role="ui-content" role="main">
<div id="myAjaxContent"></div>
</div>
<div data-id="fax" data-role="footer" data-position="fixed" data-theme="b">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>Fax</li>
<li>Map</li>
</ul>
</div>
</div>
</div>
My Ajax:
$.post('ajax.php',{ action: 'fax', ID: faxID, lat: lat, lon: lon },function(data){
$('#fax').find('div[data-role="ui-content"]').find('#myAjaxContent').html(data.fax);
$('#fax').trigger("create");
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#fax" );
},'json');
Related
I created a multipage(data-role="page") html. In page1 i have username field when initially
fill the username it stores in localstorage and redirects to page2. It is working fine again open the app to check localstorage is present or not until hide the page1 in pagebeforeshow event so the problem occurs here the page2 is not created. How to solve this one. Here is the working Fiddle
*Note In fiddle type the text and submit then refresh the page.
Html is like:
<div data-role="page" id="page1">
<div data-role="header">
<h1>page 1 from html</h1>
<a >Go</a>
</div><!-- /header -->
<div data-role="content">
<label>Type text to store in LocalStoreage</label>
<input type="text" id="name" />
<button id="sub">Submit</button>
</div>
</div><!-- /page -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page 2</h1>
Back
</div><!-- /header -->
<div data-role="content">
<p> Hi i am second page</p>
</div>
</div><!-- /page -->
script is:
$(document).on("pagebeforeshow","#page1",function(){
$("#page1").hide();
var locStorage = localStorage.getItem("lastname");
//alert(locStorage);
if(locStorage){
$.mobile.changePage("#page2");
}else{
$("#page1").show();
}
});
$(document).on("click","#sub",function(){
// alert( $("#name").val());
localStorage.setItem("lastname", $("#name").val());
$.mobile.changePage("#page2");
});
When comment $("#page1").hide(); this line the page1 shows after that only navigate to page2 i don't want to show the page1 when localstorage is available.
EDIT : Set $.mobile.autoInitialize = false; before loading jquery mobile even though the page1 loads for few seconds.
Try something like this,
windows.location.href="index.html#page2"
OR
windows.location.href="#page2"
instead of
$.mobile.changePage("#page2");
So you can try this code,
$(document).on("pagebeforeshow","#page1",function(){
var locStorage = localStorage.getItem("lastname");
//alert(locStorage);
if(locStorage!=null){
windows.location.href="#page2";
}
else{
windows.location.href="#page1";
}
});
$(document).on("click","#sub",function(){
// alert( $("#name").val());
localStorage.setItem("lastname", $("#name").val());
windows.location.href="#page2";
});
I try to open a panel with jQuery Mobile.
The panel should come from the left and push the page, but it seems like the panel overlay the whole side.
In the console i get the error:
Uncaught Error: cannot call methods on panel prior to initialization; attempted to call method 'open'
My HTML:
<div data-role="page">
<div data-role="header">
<header>
<div id="header">
Menu
<h1 id="headline">Text</h1>
<div class="clean"></div>
</div>
</header>
</div>
</div>
<footer>
</footer>
<div data-role="panel" id="menue_panel" data-position="left" data-display="push">
<ul class="ui-alt-icon ui-nodisc-icon">
<li>Startseite</li>
<li>Medikamente</li>
</ul>
</div>
My JS
$( document ).ready(function() {
$( "#menu-btn" ).on( "click", function() {
$( "#menue_panel" ).panel( "open" );
});
});
I don't know why it doesnt work.
The panel should be inside the page DIV.
see docs here http://demos.jquerymobile.com/1.3.0-beta.1/docs/panels/
as the title says, is there a function that helps me find out if a listview contains a specific list item that has an id of say hello?
in my javascript i am currently pre loading items in a listview but there is a situation where the same code that adds the items in the listview, it will of coure add and duplicate the items.
i want to do something like this to find id of "hello"
if( (#listView).find("hello") ){
//do nothing
}else{
$(#listView).append('<li id="hello">hello</li>')
}
Html:
<body>
<div data-role="page" id="fields">
<div data-role="header" data-position="fixed" data-theme="b" data-tap-toggle="false" data-transition="none" >
<h1>New Claim</h1>
</div>
<div data-role="content">
<ul class="ui-li" data-role="listview" id="listViewId" data-inset="true" data-scroll="true">
<li data-role="list-divider">
<h2 id="itemTitle">divider</h2>
</li>
</ul>
</div>
</div>
</div>
</body>
Is this possible? is there some kind of .Find("id") method for a listview?
what is wrong with find?
if(!$('#listViewId').find("#hello").length){
// append the element
}
I am using jQuery mobile 1.3.1 panels. I have two panels (one on the left, one on the right) and to open my panels there are buttons and at the same time swipe events. Everything is working fine if the user doesn't refresh the page. If the user refreshes the page he can open the panel at that page but when he clicks to a link on the panel and routes to another page he can't open the panels any more (swipe or button both of them doesn't work). But if I refresh the page again it again starts to work just for one time. By the way I am using ajax for transitions in jqm. I couldn't find out why. Am I missing something in the usage of panels. Here is html;
<div data-role="page">
<div data-role="panel" id="left-panel" class="panel" data-display="push" data-position="left" data-theme="a" class="ui-response">
<div data-role="fieldcontain">
<input type="search" name="password" id="search" value="" placeholder="search"/>
</div>
<a data-role="button" href="home">home</a>
<a data-role="button" href="settings">settings</a>
<button id="signOutButton">sign out</button>
</div><!--Left Panel--> <div data-role="panel" id="right-panel" class="panel" data-display="push" data-position="right" data-theme="a" class="ui-responsive">
</div><!--Right Panel-->
<div data-role="header" data-tap-toggle="false">
<h1>header</h1>
<button id="openLeftPanel">open</button>
<button id="openRightPanel">open</button>
</div><!-- /header -->
<div data-role="content"
<p>this is home</p>
</div><!-- /content -->
</div><!-- /page -->
And here is my js;
$(document).on('pageinit', function(){
//Opening panels with swipe, if any open don't open the panel (avoid closing swipe to open other panel)
//Catch swipes
$( document ).on( 'swipeleft swiperight', function( evt ) {
if ( $.mobile.activePage.jqmData( 'panel' ) !== 'open' ) {
if ( evt.type === 'swipeleft' ) {
$( '#right-panel').panel( 'open' );
} else if ( evt.type === 'swiperight' ) {
$( '#left-panel').panel( 'open' );
}
}
});
$(document).on('click tap', function(evt){
$.mobile.hidePageLoadingMsg();
var target = evt.target;
var targetId = target.getAttribute('id');
//Sign Out
if(targetId === 'signOutButton'){
window.authFunctions.deleteCookie('apiKey');
window.location.replace('/');
evt.stopImmediatePropagation();
evt.preventDefault();
}
else if(targetId === 'openLeftPanel'){
$('#left-panel').panel('open');
}
else if(targetId === 'openRightPanel'){
$('#right-panel').panel('open');
}
});
sorry if the code is looking not pretty thats because I am using laravel's blade to create these pages on the server side.
Thanks in advance.
EDIT
When trying it I recognized that; when I click on open panel button after it starts not working, it opens previous page's panel rather than active page's panel. I used previous page button on browser and saw that it is controlling previous page's panel. How can I solve this issue?
$(document).on('pagehide', function(event, ui){
var page = $(event.target);
page.remove();
});
This code solved my problem by removing page that is going to hide.
i am trying to dynamically load items into a listview using javascript.
below is my javascript code
//Dynamically load data fields for items
function initialiseFields(listViewId){
for(var i = 0; i < 10; i++){
loadField(listViewId, "hello", "type", "value goes here");
}
}
/**
load single item field
**/
function loadField(listView, label, type, value){
//append the list
$('#listView').append("<li><h3>"+label+":</h3><h4>"+value+"</h4></li>");
$('#listView').listview('refresh');
}
Html5 code
<body onLoad="initialiseFields('itemFieldslist');">
<div data-role="page" id="page">
<div data-role="header" data-position="fixed" data-theme="b" >
Back
<h1><span style="margin-left:1em">List</span></h1>
</div>
<div data-role="content">
<ul data-role="listview" id="itemFieldslist" data-inset="true" data-scroll="true" >
<li data-role="list-divider"> <h2>Title</h2></li>
</ul>
</div>
</div>
</body>
The contents of the listview is always empty except for displaying the header divider for the list
Can you try to wrap initialiseFields in:
$(document).bind('pageinit')
if you check the jquery mobile docs you can see that they discourage
the use of $(document).ready()
check here: jquery events
I'll check myself later.