In my app I have 3 pages from the first page I am sending data to server, here I want to show a Loading dialog until the send operation (posting to server) is finished and then go to page two. Doing a below but it's not working
<script type="text/javascript">
$(document).on('pageshow', '#Page2' ,function () {
setTimeout(function () {
$.mobile.changePage('#dialog');
}, 100); // delay above zero
});
</script>
Try2
<script>
$(document).on("pagecreate","#page", function () {
$("#custom-li").on("click", function () {
var orgname = $('input:text[id=name]').val();
loadingStart();
setTimeout(function () {
loadingEnd();
$.mobile.changePage('#page2');
}, 3000);
return false;
});
});
function loadingStart() {
$.mobile.loading('show', {
text: "loading",
textVisible: true
});
}
function loadingEnd() {
$.mobile.loading("hide");
}
</script>
the function is firing but the spinner is missing from the dialog when I run in browser and mobile.
Any help is appreciated.
So is only spinner missing? In this case, maybe you don't have "images/ajax-loader.gif" at html files directory.
Related
I am trying to exceute a javascript function after another div that has been popupated by javascript has loaded. The div has been populated first with javascript is '#am-events-booking'. The function i am trying to use is:
$(window).load(function ()
{
var i = setInterval(function ()
{
if ($('#am-events-booking').length)
{
clearInterval(i);
}
}, 1000);
alert('Page is loaded');
});
I always use $(document).ready() to run code after the page has loaded. Not sure what the difference is, but at least then it works.
Furthermore you need to use .text() to get the text inside an element.
Working code snippet:
$(document).ready(function() {
var i = setInterval(function() {
if ($('#am-events-booking').text().length) {
clearInterval(i);
console.log('Text detected!');
} else {
console.log('Waiting...');
}
}, 1000);
console.log('Page is loaded');
});
setTimeout(loadText, 2200);
function loadText() {
$('#am-events-booking').html("<h2>Hello</h2>");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="am-events-booking"></div>
$(document).ready(findDiv);
function findDiv() {
if($('#am-events-booking').is(':visible')){ // if the div is visible
alert('Page is loaded');
} else {
console.log("loading...");
setTimeout(findDiv, 50); // wait 50ms,
}
}
$('body').html('<div id="am-events-booking"></div>');
<body></body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
you can use is :visible form JQuery to check if div is added or not
I am using this but the cookies message keeps appearing after everypge refresh and tab opening.
$(document).ready(function () {
if (!!localStorage.getItem('firstVisitVisp')) {
localStorage.setItem('firstVisitVisp', 'true');
setTimeout(function () {
$("#cookieConsent").fadeIn(200);
}, 4000);
$("#closeCookieConsent, .cookieConsentOK").click(function () {
$("#cookieConsent").fadeOut(200);
});
}
});
You're nearly there - just remove the !! and change it to !:
if (!localStorage.getItem('firstVisitVisp')) {...}
I have the following jQuery code that when a hyperlink is clicked, it downloads the file of the hyperlink href. While it is preparing the file, it displays a please wait message.
The href code is:
<a class="fileDownloadCustomRichExperience" href="pdf.php">Report Download</a>
I want to be able to make the code below run using the $( document ).ready(function() { instead of $(document).on("click")
I tried the ready(function) but couldnt get the href to work.
Any suggestions?
Thanks
$(function () {
$(document).on("click", "a.fileDownloadCustomRichExperience", function () {
var $preparingFileModal = $("#preparing-file-modal");
$preparingFileModal.dialog({ modal: true });
$.fileDownload($(this).prop('href'), {
successCallback: function (url) {
$preparingFileModal.dialog('close');
},
failCallback: function (responseHtml, url) {
$preparingFileModal.dialog('close');
$("#error-modal").dialog({ modal: true });
}
});
return false; //this is critical to stop the click event which will trigger a normal file download!
});
});
* SOLVED BELOW: *
$(function () {
$( document ).ready(function() {
var $preparingFileModal = $("#preparing-file-modal");
$preparingFileModal.dialog({ modal: true });
$.fileDownload('pdf.php', {
successCallback: function (url) {
$preparingFileModal.dialog('close');
},
failCallback: function (responseHtml, url) {
$preparingFileModal.dialog('close');
$("#error-modal").dialog({ modal: true });
}
});
return false; //this is critical to stop the click event which will trigger a normal file download!
});
});
I've an issue with jQuerys .load() and would to ask for some help. I'm using load for firing a function after the site is loaded. I'm using a small image-preloading script
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
});
}
preload([
'img/about_1.gif',
'img/contact_1.png',
// and much more images
]);
and some pictures in the body who don't need to be preloaded.
What I am trying to achieve is, to fire a function after the site has been completely loaded. Like this:
$(document).ready(function() {
$(window).load(function () {
console.log("all loaded");
$('#curtain').animate({top: '-=1000px'}, 'slow', 'linear', function() { $(this).remove(); });
$('#loading').animate({top: '-=1000px'}, 'slow', 'linear', function() { $(this).remove(); });
});
});
unfortunately it does fire before the whole page is loaded. Is there something I have to know about .load() and why it does not work?
Thanks
I want to reload window after a this custom function finishes:
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function () {
$('#order_form').dolPopupHide({});
}, 3000);
//window.location.reload();
});
</script>
Is there a way I can add the reload to the setTimeout function so it doesn't run until the timeout is over?
reload needs to be inside your function:
$(document).ready(function(){
setTimeout(function () {
$('#order_form').dolPopupHide({});
window.location.reload();
}, 3000);
});
If you want to conceptually separate the work from the reload, you can do something like this:
$(document).ready(function(){
setTimeout(function () {
doWork();
window.location.reload();
}, 3000);
function doWork() {
$('#order_form').dolPopupHide({});
}
});
Or, to be even more general:
function reloadAfterExec(fn)
return function() {
fn();
window.location.reload();
}
}
$(document).ready(function(){
setTimeout( reloadAfterExec(function() {
$('#order_form').dolPopupHide({});
}), 3000);
});