I use $('#tab-content').load('/embed_tab.html'); to load below page, the output is in bullet point instead of tabs? This is the page I load when I click something on parent page. How can I solve the problem.
Script
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
is loaded from the head.
<div data-role="tabs" id="detail-tabs">
<div data-role="navbar">
<ul>
<li>Selling Point</li>
<li>Terms of Use</li>
</ul>
</div>
<div id="sellpoint" class="ui-body-d ui-content">
<h1>Selling Point</h1>
</div>
<div id="terms">
<h1>Terms of Use</h1>
</div>
</div>
I assume you are also loading the jQM javascript as well as the css.
After the $('#tab-content').load('/embed_tab.html'); is finished, you have to initialize the tabs widget to cause it to be enhanced. So once the load is complete, try calling something like:
$('#tab-content').enhanceWithin();
or
$('#tab-content [data-role="tabs"]').tabs();
EDIT: to call these after the load is complete, use the complete callback function of the load method:
$('#tab-content').load('/embed_tab.html', function() {
$('#tab-content').enhanceWithin();
});
API DOC: http://api.jquery.com/load/
Related
I am new to jquery mobile.
I need help understanding the equivalent of document.ready() for jquery mobile.
I have 2 jsp pages as follow:
page1.jsp
<head>
<script type="text/javascript">
$(document).on('pagebeforeshow', '#page1', function(event){
alert("page 1");
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<header data-role="header">
</header>
<article data-role="content">
page 1
</article>
<footer data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li>Page 2</li>
</ul>
</div>
</body>
page2.jsp
<head>
<script type="text/javascript">
$(document).on('pagebeforeshow', '#page2', function(event){
alert("page 2");
});
</script>
</head>
<body>
<div data-role="page" id="page2">
<header data-role="header">
</header>
<article data-role="content">
page 2
</article>
<footer data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li>Page 1</li>
</ul>
</div>
</body>
So when I initially load page 1, I will get an alert "page 1". But when I navigate to page 2, I do not get the alert "page 2"
But on page 2, I navigate back to page 1, I get an alert "page 1"
So why don't I get "page 2" alert when I load page 2 via navigation?
I am trying to learn jquery mobile so please an explanation and any code example would help to me understand it a lot.
I tried to read through jquery mobile documentation but not understanding it.
Thank you!
Your script isn't running because it technically isn't being loaded. jQuery Mobile follows links by intercepting their normal functionality (which is to navigate to a new page) and instead loads the page's content via an AJAX request. If successful, it then takes the [data-role=page] element and adds it to your existing page. The result is that the new page is loaded, but you never really leave the page that you started from.
Anything not within a [data-type=page] element is not loaded during this, including your scripts. You can fix this by by moving your <script> tag inside of page2's [data-role=page] element. If you do this, keep in mind that any code loaded this will will remain as other pages are loaded, and you might have things start interacting in ways you never intended.
Another option is to simply force jQuery Mobile to actually navigate to new pages when links are clicked. Check out their documentation for how to do that.
I'm using JS render to create dynamic pages in Jquery Mobile for my Phonegap app. The problem however is that the listview isn't loaded until the page is refreshed. Clearly that's not what I want and in another app I used the exact same technique and the listview is loaded immediately. Thing is that there's no difference between the two, so I have no idea why it isn't working in this one.
Here's my script for loading the pages:
<script src="jquery/jsrender.min.js"></script>
<script type="text/javascript">
$(document).on('pageinit', '#kunstwerken_exp1', function (event, ui) {
var $page = $(event.target);
$.ajax({
dataType:"json",
url:"json/exp1_index.js",
success:function(data, textStatus, jqHXR){
for( var x = 0; x < data.length; x++){
//create valid unique IDs for each page.
data[x].id = data[x].link.replace("?","").replace("=","").replace("#","");
}
console.log("success:");
console.log(data);
$("#templateDropPoint").html($("#template").render(data));
$("#templateDropPoint").listview("refresh");
$("body").append($("#pagetemplate").render(data));
},
error:function(jqXHR, textStatus, errorThrown ){
console.log(textStatus+ " "+ errorThrown);
}
});
});
</script>
This is the HTML:
<div data-role="page" id="kunstwerken_exp1" data-url="kunstwerken_exp1">
<div data-role="content">
<ul data-role="listview" id="templateDropPoint"></ul>
</div><!-- /content -->
</div>
<script id="template" type="text/x-jsrender">
<li>
<a href="#{{>id}}">
<img src={{>img}} />
<h5><b>{{>naam}}</b></h5>
<h6>{{>kunstwerk}}</h6>
</a>
</li>
</script>
<script type="text/x-jsrender" id="pagetemplate">
<div data-role="page" id="{{>id}}">
{{if pagina}}
<div data-role="content">
<h1>{{>naam}} ({{:pagina.nationaliteit}})</h1>
<h2>{{:pagina.kunstwerk}}</h2>
<em>{{:pagina.onderschrift}}</em>
<div class="ui-grid-a my-breakpoint">
<div class="ui-block-a">
<div class="koloma">
<div class="callbacks_container">
<ul class="rslides">
<li id="callbacks1_s0">
<img src="{{:pagina.afbeelding1}}" alt=""><p class="caption">{{:pagina.onderschrift1}}</p>
</li>
</ul>
</div>
{{if pagina.videooff}}
<ul class="tabs">
<li><img src="images/video.png"/></li><br>
</ul>
{{/if}}
</div>
</div>
<div class="ui-block-b">
<div class="kolomb">{{:pagina.tekst}}</div>
</div>
</div>
</div>
{{/if}}
</div>
</script>
To understand this situation you need to understand how jQuery Mobile works. It uses AJAX to load other pages.
First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM. To be more precise, even BODY is not fully loaded. Only first div with an attribute data-role="page" will be loaded, everything else is going to be discarded. Even if you have more pages inside a BODY only first one is going to be loaded. This rule only applies to subsequent pages, if you have more pages in an initial HTML all of them will be loaded.
That's why your listview is show successfully only after a page refresh.
Here's an official documentation: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
Unfortunately you are not going to find this described in their documentation. Ether they think this is a common knowledge or they forgot to describe this like my other topics. (jQuery Mobile documentation is big but lacking many things).
I have another ANSWER that discusses this problem. Solutions and working examples can be found there.
My mobile website dynamically adds the header bar to reduce code redundancy.
However, I'm stuck with styling header section of a jquery mobile page.
When I see the generated HTML tags, it looks okay,
but its element is not decorated by jQuery Mobile.
After adding the content, I invoked
$(pageId).trigger('create');
Do you have any ideas?
This worked for me : http://jsfiddle.net/emBxx/2/
HTML:
<script type="text/javascript" src="js/main.js"></script>
...
<div data-role="page" data-theme="b">
<header></header>
<div data-role="content">
<div class="content-primary">
<br />
<ul data-role="listview" data-filter="true">
<li>Some</li>
<li>random</li>
<li>searchable</li>
<li>content</li>
<li>(list!)</li>
</ul>
</div><!--/content-primary -->
</div>
<footer></footer>
</div><!-- page end-->
<script>
appendJQMHeader('Injected header !');
appendJQMFooter('—Injected ftr!', 'JQM 1.3.1Beta');
</script>
JS, in js/main.js:
function appendJQMHeader(pageTitle) {
$('header').replaceWith(
'<header data-role="header" data-theme="f">'+
'<h1>'+pageTitle+'</h1>'+
'Home'+
'</header><!-- /header -->');
}
function appendJQMFooter(left, right) {
$('footer').replaceWith('<footer data-role="footer" data-theme="f" class="jqm-footer"><p>©'+left+'!</p><p class="jqm-version">—'+right+'</p></footer>');
}
Note: for JSfiddle, it require 'Framework & extension > No wrap - in <head>'
For stand alone version, it worked fine with html head calling js/main.js containing the JS. Then html body with appendJQMHeader() & appendJQMFooter(). See the fiddle :)
Instead of invoking the trigger method, I executed the below command, and it works well.
$('#pageHome').closest(":jqmData(role='page')").trigger('pagecreate');
Given a basic jQuery Mobile Collapisible Set, how can I get AJAX content before the toggle event fires? I am using jQM to create the following:
<div id="test" data-role="collapsible-set" data-inset="false">
<div data-role="collapsible" data-collapsed="true" data-mini="true">
<h2>Title #1</h2>
<ul data-role="listview"></ul>
</div>
<div data-role="collapsible" data-collapsed="true" data-mini="true">
<h2>Title #2</h2>
<ul data-role="listview"></ul>
</div>
</div>
I want to be able to when a user clicks on the "toggle" fire of an AJAX call to get content from the server and place it in the correct ul. I can figure out how to do everything except intercept the "click". I have tried binding on both click and expand on the div's, h2's and even ul's.
I am looking for something like:
$('#test h2').live('click',function() {
// do my AJAX call here to get li's to put in correct ul (assuming none exist)
});
Surely I am missing something super simple.
Ok...Here is a working example (minus the AJAX). The biggest drawback is that this only "fires" on expand. But by then it has already expanded and thus currently shows a blank space. What is really needed is a "before expanding" or "click" event so that you can inject the content you want and then the default can happen (changing icons, showing, etc). Not sure how to go about proposing that...
http://jsfiddle.net/mfumm/
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<div data-role="page" id="page">
<div id="set" data-role="collapsible-set" data-inset="false"></div>
</div>
$("#set div:jqmData(role='collapsible')").each(function () {
$(this).bind('expand', function() {
if($(this).find('li').length < 1) {
// do ajax call here to get data
$(this).find('ul').append(items).listview('refresh');
}
});
});
$('#page #set li').live('click',function () {
alert('Go to item');
});
I have a set of jQuery UI tabs, which load their content via the ajax method:
<div id="tabs">
<ul>
<li><span>Inbox</span></li>
<li><span>Sent</span></li>
<li><span>Ins</span></li>
</ul>
<div id="Inbox"> ... </div>
<div id="Sent"> ... </div>
<div id="Ins"> ... </div>
</div>
JS:
$(document).ready(function () {
$("#tabs").tabs();
}
The tab titles are displayed, and the content of the first tab is loaded OK.
Using the AJAX Tabs method is detailed here
When I switch to a different tab, I can see the browser loads the content for that tab, but the content isn't displayed.
Any ideas what I am missing?
replace your ul list by this :
<ul>
<li><span>Inbox</span></li>
<li><span>Sent</span></li>
<li><span>Ins</span></li>
</ul>
Have fixed it now. I had a subsequent $.ajaxSetup() call that was upsetting things.