I am trying to implement the swiperight event in a jQuery Mobile Web Page (vegPizzas.html) that displays a Veg pizza category in a collapsible listview. The list items are properly displaying the image, name, and price of pizzas in that category. When I swipe right, it is properly handling the swiperight event to display the ingredients. The page is working fine when launched directly in WebMatrix. However, when I launch the home page and navigate to the vegPizzas.html page, the swiperight event stops working and does not displays the ingredients.
The partial script and code of the vegPizzas.html is:
<script>
$("nonvegpizzas.html").live("pageinit", function(event) {
$("#listitem1").on("swiperight",function(){
$("#listitem1").html("Chicken, Cheese, Onion.")
});
. . . .
<body>
. . .
<ul data-role="listview" data-inset="true" data-autodividers="true" >
<li id=listitem1>
<img src="Images/vegpizza1.jpg" alt="Cheesy Delight"/>
<h3 style='margin-left: 15px'>Cheesy Delight</h3>
</li>
. . .
</ul>
</body>
This page is referred from the main index.html file as:
<ul data-role="listview" data-inset="true">
<li>Veg Pizzas</li>
What am I doing wrong?
Related
I am using jqm 1.4.5. for my web app. I have a problem changing to a page programmatically using the pagecontainer change widget in a certain situation. I have a home page that is part of the index.html file. From the home page if I load an external page via jqm ajax method and then from that page have a button that changes back to the home page (via javascript) it fails silently. However, it works if the external page has an anchor button with an href="#home_page".
The JS code is being executed. All the id's are correct.
Why does it work using the anchor button but not programmatically with the button tag using the JS code?
What am I doing wrong?
index.html
<div id="page_home" data-role="page" >
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
load in the external page
</div>
page_external.html
<div id="page_external" data-role="page" >
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
go to home page <!-- this works -->
<button id="mybutton" data-role="button" > go to home page (script)</button> <!-- this does not work -->
</div>
JS
$(document).on("click", "#mybutton, function () {
//this fails silently and does not change the page
$(":mobile-pagecontainer").pagecontainer( "change", "#page_home" );
});
I found the answer here on SO:
Similar Question
I was using the wrong syntax. It should be
$(":mobile-pagecontainer").pagecontainer( "change", $("#page_home" ));
I am trying to implement the new external panel offered in jQuery mobile 1.4 rc1. I am able to get the panel to enter and dismiss across all pages as it should, however the panel does not inherit the styles from the default theme (c) nor will it if a theme is defined using data-theme=a. The panel will load an unstyled list view unless I navigate the to #app-menu in the url then the styles appear. Does anyone know why this might be?
<script id="panel-init">
$(function () {
$("body > [data-role='panel']").panel();
});
</script>
<div data-role="panel" id="app-menu" data-display="push" data-position="left">
<ul data-role="listview">
<li data-role="list-divider">Menu</li>
<li data-icon="home" data-bind="click: navTo.bind($data, 'location-map', 'flip', false)">current party</li>
</ul>
</div>
Note: data-theme attribute should be added to External panel as it doesn't inherit style/theme from parent container. Internal panel inherit styles/theme from page div containing it.
jQuery Mobile now offer external panel and toolbar. Those widgets aren't being initiated automatically by jQM. They need to be initiated manually and followed by .enhanceWithin() to enhace contents within.
$(function () {
$("[data-role=panel]").panel().enhanceWithin();
});
Demo
I'm not allowed to comment but in the demo #Omar provide the many data-icon="home" icons are not showing up and if I add class="ui-btn ui-icon-arrow-l" to the Anchor, it doesn't show up either so there appears to be something more that needs to be done.
With a little investigation, I found that adding adding ui-btn-icon-left like so will fix anchors
Anchor
adding these classes to the <li data-icon="home" doesn't quite work but changing <li data-icon="home">item</li> to <li class="ui-btn ui-icon-home ui-btn-icon-left ui-corner-all">item</li> will get the icon to show up but will not move the text over so it still looks bad.
i am using jQuery Mobile Navigation Tabs. i take a common footer for all pages like footer.html, and load this footer on a footer div at run time. this is working good as i want.
here is my code of footer.html
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul id="footertab">
<li id="home"><a href="#page1" data-transition="none" data-icon="tab-home" ></span>Home</a></li>
<li>6</span>Alerts</li>
<li><a href="#page3" data-transition="none" data-icon="tab-services" >Services</a></li>
<li>Learn</li>
<li>Settings</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
And i add this footer on run time using this code.
$(document).on('pageinit', function(event){
$(".addfooter").load('footer.html', function(){
$(this).trigger("create");
});
});
this running fine. but i have some issue with this code.it does not show the active tab.
i know that i have to add class='ui-btn-active ui-state-persist' in my selected tab.
but i do not sure that how to add and replace it with java script.
i dont want to use to write this footer at all pages.
for this task i use this code in side my script
$(document).delegate('[data-role="navbar"] a', 'click', function () {
alert("calling tab click");
$(this).addClass('ui-btn-active ui-state-persist');
});
This function call every time when i click any tab. but it does show selected tab.
all tabs are deselected.
How can i solve this problem.
please suggest me
Hello try this code.
$(document).live('pageshow',function(event,ui){
// disable previous selected links
$('[data-role=navbar] a').removeClass("ui-btn-active");
// select link
var menuLink = $('[data-role=navbar] a[href="#'+$.mobile.activePage.attr('id')+'"]');
menuLink.addClass("ui-btn-active");
});
I have a jquery mobile page which has a panel. Inside the panel I have a listview, and on each listitem there is a where I've added a data-rel="close" attribute. I want to be able to close the panel when ever a listitem is clicked.
Note that I also has a binding to angular.
<ul data-role="listview" data-icon="arrow-l" class="ui-icon-alt" data-inset="true" >
<li ng-repeat="task in tasks" >
{{task.Name}}
</li>
</ul>
I've testes on a link outside the listview and it works fine. I'm not sure id angularjs is playing a trick on me here or it is something else.
best regards
Rasmus
Markup
{{task.Name}}
JS
$('#closepanel').on('click', function {} {
$( "#PanelID" ).panel( "close" );
});
I have a list which consists of two sections:
<ul data-role="listview" data-theme="a" data-inset="true" data-split-theme="c">
<li>
<a style="padding-top:0">
<h5>Text 1</h5>
<p><strong>Text 2</strong></p>
<p>Date: April 17, 2012</p>
<a href="http://some address" ></a>
</li>
What I would like to do is when the user clicks anywhere in the left-hand section of a row I would like to play an audio file (using the html5 tag) and for the text in this section to be removed and replaced with the audio controls for the playing audio. When the user stops the audio I'd like things to return to as they were.
I'm new to JQuery and JQueryMobile and not sure where to begin with this.
Ideally if it is possible when the audio controls appear it would be great if there could be some sort of flipping animation i.e. such as that section of the row rotates and on one side is the audio controls and on the other is the text.
Is such a thing possible?
TIA
You can nest whatever you want in your li, so you can just put two div containers in there and bind to the appropiate events and show and hide them based on that.
For example:
Markup:
<ul id="parentUL" data-role="listview" data-theme="a" data-inset="true" data-split-theme="c">
<li>
<a style="padding-top:0">
<div class="txtCnt">
<h5>Text 1</h5>
<p><strong>Text 2</strong></p>
<p>Date: April 17, 2012</p>
</div>
<div class="audioCnt displayNone">
<h1>Audio Controls</h1>
</div>
<a href="http://some address" ></a>
</li>
</ul>
JavaScript:
$('#parentUL').on('click', '.txtCnt', function () {
$(this).hide().parent().find('.audioCnt').show();
});
$('#parentUL').on('click', '.audioCnt', function () {
$(this).hide().parent().find('.txtCnt').show();
});