I do not know how to explain this in English;-)
If I choose an option alert displays for every choice I do not know how to stop.
Step 1, choose "aaaa" option eg
1111 alert ...
Step 2, choose option "bbbb" for example
1111 alert ...
2222 alert ...
and so on!
I've tried return, stopPropagation, etc..
It will surely be an easy mistake to correct for you ... :-)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile- 1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
$('#myList').on('click', 'li', function(e)
{
var pos = $(this).attr('pos');
$("#myPopup").popup('open');
$('#myPopup').on('click', 'ul li a', function(ev)
{
var popupValue = $(this).attr('info');
alert('option-->' + popupValue);
$('#myPopup').popup('close');
});
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="content" class="ui-content">
Choose an option...
<div data-role="popup" id="myPopup">
<ul id="myList" data-role="listview" data-inset="true" style="min-width:250px;">
<li>aaaaaaa</li>
<li>bbbbbbb</li>
<li>cccccc</li>
</ul>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile- 1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
$('#myList').on('click', 'li', function(e)
{
var pos = $(this).attr('pos');
$("#myPopup").popup('open');
$('#myPopup').off().on('click', 'ul li a', function(ev)
{
var popupValue = $(this).attr('info');
alert('option-->' + popupValue);
$('#myPopup').popup('close');
});
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="content" class="ui-content">
Choose an option...
<div data-role="popup" id="myPopup">
<ul id="myList" data-role="listview" data-inset="true" style="min-width:250px;">
<li>aaaaaaa</li>
<li>bbbbbbb</li>
<li>cccccc</li>
</ul>
</div>
</div>
</body>
</html>
Related
I have and index.html file where I have headers for bootstrap tabs and iframe with tabs content.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<script>
function switchTabInIframe(tab) {
var tabId = $('#iframe_1').contents().find('#1');
$('.nav-tabs a[href="#' + tabId + '"]').tab('show');
};
</script>
<div id="exTab2" class="container">
<ul class="nav nav-tabs">
<li class="active">
<a href="#1" data-toggle="tab" onclick="switchTabInIframe('1')" ;>1</a>
</li>
<li>
2
</li>
<li>
3
</li>
</ul>
<iframe src="iframe.html" height="300%" width="300" frameborder="0" name="iframe_1"></iframe>
</div>
</body>
</html>
Below iframe.html where I have content(body) of the tabs:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="tab-content">
<div class="tab-pane active" id="1">
<h3>tab1</h3>
</div>
<div class="tab-pane" id="2">
<h3>tab2</h3>
</div>
<div class="tab-pane" id="3">
<h3>tab3</h3>
</div>
</div>
</body>
</html>
When clicking a tab in the index file how do I change it content that resides inside the iframe? The code above doesn't work... There is no error in the console... Thx
You will need create and invoke a function that is in your iframe page. The scope in your index page is not the same as the iframe, to switch the tabs. I suggest this update..
In the Index page, create a new function called switchframe(id) and call this from your onclick
function switchframe(id) {
document.getElementsByName('iframe_1').contentWindow.switchTabInIframe(id);
}
in iframe.html
function switchTabInIframe(tab) {
console.log('I can run');
console.log(tab);
//perform your tab switch now.
};
Please let us know the outcome..
Here in an example that might help you. When you click a tag, it runs a function that then changes the attr src in the iframe depending on what tab is clicked. This is using JQuery.
function switchTabInIframe(whichOne) {
var iframesource = "";
if (whichOne == 1) {
iframesource = "http://google.com";
} else if (whichOne == 2) {
iframesource = "http://matthewbergwall.com";
} else if (whichOne == 3) {
iframesource = "http://stackoverflow.com";
}
$("#ciframe").attr("src", iframesource);
}
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<script>
function switchTabInIframe(tab) {
var tabId = $('#iframe_1').contents().find('#1');
$('.nav-tabs a[href="#' + tabId + '"]').tab('show');
};
</script>
<div id="exTab2" class="container">
<ul class="nav nav-tabs">
<li class="active">
<a href="#1" data-toggle="tab" onclick="switchTabInIframe(1)" ;>1</a>
</li>
<li>
2
</li>
<li>
3
</li>
</ul>
<iframe src="iframe.html" height="300%" width="300" frameborder="0" name="iframe_1" id="ciframe"></iframe>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have a two page (1 file) jQuery mobile page and I want to write some dynamic text on the second page as soon as it loads.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="css/codiqa.ext.min.css" rel="stylesheet">
<link href="css/jquery.mobile-1.3.1.min.css" rel="stylesheet">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script src="js/codiqa.ext.min.js"></script>
<script src="js/universal-lotto.js"></script>
</head>
<body>
<div data-role="page" data-control-title="Home" id="page1">
<div data-role="content">
<ul data-role="listview" data-divider-theme="b" data-inset="true" id=menu>
<li data-role="list-divider" role="heading">Menu</li>
<li data-theme="c">Help</li>
</ul>
</div>
</div>
<div data-role="page" data-control-title="AnotherPage" id="ViewN" data-back-btn-text="Menu" data-add-back-btn="true">
<div data-role="content">
<div data-controltype="htmlblock" id=printhere>
</div>
</div>
</div>
</body>
</html>
How can I modify the #printhere div? In the file universal-lotto.js I have the following function:
$(document).on('pageshow', '#ViewN' ,function(){
alert('hi');
$('#printhere').html('printthis');
});
The alert comes up when the second page shows but the page itself remains blank.
your lign is invalid here :
<div data-controltype="htmlblock" id=printhere>
</div>
It should be :
<div data-controltype="htmlblock" id="printhere">
</div>
I have problem in implementing Javascript on Jquery mobile, everytime I back from a page, the javascript would be duplicated.
Here is the example code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JS duplicated page1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="css/style-mobile.css">
<script src="js/tes.js"></script>
</head>
<body>
<div class="demo-wrapper" data-role="page" data-theme="a" id="page1">
<div class="header" data-role="header" style="position:fixed; background-color:#004165;">
<div id="div1">
<span class="right">Click me</span>
<div id="option"><span style="color:white;">A B C</span></div>
</div>
</div>
<div id="separator" style="height:100px;"></div>
Go to page2
</div>
</body>
and here is the another page:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JS duplicated page2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="css/style-mobile.css">
</head>
<body>
<div class="demo-wrapper" data-role="page" data-theme="a" id="page2">
<div class="header" data-role="header" style="position:fixed; background-color:#004165;">
<div id="div1">
<span class="right">Click me</span>
<div id="option"><span style="color:white;">A B C</span></div>
</div>
</div>
<div id="separator" style="height:100px;"></div>
Go to page1
</div>
</body>
</html>
And here is the custom JS:
$( document ).on( "pageshow", function() {
$(".header #option").toggle('inactive');
$(".header #option").hide();
$(".right").click(function(){
$(".header #option").toggle('inactive');
$(".header #option").show();
});
});
Everytime I back from page 2, the toggle run 2 times when I clicked it.
If I initialize the JS only in page1, when navigate to page2, the js didn't work.
Please help ..
Page 2 does not have the script tag, so it was not being loaded. Just add it in.
<head>
<script src="js/tes.js"></script>
</head>
Demo is working for me.
With jQuery Mobile I can't get a popup with google maps loaded.
If I touch id="popupBasic" nothing pops up. Very strange, but if the google map api not is loaded the popup works!
>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Beer Me</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.css" />
<link rel="stylesheet" href="css/datepicker.css" />
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.1.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" charset="utf-8" src="js/map.js"></script>
<script type="text/javascript" charset="utf-8" src="markers.js"></script>
<script>
$.mobile.page.prototype.options.domCache = true ;
$.mobile.allowCrossDomainPages = true;
$(document).on('pageshow', '#map', function (event)
{
max_height();
$(document).on('click', '#myposition', function (event){
navigator.geolocation.getCurrentPosition(onSuccess, onError,{'enableHighAccuracy':true,'timeout':20000});
});
});
</script>
<script type="text/javascript" charset="utf-8" src="js/datepicker.js"></script>
<script type="text/javascript" charset="utf-8" src="js/datepicker.mobile.js"></script>
</head>
<body onload="onLoad()">
<div data-role="page" id="map">
<div data-role="header" data-theme="b">
Menu
<h1>Map Header</h1></div>
<div data-role="content" style="width:100%; height:100%; padding:0;">
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.<p>
</div>
<div id="map_canvas" style="width:100%;height:100%"></div>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#leftpanel" data-role="button" data-inline="true" data-icon="grid" >Date</a></li>
<li>Favs</li>
<li>My position</li>
<li>Open Popup</li>
</ul>
</div><!-- /navbar -->
</div>
</div>
</body>
</html>
Does someone have the same problem? I can't figure it out..
Greetz,
Frank
Working example: http://jsfiddle.net/Gajotres/GHZc8/
I have changed your example, popup will display if you click on a button #myposition.
HTML :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script>
$(document).bind("mobileinit", function(){
$.mobile.page.prototype.options.domCache = true ;
$.mobile.allowCrossDomainPages = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="map">
<div data-role="header" data-theme="b">
Menu
<h1>Map Header</h1>
</div>
<div data-role="content" style="width:100%; height:100%; padding:0;">
<div data-role="popup" id="popupBasic">
<p> This is popup</p>
</div>
<div id="map_canvas" style="width:100%;height:100%"></div>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
<a href="#leftpanel" data-role="button" data-inline="true" data-icon="grid" >Date</a>
</li>
<li>
Favs
</li>
<li>
My position
</li>
<li>
Open Popup
</li>
</ul>
</div>
<!-- /navbar -->
</div>
</div>
</body>
</html>
CSS :
#popupBasic {
width: 300px !important;
height: 300px !important;
}
Javascript:
$(document).on('pageshow', '#map', function (event) {
max_height();
$(document).on('click', '#myposition', function (event){
navigator.geolocation.getCurrentPosition(onSuccess, onError,{'enableHighAccuracy':true,'timeout':20000});
});
});
function max_height() {
var header = $.mobile.activePage.find("div[data-role='header']:visible");
var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
content_height -= (content.outerHeight() - content.height());
}
$.mobile.activePage.find('[data-role="content"]').height(content_height);
}
function onSuccess(position) {
var minZoomLevel = 15;
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
function onError() {
alert('Error');
}
I am trying to build a Web application using jQuery Mobile.
When testing on my desktop everything works as expected.
On Android (both 3.2 and 4.0.3) seems like JavaScript is disabled after navigating to second page.
My first page looks like:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="script/jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="script/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="script/jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h3>Jetty experiments:</h3>
</div>
<div data-role="content">
<ul data-role="listview">
<li>Hello World</li>
<li>Sample Form</li>
<li>Test JSP</li>
</ul>
</div>
<div data-role="footer">
<button id="jquery-test">JQuery Test</button>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$("#jquery-test").click(function(event) {
alert("OK");
});
});
</script>
</html>
My second page (that is sample-form.html):
<!DOCTYPE html>
<html>
<head>
<title>Collects text into a database</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="script/jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="script/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
src="script/jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="script/tempo.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h3>Enter some text:</h3>
</div>
<div data-role="content">
<form id="searchForm" method="get" action="SampleForm"
data-ajax="false">
<input type="text" name="text" /> <input type="submit"
value="Submit" />
</form>
<ul id="names" data-role="listview">
<li data-template>{{name}}</li> <!-- the template here does not work on Android -->
<li data-template-fallback>Sorry, JavaScript required!</li>
</ul>
</div>
<div data-role="footer">
<button id="jquery-test">JQuery Test</button>
</div>
</div>
</body>
<script>
var names;
$(document).ready(function() {
$("#jquery-test").click(function(event) {
alert("OK"); // the alert here does not work on Android :(
});
names = Tempo.prepare("names")
});
// this binding does not work on Android
$("#searchForm").submit(function(event) {
event.preventDefault();
$.getJSON("SampleForm", function(data) {
names.render(data);
});
});
</script>
</html>
Any idea what am I doing wrong?
BR,
Adrian.
In jQuery Mobile the document ready event is called once. Linked pages are loaded in same DOM and page init is triggered.
http://jquerymobile.com/test/docs/api/events.html
Here is another question:
jQuery Mobile delegate vs live vs bind