Is it possible to have different loading message on a given page in jQuery Mobile?
I'm using mobile.loadingMessage and I also tried mobile.showPageLoadingMsg but I couldn't find the answer for this.
Below is what I have for the message to show up across the app:
$(document).bind('mobileinit',function(){
$.extend($.mobile, {
loadingMessage: "We're processing your request. We won't be long. Just Like Great Food, a good hotspot takes time to (find) prepare for you....",
pageLoadErrorMessage: 'Sorry, there was an error while loading!',
});
$.mobile.page.prototype.options.addBackBtn = true;
});
You can listen for pageshow event and set the loading message specific to that page.
Sample code:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Sample</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="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$("#page1").live("pageshow",function(){
$.mobile.loadingMessage = "Loading message for page1";
});
$("#page2").live("pageshow",function(){
$.mobile.loadingMessage = "Loading message for page2";
});
$(".showBtn").live("click",function(){
$.mobile.showPageLoadingMsg();
setTimeout(function(){$.mobile.hidePageLoadingMsg()},2000);
});
</script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page1</h1>
</div><!-- /header -->
<div data-role="content">
<a data-role="button" class="showBtn">Show loading message</a>
<a data-role="button" href="#page2">Go to page 2</a>
</div>
</div><!-- /page -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page2</h1>
</div><!-- /header -->
<div data-role="content">
<a data-role="button" class="showBtn">Show loading message</a>
<a data-role="button" href="#page1">Go to page 1</a>
</div>
</div>
</body>
</html>
A demo here - http://jsfiddle.net/SugTr/
Edit - An alternate version that uses a single pageshow listener for all pages and targets each page using switch statements - http://jsfiddle.net/SugTr/1/
Edit 2 -The loading message will be shown by the jqm framework,only if you are trying to load a page which has been created as a separate html file.If you have all your data-role="page" divs within a single page,that means jqm framework will not show any loading message.However you can manually show it in the pagebeforeshow handler using $.mobile.showPageLoadingMsg() and hide in the pageshow handler using $.mobile.hidePageLoadingMsg().But this does not make any noticeable change because the time duration for which the message stays on screen will be negligible.
Now coming to the case where actually a page loading message is being shown(you are loading a separate html),you can have specific loading messages by setting the $.mobile.loadingMessage just before the page is being loaded.
The anchor tag can be something like this
<a data-role="button" id="gotopage2" href="#'>Go to page 2</a>
and the corresponding script of this form
$("gotopage2).live("click",function(){
$.mobile.loadingMessage = "Loading message for page1";
$.mobile.changePage("page2.html");
});
Let me know if that helps.
This is my alternative method of page loading message using simple javascript and html elements.
My Blog:
http://aspnetsample.blogspot.in/2012/09/page-loading-message-javascript-main.html
You can visit my blog for the full article.
Sample Code Here:
$function getpage(val)
{
hideFrame();
var mframe;
mframe=document.getElementById("MyFrame");
mframe.src=val;
mframe.onload=function()
{
document.getElementById("MyFrame").style.display="block";
document.getElementById("loadingDiv").style.display="none";
}
}
function hideFrame()
{
document.getElementById("MyFrame").style.display="none";
document.getElementById("loadingDiv").style.display="block";
}
function showFrame()
{
document.getElementById("MyFrame").style.display="block";
document.getElementById("loadingDiv").style.display="none";
}
function showdiv()
{
document.getElementById("loadingDiv").style.display="block";
}
function changeHome(val)
{
window.location=val;
}
$ <table>
<tr>
<td>
<div class="menu_div" onclick="getpage('http://www.aspnetsample.blogspot.in')">
Page1
</div>
</td>
<td>
<div class="menu_div" onclick="getpage('http://www.w3schools.com/css/default.asp')">
Page2
</div>
</td>
<td>
<div class="menu_div" onclick="getpage('page2.aspx')">
Page3
</div>
</td>
<td>
<div class="menu_div" onclick="changeHome('page3.aspx')">
Page4
</div>
</td>
</tr>
</table>
$ <iframe class="iframe" id="MyFrame" src="http://www.w3schools.com" onprerender="javascript:showdiv()"
onload="javascript:showFrame()" style="display: none;"></iframe>
<div id="loadingDiv" class="loadingDiv">
<table style="width: 100%; height: 100%;">
<tr>
<td align="center" valign="middle">
Page is Loading...
</td>
</tr>
</table>
</div>
You have to remove that $ symbol while implementation.
To get the complete code visit my Blog
Related
I have a button 'Generate PDF', and I want it to save some div elements as a PDF file. From what I read, I best use JavaScript, but I have zero experience with JS.
I already tried third party solutions like html2pdf, pdfmyurl, jsPDF, etc., but I didn't manage to get it to work like I want it.
This is the structure of the HTML file:
<!DOCTYPE html>
<html>
<head>
<title>This is my title</title>
</head>
<body>
<!-- HEADER -->
<div class="header">
<img src="../logo/logo_17.png" width="320" height="100" />
</div>
<!-- MENU -->
<div class="topnav" id="myTopnav">
Menu...
</div>
<!-- KOLOMMEN -->
<div class="row">
<!-- LINKSE KOLOM -->
<div class="prodtitle" id="htmlContent1">Title</div>
<div class="prodbuttons">
<a class="h2button" href="#">BACK TO LIST</a>
<button id="generatePDF" class="h2button">generate PDF</button>
</div>
<div class="prodinfotitle">Info/Description</div>
<div class="prodinfo" id="htmlContent2">
...some text
</div>
<div class="prodmaterialstitle">Materials/Ingredients</div>
<div class="prodmaterials">
...some text
</div>
<div class="gallery">
...image 1 (if available)
</div>
<div class="gallery">
...image 2 (if available)
</div>
<!-- RECHTSE KOLOM -->
<div class="side">
...
</div>
</div>
<!-- FOOTER -->
<div class="footer">
...footer
</div>
</body>
</html>
Now this is what I'm looking for:
When you click the 'Generate PDF' button, a PDF file should be created with the following div's: 'header', followed by the 'prodtitle' and then followed by 'prodinfotitle', 'prodinfo', 'prodmaterialstitle', 'prodmaterials' and the picture(s), if they're available.
The PDF should then be saved as '[prodtitle].pdf', so that every file has the right title.
Can somebody help me with this piece of code and how to set it up?
Thanks very very much!
Update:
Something I tried with my zero experience was this:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<script type="text/javascript">
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#generatePDF').click(function () {
doc.fromHTML($('#htmlContent1').html(), 15, 15, {
'width': 700,
'elementHandlers': specialElementHandlers
});
doc.fromHTML($('#htmlContent2').html(), 15, 15, {
'width': 700,
'elementHandlers': specialElementHandlers
});
doc.save('sample_file.pdf');
});
</script>
It didn't work because I got an empty pdf. I don't even know if the code is correct.
The danger from cut and paste any old code is it is usually OLD see stackoverflow.com/questions/65177003/… so your script works to build a fresh pdf well but it is not the content on the page just some new overwrite.
Simpler to stick with the HTML you have written before using hybrid methods.
So simply you need to exclude some content for print to pdf but retain the top and bottom.
You need to adapt the button so I suggest along the lines of
<div id="NoPrint">
<!-- MENU -->
<div class="topnav" id="myTopnav">
Menu...
</div>
<!-- KOLOMMEN -->
<div class="row">
<!-- LINKSE KOLOM -->
<div class="prodtitle" id="htmlContent1">Title</div>
<div class="prodbuttons">
<button class="h2button"><a class="h2button" href="#">BACK TO LIST</a></button>
<button id="generatePDF" onclick="print()" >generate PDF Print from Download Page</button>
</div>
</div>
</div NoPrint>
and add in the < head >
<style id="compiled-css" type="text/css">
#media only print {
#NoPrint {
display: none;
}
</style>
The page TITLE drives the offered pdf filename, thus more difficult to adjust <title>[prodtitle].pdf</title> although you could do that via scripting, but that's really a full can of worms in its own right, since the user decides the name to save to.
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); }
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
I have this slide out panel with a comment form in it, after user submitted the comment form, a "THANK YOU" will appear, the problem is, after I close the panel, and slide it out again for a second comment, the "THANK YOU" is still there! I was hoping to see a new unfilled comment form.
How do I have a fresh new original comment form to show up instead of the leftover from previous session?
Code:
<!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(){
$("button").click(function(){
$.post("comment.pl", {
comment:$("#comment").val(),
},
function(data,status){
document.getElementById('div2').innerHTML = "THANK YOU";
});
});
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<p>Click on the link to see the slide effect.</p>
Slide to Dialog Page
</div>
</div> <!-- pageone -->
<div data-role="popup" data-dialog="true" id="pagetwo" >
<div data-role="main" class="ui-content">
<div id="div2">
<b>Enter Comment</b>
<br>
<textarea name="comment" id="comment" data-role="none" rows=5 cols=30 onkeypress="if(event.keyCode==13){return false;}" onKeyDown="limitText2(this,100);" onKeyUp="limitText2(this,100);" style="resize:none;"></textarea>
<br>
<button data-inline="true"><font size=+2 color=#333333>Enter</font></button>
Go to Page One
</div> <!-- div2 -->
</div> <!-- ui-content -->
</div> <!-- pagetwo -->
</body>
</html>
Instead of changing the content of the div2, it would be better to .append or .show an element. If we recreate the contents of div2 at runtime, we would need to reapply all the JS over this new code, in order to refresh it and make it able to post the data properly.
So, create a #success div that appears when the button is clicked:
...
function(data,status){
$('#success').show();
});
...
There is an event that runs when an page transition animation is complete:
$( document ).bind( "mobileinit", function() {
$('div[data-role="main"]').live('pagehide',function(event, ui){
//the 'pageHide' happens when the main is hidden
$('#success').hide();
});
});
I'm using the "DynamicPage" jQuery plugin to make my pages not reload when navigating. On the index page is a image slider plugin called "Coin-Slider". The dynamic page works fine, except when I click to go back to the index page where the image slider is. For some reason (from what I can tell) the Coin-Slider ready function isn't activating when it goes back to the index. May be something to do with the URL, as host.com/index.php works but host.com/#index.php does not. Any reason why it's doing this? I've tried including the ready function in the DynamicPage function in the js file to execute whenever the page changes, but it didn't help. Page is included below.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css.css" rel="stylesheet" type="text/css" />
<title>Liberty Design, Scarborough</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
<script type='text/javascript' src='js/dynamicpage.js'></script>
<script type="text/javascript" src="coin-slider/coin-slider.min.js"></script>
</head>
<body>
<div id="nav-back"></div>
<div id="wraps">
<div id="left-wrap"></div>
<div id="right-wrap"></div>
</div>
<div style="background:url(images/layout/shadow-bottom.png) no-repeat bottom center; width:900px; margin:0 auto; padding-bottom: 26px;">
<div id="page-wrap">
<div id="header">
<div id="banner">
<div id="social"><img src="images/layout/facebook.png" alt="Like us on Facebook!" /></div>
</div>
</div>
<navbar>
<div id="nav">
<div style="background:url(images/layout/gradient-up.png) repeat-x;height:20px;position:relative;top:-20px; z-index:999;"></div>
<ul id="navbar">
<li>Home</li>
<li>Facilities</li>
<li>Staff</li>
<li>Where are we?</li>
<li>Contact</li>
</ul>
</div>
</navbar>
<section id="main-content">
<div id="guts">
<!-- Content Start -->
<div style="background:url(images/layout/sides.png) center center no-repeat; height:373px;">
<div id="gamesHolder">
<div id="games">
<img src="images/banner_img/1335800583.png" alt="Welcome" />
<span>
<b>Welcome</b><br/>
Welcome to Liberty
</span>
<img src="images/banner_img/1335800633.png" alt="shop front" />
<span>
<b>shop front</b><br/>
this is the front of the shop
</span>
<img src="images/banner_img/" alt="staff #3" />
<span>
<b>staff #3</b>
<br/>this is the description for staff #3
</span>
<img src="images/banner_img/" alt="staff #1" />
<span>
<b>staff #1</b><br/>
this is staff #1
</span>
<img src="images/banner_img/" alt="asdas" />
<span>
<b>asdas</b><br/>
sdasdas
</span>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
});
</script>
</div>
</section>
<div id="footer">
<!-- Cosmetics for the footer -->
<div id="footer-back"></div>
<div id="footer-wraps">
<div id="footer-left-wrap"></div>
<div id="footer-right-wrap"></div>
</div>
<div style="background:url(images/layout/gradient-up.png) repeat-x;height:20px;position:relative;top:-20px;"></div>
<center style="position:relative; top:-8px; color:#999;">Liberty Design, Scarborough - Website by Chain.</center>
</div>
</div>
</div>
</body>
</html>
Ok, mydomain.com and mydomain.com/#anything are the same, they point to your default file which can be index.php, index.html or whatever. The browser doesn't refresh while it navigates to the same file but diffrent hash tags like: from file#hashA to file#hashB or from file to file#hashRandom or from file#index.php to file. Since the page doesn't refresh (gets loaaded) the document ready doesn't gets fired either (it already got fired the first time the page got loaded).
First fix to your problem:
instead of linking to mydomain.com/#index.php link to mydomain.com or mydomain.com/index.php
Second fix is:
<script>
$(document).ready(function() {
var sliderInit = false;
$('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
// Adding fix
$('#idOfLinkThatGetsClicked').click(function () {
if (!sliderInit) {
$('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
sliderInit = true;
}
});
});
</script>