I'm new to Jquery Mobile and I've tried everything to solve this issue. I have the first page which is index.php, this page loads buttons from a js that gets the information from json.
The second page (FichaTecnica.php) shows the information of that wine (everithing is in spanish, sorry). The problem is that I have to refresh the page in the browser to load the information and if I go back to the first page I also have to refresh to load the buttons.
Any help would be appreciated.
Thanks.
Index.php
<div data-role="page" id="main">
<div data-role="header">
<h1>
Page 1
</h1>
</div>
<div data-role="content">
<div>
<img src="images/Vinos separador [Negro].png" />
</div>
<div data-role="controlgroup" data-role="controlgroup" id="buttonGroup">
</div>
<div>
<img src="images/P Venta Separador [Negro].png" />
</div>
<div data-role="controlgroup" data-role="controlgroup" id="buttonGrouploc">
</div>
</div>
<div data-role="footer">
</div>
</div>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script src="js/variedadeslist.js"></script>
Js File that loads the buttons in first page
var url="http://localhost/CavaOnline/json_variedades.php";
var buttonHtmlString = "", pageHtmlString = "";
var jsonResults;
$.getJSON(url,function(data){
jsonResults = data.items;
displayResults();
});
function displayResults() {
for (i = 0; i < jsonResults.length; i++) {
buttonHtmlString += '<a data-transition="slide" href="FichaTecnica.php?id=' + jsonResults[i].id + '" id="'+ jsonResults[i].id +'" data-role="button">' + jsonResults[i].nombre + '</a>';
}
$("#buttonGroup").append(buttonHtmlString);
$("#buttonGroup a").button();
}
Second Page "FichaTecnica.php"
<div data-role="page" id="pagina2">
<div data-role="header">
<h1>
Header
</h1>
</div>
<div data-role="content">
<div>
<div data-role="collapsible" data-collapsed="false">
<h1>El Vino</h1>
<div id="descripcion">
</div>
</div>
<div data-role="collapsible" data-collapsed="false">
<h1>Cata</h1>
<div id="cata">
</div>
</div>
</div>
<a data-role="button" id="botonMarcas"></a>
</div>
<div data-role="footer">
<h1>
footer
</h1>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script src="js/descripcionlist.js"></script>
Js that loads the information in the second page
$('#pagina2').live('pageinit',function(event){
var id = getUrlVars()["id"];
$.getJSON('http://localhost/CavaOnline/json_variedades.php?id='+id, function(variedades) {
$.each(variedades, function(index, variedad) {
$('#descripcion').append('<p>'+variedad[id - 1].descripcion+'</p>');
$('#cata').append('<p>'+variedad[id - 1].cata+'</p>');
$('#botonMarcas').append().attr("href", 'FichaTecnica.php?id=' + variedad[id - 1].id);
});
});
function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
It would be better to have your pageinit code wired up before you bring in the page. Therefore, make sure you include the JS as part of your first page.
Wire up the paginit, like so:
$(document).on('pageinit', '#pagina2', function(e) {
/* TODO: Page 2 init code */
});
Your initial page is not loading correctly because you're building the page incorrectly (by including the JS at the bottom after the other elements load). Therefore, the JavaScript only takes effect after the page is refreshed since at that point the JS already exists in the DOM.
Here's the basic page markup:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-rc.2/jquery.mobile-1.2.0-rc.2.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-rc.2/jquery.mobile-1.2.0-rc.2.min.js"></script>
</head>
<body>
...content goes here...
</body>
</html>
Also, if you're including any custom JS that will alter the page (like your pageint) they should be loaded AFTER jQuery is loaded, but BEFORE jQuery Mobile is loaded (so insert that JS file between the two in the head).
I've had similar problems and just fixed them by adding data-ajax=false in the link.
ref: http://api.jquerymobile.com/pagecontainer/
Related
I have a div that serves of container for a css animation that appears over the entire website's home page... a text and background that opens like curtains, revealing the website under it. It's like an intro landing page. The thing is I need it to appear only on first page load. I don't want it to appear on page refresh or if someone navigates thru the site and comes back to home page.
Can someone please show me how I would have to code this because I've search a lot on the web and didn't find any clear explanations for my particular case.
Here is the code for the div:
<div id="landContainer">
<div class="left-half" id="leftP"><article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article></div>
<div class="right-half" id="RightP"><article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article></div>
</div>
So the div I must display only on first page load would be the one with the ID landContainer, that contains a couple of other divs.
Since I'm new to this type of coding, I would need a complete example of the code I need to use with my div.
For Ian... here is the content of my index.html file...
<!DOCTYPE html>
<html>
<head>
<title>Landing page v2</title>
<link rel="stylesheet" type="text/css" href="landing.css" media="screen" />
</head>
<body>
<div id="landContainer">
<div class="left-half" id="leftP">
<article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article>
</div>
<div class="right-half" id="RightP">
<article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article>
</div>
</div>
<script type="text/javascript" src="scripts/snap.svg-min.js"></script>
<script scr="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var isExists = localStorage.getItem("pageloadcount");
if (isExists != 'undefined') { $("#landContainer").hide();
}
localStorage.setItem("pageloadcount", "1");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Landing page v2</title>
<link rel="stylesheet" type="text/css" href="landing.css" media="screen" />
<script type="text/javascript" src="scripts/snap.svg-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
if (localStorage.getItem("pageloadcount")) { $("#landContainer").hide();
}
localStorage.setItem("pageloadcount", "1");
});
</script>
</head>
<body>
<div id="landContainer">
<div class="left-half" id="leftP">
<article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article>
</div>
<div class="right-half" id="RightP">
<article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article>
</div>
</div>
</body>
</html>
The best way is to use session through which you can determine if its a new request or old.
Server side session will be best here
$( document ).ready(function() {
var isExists = localStorage.getItem("pageloadcount");
if (isExists != 'undefined') { $("#landContainer").hide();
}
localStorage.setItem("pageloadcount", "1");
});
<div id="landContainer">
<div class="left-half" id="leftP">
<article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article>
</div>
<div class="right-half" id="RightP">
<article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article>
</div>
</div>
So I hope I'm asking this correctly.
I have content from a php file being loaded into an html page. The php file contains the info for a collapsible set. The popup does not work for the data sent back from the php file once i change the html of the popup div.
Is this because the content did not exist when the page was initially loaded? If this is the case, how do I go about loading this content. I'm really trying to keep the php off the main html pages if at all possible. Although I'm starting to realize this may not be possible. Any help with this would be greatly appreciated.
Here's my html page (this page is loaded after an initializing page is submitted)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>theClipboard: Count</title>
<link rel="stylesheet" href="../inc/stylez.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"/>
</head>
<body>
<div id="container">
<div data-role="page" data-theme="b" id="countStartedPage">
<div data-role="header" data-position="fixed" class="ui-grid-c">
<div class="ui-block-a">
<a href="#categoryMenu" data-rel="popup" data-transition="slidedown"
class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a">category</a>
<div id="loadCatMenuHere">
<!--<div id="categoryMenu" data-role="popup" data-theme="b">
<p>is it working</p>
</div>-->
</div>
</div>
<div class="ui-block-b">
<p>location menu</p>
</div>
<div class="ui-block-c">
Go Back
</div>
<div class="ui-block-d">
<p>validate counts</p>
</div>
</div>
<div data-role="main" id="countPageContent">
<h3> content goes here</h3>
</div>
<div data-role="footer" data-position="fixed">
<p class="centerText">copyright 2016 tosco(rs)2 all rights reserved</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<!--
<script src="countJS.js"></script>
-->
<script>
$(document).ready(function(){
console.log("page 2 loaded");
getCategoryMenu();
function getCategoryMenu() {
var getCatMenu = $.post('categoryMenu.php');
getCatMenu.done(function (data) {
console.log("received cat menu #categoryMenu.html: " + $('#categoryMenu').html());
$('#loadCatMenuHere').html(data);
console.log("#category menu data: " + data);
});
getCatMenu.fail(function (data) {
console.log("failed at getting cat menu:");
});
}
})
</script>
</body>
</html>
here's my php file i'm pulling from
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"/>
<?php
include("../inc/connect.php");
session_start();
$buildFamMenu = $conn->prepare("select familyName from familyTbl order by familyPriority");
$buildFamMenu->execute();
$buildFamMenu->store_result();
$buildFamMenu->bind_result($family);
$buildCatMenu = $conn->prepare("select categoryID, categoryName from categoryTbl where family = ? order by categoryPriority");
$buildCatMenu->bind_param("s", $family);
$buildCatMenu->execute();
$buildCatMenu->store_result();
$buildCatMenu->bind_result($categoryID, $categoryName);
echo "<div id='categoryMenu' data-role='popup' data-theme='b'>";
echo "<div data-role='collapsibleset'>";
while ($buildFamMenu->fetch()) {
echo "<div data-role='collapsible'>
<h3>" .$family ."</h3>
<ul><li>test</li><li>test2</li><li>test3</li></ul>
</div>";
}
echo "</div></div>";
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
I believe that this may be due to the document object you're trying to reference not yet being loaded at the time of your reference.
I would wrap the $.post in a protective 'if != undefined' block with an else statement that recalls the function after an interval.
(some pseudo code):
if (myDiv is not undefined) { do stuff } else
{ setInterval(thisSameFunction, 2000); }
I am building an e-commerce site. Right now it's basically one HTML page that filters in based on page loads and clicks. I did it this because the entire site needed to be dynamic, as I'll be tying in a show shortly.
Everything seems to work fine now that I have placed the script on the actual pages instead of in a main .js file. I get a few hiccups here and there, and I'm hoping this issue will help fix some of them.
Sometimes when I click on the view cart button it throws back a type error saying that $a.mobile.document.on is not a function. This doesn't happen all the time. I can just click the button with the shopping cart open and the cart just refreshes. As I am clicking the button, nothing in the code should be changing, everything should be flowing the exact same. Why do I get the error sometimes? There is no pattern as to how often the error occurs (i.e. every 3rd click, etc...)
My code:
<head>
<meta charset="UTF-8"/>
<title>DATique</title>
<link rel="stylesheet" href="styles.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="lib/jqm-icon-pack-fa.css">
<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 id="container" data-role="page" data-theme="b">
<div id="header" data-role="header">
<div id="headerGraphic"><img class="menu" src="img/products/DATique.png" alt="" align=center></div>
<!-- todo add tagline back in -->
<div data-role="footer" id="headerTagLine">an adult novelty company</div>
</div>
<div id="mainNavBar">
<div id="mainNav" data-role="navbar">
<ul>
<li class="home ui-icon-home">Home</li>
<li class="about ui-icon-question-circle">About</li>
<li class="contact ui-icon-envelope">Contact</li>
<li class="request ui-icon-lightbulb-o">Requests</li>
<li class="find ui-icon-location-arrow">Find</li>
</ul>
</div>
</div>
<div id="content" data-role="main">
<!-- todo add facebook plugin -->
<div id="sideBar">
<div id="sideNav">
<script>
</script>
</div>
</div>
<div id="productWindow">
<script>
</script>
</div>
</div>
<div data-role="footer" id="footer">
<ul>
<li id="addingItem"></li>
<li id="cartHolder">
<div class="view">View Cart</div>
<div class="cartImg"><img src="lib/png/shopping-cart.png"></div>
<div class="badge ui-corner-all"></div>
</li>
</ul>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var initialLoad = $.post('lib/aboutUs.php');
initialLoad.done(function (data) {
$('#productWindow').html(data);
});
var sideBar = $.post('lib/sideNav.php');
sideBar.done(function (data) {
$('#sideNav').html(data);
});
$('#cartHolder').unbind().click(function (data) {
var url = 'lib/cart.php';
var getCart = $.post(url);
console.log(data);
getCart.done(function (data) {
$('#content').html(data);
});
getCart.fail(function (data) {
console.log(data);
});
});
})
</script>
</body>
Here's my cart.php. The only file affected by the click event is the show cart button.
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<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>
<?php
session_start();
#$_SESSION = array();
$items = $_SESSION;
echo "<div id='showCart' class='ui-corner-all' style='max-width:400px;'>
<div data-role='header' data-theme='a' class='ui-corner-all' style='margin-top:20px;'>
<h1>Your Cart</h1>
</div>
<div role='main' class='ui-content ui-corner-all'>
<ul data-role='listview' data-split-icon='delete' data-split-theme='d'>";
foreach ($items['cart'] as $list) {
echo "<li ><a href='#'>
<img src = 'img/products/" . $list['itemNum'] . ".png'>
<h3 > " . $list['itemName'] . " </h3 >
<h1 style='text-align:right'> " . $list['price'] . "
</h1 ></a>
<a href='#' class='removeItem' name='" . $list['itemNum'] . "'>Remove Item</a>
</li >";
}
echo "</ul>
</div>
</div>"
?>
<script>
$(document).ready(function() {
console.log ("error ready");
function showCart() {
console.log("showCart Function");
var url = 'lib/cart.php';
var getCart = $.post(url);
getCart.done(function (data) {
console.log("cart received");
$('#content').html(data);
});
}
$('.removeItem').unbind().click(function () {
console.log("remove clicked");
var itemNum = {'itemNum': ($(this).attr('name'))};
var sent = $.post("lib/removeFromCart.php", itemNum);
sent.done(function () {
console.log("item removed from cart");
showCart();
});
});
});
</script>
I also have 2 other pages that have script on them that are loaded onto the home page by $.post.
Sorry if this question is easy, I just hope it isn't a period or brace somewhere. It's almost always a period or a brace. Again, looking to see if someone can tell me why this sometimes throws an error when I hit the view cart button. It seems to be doing it right after the console.log call in the cart.php.
Just a note not an answer
i had all my javascript in a myScript.js file that loaded at the bottom of the html of the main page. but none of the other pages with scipts would read the javascript on the main page for some reason until i loaded the .js file into each page.
$(document).ready(function() {
code 1
....});
$(document).ready(function() {
code 2
....});
code 1 is not able to access code 2 and vice versa, in php this is akin to this
function one(){
code 1
}
function too(){
code 2
}
One way around that is to globalize stuff, by using window. although it's not usually recommended.
var one;
var window.one;
for example( scope resolution ). Other ways involve using the DOM, by attaching to a object on the page, such as how a plugin works. for example using $(element).data('mydata', {foo:'bar'});
not sure if this was what you were saying but the explanation is way to long for a comment.
Is there any method to call/show Dialog or popup before page load using jquery Mobile?
I want to get some input before page load and according to that input next page will be loaded
To load a dialog or a popup before showing a page, you need to use seTimeout. if you call it without a delay, it will open and close at once.
$(document).on('pagebeforeshow', '#pageID', function() {
setTimeout(function () {
$('#popupID').popup('open');
}, 100); // delay above zero
});
Similar issue.
There's a very simple solution to your question, only thing you need to do is make your first page to be a dialog.
Working example: http://jsfiddle.net/Gajotres/dj3UP/1/
As you can see it in my example this is a pure HTML solution. First page data-role attribute was changed to dialog.
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://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="dialog" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content">
<input type="text" value="" id="some-input"/>
<a data-role="button" id="some-button" href="#second">Next page</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second">
<div data-theme="a" data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Try Following:
$.mobile.loading( 'show', {
text: 'foo',
textVisible: true,
theme: 'z',
html: ""
});
Refere Link:
http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html
Edit: I see the issue is with using live instead of on. I fixed that however, can't get the second timer to fire..
Error: Object [object Object] has no method "popup"
I am trying to implement a client side session time out using jquery mobile. My code is at: http://jsfiddle.net/83BSW/5
Appreciate any insights..
Here is the code for convenience:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<!-- Application specific -->
<script>
var first_timer = 2 * 1000;
var second_timer = 3 * 1000;
var down = -1;
function initTimer() {
down = setTimeout(processTimeout, first_timer)
}
function processTimeout() {
down = setTimeout(logout, second_timer);
$.mobile.changePage('#timeout1',{transition:'slide', role:'dialog'});
//alert ("Timeout of first timer, timerid:" + down );
}
function logout() {
$("#timeout").popup('close');
$.mobile.changePage('#timeout2',{transition:'slide', role:'dialog'});
alert("You are logged out");
// window.location = "http://www.google.com"
}
function resetMyTimer() {
if ( -1 != down )
clearTimeout(down);
alert("Restarting timer");
initTimer();
}
$("#loadingpage").on(function() {
resetMyTimer();
});
initTimer();
</script>
</head>
<body>
<div data-role="page" id="loadingpage">
<div data-role="header" data-position="fixed">
<div class="headerlogo"> </div>
<h1> Test </h1>
</div>
<div data-role="content" >
<div id="ssagov">
<h1> Hi there </h1>
</div>
<input type="button" data-shadow="false" data-corners="false" value="Next" />
</div><!-- /content -->
</div><!-- /launch page -->
<div data-role="page" id="timeout1" data-role="popup">
<div data-role="header" data-backbtn="false">
<h1>Timeout1</h1>
</div>
<div data-role="content">
Your session will timeout in 2 mins.
</div>
</div>
<div data-role="page" id="timeout2" data-role="popup">
<div data-role="header" data-backbtn="false">
<h1>Timeout2</h1>
</div>
<div data-role="content">
Your session has timed out
</div>
</div>
</body>
</html>
Finally I fixed the issue, instead of popup, I should be using dialog. Here is the working version: http://jsfiddle.net/83BSW/6