I am running into a weird issue where I have 4 loading async calls that populate certain parts of a page. I am using the hash to perform javascript navigation without loading the page. Once I enter the page that is doing the async calls and immediately try to navigate out of it, the page waits until all calls are done before the page navigates to the other page. This should go to the other regardless if the async calls were done yet or not. I am using knockout.js to populate HTML to contains the redirect javascript and I know it's getting called because I put logging statements to make sure they were being executed. Thoughts?
app.viewModel.members.container().html("<div>" + html + "</div>");
I fixed this by keeping a track of the async calls and doing a loop through them and aborting them on page navigation.
Ajax Calls
config.request = $
.ajax({..............
});
if (!def.cancelRequest)
config.requests.push(config.request);
Abort Function
app.abortRequests = function() {
$(config.requests).each(function(index, item) {
item.abort();
});
config.requests = [];
};
Related
The Javascript of my webpage is executing the code shown below when a webpage is loading. The call to get can take a couple of seconds, thus I would like to wait with loading the page until the call is finished.
Is it possible to postpone the loading of the page until the call to get finished? Or even a better way would be to show some spinning wheel (instead of a white page), so that the user is aware that some process is going on. Is this possible?
document.addEventListener("DOMContentLoaded", function(){
if (!sessionStorage.getItem("userID")) {
// Get new userID
$.get("/new_user").done(function (data) {
sessionStorage.setItem("userID", data);
});
}
});
I'm not sure if your implementation with the event listener "DOMContentLoaded" is right, I think we are missing some context here and you may be able to check session storage before this, but I will assume that part is correct and address your question about a loading spinner.
Also I wont go into detail about how to make a load spinner as there are a lot of examples out there.. but as far as having your page be a load spinner while your ajax call is running I would make the function async and set the html of the page to the loading spinner right before the call, and then after you await the call, set the data and then set the html to what you want it to be after it's done loading
document.addEventListener('DOMContentLoaded', async (event) => {
if (!sessionStorage.getItem("userID")) {
document.getElementById('container').innerHTML = '<div>loadspinnerhtml</div>';
var data = await $.get("/new_user")
sessionStorage.setItem("userID", data);
document.getElementById('container').innerHTML = '<div>theloadedhtml</div>'
}
});
I'm making a website in which I need to have a fetch request occur while the page is loading, otherwise it slows things down later. Is there a way to do this, as what normally happens is that this request is triggered through a button push, but I'd like to have it occur as the page loads.
Fetch is by itself async, so there is no problem in using it while page is loading. Just call it directly, like so
<script>fetch('link').then(response => {}).catch(error => {})</script>
Add fetch inside your onload:
window.onload = () => {
fetch('https://jsonplaceholder.api').then(r=>r.json()).then(data =>
{
console.log(data);
//use data
});
};
Based on your use case you can use other events too
My scenario:
I have a page—let's call it items.aspx—that has an HTML table that is generated with a $.get() call to my ASP Web API controller. When a user clicks on one of the items in the HTML table, the user is sent to a page representing that item's details—let's call that one itemDetails.aspx. I predict it will be common to view the itemDetails.aspx page and then decide to cancel and redirect back to the items.aspx page.
The problem:
The problem is that each time the items.aspx page is loaded, the ajax call runs again and it takes a couple seconds to populate the table.
The question:
Is it possible to, when the user clicks the item to go to the itemDetails.aspx page, store/cache the HTML output of the table for a limited time? Since I only want this to happen if the user clicks the item link, I figured javascript would be the best tool.
You could use a function that returns a jQuery Promise for the HTML, whether it is loaded from a local cache or an AJAX request.
A simple example:
// Refers to cached HTML when available
var cached;
// Returns a promise for the HTML
function getHtml() {
var defer;
if(cached) {
defer = new Deferred();
defer.resolve(cached);
} else {
defer = $.get(/* ... */);
defer.then(function(response) {
cached = response;
})
}
return defer.promise();
}
Usage:
getHtml().then(function(html) {
$container.html(html);
})
A real implementation would probably do something to prevent concurrent $.get calls, and expire the cache when required.
Hi i have to perform perform like, when the ajax is in progress, then do not allow the user to do page refresh.
here is the code i have
$('#submit').click(function() {
$(function() {
$(".col1").mask("Generating csv...."); //This will generate a mark, Here i would like to prevent the user from doing any sort of operation.
var to = $('#filters_date_to').val();
var from = $('#filters_date_from').val();
$.ajax({
url:"../dailyTrade/createCsv?filters[date][to]="+to+"&filters[date][from]="+from,success:function(result){
if(result) {
$(".col1").unmask(); //Here we can unlock the user from using the refresh button.
window.location = '../dailyTrade/forceDownload?file='+result;
setTimeout('location.reload(true);',5000);
}
}
});
});
});
Any suggestions.
Best you can do is use onbeforeunload to present the user with a message saying that a request is in progress and asking them if they are sure they want to proceed.
e.g.
var req;
window.onbeforeunload = function() {
if(req) {
return 'Request in progress....are you sure you want to continue?';
}
};
//at some point in your code
req = //your request...
You cannot, in any way, prevent the user from leaving your page using JS or anything else.
I doubt if you should do that.
$(window).bind('beforeunload',function(){
return 'are you sure you want to leave?';
});
If you are talking about a refresh "html button" on your web page, that can easily be done. Just before you make your ajax call, disable your refresh button and on success/error function of the ajax call enable it.
Disable button
$("#refreshBtn").attr("disabled", "disabled");
Enable button
$("#refreshBtn").removeAttr("disabled");
You cannot do it just by inserting JavaScript code.
Only ways I can think of are:
Use synchronous ajax call, on that way browser should freeze (however it will notify user that script is taking too long to process and user will be able to stop execution)
Write browser plugin that will modify browser behavior (eg. prevent refreshing page for url that you preset)
Both ways are ugly and I wouldn't recommend doing it.
You should modify your script so it can resume execution if page has been refreshed (use HTML5 localStorage).
http://www.w3schools.com/html/html5_webstorage.asp
In your case, I would put in localStorage simple state (boolean) to check did ajax call happened or not. If it did happened, then just try calling again same url and you will get file name. But on server side (if you haven't done already) you should implement caching, so when same url is called twice, you don't need to make two separate files, it could be same file (server will be much lighter on hardware resources).
I have an issue with a tracking code that doesn't work properly since its called before a required JS script and function is loaded. Here is the situation:
Upon successful form submission (CF7 on WordPress) the following function is called right away.
function fn111Rooms(){
var email_address = document.getElementsByName("your-email")[0].value;
fnTransaction('Room booked', 'userid=' + email_address);
location.replace('http://example.com/thank-you');
}
The problem is, however, that the following script + function needs to be called beforehand to make everything work
<script type="text/javascript" src="http://www.example.com/Tracking.js"></script>
<script>fnPageHit('4ddc12d4344');</script>
This bit is placed in the section of each page but is not called again upon form submission since the form submits via AJAX (I believe that's the issue).
How can I include the script into the fn111Rooms and make sure everything is called correctly and in order. Really sorry in case that's a stupid question but JS is still confusing me from time to time.
EDIT: Would this work?
function fn111Rooms(){
// Loads the script
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", "http://www.example.com/Tracking.js")
// Calls the required function
fnPageHit('4ddc12d4344');
// Does the rest
var email_address = document.getElementsByName("your-email")[0].value;
fnTransaction('Room booked', 'userid=' + email_address);
location.replace('http://example.com/thank-you');
}
And then just call the one function when submitting the form.. ?
You could take a look at jQuery.when()
Lets say you have a function you have to execute
function yourFirstFunction(){
$.post('/somewhere');
}
And a second right after first one finishes
function yourOtherFunction() {
//stuff
}
Then you can use the following construction
$.when( yourFirstFunction() ).then(function(data) {
yourOtherFunction()
})
i.e when yourFirstFunction is done (ajax request finished) yourSecondFunction will be executed
One way to do is applying infinite loop with some interval and checking following condition
fnPageHit && fnPageHit('4ddc12d4344');
so whenevr the ile gets loaded u will get function in other cases fnPageHit will be undefined hence it will not execute and will no cause error