I'm trying to get a file which takes a good few seconds to load in the background, so I can display a spinner at the same time.
I'm currently trying with an iframe in the background, and this works but I'm not sure how I can be notified when it's finished loading (so I can remove the spinner).
Any good ways of doing this? Any better solution than an iframe?
Here's my code so far:
<script>
$(document).ready(function() {
var link = $('.generate-pdf');
link.click(function(e) {
e.preventDefault();
var spinner = $("<img src='/assets/images/ajax-loader.gif' />");
var iframe = $('<iframe src="' + link.attr('href') + '" style="height:0;width:0;visibility;hidden;display:none;"></iframe>');
link.before(spinner);
link.before(iframe);
});
})
</script>
According to this site, given that my Content-disposition is attachment I can't guarantee to receive any events. Can I poll any properties on the iframe to find out?
Have you tried
iframe.load(function(){
log("done");
})
In the end, I had to do this by contacting the server, and seeing if the file had been sent to the browser. I'd still like to see a pure client-based implementation.
Thankfully the download was generated with PHP so this was ok.
<script>
$(document).ready(function() {
var link = $('.generate-pdf');
link.click(function(e) {
e.preventDefault();
var spinner = $("<div class='spinner'><img src='/assets/images/ajax-loader.gif' /><span>Your PDF is being generated...</span></div>");
var downloadKey = new Date().getTime();
var iframe = $('<iframe src="' + link.attr('href') + '&downloadKey='+downloadKey+'" style="height:0;width:0;visibility;hidden;display:none;" onload="alert(\'hello\')"></iframe>');
link.before(spinner);
link.before(iframe);
var hasFinished = function(downloadKey, callback) {
var that = this;
$.ajax({
url: "index.php?controller=is-download-finished&downloadKey=" + downloadKey,
success: function(data) {
if (data) {
callback();
} else {
setTimeout(function() {
that(downloadKey, callback);
}, 1000);
}
}
})
};
hasFinished(downloadKey, function() {
spinner.remove();
iframe.remove();
});
});
})
</script>
The extra request just returns JSON true or false.
Related
Hey you all.
var $storyboards; // This is the wrapper were all stroy boards are.
// Listen to URL changes when clicking the back or forward buttons in the browser.
window.onpopstate = function(event) {
LoadPage(document.location.pathname, !history.state || stateCount > history.state.stateCount);
};
var stateCount = 0;
$( document).ready(function() {
$storyboards = $('#storyboards');
$('.storyboard').attr('data-url', location.pathname);
setTimeout(function(){
$('body').addClass('splash-screen-hidden');
}, 3000);
$(document).on('mouseover mouseout','#menu a', function(e){
$('#menu a').not(this).toggleClass('toggle');
}).on('click', '#menu a', function(e){
if(e.metaKey || e.ctrlKey) return;
// Listen to the click event on the a tags in the menu
// Prevent the default behavior so the browser doesn't load the page.
e.preventDefault();
var $this = $(this);
var url = $this.attr('href');
var title = $this.attr('title');
NavigateToPage(url, title);
})
});
function LoadPage(url, back){
var $all_storyboard = $('.storyboard'); // This is all the storyboards we have in the page.
var $storyboard = $all_storyboard.filter('[data-url="' + url + '"]');
var storyboard_exists = $storyboard.length > 0;
PreparePageForLoad();
if(storyboard_exists)
StoryboardIsLoaded($storyboard.hide());
else {
console.log("we do not have the storyboard.. go load it!");
$.ajax({
url: url,
success: function(data){
$storyboard = $('.storyboard', data);
$storyboard.attr('data-url', url);
$storyboards.append($storyboard);
StoryboardIsLoaded($storyboard.hide());
},
error: function(){
alert('Oops! We could not load this page!.');
GoToRoot();
}
})
}
}
I really have a huge problem since I have to deliver my website project tomorrow morning and right now it's not working very well.
The real problem is I'm having trouble with loading between my pages. I'm using storyboard and ajax to switch out the code/content in the HTML without making a page load. So I get these sweet smooth transition between my pages.
I tested it on my own server and domain and it all works fine, but because I have to deliver the project/folder on another server the shit won't work. The main reason is that I have to put it all in a folder on the server and it's messing up the root navigation.
When I click on the link it goes: http://websitename.com/html-document/
But it should be: http://websitename/myfolder/html-document/
So the problem is it's going out of my folder and looking for the HTML document outside my folder instead of looking at it.
Here is the link to the website: http://franklyone.com/sylvester-svend/
Thanks in advance - Love
I want to add a string to the main domain, and also to the sub links of the website.
I tried the below code but main domain is not getting changed, I want to change main domain first and after reload of the website all the sub links should change.
if (typeof this.href != "undefined") {
web = this.href.toString().toLowerCase();
}
else{
web = document.location.toString().toLowerCase();
}
function urlAddress() {
confirm('Would you like to clear the cache.......... of '+ web + '- Ninja :)');
//window.location.replace(web + "/?NoCDN=123");
var stateObj = web;
if (window.history.state) {
history.pushState(stateObj, "page 1", "/?NoCDN=123");
}
}
/*Second Function
This code is changing all URL of the website...*/
function linkAddress() {
$('a[href]').each(function(){
var link = this.href;
$(this).attr('href',link + '?NoCDN=123');
});
$('script[src]').each(function(){
var link = this.href;
$(this).attr('src',link + '?NoCDN=123');
});
$('link[href]').each(function(){
var link = this.href;
$(this).attr('href',link + '?NoCDN=123');
});
$('img[src]').each(function(){
var link = this.src;
$(this).attr('src',link + '?NoCDN=123');
});
}
//I am calling both functions here ...
$( document ).ready(function() {
urlAddress();
setTimeout(function(){
alert("It's Almost clear. Just click Ok for more result.");
linkAddress();
}, 3000);
});
I load html content along with javascript (using getScript) on a page using the jquery load function with a callback. But I am encountering a strange situation in that the javascript that is being loaded isn't recognized either on the first try (it does work on the 2nd or subsequent try) or without an alert in place. I have read through similar situations and the suggested solution is to have a callback function for load. But I already have a callback function in place. Here is the code:
$("[id^=ajax_]").click(function(e){
var linkid = $(this).attr("id");
var arr = linkid.split("_");
var link = arr[1];
ajax_load_content_and_get_script(link);
});
function ajax_load_content_and_get_script(link) {
var url = "/" + link;
$("#pagecontent").load(url + "/ajax", function() {
//alert(); //works with this un-commented
$.getScript("/js/" + link + ".js");
});
}
As you could see above, the script that is being loaded (with getScript) is recognized and works fine if I have the alert statement uncommented. But without the alert, the script isn't recognized. I am already using a callback function for the load as seen above.
Thanks for your help with this.
look like this?
$("button").click(function(e){
var linkid = $(this).attr("id");
var arr = linkid.split("_");
var link = arr[1];
ajax_load_content_and_get_script(link);
});
function ajax_load_content_and_get_script(link) {
var url = "/" + link;
$.ajax({
url: url + "/ajax",
type: 'POST',
async:false
}).success(function(data){){
$("#pagecontent").html(data);
$.getScript("/js/" + link + ".js");
});
}
http://jsfiddle.net/aswzen/w4068ygL/3/
Hi My ajax call is not working in chrome and firefox but it is in Safari.
I am not able to figure it out as it is working on all browsers locally.
My site is recently had SSl certificate.Is that something causing problem?
I am not sure. For reference below is my Ajax function
<script type="text/javascript">
//<![CDATA[
$(function () {
$("#selectReport").hide();
$("select#countryId").change(function () {
var manu = $("#manufacturerId option:selected").text();
$("#Manufacturer").val(manu);
$("#selectReport").show();
});
$("select#reportId").change(function (e) {
e.preventDefault();
var country = $("#countryId option:selected").text();
$("#CountryName").val(country);
});
$("select#reportId").change(function (event) {
event.preventDefault();
var reportName = $("#reportId option:selected").text();
var manufacturer = $("#Manufacturer").val();
var countryName = $("#CountryName").val();
var theUrl = "/Reports/GetReport/" + reportName + "/" + manufacturer + "/" + countryName;
$.ajax({
url: theUrl,
type: 'get',
success: function (data) {
alert("I am success");
$('#ajaxOptionalFields').html(data);
},
error: function () {
alert("an error occured here");
}
});
});
});
//]]>
</script>
seems you didn't load the Jquery Lib,
http://jquery.com/download/ download Jquery lib and put it in your js folder and load it.. then it should understand what "$" is... in Jquery i always start script like:
$( document ).ready(function() {
//do sth here
});
Instead of copying link directly please copy relative paths so that it will be secured.
For example copy http://code.highcharts.com/highcharts.js in higncharts.js and point that to relative path.
If there is an img tag in a page whose final image it displays comes after a 302 redirect, is there a way with javascript to obtain what that final URL is after the redirect? Using javascript on img.src just gets the first URL (what's in the page), not what it was redirected to.
Here's a jsfiddle illustration: http://jsfiddle.net/jfriend00/Zp4zG/
No, this is not possible. src is an attribute and it does not change.
I know this question is old, and was already marked answered, but another question that I was trying to answer was marked as a duplicate of this, and I don't see any indication in any of the existing answers that you can get the true URL via the HTTP header. A simple example (assuming a single image tag on your page) would be something like this...
var req = new XMLHttpRequest();
req.onreadystatechange=function() {
if (req.readyState===4) {// && req.status===200) {
alert("actual url: " + req.responseURL);
}
}
req.open('GET', $('img').prop('src'), true);
req.send();
If you are open to using third party proxy this can be done. Obviously not a javascript solution This one uses the proxy service from cors-anywhere.herokuapp.com. Just adding this solution for people who are open to proxies and reluctant to implement this in backend.
Here is a fork of the original fiddle
$.ajaxPrefilter( function (options) {
if (options.crossDomain && jQuery.support.cors) {
var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
//options.url = "http://cors.corsproxy.io/url=" + options.url;
}
});
$.ajax({
type: 'HEAD', //'GET'
url:document.getElementById("testImage").src,
success: function(data, textStatus, request){
alert(request.getResponseHeader('X-Final-Url'));
},
error: function (request, textStatus, errorThrown) {
alert(request.getResponseHeader('X-Final-Url'));
}
});
based on http://jsfiddle.net/jfriend00/Zp4zG, this snippets works in Firefox 17.0:
alert(document.getElementById("testImage").baseURI)
It doesn't work in Chrome. Not tested anything else-
Here is a workaround that I found out. But it works only if the image on the same domain otherwise you will get an empty string:
var img = document.getElementById("img");
getSrc(img.getAttribute("src"), function (realSrc) {
alert("Real src is: " + realSrc);
});
function getSrc(src, cb) {
var iframe = document.createElement("iframe"),
b = document.getElementsByTagName("body")[0];
iframe.src = src;
iframe.className = "hidden";
iframe.onload = function () {
var val;
try {
val = this.contentWindow.location.href;
} catch (e) {
val = "";
}
if (cb) {
cb(val);
}
b.removeChild(this);
};
b.appendChild(iframe);
}
http://jsfiddle.net/infous/53Layyhg/1/