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>
Related
I have a silly problem I think, but I've tried several answers found on the net and nothing works so far.
I'd just like to have an id=modal
Here's the code:
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Le Cabinet</title>
<link rel="shortcut icon" href="img/logo-min.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
<link rel="stylesheet" href="css/style-sheet.css">
<link rel="stylesheet" href="css/mystyles.scss">
</head>
<body>
<main>
<div class="container">
<section class="columns">
<div>
<button onclick="toggleClass()" class="button is-rounded is-info is-hidden-tablet section__btn__info">Plus d’infomartions...</button>
<div id="modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<section class="modal-card-body">
<p class="modal-card-title modal__title"></p>
</section>
</div>
</div>
</div>
</section>
</div>
</main>
</body>
<script type="text/javascript" src="js/burger.js"></script>
</html>
script:
const modal = document.getElementById('modal');
console.log('modal', modal);
function toggleClass() {
modal.classList.toggle('is-active');
}
And modal return null,I can't get the id.
I don't see where you inject/insert your script.
You have to inject/insert your script at the bottom of your body, because when you call document.getElementById if the script is at the top, the html is not load so we can't find your id like :
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- My super html -->
<script src="path/to" type="text/javascript"></script>
</body>
</html>
I have follow this link to create a swipe right function. However, this only work when you swipe right inside the text. How to make the swipe right function triggered when I swipe right at any location of this page. Thanks!
$(document).on("pagecreate","#pageone",function(){
$("p").on("swiperight",function(){
$(this).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>The swiperight Event</h1>
</div>
<div data-role="main" class="ui-content">
<p>If you swipe me in the right direction, I will disappear.</p>
<p>Swipe me in the right direction!</p>
<p>Swipe me in the right direction, too!</p>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
Did you try to set the "swiperight" on #pageone?
$(document).on("pagecreate","#pageone",function(){
$("#pageone").on("swiperight",function(){
$(this).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>The swiperight Event</h1>
</div>
<div data-role="main" class="ui-content">
<p>If you swipe me in the right direction, I will disappear.</p>
<p>Swipe me in the right direction!</p>
<p>Swipe me in the right direction, too!</p>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
use:
$("body").on("swiperight",function(){
console.log('swipe happend, what to do now');
});
$("body").on("swiperight",function(){
console.log('swipe happend, what to do now');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>The swiperight Event</h1>
</div>
<div data-role="main" class="ui-content">
<p>If you swipe me in the right direction, I will disappear.</p>
<p>Swipe me in the right direction!</p>
<p>Swipe me in the right direction, too!</p>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
I found a solution.
$(document).on('swipeleft', 'body', function(event){ });
$(document).on('swiperight', 'body', function(event){ });
I could not get any of the above to work. However, this does
jQuery(function(){
jQuery( "body" ).on( "swipeleft", swipeleftHandler );
jQuery( "body" ).on( "swiperight", swiperightHandler );
function swipeleftHandler( event ){
// do stuff here
}
function swiperightHandler( event ){
// do stuff here
}
});
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'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.
I apologize if you've already seen this. I'm still struggling a bit with this. I just need to modify the function to load only the colTwo div from the link selected on the menu instead of the entire page.
I see the code from the jquery website:
$('#result').load('ajax/test.html #container');
But I don't understand how to make the function do this.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Title</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript" src ='jquery-1.9.1.min.js'></script>
<script type="text/javascript">
$(function(){
$('#menu li a').on('click', function(e){
e.preventDefault();
var page_url=$(this).prop('href');
$('#colTwo').load(page_url);
});
});
</script>
<body>
<div id="header">
<h1>My Title</h1>
</div>
<div id="content">
<div id="colOne">
<div id="menu1">
<ul id="menu">
<li>Members</li>
<li>About</li>
</ul>
</div>
<div class="margin-news">
<h2>Recent Updates</h2>
<p><strong>None At This Time</strong> </p>
</div>
</div>
<div id="colTwo"><h2>Starting Text</h2></div>
<div style="clear: both;"> </div>
</div>
</body>
</html>
Kevin B is correct:
$('#colTwo').load(page_url + ' #colTwo');
Just add the selector as a string to the URL, and don't forget the space!