Develop Reference

html2canvas in JQuery isn't calling onrendered

I am trying to take a screenshot of a div inside my html on a button click that also submits that information. I then need this screenshot to be saved onto the server via the script.php. At first I thought it just wasn't catching an error so I put in the console logs for Starting and Rendered. Starting shows but Rendered does not.
Below is my script
html2canvas($(".final-print")[0], {
console.log('starting');
onrendered: function(canvas) {
console.log('Rendered');
var imgsrc = canvas.toDataURL("image/png");
console.log(imgsrc);
var dataURL = canvas.toDataURL();
$.ajax({
type: "POST",
url: "script.php",
data: {
imgBase64: dataURL
}
}).done(function(o) {
console.log('Check Server For Image');
});
}
});
Below is my html
<div class="final-print" style="width:400px;height:300px;padding: 9px;background-image: url('images/back.jpg');background-position: center;background-repeat: no-repeat;background-size: cover;border: 3px solid #000000;"></div>
Inside of the console it says 'Starting' with no errors being thrown. Then nothing else happens. The script is called on a button click. After a few hours of research of my own I couldn't really find anything useful to helping fix this issue.

HTML API popstate prevent ajax Request

I have a problem with popstate, Basically my code works really well. I perform an AJAX request and pushState. The problem comes up when I hit the back button on the browser. The whole page will request AJAX again. As you know Github is using this method also but when we hit back button it will not request AJAX again. how does Github do that? This is my code :
function loadProducts(dataPage) {
$.ajax({
type: "GET",
url: test.php,
data: {page : dataPage},
dataType: "html",
cache: true,
success: function(checks) {
$(".ajaxpage").html(checks).fadeIn("slow");
}
});
};
window.onpopstate = function(event) {
if (event.state != null) {
var pop = event.state;
loadProducts(pop.dataPage)
document.title = pop.dataPage;
}
};
$('#product').on("click", ".paging a", function(e) {
e.preventDefault();
history.pushState({
dataPage: $(this).attr('href')
}, null, $(this).attr('href'));
loadProducts($(this).attr('href'));
});
i try to remove "loadProducts(pop.dataPage)" but the page did not show previous page that should be. only the URL had change.
What's wrong with my code?

Loading image using AJAX Request won't work

I need to use an AJAX request to load a gif image from this source:
http://edgecats.net
Everytime I try to do so and use the response on the image source as:
$('#cat-thumb-1').attr('src', 'data:image/gif;base64,' + data);
It won't work!
When copying the response using firefox's devtools and using:
data:image/gif;base64,<PASTE_HERE>
Everything works like a charm!
How can I figure out how to turn my response into an image correctly?
This is my AJAX request code:
function getCatImg() {
return $.ajax({
type: 'GET',
url: 'http://edgecats.net',
datatype:"image/gif"
});
}
getCatImg().success(function(data) {
$('#cat-thumb-1').attr('src', 'data:image/gif;base64,' + data);
});

You don't need to use Ajax on this particular task. But, if you insist, you must use a trick to make this work:
$(document).ready(function() {
$.ajax('http://edgecats.net', {
success: function(r) {
var reader = new FileReader();
reader.onload = function(e) {
$('img').prop('src', e.target.result);
};
reader.readAsDataURL(new Blob([r]));
}
});
});

I am not familiar with the cats on the edge, but as I've looked at the site, the response was not base64 encoded, so it won't work that way.
How about setting the image src to edgecats.net
$('#cat-thumb-1').attr('src', 'http://edgecats.net');

Open email client within Ajax callback. Not working on iPhone

I need to open an email client via javascript. I need to do this within the success function of an ajax call.
My issue is that this does not work on the iPhone. It works fine when it's not within the Ajax call.
function open_email_client(){
var a = document.createElement('a');
a.setAttribute("href", "mailto:myfriend");
a.setAttribute("target", "_blank");
var dispatch = document.createEvent("HTMLEvents");
dispatch.initEvent("click", true, true);
a.dispatchEvent(dispatch);
}
// open_email_client(); Works here for computer (Chrome) and iPhone (Safari)
$.ajax({
type: "POST",
url: "myurl/",
data: {},
success: function(data){
open_email_client(); // Only works on computer, not iPhone. Tested with alert() that it does go here.
}
,error: function(e) {
}
});
I've also tried:
document.location.href = "mailto:my_friend";
This works fine for the iPhone (also within Ajax), but is no good on the computer because I need the client to open in a new window or tab.
I'd like a solution that does not require that I test which sort of device I'm on.

I ended up solving it a different way, which was possible because the initial action is a manual click.
Note that the ajax calls has to have async=false.
<a id = "email_link" target = "blank_" >
<div>Email</div>
</a>
$("#email_link").click(function(){
$.ajax({
type: "POST",
url: "myurl/",
async: false,
data: {},
success: function(data){
$("#email_link").attr("href","mailto:myfriend");
}
,error: function(e) {
}
});
});

How To Call Function on page Loading

I'm Using Web service using AJAX Call In My HTML Page . Web Service Returning Data Nearly 30 to 40 second's .
During This Loading Time I Need to Use Some Loading Gif Images After Data Completely Received Form Web Service The Loading Image Must Be Hide.
I'm Using Only HTML,JAVASCRIPT,CSS,J Query.
Any Idea Or Samples Needed.
I'm Using Following Code
$(document).ready(function () {
document.write('<img src="http://www.esta.org.uk/spinner.gif">');
});
$( window ).load(function() {
//This following Function Related To My Design
jQuery(".chosen").data("placeholder", "Select Frameworks...").chosen();
var config = {
'.chosen-select': {},
'.chosen-select-deselect': { allow_single_deselect: true },
'.chosen-select-no-single': { disable_search_threshold: 10 },
'.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
'.chosen-select-width': { width: "95%" }
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
});
In The Above Code My Problem Is On Page Load Gif Image Show But It's Not Hide Only Gif Image Only Showing.

Put a hidden image on your page and as soon as your ajax call is made, make that image visible
$('#image').show();
$.ajax({
complete: function(){
$('#image').hide();
}
});
and hide that image again on Complete of Ajax call.

Use your ajax request callback (on success/failure) instead of page load.

When sending the request just show a gif animation by setting the Display to block
then when you have the data set the display to none
or use jquery
function showHourGlass()
{
$("#gifimage").show();
}
function hideHourGlass()
{
$("#gifimage").hide();
}

You ask for ideas, I have one sample -
http://www.myntra.com/shoes
load scroll down fastly this is the ajax jquery request which is exact output which you have mentioned in your question
Check source code
Jquery Ajax loading image while getting the data
This what the html looks like:
<button id="save">Load User</button>
<div id="loading"></div>
and the javascript:
$('#save').click(function () {
// add loading image to div
$('#loading').html('<img src="http://preloaders.net/preloaders/287/Filling%20broken%20ring.gif"> loading...');
// run ajax request
$.ajax({
type: "GET",
dataType: "json",
url: "https://api.github.com/users/jveldboom",
success: function (d) {
// replace div's content with returned data
// $('#loading').html('<img src="'+d.avatar_url+'"><br>'+d.login);
// setTimeout added to show loading
setTimeout(function () {
$('#loading').html('<img src="' + d.avatar_url + '"><br>' + d.login);
}, 2000);
}
});
});
I hope this will help you.