I'm trying to use mobile.changePage to open a new page which contains a form, on this new page I'm binding to the init event like I've read in many other questions. The problem is that the script in my new page is not executed until i manually refresh the page.
Here is my code, I've removed useless parts because it still won't work even in the following simple version:
the maptest.html page:
<!DOCTYPE html>
<html>
<head>
<title>Mappa</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<style type="text/css">
.ui-icon-opzione {
background-image: url("img/opzione.gif") !important;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.9.1.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" charset="utf-8" type="text/javascript" src="js/maptest.js"> </script>
<!-- /DIV DELLA PAGINA -->
<div id="home-page" data-role="page" style="width:100%; height:100%;">
<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-theme="a">
<div data-role="navbar" data-iconpos="right" data-theme="a">
<ul>
<li><a data-role="button" id="apriLista" data-icon="grid">Lista</a>
</li>
<li>Main Menu
</li>
</ul>
</div>
<select id="opzioni-mappa" data-icon="opzione" class="ui-btn-right" data-corners="false"
data-iconpos="notext">
<option data-placeholder="true" value="Options"><b>OPZIONI</b>
</option>
<option value="segnalaServizio">Inserisci Nuovo servizio</option>
<option value="annuncioSitter">Nuovo annuncio Dog Sitter</option>
</select>
</div>
<!-- footer -->
</div>
</body>
</html>
the maptest.js script:
// I know I shouldn't be using this, but that's not the point.
$(document).ready(function () {
$("#opzioni-mappa").change(function () {
if ($("#opzioni-mappa").val() == "segnalaServizio") {
alert("segnalaservizio");
$.mobile.changePage("formtest.html");
}
});
});
the formtest.html page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
</head>
<style>
.ui-icon-opzione {
background-image: url("img/opzione.gif") !important;
background-repeat:no-repeat;
}
</style>
<body>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="js/formtest.js"></script>
<div data-role="page" id="inserisciServizio">
<div data-role="content">
<h3>Inserisci nuovo servizio</h3>
</div>
</div>
<!-- content -->
</div>
</body>
</html>
the formtest.js script:
$(document).bind("pageinit", function() {
alert("page opened");
});
the alert won't show.
Related
PHP Version 7.0
JQuery Version 3.1.0
You can see that the everything above the code is simply copied and pasted every five seconds rather than refreshing.
The intention is to refresh the include every five seconds.
Website: http://ssmsportal.cf/pages/incomingCalls.php
Code:
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>ServerSide Moderation Services</title>
<link rel="stylesheet" href="../styles/tablesStyles.css" type="text/css" />
<link rel="stylesheet" href="../styles/incomingCallsStyle.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>
<script src="../scripts/general.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Whats Up?</title>
</head>
<body class="body">
<?php include '../includes/header.php'; ?>
<div class="mainContent">
<div class="logRegArea">
<article class="callsContent" style='padding-left: 0px; padding-right: 0px;'>
<header>
<h2 class="loginArea" style="text-align:center">Incoming Calls:</h2>
</header>
<content>
<div id="login">
<?php include '../includes/incomingCalls.php'; ?>
</div>
<script src="../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
setInterval(function () {
$('#login').load('../includes/incomingCalls.php')
}, 5000);
});
</script>
</content>
</article>
</div>
</div>
<footer class="mainFooter">
<p>This website was developed by ROBLOX user: wattleman</p>
</footer>
</body>
</html>
That's the normal behavior of the load function.
You should instead try:
$.get("../includes/incomingCalls.php", function(data) {
$("#login").html(data);
});
My code works fine when viewing the web page on a computer, but when I use the emulator or iPhone with xCode the entire page does not load. Perhaps the top 10 - 25% of the page appears and the rest is cut off. Below is an example of code. All help is appreciated!
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
object {
width: 100%;
min-height: 100%;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="css/jquery-mobile-slide-menu.css" type="text/css" />
<script type="text/javascript" src="js/jquery-mobile-slide-menu.js"></script>
<script>
function MyFunction(id) {
var num=id;
if (num == "foxnews") {
$("#content").mobile.loadPage("http://m.foxnews.com");
}
if (num == "cnn") {
$('#content').load('http://m.cnn.com');
$('#content').trigger("pagecreate").trigger("refresh");
}
if (num == "home") {
location.reload();
}
//$("#content").html('<object data="http://www.foxnews.com" />');
//document.getElementById("content").innerHTML="<img src='Background.png'>";
}
</script>
</head>
<body>
<div id="side-menu">
<ul>
<li><a id="home" href="" onclick="MyFunction(this.id);">Home</a></li>
<li><a id="cnn" href="#" onclick="MyFunction(this.id);">   CNN</a></li>
<li><a id="foxnews" href="#" onclick="MyFunction(this.id);">   Fox News</a></li>
<li>Page 2<span class="icon"></span></li>
<li>Page 3<span class="icon"></span></li>
</ul>
</div>
<div data-role="page" id="about-the-band" data-title="Page Title" data-theme="b" class="pages">
<div data-role="header" data-theme="b">
Menu
<h1>Header</h1>
</div>
<div id="content" data-role="content">
<p>Content Goes Here</p>
</div>
</div>
<script type="text/javascript">
$(function(){
$('#side-menu').slideMenu();
});
</script>
</body>
</html>
keyword: crossdomain
Excerpt from deprecated Jquery Mobile:
"When jQuery Mobile attempts to load an external page, the request runs through $.mobile.loadPage(). This will only allow cross-domain requests if the $.mobile.allowCrossDomainPages configuration option is set to true."
Load page to a div jQuery Mobile:
$("#landingPage").live('pageinit', function() {
jQuery.support.cors = true;
$.mobile.allowCrossDomainPages=true;
});
but maybe i am completely on the wrong scent; but you should open a jsfiddle, otherwise its just like searching a needle in a haystack.
I'm kinda new to jQuery/HTML5 stuff, so I'm running into some problems. Hope you can help.
I'm loading a local json file and want to add the items of it to a list. This works just fine. But, the list is not using the jQuery styling?
I tried it without loading the json file and instead I put the data directly in the code and it worked. What might be my problem?
Here is the code which does not style correct:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tuBS Energie App</title>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.css" rel="stylesheet"/>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div id="tasksPage" data-role="page">
<div data-role="header" data-position="fixed">
Zurück
<h1>tuBS Energie App</h1>
</div>
<div data-role="content">
<h3>Institut für Nachrichtentechnik</h3>
<ul id="taskList" data-role="listview" data-filter="true" data-filter-placeholder="Suche nach Institut..." data-inset="true"></ul>
</div>
<div data-role="footer" data-position="fixed">
Info
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(function()
{
$(document).ready(function(){
$.getJSON("institute.js",function(data) {
$.each(data.institute,function(i,el){
$("<li><a href='#'>"+el.id+". "+el.name+"</a> </li>").appendTo("#taskList");
});
});
});
})
</script>
</body>
</html>
And here is the code which gives me the correct styling
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tuBS Energie App</title>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.css" rel="stylesheet"/>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div id="tasksPage" data-role="page">
<div data-role="header" data-position="fixed">
Zurück
<h1>tuBS Energie App</h1>
</div>
<div data-role="content">
<h3>Institut für Nachrichtentechnik</h3>
<ul id="taskList" data-role="listview" data-filter="true" data-filter-placeholder="Suche nach Institut..." data-inset="true"></ul>
</div>
<div data-role="footer" data-position="fixed">
Info
</div>
</div>
<script type="text/javascript" charset="utf-8">
var institute_json =
[
{"id":"1","name":"Adaptronik und Funktionsintegration"},
{"id":"2","name":"Analysis und Algebra"},
{"id":"3","name":"Angewandte Mechanik"},
{"id":"4","name":"Angewandte Physik"},
{"id":"5","name":"Anorganische und Analytische Chemie"},
{"id":"6","name":"Architekturbezogene Kunst (IAK)"},
{"id":"7","name":"Automobilwirtschaft u Industrielle Produktion"},
];
$.each(institute_json,function(i,el)
{
$("<li><a href='#'>"+el.id+". "+el.name+"</a></li>").appendTo("#taskList");
});
</script>
</body>
</html>
When you add elements dynamically to the listview, after rendering you need to refresh it.
$("ul").listview("refresh");
Can you give us the content of institute.js
Try this :
$.getJSON("institute.js",function(data) {
$.each(data,function(i,el)
I am using jQuery Mobile and I would like to redirect the browser to another page, after the user clicked on a button on the home.
To do this I wrote:
$.mobile.changePage("album-search-results.html",{
data:{area:searchArea, value:searchValue},
transition: "pop"
});
And it works fine, it loads the correct page and it even puts the right values on the URL. Unfortunately the pageshow event is not triggered:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
</head>
<body>
<div data-role = "page" data-theme = "d" id = "SearchResults">
<div data-role = "header">
<h1>Aggregator</h1>
</div>
<div data-role = "content">
</div>
</div>
<script type="text/javascript">
$("#SearchResults").on("pageshow",function(event, ui){
console.log(ui.prevPage);
});
</script>
</body>
</html>
The console in always empty when I load this page from the previous one. What is wrong?
Thanks
Solution
Solution is simple, move script block inside a page div. In your case script block is discarded. Basically change it like this:
From :
<body>
<div data-role = "page" data-theme = "d" id = "SearchResults">
<div data-role = "header">
<h1>Aggregator</h1>
</div>
<div data-role = "content">
</div>
</div>
<script type="text/javascript">
$("#SearchResults").on("pageshow",function(event, ui){
console.log(ui.prevPage);
});
</script>
</body>
To :
<body>
<div data-role="page" data-theme="d" id="SearchResults">
<div data-role = "header">
<h1>Aggregator</h1>
</div>
<div data-role = "content">
</div>
<script>
$(document).on("pageshow","#SearchResults",function(event, ui){
console.log(ui.prevPage);
});
</script>
</div>
</body>
Example:
index.html
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<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"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/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>
<script>
$(document).on('click', '#change-page', function(){
$.mobile.changePage("album-search-results.html",{
data:{area:"asda", value:"1"},
transition: "pop"
});
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<a data-role="button" id="change-page">Change Page</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
album-search-results.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
</head>
<body>
<div data-role="page" data-theme="d" id="SearchResults">
<div data-role = "header">
<h1>Aggregator</h1>
</div>
<div data-role = "content">
</div>
<script>
$(document).on("pageshow","#SearchResults",function(event, ui){
console.log(ui.prevPage);
});
</script>
</div>
</body>
</html>
I have a JQuery Mobile application and I seem to have several locations in the app where the JavaScript doesn't execute as expected. In short, I have a "Dashboard" page. If the user hasn't logged in, I use the "changePage" function to send them back to the Login page.
If I attempt to login directly via the Login page, everything works as expected. However, if I am redirected to the Login page from the Dashboard page, I see a JavaScript error that says: "loginButton_Click is not defined". To provide more insight, here is my code:
Dashboard.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/scripts/shared.js"></script>
<script src="/scripts/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="dashboardPage" data-role="page">
<div data-role="header">
<a id="logoutButton" href="#" class="ui-btn-left jqm-home">Logout</a>
<h1>My App</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider"><span id="greeting"></span></li>
</ul><br />
</div>
</div>
</body>
</html>
Shared.js
$("#dashboardPage").live("pagecreate", function () {
});
$("#dashboardPage").live("pagebeforeshow", function () {
});
$("#dashboardPage").live("pageshow", function () {
var user = window.localStorage.getItem("user");
if (user == null) {
$.mobile.changePage("/login.html", { transition: "slide" });
}
});
login.html
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/scripts/shared.js"></script>
<script src="/scripts/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="loginPage" data-role="page">
<div data-role="header"><h1>App Name</h1></div>
<div data-role="content">
<label for="usernameTextBox">Username</label>
<input id="usernameTextBox" type="text" /><br />
<label for="passwordTextBox">Password</label>
<input id="passwordTextBox" type="password" /><br />
<input type="button" value="Login" onclick="return loginButton_Click();" />
</div>
</div>
<script type="text/javascript">
function loginButton_Click() {
$.mobile.changePage("/dashboard.html", { transition: "slide" });
}
</script>
</body>
</html>
I feel like there is something that I don't understand regarding how JavaScript gets into the DOM. What am I doing wrong?
In shared.js add $(...) wrapper:
$(function(){
$("#dashboardPage").live("pagecreate", function () {
});
$("#dashboardPage").live("pagebeforeshow", function () {
});
$("#dashboardPage").live("pageshow", function () {
var user = window.localStorage.getItem("user");
if (user == null) {
$.mobile.changePage("/login.html", { transition: "slide" });
}
});
});