I found a question with my exact problem that nobody answered:
https://stackoverflow.com/questions/11218707/jquery-mobile-data-rel-dialog-not-firing
I have a dialog that should open when the user presses on a button. It works fine on ALL desktop browsers and Android browser. It does NOT work in Safari on iPhone or iPad. If you refresh the page on the iDevice, it works.
Here is my button:
#Model.selectedDate.ToShortDateString()
Here is my dialog:
<div data-role="dialog" id="popup">
<div data-role="header" data-theme="b">
<h1>Production Date</h1>
</div>
<div data-role="content" data-theme="b">
#using (Html.BeginForm()) {
<div data-role="fieldcontainer">
#Html.LabelFor(model => model.selectedSystem, "Select a date for System " + Model.selectedSystem)
#Html.HiddenFor(model => model.selectedSystem)
#Html.LabelFor(model => model.selectedDate, "Date:")
#Html.TextBoxFor(model => model.selectedDate, new { type = "date" })
</div>
<button type="submit" data-theme="b">Select</button>
}
</div>
Here is the page source for the rendered page:
<div data-role="page" id="mainpage" data-theme="b">
<div data-role="header" data-theme="b" data-position="fixed">
<center>
<a href="/Home/Main">
<img src="/mobileDemo/Images/company_header_logo_mobile.png" border="0" /></a>
</center>
</div>
<div style="text-align: center; padding-top: 5px">
<center>
<a href="/mobileDemo/Home/Main">
<img src="/mobileDemo/Images/menu_home.png" style="width: 40px" border="0" /></a>
<a href="/mobileDemo/Counts">
<img src="/mobileDemo/Images/menu_prodcounts.png" style="width: 40px" border="0" /></a>
<a href="/mobileDemo/Inventory">
<img src="/mobileDemo/Images/menu_inventory.png" style="width: 40px" border="0" /></a>
<a href="/mobileDemo/Vehicle">
<img src="/mobileDemo/Images/menu_vehicle.png" style="width: 40px" border="0" /></a>
<a href="/mobileDemo/SSAR">
<img src="/mobileDemo/Images/menu_ssar.png" style="width: 40px" border="0" /></a>
<a href="/mobileDemo/STAR">
<img src="/mobileDemo/Images/menu_star.png" style="width: 40px" border="0" /></a>
<a href="/mobileDemo/EXECDASH">
<img src="/mobileDemo/Images/menu_dashboard.png" style="width: 40px" border="0" /></a>
</center>
</div>
<div style="padding-left: 20px; padding-top: 10px">
<strong>Body Dashboard for System 1</strong>
</div>
<div style="padding-right: 15px; padding-left: 15px; padding-top: 10px">
<a href="#popup" data-role="button" data-rel="dialog" data-icon="gear" data-iconpos="right"
data-transition="pop">11/7/2012</a>
<hr />
<ul data-role="listview" data-inset="true">
<li>Production</li>
<li>Body OEE</li>
<li><a href="/mobileDemo/ExecDash/BodyDKS?system=1&date=11-07-2012">Doukie-Seisan
KPI</a></li>
<li>Down Time</li>
</ul>
</div>
</div>
Production Date
Select a date for System 1
Date:
Select
Also worth noting, I am passing a parameter to the view. The URL looks like this:
http://internal-server/mobileDemo/ExecDash/Body/1
Which goes to this when the dialog IS being displayed is:
http://internal-server/mobileDemo/ExecDash/Body/1#&ui-state=dialog
When is DOES NOT work (prior to refresh) on an iDevice, this is what is displayed when I hold down on the button and it gives me the OPEN/OPEN IN NEW TAB option:
http://internal-server/mobileDemo/ExecDash/Body/1#popup
What am I doing wrong?
I got your example working with some small tweak.
Created new project using VS2012 selected the mobile template.
Then in my Home/Index.cshtml I added your tag i.e. the button that fires the popup. Change the code to text be #DateTime.Now.ToShortDateString() since I didnt have your model.
I took your dialog and pasted it in the _Layout.cshtml immediately after the closing for the data-role="page" see code below:
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
#if (IsSectionDefined("Header")) {
#RenderSection("Header")
} else {
<h1>#ViewBag.Title</h1>
#Html.Partial("_LoginPartial")
}
</div>
<div data-role="content">
#RenderBody()
</div>
</div>
<div data-role="dialog" id="popup">
<div data-role="header" data-theme="b">
<h1>Production Date</h1>
</div>
<div data-role="content" data-theme="b">
#using (Html.BeginForm()) {
<div data-role="fieldcontainer">
<label>hello world</label>
</div>
<button type="submit" data-theme="b">Select</button>
}
</div>
</div>
#Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
#RenderSection("scripts", required: false)
As you can see I also took out some of your code as I don't have your model, so I substituted my "hello world" label instead. So why did I do it all that way? Well, I tried to put the dialog in the index.cshtml BUT that meant the dialog HTML was getting output inside data-role="page" . So it wasn't firing for me. Once I moved it outside the data-role="page" div it worked. Tested out on iPhone5 and it worked (without refresh). The one thing I did notice about your markup in this post was that you were missing one closing DIV. So I'm not sure it was a copy/paste error or what. Try my exact steps and you should see it working on and iDevice just fine.
Related
I am using Cordova with JQuery mobile, it working fine on android, but when made build for Windows Phone 8, the JQM Toolbar(Header and footer) not getting fix, Toolbar little goes up when I am scrolling up page and when I am scrolling down the toolbar little goes down, like below screenshots
http://159.100.223.157/screens/IMG_0712.JPG
http://159.100.223.157/screens/IMG_0713.JPG
here is the code
<div role="main">
<div id="SearchRides" data-role="page" class="page innerPage">
<div class="ui-header ui-bar-a ui-header-fixed header" data-position="fixed">
<h1 aria-level="1" role="heading" class="ui-title">Search</h1>
</div>
<!--end header-->
<div class="projects ui-content content">
<form method="post" action="#">
<div class="ui-field-contain">
<label for="txtFrom" style="text-align: center">Source</label>
<input type="text" name="txtFrom" id="txtFrom" placeholder="To">
</div>
</form>
</div>
<!--end body-->
<div data-theme="a" class="footer" data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li> </li>
</ul>
</div>
<!--end footer-->
</div>
</div></div>
I have try to include a footer with a navbar inside a dialog page, however, the navbar gets bigger than the dialog window. I did try to just include the navbar without the data-role="footer" but is doing the same. Looks like the navbar inside the dialog doesn't inherent the css properties from the dialog parent. Here is the code.
<div id="addCourse" data-role="page" data-dialog="true" data-close-btn="none">
<div role="dialog">
<div data-role="header" role="banner">
<h1>Add course</h1>
</div>
<div class="ui-content">
<div class="ui-field-contain">
<label for="add-course">New course</label>
<input type="text" name="add-course" id="add-course" placeholder="Enter new course" value="">
</div>
</div>
<div data-role="navbar">
<ul>
<li>Cancel</li>
<li>Save</li>
</ul>
</div>
</div>
anybody with sugestions??
It looks like the borders on the navbar buttons are not considered when setting width. You can fix it with a little CSS
<div id="addCourse" data-role="page" data-dialog="true" data-close-btn="none">
<div data-role="header" role="banner">
<h1>Add course</h1>
</div>
<div role="main" class="ui-content">
<div class="ui-field-contain">
<label for="add-course">New course</label>
<input type="text" name="add-course" id="add-course" placeholder="Enter new course" value="" />
</div>
</div>
<div data-role="navbar">
<ul>
<li>Cancel</li>
<li>Save</li>
</ul>
</div>
</div>
.ui-dialog-contain .ui-navbar {
padding-right: 4px;
border-bottom-left-radius: 0.3125em;
border-bottom-right-radius: 0.3125em;
}
Working DEMO
I did found another way to work around this issue. I just added a overflow:hidden to the data-role="navbar"
<!-- Dialog Add Course Footer -->
<div data-role="navbar" style="overflow:hidden;">
<ul>
<li>Cancel</li>
<li>Save</li>
</ul>
</div>
<!-- End Dialog Add Course Footer -->
I am a JQM newbie and need to put a linked image in the collapsible content header so that when it is clicked the user will be able to access the associated href. I also need to be able to get the header to expand and collapse as needed. Here is my code so far
<h3><em><?=$agent_row['prefix'] . ' ' . $agent_row['first'] . ' ' . $agent_row['last'] . ' ' . $agent_row['suffix']?>
<a class="vcard" id="vcard" href="http://vcard.parascript.com/<?=$agent_row['first']?>_<?=$agent_row['last']?>.vcf"><img src="images/vcard.png" style="vertical-align:middle;width:30px;" /></a>
<a id="email" href="mailto:<?=$agent_row['email']?>"><img src="images/mail.png" style="vertical-align:middle;width:30px;" /></a>
<a id="mobilephone" href="tel://<?=$agent_row['cell']?>"><img src="images/mobile_phone.png" style="vertical-align:middle;width:30px;" /></a>
</em></h3>
I appreciate any suggestions provided.
Check out: http://jquerymobile.com/demos/1.2.0/docs/content/content-collapsible.html
Example: http://jsfiddle.net/Twisty/tJyeQ/
HTML
<html>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>page1</h1>
</div>
<div data-role="content">
<div data-role="collapsible">
<h3><em>First Last</em></h3>
<a class="vcard" id="vcard" href="http://vcard.parascript.com/first_last.vcf">
<img src="images/vcard.png" style="vertical-align:middle;width:30px;" />
</a>
<a id="email" href="mailto:f.last#example.com"><img src="images/mail.png" style="vertical-align:middle;width:30px;" />Email</a>
<a id="mobilephone" href="tel://4155551212"><img src="images/mobile_phone.png" style="vertical-align:middle;width:30px;" />Phone</a>
</div>
</div>
</div>
</body>
</html>
Here is a rough example using Layout Grids: http://jsfiddle.net/Twisty/tJyeQ/6/
HTML
<html>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>page1</h1>
</div>
<div data-role="content">
<div class="ui-grid-c ui-btn ui-bar-c ui-corner-all">
<div class="ui-block-a">
<span class="ui-btn-inner">
<span class="ui-icon ui-icon-plus ui-icon-shadow"> </span>
<span class="ui-btn-text">First Last</span>
</span>
</div>
<div class="ui-block-c">
<a class="vcard" id="vcard" href="http://vcard.parascript.com/first_last.vcf">
<img src="images/vcard.png" style="vertical-align:middle;width:30px;" />
vcard
</a>
</div>
<div class="ui-block-c">
<a id="email" href="mailto:f.last#example.com">
<img src="images/mail.png" style="vertical-align:middle;width:30px;" />
Email
</a>
</div>
<div class="ui-block-d">
<a id="mobilephone" href="tel://4155551212">
<img src="images/mobile_phone.png" style="vertical-align:middle;width:30px;" />
Phone
</a>
</div>
</div><!-- /grid-c -->
</div>
</div>
</body>
</html>
This allows you to set a unique focus or button for each image and you could have the Name Show/Hide other content like a collapsible block, with just a little extra code.
This used to work to center the controlgroup in 1.1.0, but now it seems like it doesn't in 1.1.1.
<div data-theme="a" data-role="footer" style="text-align:center;">
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
link1
link2
</div>
<div class="copy">© 2012 bigco</div>
</div>
Probably align="center" attribute of data-role="controlgroup" div could be suitable for that.
<div data-theme="a" data-role="footer" align="center">
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
link1
link2
</div>
<div class="copy">© 2012 bigco</div>
</div>
http://jsfiddle.net/sGFTy/1/
I found the solution on this site:
http://forum.jquery.com/topic/how-to-horizontally-center-a-set-of-grouped-buttons
The CSS:
#navgroup {text-align:center;}
#navgroup div {display:inline-block;}
The HTML:
<div id="navgroup">
<div data-role="controlgroup" data-type="horizontal">
Menu
Specials
FAQ
Facebook
</div>
</div>
Issue still persists if using
$("selector").show();
to display element since it applies 'display:block'.
Instead of using .show(), now use
$("selector").css('display', 'inline-block');
Now I'm on JQM 1.2 and this works for me...
CSS
.center-controlgroup { text-align: center; }
HTML
<div data-role="controlgroup" data-type="horizontal" class="center-controlgroup">...</div>
I have built an app using JQuery 1.1.0 and Phonegap. The problem I have now is that when I input text into a field and I tap on the ios keypad's 'previous" & "Next" buttons, the header moves -momentarily- from its fixed position and appears at different positions on the page. I must add that it is also inconsistent as it doesn't do this on other pages. The headers are marked as fixed, so I have no idea why they would sometimes appear and sometimes not.
This part of a multipage is an example of a page that works 'most of the time', but sometimes the header would slide in an out of the screen as I navigate between fields.
<div data-role="page" id="accident_detail" data-theme="f">
<div data-role="header" data-position="fixed">
<h1>Description</h1>
</div>
<div data-role="content">
<label for="incident_date">Date of Incident:</label>
<input type="date" name="incident_date" id="incident_date" value="" class="required"/>
<label for="incident_description">Description of Incident:</label>
<textarea cols="40" rows="8" name="incident_description" id="incident_description" class="required"></textarea>
<label for="accident_damage">Damage description:</label>
<textarea cols="40" rows="8" name="accident_damage" id="accident_damage"></textarea>
<label for="location_street">Street:</label>
<input type="text" name="location_street" id="location_street" value="" class="required"/>
<label for="location_city">City:</label>
<input type="text" name="location_city" id="location_city" value="" class="required"/></div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
<a href="#accident_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
style="margin-left: 10px; margin-top: 5px">Done</a>
<a href="index.html" rel="external" data-icon="home" data-direction="reverse" data-iconpos="notext"
style="float: right; margin-right: 10px; margin-top: 5px"></a>
</div>
</div>
Any help would be appreciated.
YOU CAN TRY THIS..
<div data-role="page" id="myPage">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<a data-icon="back" data-transition="none">Back</a>
<h1>PAGE TITLE</h1>
</div>
</div>