We Keep Coding

Can you stop a prior page from reloading when "back" button is clicked?

Doing some Intranet development. The design approach uses a basic HTML framework populated with an ajax call (via jQuery) to populate the page. We've standardized on Chrome for Intranet access. The intranet allows the user to open PDF documents linked from the page in the same window, and then use the back button to return. Our old "static" page approach retained the prior page contents - the new dynamic approach reloads the page. How can we retain prior page content?
Research has found similar problems, but not a clear answer. We've tried checking for an existing element in the onload() event; doesn't work because the page load is already triggered before that code gets evaluated.
The code is working correctly - our desire is to return to the already rendered page.
No errors. Getting page reload with the back button when we want to return to the already rendered prior page.

You could modify the url via the history api when you are changing the page content. This should be enough as history gets modified so the back function would work properly. However if this doesn't work you can use the url to determine what to show up on the page.
Here's an example: https://css-tricks.com/using-the-html5-history-api/#pushState-example

Ajax html data binding does not work in case of mobile devices preview

I would like to ask about a strange problem which is happening to me.
The problem is that I have written a JQuery Ajax request to get Data from Server. In case of desktop Pc/Laptop my browser successfully binds this "Html" return data from the server on to the "DIV" where I am trying binding it.
But now I have also written the same script for mobile devices In case of mobile devices/tablets I am getting the same data but at binding moment with Div my mobile browser shows blank page Even after loading menu's and logo from top but as long Ajax request gets the data it shows blank page.
For me it seems to be a CSS problem even if I use $('#mydivid').text(data) on mobile browser case it shows me the whole data but in textual form and it does not get blank as well.
Anyone have any thoughts about it could be helpful for me .

Mobile device DOM block

I have created simple header bars. Each of them will send a request when clicked, but on the mobile device (doesn't matter which one but even desktop Google Chrome mobile mod on the console) DOM begin to get blocked and stops working at all.
I suspect that:
when user clicked button I send very long get request
I bind new listeners (again and again) but not this header bar
How can I prevent this?

How did you attach your click events ? It should not be complicated.
Here is a simple code sample that should work (also on mobile browsers):
HTML snippet:
<button id="myBtn">Click here to load content</button>
<div id="contentContainer"></div>
Javascript (using jQuery) snippet:
$('#myBtn').on('click',function(){
// show some indication to the user that you are loading something
$('#contentContainer').html('<strong>Loading content, please wait..</strong>');
// do your ajax call
$.ajax({
url:'https://api.myapp.com/get/user-info',
}).done(
function(data){
// all done - display the loaded content
$('#contentContainer').html(data);
});
});
Use this as a use-case, if you are still getting "blocked" after executing javascript on a mobile device (clicking an element that is attached to a click handler is also executing js), it usually means that you have a javascript error - which causes the mobile browser to stop from running any more javascript until you fix the problem and reload the page.
Hope it helps a bit!

When does a javascript function is being executed in a jquery mobile page?

I have a php function that, after it did his computations, contains this code:
echo("<script> window.location.replace('index.php#login'); </script>");
meant to redirect the page to another, under certain circumstances. The function works, the javascript code works, but if fails in one case. If i write manually the address of the page the javascript part of the code seems not to be executed, while if i manually reload the page (for example using the reload button in firefox) works like a charm.
The php function is being executed, with his redirect code, at the beginning of the page index.php in the head section. The page index php is a jquery mobile page, that include every other page of the site, so if i want to call a page, i have to write an address like site.com/index.php#nameOfThePage. The problem happen when i am, for example on a page site.com/index.php#Page1 and i call another Page manually deleting from the address the part "Page1" and writing, for instance, "Page2". Instead, if i reload, the script is being correctly executed.
So the question is: when does a javascript function is being executed in a jquery mobile page? What i have to do to make the function works in every way, even manually, a page is called?
EDIT: the problem happens in firefox e safari, while with chrome the code works in every case...

jQuery / JavaScript - Loading iframe with Ajax slows down page

I'm loading a iframe with $.ajax():
$("#iframe_wrapper").each(function(){
$.ajax({
type: "post",
url: "http://site.com",
data: { action: 'get_the_iframe' },
context: this,
success: function(html){
$(this).html(html);
$(this).show();
$('#theiframe').load(function(){
// do stuff with the iframe...
});
}
});
});
the iframe is inside a function that gets called if $_POST['action'] is 'get_the_iframe':
<iframe id="theiframe" name="theiframe" src="http://site.com/page/"></iframe>
it works, but the problem is that the browser seems to display the entire page really slow, it seems like it waits for the iframe to load before displaying the entire content on the page, which is not supposed to happen because it's done trough ajax. This is exactly what I was trying to avoid...
Any ideas what's wrong here?

I think the key to the answer is where, or more specifically, when your jQuery fragment that performs the ajax post is being run by the browser.
I suspect the jQuery code to load the page happens sometime before the full page has loaded. And maybe your browser doesn't support asynchronous loads from the same domain.. This was the case with IE for a long time. So what's going on is the browser starts loading and processing the iframe somewhat in-step with the rest of the requests that your normal (outer) page is doing.
If this is not the case yet try putting the code that starts the ajax post in a document ready handler.
Also, check in other browsers to see if the problem occurs across the board.

The reason why you are seeing this is because IFrame is blocking element, especially in IE. IFrames are the most costly element to create in a browser, and it also will block execution of JavaScript when it's being created. There's also resource blocking rule regarding IFrame as well. If you have CSS files in your page, IFrame will not load until response for each and every CSS file is received by the browser (IE) or in Firefox, all IFrame's resources will be blocked until response is received for all resources on the main page.
Just as an example, I had a standard spinner control, that would display running snake whenever I do AJAX call to the server (to give user some feedback that something is happening). I also was create IFrame element at the body level, to overlay all dropdown elements on the page for IE6/7 bleed through bug. At some point I noticed that my web-service calls where about twice slower in IE then they were in FF. After some investigation, I realized that creation of the IFrame element is blocking everything in the browser, including code that receives response from the server.
I don't think there's a way around it, except for not using IFrames...