Can you please tell me why copy, paste option appears after tapping the button for 5 seconds in jQuery mobile? Actually I am using jQuery mobile When I Add button and tap on that it show copy paste select all options?
<div class="ui-grid-c">
<div class="ui-block-a" style="width: 30%;" >
<input name="text-12" id="text-12" value="" type="text" autocorrect="off" class="searchbox">
</div>
<div class="ui-block-b">
Search
</div>
<div class="ui-block-c" style="margin-left: 5px;">
<a href="#" data-role="button" data-corners="false" data-inline="true" id="next" class="searchNext" disabled>Next</a>
</div>
<div class="ui-block-d" style="margin-left: 30px;">
<a href="#" data-role="button" data-corners="false" data-inline="true" id="prev" class="searchPrev" disabled>Previous</a>
</div>
Please Take a look On this link
Apache Cordova: remove tap-hold link menu
Disable copy on jquery mobile button over PhoneGap
Use This
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
}
and only enable something you like:
input {
-webkit-user-select: auto;
}
Related
I just started exploring J query mobile. I tried to open a dialog with following code.
<a data-role="button" href="test_my_dialog.php" data-icon="plus" data-iconpos="left" data-mini="true" id="test_dialog" data-rel="dialog">Test Dialog </a>
The dialog opens but there is no close button and header as it is being displayed at demos at following link Dialogs
Is there anything I'm missing here ?
EDIT: The markup of test_my_dialog.php
<div data-role="page">
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>
Add As
</legend>
<input id="radio1" name="RC_type" value="radio1" type="radio">
<label for="radio1">
Team Driver
</label>
<input id="radio2" name="RC_type" value="radio2" type="radio">
<label for="radio2">
Team Member (Driver2)
</label>
</fieldset>
</div>
</div>
</div>
Add a header div to the dialog, it will automatically get a close button to the left.
Demo
<div data-role="page" id="myDialog">
<div data-role="header">
<h1>Header</h1>
</div>
</div>
If you want to change button's position to right, add data-close-btn="right" attribute to dialog div.
<div data-role="page" id="myDialog" data-close-btn="right">
Try modifying the page definition of your dialog with the following code and add a header-section to your dialog page
<div id='mydialog' data-role='page' data-add-back-btn='true'>
...
</div>
I am failing to correctly organize jQuery Mobile components in the following way:
I was trying to build this fixed searchbar, but after many attemps I ended up here, asking for help.
<div data-role="header" data-position="fixed" data-theme="b">
<a data-role="button" class="ui-btn-lft" href="#pgIndex" data-icon="arrow-l" data-theme="b">Back</a>
<h1>Title</h1>
</div>
<div data-role="header" data-theme="b" id="second-header">
<div style="float:left; width: 75%;">
<select name="selCombo1" id="selCombo1" data-mini="true">
<option value="0">Option 0 - All</option>
</select>
<span style="margin-bottom: 3px;"></span>
<select name="selCombo2" id="selCombo2" data-mini="true">
<option value="0">Option 0 - All</option>
</select>
</div>
<div style="float:right; width: 25%;">
<a data-role="button" data-mini="true" data-icon="search" data-iconpos="top" data-rel="back">Search</a>
</div>
</div>
Is there a simple way to archieve this?
The complete code is on jsFiddle:
http://jsfiddle.net/mbarni/rjdt2/
You can achieve a similar effect to a second header level by appending a div with the classes:
class="ui-bar ui-bar-b"
to your header. Here's a simple example using your code.
JSFiddle Example
For more info, check the bottom of this doc
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.
I can't figure out how to register the taphold event for a Flip toggle switch. I tried as described here with the following code.
<div data-role="fieldcontain">
Sex
<select name="sex" id="id" data-role="slider">
<option value="off">Male</option>
<option value="on">Female</option>
</select>
</div>
$('#id').live('taphold', function(){
console.log("taphold");
});
And, because the actual <select> tag is hidden, and the switch is rendered by following html
<div role="application" class="ui-slider ui-slider-switch ui-btn-down-c ui-btn-corner-all ui-focus">
<span class="ui-slider-label ui-slider-label-a ui-btn-active ui-btn-corner-all" role="img" style="width: 100%">Female</span>
<span class="ui-slider-label ui-slider-label-b ui-btn-down-c ui-btn-corner-all" role="img" style="width: 0%">Male</span>
<div class="ui-slider-inneroffset">
<a href="#" class="ui-slider-handle ui-btn ui-shadow ui-btn-corner-all ui-slider-handle-snapping ui-focus ui-btn-up-c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" role="slider" aria-valuemin="0" aria-valuemax="1" aria-valuenow="on" aria-valuetext="Female" title="Female" aria-labelledby="eforms_patient_sex-label" style="left: 100%">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text"/>
</span>
</a>
</div>
</div>
Which is a sibling of aboves <select> tag I also tried this
$('#id').parent().find('[role="application"]').live('taphold', function(){
console.log("taphold");
});
But nether did work. So...
How to register the virtual taphold event for jQuery mobile Flip toggle switch?
//edit
I added a onclick function to the <div> tag, via opera dragonfly, and it worked. So It seams that registering the event to the <div> is the right approach. But it does not work, with the code above.
The event is called taphold not tabhold.
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>