We Keep Coding

Why is my page not rendering the data I need when trying to page redirect in jQuery/JS?

The id's #switchtopagetwo and #switchtoindex are assigned to buttons that do what you can infer from the id's names. What I want to do is on click of the button, I want to redirect to the new page via window.location = url; and then run a function that renders some data on the page via pagetwoData() or pageoneData(), depending on where I am at the moment.
$('#switchtopagetwo').on('click', function () {
window.location = 'pagetwo.html';
pagetwoData();
});
//pagetwo.html button
$('#switchtoindex').on('click', function () {
window.location = 'index.html';
pageoneData();
});
When I comment out window.location, the functions run and I can see the data on the screen, but there's no page redirect even on clicking the button. When I click on the buttons fast enough, I can see the function's data being rendered for a split second and then disappearing. When I console.log certain items, I can see the console.log's appearing in the console and then disappearing the same way.
Clearly there is an issue with window.location. Is there better code I can use for clicking the button, redirecting the page to load the page-2 data, then clicking the button again to go back to page-1 data?

When you redirect to a new page, the entire page context is abandoned and replaced by the new page. Nothing which happens on the source page after that redirect can be relied upon to still happen. But anything on the target page that's loading will happen.
Instead of trying to get Page1 to tell Page2 to do something when it loads, just have that something happen on Page2. For example:
// on index.html
pageoneData();
$('#switchtopagetwo').on('click', function () {
window.location = 'pagetwo.html';
});
// on pagetwo.html
pagetwoData();
$('#switchtoindex').on('click', function () {
window.location = 'index.html';
});
Basically, for any given page, whatever you want to happen on that page when it loads should be executed on that page when it loads.

Handling url targeted PHP page with custom jQuery loaded content

First I used include('pageName.php'); for every page I wanted to load.
Now I decided to rewrite everything and to load a page in a <div id="page_content"></div> with the jQuery function: $('#page_content').load(pageurl, {access:true});
I hope this is the best practice. Because I want to reduce load time on my web application by not refreshing the whole website with all CSS and JS files but just to refresh content when clicked on a new page.
Currently I am using the following function to load pages into the division and to pushState to history:
//Dynload pages
$("a[rel='dynload']").click(function(e) {
e.preventDefault();
var page = $(this).attr("page");
var pageurl = "pages/" + page + ".php";
$('#page_content').load(pageurl, {access:true});
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',page);
}
//stop refreshing to the page given in
return false;
});
This works perfectly.
I have this button that triggers this function and gives for attribute page="index_content" . The function will load this page to the division and the state is being pushed into the history.
However. We get an url something like this: https://mywebsite.com/index_content
The problem is, when I load this specific URL into my browser I get : "Page not found" ofcourse, because it is trying to search for the index_content folder which does not exist.
Is there a way to check the url by my PHP/jQuery script and to load the correct page into the division? If not, how can I solve this for a generic case.
When I add a new page, I want to spend no- to very less time on the pageswitcher function.
In that way I can also handle non-existing pages.
Thanks in advance!

Unable to display loading GIF image when content changes without refresh

I am working on a project wherein I am loading database data in a section. I have used an indicator which is basically an GIF image which gets displayed when I click on the URL which opens the page where data gets loaded. The indicator is hidden when data loads completely. This seems to be working well in this scenario but it does not work when I click on the other URL which loads the section without refreshing the page.
Code which handles on link click:
$(".link1").click(function(event){
alert("hi")
//$('#overlay').fadeIn();
$("#overlay").css("display", "block");
event.preventDefault();
var url = $(this).attr("href");
$('#MainContent').load(url);
var res = url.split("/");
res = res[2].replace(/([A-Z]+)/g, " $1");
document.getElementById("pageName").innerHTML = res;
});
Code which hides the GIF once the data loading is complete:
jQuery(window).load(function(){
$("#overlay").css("display", "none");
});

To hide the image when the load() completes you should provide a callback function, like this:
$("#overlay").show();
// ...
$('#MainContent').load(url, function() {
$("#overlay").hide();
});
Also note the preferred use of show() and hide() over css().

Am I doing wrong with history.js?

My web application is using ajax for partial page updating when user goes through pages and links look like
...
http://localhost:8080/webapp/#2
http://localhost:8080/webapp/#3
http://localhost:8080/webapp/#4
http://localhost:8080/webapp/#5
...
When user goes from ajax page to non-ajax page like from
http://localhost:8080/webapp/#4
to
http://localhost:8080/webapp/help.html
then it is required to get the user ability to go back to the previous page by browser back button so to make it work I use history.js in the function which controls hash changes
$( function() {
var History = window.History;
console.log( "************" + History.enabled );
$(window).on('hashchange', refreshByHash);
});
The problem is when user click browser back button from page help.html then, at first, the page webapp/#1 appears for the moment and after that webapp/#4 appears and it looks like unwanted flickering in the browser.
So what am I doing wrong with history.js and how to use it properly to avoid those unwanted flickering.

javascript redirect page and refresh cache at the same time

i have a problem when i redirect an user after edit profile and he edits the profile pic. I redirect him to his user page but it doesnt display the edited pic only if he manualy refresh page. Here is my code of the profile_edit.php page that redirects to profil.php:
<script type="text/javascript">
$(document).ready(function() {
var f = $(\'form\');
var b = $(\'#submit1\'); // upload button
b.click(function(){
// implement with ajaxForm Plugin
f.ajaxForm({
beforeSend: function(){
},
success: function(e){
window.location=\'profil.php?user='.$user_session.'\';
},
error: function(e){
}
});
});
});
</script>

add one more parameter with your url for cache busting some thing like this
window.location=\'profil.php?pram='+Math.random()+'&user='.$user_session.'\';

At first - you can add some hash, to prefer caching like
window.location=\'profil.php?user='.$user_session.'&rand='.mt_rand().'\';
This will create new url - so browser will load page as new
And it is possible, that you need add this trick to image url -- please check this moment
if you need to refresh page ( your current url equal to new one ) - use
window.location.reload(true);
at success callback instead redirect - true say to browser to refresh page