I am working on building a website that will not reload to a new page every time a link is pressed. I want to make something kind of like all enterprise/popular websites. (When looking in the network dev tab: notice that youtube page doesn't completely reload when you click on a link, same with google, same with Facebook for the most part. They all usually just reload the page content and nothing else.)
I would like only the HTML between the body tags to be changed (nothing else: no js,css, no head tags, etc).
It would seem like it is pretty easy. Currently, I am just using ajax to go out and fetch the html of the page, and load that into the body. Done! Not so fast... Three things (my code is at the bottom)
The js includes are located at the bottom of the page, right before the closing body and html tags. When looking in the network tab, it shows that the same js is always gotten again and parsed again. How do I prevent that?
Some pages will not load styles that are set. (note that all css, js, etc. scripts are the same for every page)
I want to make sure that the page is completely reloaded if the user leaves the website.
I am not sure if I am looking for a fix to the way I am doing it, but probably just a completely better different way to do it.
Here is my code:
$('a').on('click', function () { //on click of any <a> tag
var where = $(this).attr('href'); //gets url of the <a> attribute
$.ajax({
type: "GET",
url: where, //where is the variable defined above
success: function(a) {
// load next page
history.pushState({urlPath: where},"",where); //changes the link of the webpage
$('body').html(a); //changes the body of the webpage
document.title = $('#title').text(); //changes the title using some weird irrelevant method
}
});
return false;
});
$(window).on('popstate', function() {//on click of the back or forward button
$.ajax({
type: "GET",
url: window.location.href, //the url is the url that the back or forward button is set to
success: function(data) {
//console.log();
$('body').html(data);//replaces data
document.title = $('#title').text();//changes title using weird irrelevant method
}
});
});
Related
$("span.removeFromCart").on("click",function(){
var id = $(this).attr("data-id");
$.ajax({
type: "GET",
url: "ajax.php?id="+id+"&action=remove"
})
.done(function()
{
location.reload();
});
});
I have a shopping cart that has - and + next to the quantity of the cart item. it works & updates fine ONLY after location.reload(), as above.
I would like to try and update the content without using the location.reload(), as it causes my toggle cart to hide after reloading the page. Would it be easy to refresh this div or the content on the page without reloading the entire page ?
many thanks
This is possible, but it seems like you don't understand what it would entail.
In order to update the "toggle", you need to re-render (or re-create it) this can be accomplished with JavaScript templating (like handlebars or underscore template). Or you can refresh just the part of the page that needs updating. You might want to try out something called pjax.
https://github.com/Jrizzi1/pjaxphp
I have a template site which contents I want to change with data from an ajax call.
I have a button which opens an fancybox 3 iframe. The content of this page is what I want to change.
Button to open fancybox:
'<i class="fa fa-info-circle fa-2x inv-details" invoiceId="' + data[index].invoiceid + '"' +
'aria-hidden="true" data-fancybox data-type="iframe" data-type="iframe" href="javascript:;" data-src="/invoice_details/"</i>'
click event to trigger ajax call:
$('#my_in').on('click', 'i.inv_details', function () {
var inv_id = $(this).attr("invoiceId");
$.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'post',
dataType: 'json',
data: {
action: 'invoice_details_ajax',
inv_id: inv_id
},
done: function (data) {
//HERE I WANT TO FIND THE CONTENTS OF THE
//OPEN IFRAME AND CHANGE THEM, LIKE SUCH:
// $('.fancybox-iframe').contents().find("#test #bankgiro").text('test');
// This above works in console, if I load jquery first, it does not work here.
}
});
});
The jquery selector for the iframe is correct, since i can edit the page via the chrome console. So I think the problem is that it tries to change the page before it has loaded? Is there any solution for this?
All answers I've read assums you have an empty fancybox iframe page and simply append data to it. But in my case I already have an template site which contents i want to change. Links I have read:
How to show ajax response in fancybox iframe
Loading dynamic AJAX content into Fancybox
It is not clear from your description - you want to open iframed page inside fancybox and you want to make ajax request that changes contents of that page - at the same time? Would it not be more sensible to just load final page?
I think you just have to pass invoice id using url, like /invoice_details/?invoiceId=YOUR_ID and avoid messing with two requests.
If you've already tried document.ready and window.onload etc which I assume you have seems as you're using jQuery:
The way I tend to get around things like this is I but a setInterval() that fires every 0.5 seconds or whatever, checks if the needed info is there and if it is, does what it needs to and then turns itself off. Could work for you for needing to wait for page load?
I'm using Jquery/Ajax to load html pages into a div on my website. I get links certain class to open up in the specified div. When doing this the address bar remains www.example.com. Due to the fact that I do have several pages that I will like to be able to share; so when people visit the links it will take them to the website but with the specific page loaded into the div container.
Here's a few lines of my code
$( document ).ready(function() {
$.ajax({
method: 'GET',
url: "pages/promo.html",
success: function(content)
{
$('#contentarea').html (content);
}
});
});
$('.menu_nav') .click (function () {
var href = $(this) .attr('href');
$('#contentarea').hide() .load(href).slideDown( 'very slow' )
return false;
});
Unless the other pages are on your domain, you cannot do this. If the other pages are, see this StackOverflow question: Updating address bar with new URL without hash or reloading the page.
Here's the deal: since you are loading a new page and you want the URL of the browser to point to that page, you should just give users a link. They know how to use the back button. (You could use the information in the linked answer to to change the URL to something like this: http://www.trillumonopoly.com/other-website.com.)
You can use the history object.
$('#contentarea').html(content);
history.pushState({url: "pages/promo.html"}, "", "pages/promo.html");
With the use of the state {url: "pages/promo.html"} you can load your page into your div when your users navigate back/forward.
$(window).on("popstate", function(e) {
if (e.originalEvent.state != null)
{
// AJAX load e.originalEvent.state.url
}
})
I have a JSP page which contains three sections header,body and footer. I am loading header and footer sections with jsp's at runtime using JQuery syntax and body section contains some images/data displayed.
Now the problem I am facing is that, while running the application in browser, header page contains so many images which are being triggered from some locations due to that when ever I open this page in browser, first body section is getting diaplyed and then header content in being loaded. This is not I expect as I want all the page display at once.
I want to display all the sections at one time. Is there any way to tell browser to display content at once using Javascript/JQuery. I tried using document.ready in JQuery as well as window.load in javascript. None of them are working.
I am loading header/footer jsp's as below:
jQuery("#header").load('header.jsp');
jQuery("#footer").load('footer.jsp');
Problem: How to make sure browser displays all the page at once instead of displaying each section slowly.
To put simple, I feel browser works loading web page in top-bottom approach. So when the browser sees tag to load header.jsp it should load header page first and them move on to body followed by footer.But in my case it is loading body first as it is having less content and then slowly loading header.
PLease let me know if you need any further more details and provide me with any solution for this issue.
Try this (replace the urls to whatever the url to your header and footer are):
$.ajax({
type : "GET",
url : "url to header.jsp",
success : function(response) {
var headerHtml = response;
getFooter(headerHtml );
},
error : function(e) {
}
});
function getFooter(headerHtml){
$.ajax({
type : "GET",
url : "url to footer.jsp",
success : function(response) {
$("#header").html(headerHtml);
$("#footer").html(response);
},
error : function(e) {
}
});
}
When you visit http://www.rdio.com/#/aboutus/ for instance you will see that their about us page loads, now when you hover over or inspect the "About Us" link in their footer, it simply points to /aboutus. I have also checked View Source and there is strictly no magic occuring on the link itself.
I am thinking jQuery must update all their <A> elements and replace with the anchor based hash tag url approach.
How would I get this to function in my own project?
Thanks.
The anchors are there for linking; the real magic is Ajax and other dynamic JavaScript-based content. Here's what the link might look like:
$('.some-link').click(function(e) {
// Allow for linking:
window.location.hash = '#/' + this.getAttribute('href');
// Start loading the content:
$.ajax({
// ...
success: function() {
// New content gets put in
}
});
// Prevent the real link from being followed:
e.preventDefault();
});