We Keep Coding

Back Button not work when load page using history.pushState in JS

I am trying to load a page via ajax with history.pushState and page load successfully, but the back button does not work in this case. Please check my code below:
function processAjaxData(response, urlPath){
document.write(response)
document.title = '';
window.history.pushState({"html":response,"pageTitle":''},"", urlPath);
}
$('#apply_loader').click(function(e){
var nextPage = $(this).attr('href');
$.get(nextPage, // url
function (data, textStatus, jqXHR) { // success callback
processAjaxData(data,nextPage);
}
);
});
I am trying to use popstate below to identify a back button click.
$(window).on('popstate', function(event) {
console.log('asd');
location.reload();
});

Maybe too late, but perhaps this will fix the problem:
Instead of location.reload(), try:
window.location = location.href

facebook login using phantom js

i was learning about phantomjs
and i was trying to login into facebook using phantom js
i was successfully able to change the values of the input fields
looks like this
and i could submit the form
the problem is with multiple redirects that facebook do to reach the home page
here is how my code looks like:
var webpage = require('webpage');
var page = webpage.create();
page.settings.javascriptEnabled = true;
page.settings.loadImages = false;
phantom.cookiesEnabled = true;
phantom.javascriptEnabled = true;
var loaded = false;
page.onLoadStarted = function() {
loaded = false;
console.log("load started");
};
page.onLoadFinished = function() {
loaded = true;
console.log("load finished");
};
page.open('http://www.facebook.com',function () {
page.render('1.jpg')
page.evaluate(function () {
document.getElementById('m_login_email').value = "me#email.com";
document.getElementById('m_login_password').value = "*********";
document.getElementById('login_form').submit();
});
page.render('2.jpg');
setInterval(function () {
if (loaded) {
page.render('3.jpg');
console.log("loaded : "+page.url);
phantom.exit();
}
},1000);
});
//EDIT
//the output
load started
load finished
load started
load finished
load started
load finished
loaded : https://m.facebook.com/login/async/?refsrc=https%3A%2F%2Fwww.facebook.com%2F&lwv=100
//
that totally work for me but the 3.jpg image it's black image
and the url of this page >>https://m.facebook.com/login/async/?refsrc=https%3A%2F%2Fwww.facebook.com%2F&lwv=100<<
i was lucky only once, this code worked and i could login .. but it's back to fail again :(
thanks for help BTW

Trouble with pagecontainer (jQuery Mobile)

I'm developing an app with PhoneGap but there is an issue. I have a log in form, and, as it is very simple, I'm sending the login information on the URL.
So, that's what happens: User puts username -> jQuery changes the page to logged_in.html (pagecontainer) and then loads www.example.com/logged.php?user=USERNAME_ON_FORM.
However, the logged_in.html page does load, but somehow it is keeping the old page, so I have to scroll down to see the logged in page. Is there anyway to work this out?
I tried this but it disabled everything.
$(document).bind("mobileinit", function () { $.mobile.ajaxEnabled = false; });
Here it is my code:
var $ = jQuery.noConflict();
$(document).ready(function(){
function init() {
document.addEventListener("deviceready", deviceReady, true);
delete init;
}
$("#loginForm").on("submit",function(e) {
var u = $("#username", this).val();
if(u != '') {
// $.mobile.changePage("logged_in.html");
$("body").pagecontainer("change", "logged_in.html" );
setTimeout(function(){
$('#logged_teste').load('http://example.com/app/model/login_dados.php?email='+u);
},1000);
}
return false;
});
});
I'm searching for anything I can do but nothing works...

Detect if script has already loaded or not

It seems that helloworld.js gets loaded multiple times based on the number of times I click #load. I say this because when I look at Google Chromes Developer Tools Network tab, it shows helloworld.js as many times as I click #load.
$(document).ready(function() {
$("#load").click(function(){
$.getScript('helloworld.js', function() {
hello();
});
});
});
The hello() function looks like this:
function hello(){
alert("hello");
}
Is it possible to detect if helloworld.js has already loaded?
So if it hasn't loaded, load it, and if it has loaded, don't load it.
This is what Developer Tools currently shows me if I click the #load button 4 times:

Set a flag when file loaded successfully. If flag is set then skip the file loading again.
Try this code,
var isLoaded = 0; //Set the flag OFF
$(document).ready(function() {
$("#load").click(function(){
if(isLoaded){ //If flag is ON then return false
alert("File already loaded");
return false;
}
$.getScript('helloworld.js', function() {
isLoaded = 1; //Turn ON the flag
hello();
});
});
});

So why not only fire the event once like this:
$("#load").one("click", function() {
$load = $(this);
$.getScript('helloworld.js', function() {
hello();
// bind hello to the click event of load for subsequent calls
$load.on('click', hello);
});
});
That would prevent subsequent loads and avoids the use of a global

Another option is letting .getScript() run but let it take the script from browser's cache so you won't have it reloaded each and every time.
To achieve this, add such code:
$.ajaxSetup({
cache: true
});
This is taken from the documentation page.

You could create a helper function:
var getScript = (function() {
var loadedFiles = {};
return function(filename, callback) {
if(loadedFiles[filename]) {
callback();
} else {
$.getScript(filename, function() {
loadedFiles[filename] = true;
callback();
});
}
};
})();

Cross-browser close tab event and ajax

How to implement cross-browser close tab event? I tried this:
function callAjax() {
//some ajax stuffs for removing user from database
}
window.onunload = function() {
callAjax();
return null;
}
window.onbeforeunload = function() {
callAjax();
return null;
}
And it works, but if I quickly and many times push F5 for refreshing page, ajax sometimes doesn't happen. Async is false.