I am using the following on a mobile site but when I click the home button I simply get the loading circle and the page I am trying to get to never resolves:
<div data-role="header" data-theme="b" style="height:50px; padding:3px;">
<img src="/m/images/logo2.png">
<a href="/m/" class="ui-btn-right" data-icon="home" data-iconpos="notext"
data-direction="reverse">Home</a>
</div>
This is the version I am using:
<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/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
Any ideas?
Even if you are using absolute path in your href you can't use it like this:
<a href="/m/" class="ui-btn-right" data-icon="home" data-iconpos="notext"
data-direction="reverse">Home</a>
You need to point it to your domain page:
<a href="index.html" class="ui-btn-right" data-icon="home" data-iconpos="notext"
data-direction="reverse">Home</a>
Or to you inner page:
<a href="#index" class="ui-btn-right" data-icon="home" data-iconpos="notext"
data-direction="reverse">Home</a>
data-direction="reverse" will only work as a back transition but unlike back-btn="true" here you need to provide a real and existing href.
Related
single tap produce popup appearing and beside "cancel" button I put also button for function call. I thought that's enough to put just one "close" to close popup but I needed twice in order to close it. Did I miss something or I must write it on this way in this case?
<div data-role="popup" id="popMe" data-overlay-theme="b" data-theme="a" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="b">
<h1 id='h1pop'>Tap PopUp</h1>
</div>
<div role="main" class="ui-content">
<h3 class="ui-title">Single tap</h3>
<p>This is a popup...</p>
<a class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" onclick="myfunction()">Call function</a>
Cancel
To Page 2
</div>
</div>
function myfunction() {
$("#popMe").popup("close");
$("#popMe").popup("close");
alert('Here I'm, in the function');
// ... rest of code
}
Here is a snippet which should work for you:
function myfunction() {
$("#popMe").popup("close");
console.log("Here I'm, in the function");
// ... rest of code
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page-one">
<div data-role="content">
PopMe
</div>
<div data-role="popup" id="popMe" data-overlay-theme="b" data-theme="a" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="b">
<h1 id='h1pop'>Tap PopUp</h1>
</div>
<div role="main" class="ui-content">
<h3 class="ui-title">Single tap</h3>
<p>This is a popup...</p>
<button class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" onclick="myfunction()">myFunction</button>
Cancel
To Page 2
</div>
</div>
</div>
</body>
</html>
Please note: if you need a CDN, i would suggest you to use the jQuery Mobile libraries from code.jquery.com
Moreover:
IMHO Popups works well if you need to display small menus or text-only hints, but if you need also form elements or some complex user interaction, i believe a page widget with the dialog option it would be a better choice. Here is a reference: JQM Dialog Pages.
Just a little additional hint: to trace your function execution, try to use the console instead of window.alert, and pay attention how you are enclosing strings.
I have an issue with Bootstrap toggle menu feature and MVC.
I have my base layout with scripts and menus all fine - but if i use a toggle feature in mobile view it works for the current page once, after that the other pages clicking it nothing happens..
I almost got around it by moving the menu into a partial view and including this on the bottom of every page instead of just being in the main layout, but strangly the issue is then reversed, it works on all pages till I hit F5 - then is stops working again??
Layout:
#{
ViewData["Logo"] = "bird.png";
ViewData["Icon"] = "cascade.ico";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta name="Robots" content="noindex" />
<meta HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<meta HTTP-EQUIV="EXPIRES" CONTENT="0">
<title>#ViewBag.SiteTitle</title>
<link rel="icon" type="image/x-icon" href="~/img/#ViewBag.Icon" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<environment names="Development">
<!-- Dev uses full file versions for de-bugging -->
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery-mobile-min/jquery.mobile.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
</environment>
<environment names="Staging,Production">
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-mobile-min/jquery.mobile.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
</environment>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="~/styles/all/all.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="~/Styles/Mobile/mobile.css" media="only screen and (max-width: 481px)" />
<link rel="stylesheet" type="text/css" href="~/Styles/Desktop/desktop.css" media="only screen and (min-width: 481px)" />
<script src="~/app.js"></script>
<link href="~/Styles/Print.css" rel="stylesheet" media="print"/>
#RenderSection("Scripts", false)
</head>
<body>
<div id="mypage" data-role="page">
<div id = "header" data-role="header" data-id="persistent" data-position="fixed">
<div id="headnav" class="navbar navbar-inverse">
<div id="headercontainer" class="container">
<div style="position:relative; z-index:10" class="pull-left" rel="home" href="#" title="#ViewBag.SiteTitle">
<a href="#Url.Action("Index", "App")" title="Home">
<img style="max-width:100px; max-height: 100px; margin-top: 5px"
src="~/img/#ViewBag.Logo">
</a>
</div>
<div class="navbar navbar-text" >
<h3 class="title">#ViewBag.Title</h3>
<h5 class="subtitle">#ViewBag.SubTitle</h5>
</div>
<!-- Logout Box -->
<div class="pull-right">
#await Component.InvokeAsync("Logout")
</div>
</div>
</div>
</div>
<!-- content -->
<div id="maincontent" data-role="content" class="container">
#RenderBody()
</div>
#Html.Partial("_NavigationFooter")
</div>
<!-- overriding customer styles -->
<link href="~/styles/customstyles.css" rel="stylesheet" />
<script type="text/javascript">
</script>
</body>
</html>
Footer Partial:
#*
For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*#
#{
}
<footer id="pagefooter" data-id="persistent" data-position="fixed">
<div id="mobilefooterheight" class="navbar navbar-inverse navbar-fixed-bottom">
<div id="footercontainer" class="container-fluid">
<div class="navbar-collapse collapse" id="footer-body">
<ul class="nav navbar-nav">
<li><a data-transition="slide" href="#Url.Action("MyDetails", "App")"><img src="~/img/icons/myrecord.png" />My Record</a></li>
<li><a data-transition="slide" href="#Url.Action("MyTeam", "App")"><img src="~/img/icons/myteam.png" />Team Headcount</a></li>
<li><a data-transition="slide" href="#Url.Action("Index", "Holidays")"><img src="~/img/icons/holidays.png" />My Holidays</a></li>
<li><a data-transition="slide" href="#Url.Action("Payslips", "App")"> <img src="~/img/icons/payslips.png" />Payslip</a></li>
<li><a data-transition="slide" href="#Url.Action("Index", "Tasks")"><img src="~/img/icons/tasks.png" />Tasks</a></li>
<li><a data-transition="slide" href="#Url.Action("Index", "Request")"><img src="~/img/icons/authorise.png" />Requests</a></li>
</ul>
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" aria-expanded="false" data-toggle="collapse" data-target="#footer-body">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#*<ul class="footer-bar-btns visible-xs">
<li><a data-transition="slide" href="#Url.Action("MyDetails", "App")"><img src="~/img/icons/myrecord.png" />My Record</a></li>
<li><a data-transition="slide" href="#Url.Action("MyTeam", "App")"><img src="~/img/icons/myteam.png" />Team Headcount</a></li>
<li><a data-transition="slide" href="#Url.Action("Index", "Holidays")"><img src="~/img/icons/holidays.png" />My Holidays</a></li>
<li><a data-transition="slide" href="#Url.Action("Payslips", "App")"> <img src="~/img/icons/payslips.png" />Payslip</a></li>
<li><a data-transition="slide" href="#Url.Action("Index", "Tasks")"><img src="~/img/icons/tasks.png" />Tasks</a></li>
<li><a data-transition="slide" href="#Url.Action("Index", "Request")"><img src="~/img/icons/authorise.png" />Requests</a></li>
</ul>*#
</div>
</div>
</div>
</footer>
In this current form I have put the code back to the footer simply being in the layout all pages use, which is my preference. But can anyone explain why the system would fail to toggle after the first use or when I have navigated to another page in general. F5 corrects it, then using the menu it stops working again on the next page, unless I hit F5.
Im sure its to do with my scripts for bootstrap not loading on the RenderBody or something to that effect but cannot find a fix.
I Did do my home work but i cannot get it to work.The Button Styles Are Not Refreshing Please Help.
<div id="qpage" data-role="page">
<div data-role="header">
<a id="exit-quiz" data-role="button" data-icon="arrow-l" >Exit</a>
<h1 id="ques-title">#ques-title</h1></div>
<div data-role="content">
<div class="ui-bar-a" id="ques-timer">
#ques-timer
</div>
<div id="question"><h3>#Question</h3></div>
<div class=".button-set" data-role="controlgroup" id="answerbox">
<a data-role="button" id="answer_1">#answer_1</a>
<a data-role="button" id="answer_2">#answer_2</a>
<a data-role="button" id="answer_3">#answer_3</a>
<a data-role="button" id="answer_4">#answer_4</a>
</div>
<div id="explanation">
</div>
</div>
<div data-role="footer"><h2>Copyright Kaveen</h2></div>
</div>
This is Th Javascript I wrote
$("#subject1").bind('click',function(){
var json = $.get("test.json",function(data){
$("#question").html(data.question);
$("#answer_1").html(data.mcq_1);
$("#answer_2").html(data.mcq_2);
$("#answer_3").html(data.mcq_3);
$("#answer_4").html(data.mcq_4);
});
i did try $( "div[data-role=page]" ).page( "destroy" ).page(); But it wont work Plese Help Me Thank you. JSFIDDLE http://jsfiddle.net/xRTCu/
Try this, it should work:
$("#answer_1").button("refresh");
If that is also not working, try this
$("#answer_1").buttonMarkup();
EDIT: jsfiddle updated http://jsfiddle.net/androdify/xRTCu/4/
Use this:
$("#answer_1 .ui-btn-text").text(data.mcq_1);
Why? Because jquery mobile adds a span around the button which has class="ui-btn-text"
Try $( "div[data-role=page]" ).trigger ("create") if you're using the latest version of jQuery mobile. page was deprecated some versions ago.
If you're using an older version of jQM, then you could use $("[data-role=button]").button().button ("refresh") after you're done appending your JSON data into those buttons.
EDIT
From your fiddle I can see that you're using html() and that's erasing jQM's markup. This is what data-role=button converts your markup:
<a data-role="button" id="answer_1">#answer_1</a>
//becomes
<a data-role="button" id="answer_1" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-first-child ui-btn-up-c">
<span class="ui-btn-inner">
<span class="ui-btn-text">mcq wrong</span>
</span>
</a>
So by using html() youre effectively erasing everything inside a. Try searching for ui-btn-text class inside a like this and then run html with your text in it:
$(".ui-btn-text", "#answer_1").html(data.mcq_1);
//OR
$("#answer_1").find(".ui-btn-text").html(data.mcq_1);
Here's your updated demo : http://jsfiddle.net/hungerpain/xRTCu/3/
I have a right log off button in my header on each page which is defined this way:
<div data-role="page" id="displaySchedule" data-title="Display Schedule">
<div data-role="header" data-theme="a">
<h1>Schedule</h1>
<div class="ui-btn-right">
<a class="logoffButton" data-role="button" id="logoffButton" href="#logout" data-icon="delete" data-iconpos="notext"></a>
</div>
.....
This worked fine in 1.1.1. However, when the page is displayed in 1.2.0-Beta-1, the header looks like the following (notice the X icon is below the horizontal line (by about 1/2 of its height) of the home button and the word Schedule). In 1.1.1, all three were lined up correctly.
Any help is, of course, appreciated.
In fact, you shouldn't include your right button inside a div.
Have a try:
<html>
<head>
<meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no'/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile.structure-1.2.0-beta.1.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.js"></script>
</head>
<body>
<div data-role="page" id="displaySchedule" data-title="Display Schedule">
<div data-role="header" data-theme="a">
<h1>Schedule</h1>
<a class="logoffButton" data-role="button" id="logoffButton"
href="#logout" data-icon="delete" data-iconpos="notext"></a>
</div>
</div>
</body>
</html>
If you want to add multiple aligned buttons within the header, you can do the following:
Include the class class="ui-btn-right" (or class="ui-btn-left") to your button / link <a> for the buttons which will be positioned at the right (left) side of the header title
Play with CSS's margin-right and / or margin-left to separate the different buttons from a same side (right / left); otherwise, the buttons will be stacked together.
Here's a simple example including several buttons:
<html>
<head>
<meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no'/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile.structure-1.2.0-beta.1.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.js"></script>
</head>
<body>
<div data-role="page" id="page_1">
<div data-role="header" data-theme="a">
<!-- 1st LEFT BUTTON FROM THE LEFT -->
<a href="#" data-icon="arrow-l" data-iconpos="notext"
class="ui-btn-left"></a>
<!-- 2nd LEFT BUTTON FROM THE LEFT -->
<a href="#" data-icon="arrow-r" data-iconpos="notext"
class="ui-btn-left" style="margin-left: 30px"></a>
<!-- HEADER TITLE -->
<h1>hello</h1>
<!-- 1st RIGHT BUTTON FROM THE RIGHT -->
<a href="#" data-icon="gear" data-iconpos="notext"
class="ui-btn-right"></a>
<!-- 2nd RIGHT BUTTON FROM THE RIGHT -->
<a href="#" data-icon="arrow-r" data-iconpos="notext"
class="ui-btn-right" style="margin-right: 30px;"></a>
<!-- 3rd RIGHT BUTTON FROM THE RIGHT -->
<a href="#" data-icon="arrow-l" data-iconpos="notext"
class="ui-btn-right" style="margin-right: 60px;"></a>
</div>
</div>
</body>
</html>
Here's a screenshot of the example above:
In portrait mode:
In landscape mode:
I am very new to jquery-mobile. Could someone please help with the following problem regarding a multi-page app?
My app has two pages, split into two different files - index2_1.html and index2_2.html given below. When I use $.mobile.changePage("index2_2.html", "slide"); to change to the second page, none of the events in the second page get bound. Actually, none of the Javascript on the second page gets executed. However, if move to the second page using the link
Link to 2nd page that works1
it works fine.
Could someone please tell me what I am doing wrong here?
Thanks,
Dilip
index2_1.html
<!DOCTYPE html>
<html>
<head>
<title>Account Diary Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script>
alert("Trying to register events on page 1.");
$(function() {
$(".category_item").bind("tap", function(event) {
selected_category = $(this).text();
$("#selected_category").text(selected_category);
$.mobile.changePage("index2_2.html", "slide");
});
});
</script>
</head>
<body>
<div data-role="page" id="select_category">
<div data-role="header" data-backbtn="false">
<h1>Select Category</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-theme="g">
<li class="category_item">Grocery</li>
<li class="category_item">Car</li>
<li class="category_item">Recreation</li>
<li class="category_item">Health</li>
</ul>
<div>
Link to 2nd page that works1
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
index2_2.html
<!DOCTYPE html>
<html>
<head>
<title>Account Diary Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script>
alert("Trying to register events on page 2.");
$(function() {
$(".description_item").bind("tap", function(event) {
selected_description = $(this).text();
$("#expense_description").val(selected_description);
description = $("#expense_description").val();
$.mobile.changePage($("#enter_amount"), "slide");
});
});
</script>
</head>
<body>
<div data-role="page" id="enter_description">
<div data-role="header" data-backbtn="false">
<h1>Enter/Select Description</h1>
</div><!-- /header -->
<div data-role="content">
<label for="name">Description:</label>
<input type="text" name="expense_description" id="expense_description" value="" />
<a id="n_button" href="#" data-role="button" data-theme="b" data-inline="true" >Next</a>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Recent Expenses</li>
<li><a class="description_item" href="">Safeway</a></li>
<li><a class="description_item" href="">Gas</a></li>
<li><a class="description_item" href="">Cell phone bill</a></li>
<li><a class="description_item" href="">rent</a></li>
</ul>
<div data-role="controlgroup" data-type="horizontal">
<center>
<a class="cancel_button" href="index.html" data-role="button" rel="external">Cancel</a>
</center>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
In contrast to Pravat Maskey's answer, it's possible (and dependent on the use case also intended) to have seperate HTML files. Just imagine a huge application with lots of pages, it would be counterintuitive to load everything up front.
I think the problem you are having is the placement of the JavaScript code. I would try including the page specific code (the script tag and everything it contains) in the page section, just above the closing div of the page. For more details, take a look at this guide: http://jqx.ca/nav/, and check the section "Scripts in jQuery Mobile Pages".
By having the tag in the body, your code is executed once when the sub-page is created for the first time. For your case this should work, as you are binding an event to a DOM node, which only needs to run once.
You could also try registering your code with the pagebeforeshow event if you want to run it everytime the page is shown.