I'm currently using the following code to pass parameters from my main page to a popup in jquery mobile:
<a onclick= DisplayEditIdPopUP('" . $row ['IdentificationTypeID'] ."','".$custid."','". $num."','".$row ['CustomerIdentificationId']."')>Edit</a>
however, Ive setup a zoom plugin which seems to break my on click. Is there a way to pass parameters through a regular anchor tag, without using the on click event? As calling the popup using the following code works, but obviously doesn't pass any parameters at the moment?
<a href='#addCustId' data-rel='popup' data-position-to='window' data-transition='pop' class='ui-btn ui-btn-c' >New</a>
Thanks
Several solutions exist:
Solution 1:
You can pass values with changePage:
$.mobile.changePage('page2.html', { dataUrl : "page2.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : true, changeHash : true });
And read them like this:
$(document).on('pagebeforeshow', "#index", function (event, data) {
var parameters = $(this).data("url").split("?")[1];;
parameter = parameters.replace("parameter=","");
alert(parameter);
});
Example:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>
</title>
<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('pagebeforeshow', "#index",function () {
$(document).on('click', "#changePage",function () {
$.mobile.changePage('second.html', { dataUrl : "second.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : false, changeHash : true });
});
});
$(document).on('pagebeforeshow', "#second",function () {
var parameters = $(this).data("url").split("?")[1];;
parameter = parameters.replace("parameter=","");
alert(parameter);
});
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="index">
<div data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content">
<a data-role="button" id="changePage">Test</a>
</div> <!--content-->
</div><!--page-->
</body>
</html>
second.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>
</title>
<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>
</head>
<body>
<!-- Home -->
<div data-role="page" id="second">
<div data-role="header">
<h3>
Second Page
</h3>
</div>
<div data-role="content">
</div> <!--content-->
</div><!--page-->
</body>
</html>
Solution 2:
Or you can create a persistent javascript object for a storage purpose. As long ajax is used for page loading (and page is not reloaded in any way) that object will stay active.
var storeObject = {
firstname : '',
lastname : ''
}
Example: http://jsfiddle.net/Gajotres/9KKbx/
Solution 3:
You can also access data from the previous page like this:
$(document).on('pagebeforeshow', '#index',function (e, data) {
alert(data.prevPage.attr('id'));
});
prevPage object holds a complete previous page.
Solution 4:
As a last solution we have a nifty HTML implementation of localStorage. It only works with HTML5 browsers (including Android and iOS browsers) but all stored data is persistent through page refresh.
if(typeof(Storage)!=="undefined") {
localStorage.firstname="Dragan";
localStorage.lastname="Gaic";
}
Example: http://jsfiddle.net/Gajotres/J9NTr/
Find more about them here.
Related
I wan't to use Framework7 without ReactJS or Vue. I wanna use pure JS. But when I try to show a dialog, I get a console error:
Uncaught TypeError: n is undefined
Thats my JavaScript code
var app = new Framework7({
root: '#app',
name: 'My App',
theme: 'ios',
domCache: true
});
var mainView = app.views.create('.view-main');
$('.open-alert').on('click', function () {
window.app.dialog.alert('Oops! Testing alert.');
});
and that is the HTML Part:
<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#2196f3">
<meta name="viewport" content="width=device-width, initial-rotate=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="https://v5.framework7.io/packages/core/css/framework7.bundle.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="phone">
<div id="app">
<div class="statusbar"></div>
<div class="view view-main">
<div data-name="home" class="page">
<button class="col button button-fill open-alert">Alert</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://v5.framework7.io/packages/core/js/framework7.bundle.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
I searched for some examples, but nothing are work. Maybee I need to add something more?
im trying to make a script that load content from a web service when user scroll to the bottom of the page this is my JS code :
var serviceURL = "http://projects.dev/work/";
var current_page = 1;
var total_pages = 1;
$(function() {
Init();
});
function Init() {
getPosts();
$(window).scroll(function(){
if((($(window).scrollTop()+$(window).height())+20)>=$(document).height()){
if(current_page <= total_pages){
getPosts();
}
}
});
}
function getPosts(){
$.ajax({
url:serviceURL+"api/posts?page="+current_page,
dataType: "json",
async : false,
cache : false,
}).then( function(data){
total_pages = data.last_page;
$.each(data.data, function(index, post) {
$('#newsList').append("<li>"+
"<aside><img src='"+serviceURL+"cdn/"+post.picture+"'></aside>"+
"<div>"+
"<a href='post.html?id="+post.id+"'><h3>"+post.title+"</h3></a>"+
"<h4>"+post.created_at.split(" ")[0]+"</h4>"+
"</div>"+
"</li>");
});
$("#loading").hide("slow");
current_page++;
});
}
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="loading"><div id="loading-spin"></div></div>
<header><div id="brand">News</div>
</header>
<article style="width:100%;margin:0 !important;padding-right:0 !important;padding-left:0 !important;">
<ul id="newsList"></ul>
</article>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/posts.js"></script>
</body>
</html>
can you tell me whats wrong ? i can get only posts from the first time and then nothing happen when i scroll to the bottom of the page .
PS : i have a lot of posts , and the last_page variable is the total of pages i have on my DB .
i fixed it , i had to remove overflow:hidden from the container .
thanks .
My phonegap project is having multiple html's(more than 4) with some single-paged and multi-paged.
When I move around pages, sometimes javascript breaks. maybe I am linking pages wrong... i've been googling..and got so many different answers.
some say to include all the same heads' because .js won't load by ajax-type page loads
some talk about app.initialize(); some talk about 'pageinit'. some recommends to use onload(); in body tag. some say pageshow: function(){}.
some talk about .Deferred()/ $.when(deviceReadyDeferred,jqmReadyDeferred).then(doWhenBothFrameworksLoaded);
so many ways to initialize!
WHAT IS THE BEST PRACTICE IN INCLUDING JS FILES?
Also, there are so many ways to link pages.
i guess if an anchor leads to multi-paged html, use data-rel='external' is good practice. but some say data-dom-cache="true". some say $.mobile.changePage();
WHAT IS THE BEST PRACTICE IN LINKING PAGES?
from single-paged .html --> multi-paged .html
from multi-paged .html --> single-paged .html
from single-paged .html --> single-paged .html
from multi-paged .html --> multi-paged .html
can you give me a good foundation tutorial? or links to one of them?
thank you in advance.
You can try my method.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Include the compiled Ratchet CSS -->
<link href="css/ratchet.css" rel="stylesheet">
<script src="cordova.js" type="text/javascript"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/ratchet.js"></script>
<script src="js/main.js"></script>
</head>
<body onload="init()">
</body>
</html>
main.js
var pagesHistory = [];
var currentPage = {};
var path = "";
function init(){
$("body").load(path + "pages/ListPage.html", function(){
$.getScript(path + "js/ListPage.js", function() {
if (currentPage.init) {
currentPage.init();
}
});
});
}
ListPage.js
currentPage = {};
currentPage.init = function(){
console.log("ListPage :: init");
};
currentPage.loadPage = function(pageIndex){
console.log("ListPage :: loadPage :: pageIndex: " + pageIndex);
$("body").load(path + "pages/" + pageIndex + ".html");
$.getScript(path + "js/" + pageIndex +".js", function() {
if (currentPage.init) {
currentPage.init();
}
});
};
ListPage.html
<script>
$.getScript(path + "js/ListPage.js");
</script>
<header class="bar bar-nav">
<button id="LoadAddButton" class="btn pull-right" onclick="currentPage.loadPage('AddPage');">Load Add.html</button>
<h1 class="title">ListPage</h1>
</header>
<div class="content">
<div class="content-padded">
<button id="LoadDetailButton" class="btn btn-positive btn-block" onclick="currentPage.loadPage('DetailPage');">Load Detail.html</button>
</div>
</div>
Let me know if you need more clarification about this navigation.
Reference: http://blog.revivalx.com/2014/07/15/simple-hybrid-mobile-app-using-cordova-and-ratchet-2-complete/
Not important when you load your pages. Because all of your html files are included your app package.
I've used jQuery Mobile like the following;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="css/jquery.css">
<script src="js/dependencies/jquery.js"></script>
<script src="js/dependencies/jquery.mobile.js"></script>
<script src="js/dependencies/ejs.js"></script>
</head>
<body>
<div data-role="page" id="page-homepage" class="my-page" data-theme="b">
<div data-role="header" class="div-header">
// some header contents
</div>
<div role="main" class="ui-content">
// some contents
</div>
</div>
.
.
<div data-role="page" id="page-login" class="my-page" data-theme="b">
<div role="main" class="ui-content">
// login contents
</div>
</div>
.
.
<script>
/* jQuery Mobile pagecontainer change function's options */
var changePageOptions = {
transition: 'none',
changeHash: true,
reverse: true,
showLoadMsg: true
};
$("#btn-page-login").on("tap", function() {
$(':mobile-pagecontainer').pagecontainer('change', '#page-login', changePageOptions);
});
</script>
</body>
</html>
What is the right way to pass parameters between pages in jquery mobile. In Q&A of jquery mobile, there is some suggestion for plugin. Is it mandatory? Please let me know the correct way. There is no one concrete answer. I have to pass parameters for all links in my page.
http://view.jquerymobile.com/master/demos/faq/pass-query-params-to-page.php
Data/Parameters manipulation between page transitions
It is possible to send a parameter/s from one page to another during page transition. It can be done in few ways.
Reference: https://stackoverflow.com/a/13932240/1848600
Solution 1:
You can pass values with changePage:
$.mobile.changePage('page2.html', { dataUrl : "page2.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : true, changeHash : true });
And read them like this:
$(document).on('pagebeforeshow', "#index", function (event, data) {
var parameters = $(this).data("url").split("?")[1];;
parameter = parameters.replace("parameter=","");
alert(parameter);
});
[Example][3]:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>
</title>
<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('pagebeforeshow', "#index",function () {
$(document).on('click', "#changePage",function () {
$.mobile.changePage('second.html', { dataUrl : "second.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : false, changeHash : true });
});
});
$(document).on('pagebeforeshow', "#second",function () {
var parameters = $(this).data("url").split("?")[1];;
parameter = parameters.replace("parameter=","");
alert(parameter);
});
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="index">
<div data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content">
<a data-role="button" id="changePage">Test</a>
</div> <!--content-->
</div><!--page-->
</body>
</html>
second.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>
</title>
<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>
</head>
<body>
<!-- Home -->
<div data-role="page" id="second">
<div data-role="header">
<h3>
Second Page
</h3>
</div>
<div data-role="content">
</div> <!--content-->
</div><!--page-->
</body>
</html>
Solution 2:
Or you can create a persistent javascript object for a storage purpose. As long ajax is used for page loading (and page is not reloaded in any way) that object will stay active.
var storeObject = {
firstname : '',
lastname : ''
}
Example: http://jsfiddle.net/Gajotres/9KKbx/
Solution 3:
You can also access data from the previous page like this:
$('#index').live('pagebeforeshow', function (e, data) {
alert(data.prevPage.attr('id'));
});
prevPage object holds a complete previous page.
Solution 4:
As a last solution we have a nifty HTML implementation of localStorage. It only works with HTML5 browsers (including Android and iOS browsers) but all stored data is persistent through page refresh.
if(typeof(Storage)!=="undefined") {
localStorage.firstname="Dragan";
localStorage.lastname="Gaic";
}
Example: http://jsfiddle.net/Gajotres/J9NTr/
More info
If you want to learn more about this topic take a look at this article. You will find several solutions with examples.
You can also use it with external relations in links (for me and my purpose its easier), so I wanted to share this:
HTML:
Structure
JS:
$( document ).on( "pageinit", "#page1", function( event ) {
var parameters = $(this).data("url").split("?")[1];
parameter = parameters.replace("structure=","");
alert(parameter);
});
In my case, the structure='123' is created dynamically, nobody writes a fixed value '123' for dynamic purposes :-)
Thanks for the URL-splitting of the above post (pls. favor his post), this is just an addition / further explanation.
I have a two page application, that I need to show some results.
The fist page
<div data-role="content">
<!-- content -->
<form>
<label for="search-1">Search:</label>
<input name="search-1" id="search-1" value="" type="search">
</form>
has a form with input type search. How can I take the value of this search input, and pass it to a second jQuery Mobile page in a separate html file, so I can using the value fetch data using web-service and using a list to represent the data.
Second page
<div data-role="content" id="content">
<ul data-role="listview" data-inset="true" id="bookListThumbs">
//data to be added here....
</ul>
</div><!-- /content -->
Solution
It is possible to send a parameter/s from one page to another during page transition. It can be done like this:
You can pass values with changePage:
$.mobile.changePage('page2.html', { dataUrl : "page2.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : true, changeHash : true });
And read them like this:
$(document).on('pagebeforeshow', "#index", function (event, data) {
var parameters = $(this).data("url").split("?")[1];;
parameter = parameters.replace("parameter=","");
alert(parameter);
});
Example:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>
</title>
<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('pagebeforeshow', "#index",function () {
$(document).on('click', "#changePage",function () {
if($('#search-1').val().length > 0){
$.mobile.changePage('second.html', { dataUrl : "second.html", data : { 'input' : $('#search-1').val()}, reloadPage : false, changeHash : true });
} else {
alert('Search input is empty!');
}
});
});
$(document).on('pageshow', "#second",function () {
var parameters = $(this).data("url").split("?")[1];;
parameter = parameters.replace("input=","");
alert(parameter);
});
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="index">
<div data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content">
<form>
<label for="search-1">Search:</label>
<input name="search-1" id="search-1" value="" type="search">
<a data-role="button" id="changePage">Send data to other page</a>
</form>
</div> <!--content-->
</div><!--page-->
</body>
</html>
second.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>
</title>
<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>
</head>
<body>
<!-- Home -->
<div data-role="page" id="second">
<div data-role="header">
<h3>
Second Page
</h3>
</div>
<div data-role="content">
</div> <!--content-->
</div><!--page-->
</body>
</html>