I have one page have iframe, there are several text input in the iframe, and input wrap in div. the div listen the touchstart event. here is the demo page:
1) index.html
<body >
<iframe width="950px" height="650px" src="http://192.168.100.14/demo/test.html">
</body>
2)test.html
<body>
<div id="test" >
<input name="name" id="name" /><input name="age" id="age"/>
</div>
<script>
var test = document.getElementById("test");
test.addEventListener('touchstart', function(){}, false);
</script>
</body>
the problem is:
1: the keyboard will dismiss and show between the click event in input element. this will occur even in same input.
2: the copy and paste and select text was not occur in input element when finger press the input.
But if don't listen the div touchstart event or the test.html not in iframe , these won't occur.
I search several days but can't find answer.
can someone help? Thanks.
Related
I am using a multiple page format with a persistent header. I can successfully change page either with a straight hyperlink or using $(':mobile-pagecontainer').pagecontainer('change'
The code works fine but it seems to "load" the page an additional time each time I click on the buttons to change page.
In this code the button changes the page and outputs a console.log message.
On click I would expect the page to change and to see one "#btn - page x" console.log message.
What happens is the page changes and I get a console message for each time I've loaded the page, not just one.
Even though my code is working, this can't be right - this will just go up and up with normal user usage.
What am I not understanding here?
I've created a jsfiddle to show what I mean. For example, if I click the "goto page x" button 6 times (that's 3 times for each page), I get an output of 3 "#btn - page x" messages, not just one.
Same with the header button - each time I change the page, number of responses from the header button goes up.
the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>problem</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="header" data-position="fixed" data-theme="a">
header button
</div>
<div data-role="page" id="page1" data-title="Page 1">
<div data-role="content">
<h1>I am page 1</h1>
goto page2
</div>
</div>
<div data-role="page" id="page2" data-title="Page 2" data-theme="b">
<div data-role="content">
<h1>I am page 2</h1>
goto page1
</div>
</div>
<script src="problem.js"></script>
</body>
</html>
and the js:
$(document).on('pagebeforeshow','#page1',function(){
console.log('#page1 pagebeforeshow');
$('#btntest1').click(function(){
console.log('#btn - page1');
//$(':mobile-pagecontainer').pagecontainer('change', '#page2', { reloadPage: false});
});
});
$(document).on('pagebeforeshow','#page2',function(){
console.log('#page2 pagebeforeshow');
$('#btntest2').click(function(){
console.log('#btn - page2');
//$(':mobile-pagecontainer').pagecontainer('change', '#page1', { reloadPage: false});
});
});
$(function() {
$("[data-role='header']").toolbar();
});
$(document).on('pagebeforeshow',function(){
console.log('pagebeforeshow');
$('#headerbtn').click(function(){
console.log('headerbtn click');
});
})
UPDATE:
So I've been trying all sorts of things to try to fix this, including removing data-rel="back", trying data-ajax="false" (which defeats the point of what I'm trying to do), changing page with
$(':mobile-pagecontainer').pagecontainer('change', '#page2');
or
$(':mobile-pagecontainer').pagecontainer('change', '#page2', { reloadPage: false});
but no joy. Obviously, I've tried googling but can't find anything to help.
In the full app code the buttons communicate with a database, so as the clicks increase, I'm sending and retrieving the same data to the db multiple times on each click.
I really would appreciate some guidance if anyone has any ideas what I could do?
The problem is that each time you're entering the page, you are binding a listener on the element again. So you're binding multiple listeners. The listener should not be written inside the pagebeforeshowhandler.
Take it out like this:
$(document).on('pagebeforeshow','#page1',function(){
console.log('#page1 pagebeforeshow');
});
$('#btntest1').click(function(e){
e.preventDefault();
console.log('#btn - page1');
$(':mobile-pagecontainer').pagecontainer('change', '#page2', { reloadPage: false});
});
And for page 2 likewise.
I'm seeking to avoid using this for the splash screen, because it does not work on all devices and for other reasons:
<link rel="apple-touch-startup-image" href="img/splash.png" />
So I'm trying to use this instead and it works fine until it slides into a new page, which is then treated like the splash screen again (e.g. it goes blank when the timer expires - in this case 4 seconds). How can I stop/restrict this behavior, so that changePage remains contained in splash page only?
<body>
<div data-role="page" id="splash">
<div class="splash">
<img src="startup.jpg" alt="startup image" />
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
setTimeout(hideSplash, 4000);
});
function hideSplash() {
$.mobile.changePage("#home", "fade");
}
});//]]>
</script>
</div>
</div>
<div data-role="page" id="home">
<div data-role="header" data-backbtn="false">
<h1></h1>
</div>
<div data-role="content">
</div>
</div>
</body>
Good idea here is what I'm thinking. Use single pages instead of multi page(multiple data-role=page). For index.html or index.php or whatever. Put your splash page. The reason for this I will explain later on.
index.html
<head>
<!-- First include all jquery stuff -->
<script src="app.js"></script><!-- external script because we can just include it in every page -->
</head>
<body>
<div data-role="page" id="splash">
<div class="splash">
<img src="startup.jpg" alt="startup image" />
</div>
</div>
</body>
app.js
$(document).on('pageinit','#splash',function(){ // the .on() method does require jQuery 1.7 + but this will allow you to have the contained code only run when the #splash page is initialized.
setTimeout(function(){
$.mobile.changePage("home.html", "fade");
}, 4000);
});
Ok so I did it this way because lets say you have navigation menu and you want to send people back to home page. You won't have to show the splash page again. You can just link to home.html. Also splitting up your pages helps keep the dom leaner. I hope this helps.
<link rel="apple-touch-startup-image" href="img/splash.png" />
Is indeed only for apple mobile devices.
A real splashscreen should only be there to show you a nice picture while you're waiting. Its goal is not to make you wait for real reason. In your case it's taking 4seconds out of the life of your users just to make it look cool.
I have modified your code and put it in this jsfiddle : you'll see it works now. For the splashscreen to take the full width/height edit the css to remove the margins. I've set the timer to 2s, that's more than enough I think.
I'm writing a Html 5 application for mobile devices using jQuery mobile (and Phonegap, but the following is device independent), using one html page that contains various <div data-role="page"... > elements as subpages. To change between one subpage and another I use $.mobile.changePage. Everything works well unless I place a div tag into one of the <div data-role="content"> containers!
Working example:
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.mobile.changePage($('#page2'), {
transition : 'slideup',
reverse : false,
changeHash : true
});
});
</script>
</head>
<body>
<div data-role="page" id="page1" data-theme="a">
<div data-role="content">
Page1
</div>
</div>
<div data-role="page" id="page2" data-theme="a">
<div data-role="content">
Page2
</div>
</div>
</body>
</html>
Now, after adding something as simple as a closed div tag behind Page1
Page1 -> Page1<div />
$.mobile.changePage still fires - one can see the page2 content for a second - but then shows a blank screen.
This happens in desktop browsers as well as in a smartphone (using Phonegap and adjusting the code).
I really appreciate any kind of idea or hint. Narrowing down this problem and making it reproducible alone cost me hours a valuable livetime because it seemed to unlikely....
Change
Page1<div />
to
Page1</div>
...
Page1<div>test</div>
works too.
Not sure why jqm is having a problem with the trailing / on the empty div.
I've got a checkbox that I want hidden on the page. My obvious first attempt was the following:
<input type='checkbox' style='display:none' />
However, I noticed jquery mobile automagically wraps the checkbox in a div that looks like this:
<div class='ui-checkbox'>
<input type='checkbox' style='display:none;' />
</div>
I would assume that there's some kind of data- element that would prevent this additional styling, but haven't found it in the docs or elsewhere. It's easy enough to override the .ui-checkbox in css to hide it as well, but would prefer a more jquery mobile-standard approach. Does such a thing exist?
The attribute that prevents styling is data-role="none"
<input type='checkbox' style='display:none' data-role="none" />
See the Jquery doc: "Preventing auto-initialization of form elements"
For future users.
Just in case you want to disable for every form element or your forms are loading dynamically where you cannot edit markup use this.
$(document).on('pagebeforecreate', function( e ) {
$( "input, textarea, select", e.target ).attr( "data-role", "none" );
});
I have too many places to change inputs and add data-role="none"
The following code works for me:
<script>
$(document).bind('mobileinit',function(){
$.mobile.page.prototype.options.keepNative = "select,input";
});
</script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
I have a weird problem with a simple form with checkboxes..
The first time it's shown it looks fine.. But then after navigating back to the previous page and be to it again - the ui is not updates resulting in plain checkboxes without jQuery mobile style..
I've Googled like crazy and found a couple of hints like .fieldcontain(); but it's doesn't work =(
The data is being retrieved through knockout bindings..
Any good ideas?
Here's the code...
<div id="searchCitiesPage" data-role="page" data-theme="a" class="page searchCities">
<header data-role="header" data-theme="b">
</header>
<div data-role="content" class="content" data-theme="a">
<script id="countyListTemplate" type="x-jquery-tmpl">
<form id="fieldform" action="form.php" method="post">
<fieldset id="fieldsetgroup" data-role="controlgroup">
{{each BoligPortal.AdSearch.postalcodesInSelectedCounty}}
<input type="checkbox" name="checkbox-${zipcode}-${timestamp}" id="checkbox-${zipcode}-${timestamp}" class="zipcodecheckbox"/>
<label for="checkbox-${zipcode}-${timestamp}">${zipcode} ${city}</label>
{{/each}}
</fieldset>
</form>
</script>
<div data-bind="template: 'countyListTemplate'"></div>
<div class="submit">
Næste
</div>
</div>
I was having a problem like this too, but in my case, the checkboxes were being redrawn dynamically before loading the page. I tried refreshing:
$("input[type='checkbox']").checkboxradio("refresh");
But it gave me an error stating that checkboxradio hadn't been initialized. However, when I tried this instead:
$("input[type='checkbox']").checkboxradio();
It made the checkboxes appear correctly every time. I'm still fumbling in the dark with JQuery Mobile and can't say exactly what happens where and why (I think I'm initializing the checkboxes?), but I thought I would share for the next time someone like me googles their way to this thread.
You can add some javascript to re-initialize the jQuery Mobile markup for your checkbox on each page load. Something like this:
<script type="text/javascript">
$(function() {
$('[data-role=page]').live('pageshow',function(){
$('#fieldform').find('input').checkboxradio();
});
});
</script>
I would suspect this code
{{each BoligPortal.AdSearch.postalcodesInSelectedCounty}}
<input type="checkbox" name="checkbox-${zipcode}-${timestamp}" id="checkbox-${zipcode}-${timestamp}" class="zipcodecheckbox"/>
<label for="checkbox-${zipcode}-${timestamp}">${zipcode} ${city}</label>
{{/each}}
is being called again when you transition back to the page. I would suggest pulling the infomation/tags/etc.. before the page displays (on the first load) and display it statically. So when transitioning back it shows the same data.
of you could use one of the live events and restyle it before the page shows, example:
$('.zipcodecheckbox').live('pagebeforeshow',function(event, ui){
$("input[type='checkbox']").checkboxradio("refresh");
// or
$(".zipcodecheckbox").checkboxradio("refresh");
});