Changing div#content without reloading using Jquery - javascript

I have been reading this board all night and I haven't found anything that quite hits the answer I need on the head, so I will ask.
Here's the basic idea of what I'm doing.
On Page Load, fade in, and display the default page.
User Clicks Navigation Link (a.navLink).
div#content fades out, calls a function to redirect.
div#content fades in with new content.
I have it at about 90% however, it's not quite right.
I am using a PHP Switch to manage content on the site using the $_GET superarray. My basic switch structure is as follows:
switch( $_GET['page'] ){
default:
//DISPLAY HOME PAGE
break;
case "story":
// DISPLAY STORY
break;
case "contact":
// DISPLAY CONTACT
break;
}
and so on...
The JQuery I'm using to perform the Fade In / Fade Out Action is as Follows:
$("#content").css("display", "none");
$("#content").fadeIn(1000);
$("a.navLink").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("#content").fadeOut(500, redirectPage);
function redirectPage() {
window.location = linkLocation;
}
});
The current code successfully fades out, changes pages and fades back in, but the problem is the site reloads, causing the rotating banner I have at the top of the page to restart. Also, the page starts back at the top as if the site had just been loaded. I know that this likely needs an AJAX function, but I have very little experience using AJAX (I often avoid it like the plague).
It is very important that I use the Switching structure I have in place, and I haven't had much success hashing it. The URL that I would be working with is DOMAIN.COM/index.php?page=pageName. Again, this structure is very important and cannot be changed.
Any insight on this would be great.
(Again, I understand this question type may have been asked before, but i feel that I need one line at most, and I'm trying to find out what that is)

Instead of
window.location = linkLocation;
Use Ajax to re-load only #content:
$( "#content" ).load(linkLocation, function(){
$('#content').fadeIn(500, function(){
// do something when the re-load is finished
});
});
You can't change the URL of the window via AJAX, but you could change window.location.hash. Others (in the comments) have mentioned using the history API.

Related

jQuery only working sporadically or on a page refresh/hard reload

I am using jQuery to read the URL of the page to determine which page the user is on and then change the background accordingly. My code works great, sometimes... I've tried using $(window).load(function() to no avail and the only answer I can find here is to use $( document ).ready(function() but that's not much help because that's how I wrote the code to begin with, and it's not working as it should. I also attempted to force the page to reload inside the function but that was pointless as well, ( I didn't have much hope for it anyway). When it doesn't work a simple click of the refresh button will get it to work. I have also tried putting the script tag in the header and footer, no difference. I have implemented the same code on different sites and in both cases, it works fine... I thought that maybe it was a caching issue but multiple hard reloads proved otherwise.
You can see for yourself at http://maisonshowroom.com/ click through the nav and the background is supposed to change for each page. I also have a console.log message that should reflect the URL, sometimes it's correct...but that just raises more questions for me, regardless if it's correct or not it should still have a background image rather than just being blank.
Here's my code
$(document).ready(function() {
//changes background images based on which page user is on//
var currentPage = window.location.href;
console.log(currentPage);
if (currentPage.includes('about')) {
$('.wrapper-inner').css('background-image',
'url(http://maisonshowroom.com/wp-content/uploads/2017/09/maison-
about.jpg)');
}
else if (currentPage.includes('services'))
{
$('.wrapper-inner').css('background-image', 'url(http://maisonshowroom.com/wp-content/uploads/2017/09/maison-service-e1506643269331.jpg)');
}
else if (currentPage.includes('products'))
{
$('.wrapper-inner').css('background-image', 'url(http://maisonshowroom.com/wp-content/uploads/2017/09/maison-product.jpg)');
}
else if (currentPage.includes('contact'))
{
$('.wrapper-inner').css('background-image', 'url(http://maisonshowroom.com/wp-content/uploads/2017/09/maison-contact.jpg)');
}
else {
$('.wrapper-inner').css('background-image', 'url(http://maisonshowroom.com/wp-content/uploads/2017/09/maison-about.jpg)');
}
});
Remove this line:
window.location.reload();
and fix this line :
'url(http://maisonshowroom.com/wp-content/uploads/2017/09/maison-
about.jpg)');
to:
$('.wrapper-inner').css('background-image',
'url(http://maisonshowroom.com/wp-content/uploads/2017/09/maison-about.jpg)');
One single line
All I needed to do was disable the AJAX page transition from the WordPress dashboard. Thanks, Patrick Evans, for pointing out that it was being handled by AJAX, I would have never guessed.

Anchor click even not firing after PJAX page load

I am having a pretty strange problem with a website I am messing around with, and I can't wrap my head around what may be going wrong. I am using PJAX on the site, and the have a div in my body with the id of #page-contents.
The code I am using to setup PJAX is as follows...
<script type="text/javascript">
$(function(){
$(document).pjax('a', '#page-contents', {
fragment: '#page-contents',
timeout: 2000
});
});
</script>
I know that the setup is correct because I edited the PJAX file to fire an alert whenever it swapped out the content of my #page-contents div, and I do see that alert when I would expect to (i.e., on link clicks).
I have a navbar along the top (a bootstrap navbar) and I was initially having trouble keeping track of which navbar item would be marked as active. I have solved this problem using the following javascript code.
<script type="text/javascript">
$("a").click(function() {
$(".navbar-nav li").removeClass("active");
var nextPage = $(this).attr("href");
nextPage = nextPage.substring(nextPage.indexOf(window.location.hostname) + window.location.hostname.length);
switch(true) {
case nextPage == "/about":
$("#about-nav").addClass("active");
break;
case nextPage == "/contact":
$("#contact-nav").addClass("active");
break;
case nextPage == "/resume":
$("#resume-nav").addClass("active");
break;
case nextPage.indexOf("/projects") != -1:
$("#projects-nav").addClass("active");
break;
default:
break;
}
});
</script>
This works fine for all links I have in my navbar, but I have found that any links I have inside my #page-contents div will not trigger my above script. I know that PJAX is still working as the page changes and the alert I inserted displays.
A few things I have found in my own testing:
I have also found that if I directly load an address that contains a non-navbar link and then click that link, it will work. But coming back to that page via a pjax reload and then clicking the link will not fire my event.
Adding a test class to one of my anchors and then associating some event with that class has the same problems.
Does anybody know why my script would not be getting executing? Or maybe I am just missing something obvious.
Thank you in advance!
P.S.: The website in question is my personal site I am working on, the link is http://rosshays.me, the page I first noticed this on was my about page. (The site is a work in progress as you'll clearly see.) As mentioned about, going to the about page directly and clicking the link will work, but if you navigate to the about page and then try to click the link in the page, it will not work.
Ross-
I had a similar issue and I know how to solve this; this script is not binding to the new elements because it is not being re-ran on the new elements once they are loaded.
Please put your function in an external .js file. Once complete, you can add this script to your header:
$(document).on('pjax:complete', function() {
$.ajaxSetup({ cache: true});
$.getScript("YOUR SCRIPT FILE PATH HERE', true);?>");
});
You will have to add more $.getScript calls for any other javascript/jQuery that is needed in order to enable the events you want to take place. (Example: you may need to reload jQuery)
This will re-apply the jquery and javascript to the new elements that are loaded via PJAX.
*One thing to note: If you are using twitter bootstrap, do not re-call the bootstrap script with $.getScript as it will cancel itself out on every other re-load.

Make browser's back button work when using hide and show (jquery)

I've seen the new website of megaupload (mega) and we've got this:
Ok, if I press on left-menu contacts, it only reloads the white part on the image, if I press messages, the same, it only reloads white part. But if I go from contacts to messages and I press browser's back button, it goes from messages to contact and only reloads white part as always.
In my website, I do the same using jquery hide and show, but obviously, if I press browser's back button it doesn't hide the div and shows the other one.
My web site is only one html file and there are 4 div that get shown or hidden depending on the button you press, this is an example:
$("#btn_contact").click(function () {
$("#content_contact").show();
$("#content_home").hide();
$("#content_products").hide();
$("#body_aux").hide() ;
$(this).addClass('visited');
$('#btn_products').removeClass('visited');
$('#btn_home').removeClass('visited');
});
Can anybody tell me how to find this with jquery or whatever I have to use.
I don't know if I've explained myself well, if not, ask me to do it better.
I would appreciate any help. Thanxs a lot.
Maybe it'd be easier for you and more appropiate to make "content_contact.html", "content_home.html", and so on and use .load() function as Ozan Deniz said. You wouldn't have to change margins, positions, etc. and back button would work withouth programming. I think is not appropiate to make the whole website using just one html file, showing and hiding div's, ofcourse you can do this but maybe is not the right way. I'm newbie at this, but that's what an expert told me beacuse I was doing something similar to that.
Hope to help you.
You can use jquery load function to load white part
For example;
$('#result').load('ajax/test.html');
And in back button event you can load the white part
jquery hide and show
window.onbeforeunload = function() { $('#result').hide(); }; or
window.onbeforeunload = function() { $('#result').show(); };
jquery load function
window.onbeforeunload = function() { $('#result').load('ajax/test.html'); };

execute a function after redirecting - javascript

Okay, i have a simple button on my page (MyPage) which fades out the current div (fade 1) and fade in another one (fade 2). I have now realised that there might be chances that i would want to go to that page (fade 2) from somewhere else directly. I am able to redirect my page by window.location. However i also want that if that link was pressed (from some other random page), go to page (fade 1) and then fadeOutthe current div and fadeIn another one (fade 2).
Hope this isn't too confusing. This is the code i am using to get to the page (MyPage):
$('#fav').click(function(){
window.location = 'production/produc_order.php';
$('#view_production').fadeOut('slow');
$('#create_order').fadeIn('slow');
})
If you don't want to or can't re-code your page to support AJAX, the other old-school option is to pass a parameter in the URL as a hint to the refreshed page. (You can hide it by making the redirect a POST if you feel it's really necessary, or use a cookie technique. The point is that the refreshed page needs a token of some form from the prior page.)
eg:
$('#fav').click(function(){
window.location = 'production/produc_order.php?create=1';
})
and put the fade code inside the $(document).ready() function, with a check for the create parameter, cookie or whatever.
I'll agree with #remibreton though, using AJAX is the more hip, modern method.
Changing the window.location will kill all scripts currently running in the browser.
Your only other solution is getting a page via AJAX and run a callback function to execute when the content is loaded. Here is something to get you started.
Also, jQuery as a nice .ajax() method to easily perform AJAX requests and associate callbacks to successful and failed requests.
you can do it with sessionStorage()
$('#fav').click(function(){
sessionStorage.setItem("reloading", "true");
window.location = 'production/produc_order.php';
});
var reloading = sessionStorage.getItem("reloading");
if(reloading == true) {
sessionStorage.removeItem("reloading");
$('#view_production').fadeOut('slow');
$('#create_order').fadeIn('slow');
}

javascript load url in background

I remember a couple of years a go, I used an hack from somewhere to update link hits in the background. What I remember is that I had an onclick event on my links that triggered a javascript function which tried to load an image or something (this is the hack), but instead of an image (or whatever it was) you put in an url like 'mysite.com/updatehits.php?id=3'
Hope this makes sense :S
Say you have this link:
<a id="link" href="foo.html">Click for foo</a>
You want the user to visit that link, but transparently call a 'hit counter' via ajax. That can be done like so:
$("#link").click(function(e) {
// prevent the link from getting visited, for the time being
e.preventDefault();
//update the counter
$.post("counter.php" {incrementCounter: this.href}, function(resp) {
if(resp == "success") {
alert("updated");
} else {
alert("failed");
}
// updated. Now visit this link as normal
window.location.href = this.href;
});
});
Still, I think counting views is something best done on the server side. Plus, this will more than likely cause an annoying perceptible delay to the user upon visiting links.

Categories

Resources