I made a fully functional Ajax Content Replacement script. The problem is that it adds forwards like /about or /work or /contact to the adress but when I reload the site, the file cannot be find. Why?
Someone told me that the problem is that I added the file manually. How does that work? I am not a Javascript expert but I would like to learn it.
Somehow I need to add the history (via history api?). My .html files are in data. The strange thing is that it finds the file but when I try to find it manually, I get 404 Error or when I refresh the site with F5.
Can you help me and show me how it works. We can use my code to find the error. Thanks a lot.
UPDATE: Website Link
Html
<a class="hovers" href="about">About</a>
<a class="hovers" href="projects">Projects</a>
<a class="hovers" href="services">Services</a>
<a class="hovers" href="contact">Contact</a>
Javascript
$(document).ready(function () {
$('#allcontent').load('data/home.html');
$('.hovers').click(function () {
var page = $(this).attr('href');
$('#allcontent').fadeOut('slow', function () {
$(this).animate({
scrollTop: 0
}, 0);
$(this).hide().load('data/' + page).fadeIn('normal');
});
});
});
$('.hovers').click(function () {
history.pushState({
path: this.path
}, '', this.href)
$.get(this.href, function (data) {
$('#allcontent').slideTo(data)
})
return false
})
$(window).bind('popstate', function () {
$('#allcontent').slideTo(location.pathname)
})
I made a fully functional Ajax Content Replacement script. The problem is that it adds forwards like /about or /work or /contact to the adress but when I reload the site, the file cannot be find. Why?
Your code is effectively saying two things:
Load some data from this URL and add it to the page.
Tell the browser that the modifications to the current page make it the same as some other page at some other URL.
You have to create the page at that the other URL yourself.
You haven't done anything on your server to tell it to respond to /about (and its friends) with anything other than a 404 error.
You have to create /about yourself. pushState won't do it for you.
Related
Basically i'm making an article website just for learning purposes.
When the user adds a new article, it should redirect him to home page.
Testing it and creating a new article, i expected to be available once i got redirected to home page, but it only shows up if i hit refresh, so res.redirect() is basically redirecting me to the home page previously loaded, instead of properly activating the route. There is some method like refresh() or something that i should be aware of?
Thank's in advance
I think what you'd be looking for is location.reload();
or in this case you could give document.reload() or window.reload() a go
https://developer.mozilla.org/en-US/docs/Web/API/Location/reload
I had just found the trouble
// I was doing this:
Article.findAll()
.then( res.redirect("/home") );
// Correct way to do it:
Article.findAll()
.then( () => {
res.redirect( "/home" )
});
On my page, a content container holds different information depending which list item was clicked (news, video, blog, etc.)
This is achieved by loading in html snippets with jQuery's load method like this:
$('#container').load('blog.html'); // file from my domain
After the load, I can update the URL using this:
window.history.pushState("www.mysite.com", "mysite", "/blog");
Or change hash:
window.location.hash = "blog";
When the link is visited directly, this causes an error because there is no knowledge of such a page on my host. After the AJAX load, I'm wondering what the best way would be to make the current state of the page shareable ( I send the link to someone, and when they visit it, they see the state of the page as it was when I shared the link)? The link would be something like: www.mysite.com/blog.
The AJAX load:
$('li a').on('click', function(){
var file = this.id;
$('#container').load(file +'.html');
// window.history.pushState("www.mysite.com", "mysite", "/" + file); or..
// window.location.hash = file;
return false;
});
P.S. I would like to avoid using php for the sake of simplicity, but am open to all suggestions.
Well, if you use the hash, as you already state in OP, you should have no errors when you visit it directly. ( example: www.mysite.com/#blog )
On load javascript can check if a hash is set, and do the necessary ajax calls again to serve the page from a direct link. (PHP cannot see the hash by the way, so using only the hash, will not be controllable from PHP server side.)
$.ready( function() {
if (window.location.hash == "blog") $(#container).load("blog.html");
});
Using pushState (example: www.mysite.com/blog ) is a different story... That one would need you to create a .htaccess that will rewrite to (for example) the index.php. Index.php could then have javascript-logic that looks at the requested url, to load the desired content again with Ajax. (Or even without ajax, if you do it in PHP)
javascript (after configuring .htaccess to rewrite to the file holding this javascript):
$.ready( function() {
if (window.location.pathname == "/blog") $(#container).load("blog.html");
});
or in php (after configuring .htaccess to rewrite to the file holding this php):
<div id="container">
<?php
if ($_SERVER["REQUEST_URI"] == "/blog") {
include("blog.html");
}
?>
</div>
On page load, check for window.hash. If it is not empty, then do the same thing that you do when an <a> is clicked in your <ul>. But to not to reinvent the wheel, have a look at javascript routers, for example crossroads.js.
I'm using Asual's jQuery Address plugin to deeplink between content without the use of hashes (using the HTML5 History API).
Here is my code:
$.address.state("/").init(function(e){
$('#nav li a').address(); // initializes
if (e.value == "/") {
$.address.value("/home"); // loads /home by default
};
});
$.address.change(function(e) {
// loads whatever page is in that /pages folder and puts the content in div#container
$.get("/pages" + e.value + ".html", function(data, textStatus, xhr) {
$('#container').html(""); //clears out the old content
$('#container').html(data); //loads the new page in there
});
});
This works perfectly when clicking the top navigation buttons. Even the back and forward buttons in the browser work like a charm. The issue is when refreshing/opening the url in another tab.
for example if I write http://domain.com it gets me to http://domain.com/home and the content is shown. If I refresh I get a 404 Error. The browser is looking for an actual /home file which of course doesn't exist (home.html instead).
Any ideas?
Thanks!
DD
I was trying to do the same thing and got the same problem, ended using hashes.
I want to change the way that content is displayed on my website:
var FNav = {
init: function() {
$("a[href*=#]").click(function(e) {
e.preventDefault();
if($(this).attr("href").split("#")[1]) {
FluidNav.goTo($(this).attr("href").split("#")[1]);
}
});
this.goTo("home");
},
goTo: function(page) {
var next_page = $("#"+page);
var nav_item = $('nav ul li a[href=#'+page+']');
$(".page").fadeOut(500);
next_page.fadeIn(500);
How do I change this JavaScript, so I can have a proper back button functionality?
What I have tried (Unsuccessfuly). These are the solutions that I tried but without changing the javascript above. That is why I think none of them seem to work.
Using the History.js method described here:
https://github.com/browserstate/history.js/ I fill out all the steps and
enter the scripts to the header, however only the URL in the URL bar
changes when I click on a link. When I click the Back button, the URl
changes accordingly, but content doesn't load. When I enter a URL in
the URL bar, I get sent to the home page.
Ajaxify and Gist method
described here: https://github.com/browserstate/ajaxify Achieves the
same as above, same issues as well
Davis.js method described here:
https://github.com/olivernn/davis.js Achieves nothing upon completion
of the installation instructions. No change.
jQuery BBQ Plugin method
described here: http://benalman.com/projects/jquery-bbq-plugin/
Achieves nothing, no change upon loading the .js file in the header
of the website.
I read this article and understood it:
http://diveintohtml5.info/history.html
I'm not sure why you couldn't get Davis.js to work for you? Perhaps open an issue on the GitHub page.
If you want to use hash based routing with davis you need to include the hash routing extension. You then just need to include it in your page after davis.
The following setup should then allow you to handle routes
Davis.extend(Davis.hash)
Davis(function () {
this.get('/:page', function (req) {
FluidNav.goTo(req.params.page);
})
})
Assuming you have links in your page with the following
Page1
Page2
Davis will take care of handling the back button for you, so that if you click on the link for Page1 and then Page2, clicking on the back button will navigate to Page1 again.
If you have any problems please open an issue on the GitHub page detailing what you have and what isn't working and I can take a look at it.
The back button does not magically work. You need to code and listen for the event change!
In history.js, it shows you right on the front page:
// Bind to StateChange Event
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
var State = History.getState(); // Note: We are using History.getState() instead of event.state
History.log(State.data, State.title, State.url);
});
I want to change the way that content is displayed on my website:
var FNav = {
init: function() {
$("a[href*=#]").click(function(e) {
e.preventDefault();
if($(this).attr("href").split("#")[1]) {
FluidNav.goTo($(this).attr("href").split("#")[1]);
}
});
this.goTo("home");
},
goTo: function(page) {
var next_page = $("#"+page);
var nav_item = $('nav ul li a[href=#'+page+']');
$(".page").fadeOut(500);
next_page.fadeIn(500);
How do I change this JavaScript, so I can have a proper back button functionality?
What I have tried (Unsuccessfuly). These are the solutions that I tried but without changing the javascript above. That is why I think none of them seem to work.
Using the History.js method described here:
https://github.com/browserstate/history.js/ I fill out all the steps and
enter the scripts to the header, however only the URL in the URL bar
changes when I click on a link. When I click the Back button, the URl
changes accordingly, but content doesn't load. When I enter a URL in
the URL bar, I get sent to the home page.
Ajaxify and Gist method
described here: https://github.com/browserstate/ajaxify Achieves the
same as above, same issues as well
Davis.js method described here:
https://github.com/olivernn/davis.js Achieves nothing upon completion
of the installation instructions. No change.
jQuery BBQ Plugin method
described here: http://benalman.com/projects/jquery-bbq-plugin/
Achieves nothing, no change upon loading the .js file in the header
of the website.
I read this article and understood it:
http://diveintohtml5.info/history.html
I'm not sure why you couldn't get Davis.js to work for you? Perhaps open an issue on the GitHub page.
If you want to use hash based routing with davis you need to include the hash routing extension. You then just need to include it in your page after davis.
The following setup should then allow you to handle routes
Davis.extend(Davis.hash)
Davis(function () {
this.get('/:page', function (req) {
FluidNav.goTo(req.params.page);
})
})
Assuming you have links in your page with the following
Page1
Page2
Davis will take care of handling the back button for you, so that if you click on the link for Page1 and then Page2, clicking on the back button will navigate to Page1 again.
If you have any problems please open an issue on the GitHub page detailing what you have and what isn't working and I can take a look at it.
The back button does not magically work. You need to code and listen for the event change!
In history.js, it shows you right on the front page:
// Bind to StateChange Event
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
var State = History.getState(); // Note: We are using History.getState() instead of event.state
History.log(State.data, State.title, State.url);
});