I have a multi page site that when I select any of the nav links to go to another page it reloads the whole page every time. I think I can use AJAX and jQuery to make an XMLHttpRequest and give the body tag of each page an ID to target.
However, is there a better way to accomplish this? I've been searching everywhere for help and get a lot of stuff from several years back using the above method.
Thanks in advance for any help.
I think you want to build a Single Page Application (SPA).
There are many frameworks out there that can help you build such apps, like Angular, React, etc.
well you can obviously achieve that by using js frameworks that enable you build what is called a single page application (SPA) like angular,react,vue....check out angulars documentation
https://angular.io/
Angular is far too big for what you probably need. You can go for React, and if you install and run create-react-app it sets up everything (or almost) for you.
https://www.npmjs.com/package/create-react-app
https://github.com/facebook/create-react-app
Looks like you want to create a SPA or single page application. This would not be possible with simple HTML, CSS and JS. With vanilla JavaScript you can change the page without refreshing it but it would be pretty simple without the a lot of inputs being tested.
The best way to do what you wish to do is using a framework. The best framework for this would either be Angular, React or Vue.
Angular is a JavaScript based web framework for creating single page applications. Although it was initially on JavaScript but now with the new versions they have shifted it to TypeScript(a language similar to JS, but with some differences).
React is JS library that does the same thing pretty much, except it is a library not a framework. Framework is a complete thing that you need for development but library is more like additional tools that you can use to develop some additional things rather than coding it all by yourself that would take hundreds of lines just for the simplest things. More information is available here if you want something on frameworks vs libraries: What is the difference between a framework and a library?
Vue is a JS framework for that is used for creating user interfaces. It is not really SPA but can do the same thing with some other things.
These three can also be used with a full stack as a backend and a database of your choice. Although MongoDB is a very popular with the web development frameworks with extensive support in a lot of languages on the backend. So now you can use the database on the backend to update your page without refreshing it.
All three frameworks are very popular with a very vibrant community to help you figure things out when you get stuck. You should do a little more research as to what you want to do and then look into these three frameworks/libraries to decide what fits your expectations and then move forward with that. Hope this helps.
Back in the days before frameworks be a thing, we use to keep the content in a frame and use javascript that refresh the page every x seconds.
look at this answer:
An Iframe i need to refresh every 30 seconds (but not the whole page)
I think the best way to achieve it is by making asynchronous calls to deliver desired content without reloading the entire page.
This can be done with Javascript or JQuery. JSON will be the protocol you will use to send data back and forth, so you can pass on parameters and get results from your queries using a quite simple XML based format.
But there is a lot of different ways to accomplish this. To improve your question I'd suggest you to follow the link below:
[https://stackoverflow.com/help/how-to-ask][1]
For now, just to show you a general approach, you can use JQuery to call a PHP page that will feed back any content you need. It goes like this:
var params = {
"param1" : param1_value,
"param2" : param2_value,
};
var url = "page_to_call.php";
$.ajax({
context : this,
type : "POST",
url : url,
data : params,
dataType: "json",
encode : true
})
.done(function(data){
console.log(data);
})
.fail(function(data){
console.log(data);
});
Whatever you want to return after this call can be send back like this:
<?php
$return = array();
$return["SOME_DATA"] = "some content here";
echo json_encode($return);
?>
Related
Recently I decided to check out VueJS 2.0. Since I still mostly work with various CMS systems (Wordpress, TYPO3, OctoberCMS, that kind of stuff) I wanted to try and implement a pjax like page loading. To my suprise, it is not as simple as I thought.
Is there a way to replace parts of the page and reinitialize the components in VueJS?
I should probably explain why I want to implement such a feature. In the last years I found that it is much easier and quicker to develop feature rich websites using a frontend framework. However, since most customers need a backend to manage their websites, using an already existing CMS is a no brainer.
In the past I used Angular to build the frontend. It worked suprisingly well, even with pjax, since it is possible to reinitialize parts of the page in Angular 1.0.
Angular 2.0 took a different approach and while I absolutely love what they have done with it, I do not think it is suitable for use in an enviroment, where most of the frontend is being rendered by the server. That's why I decided to check out VueJS.
I want to implement a pjax-like feature, because the HTML already gets rendered on the serverside and dynamically replacing parts of the page just looks cool :)
EDIT
Just to be clear, I am not talking about the jQuery pjax plugin, just about dynamically replacing parts of the page (which in the company I worked for before was simply referred to as "pjax" :P)
Yes, you can absolutely do that. You can structure your one page view with multiple components, and you can just reload the data of one component which will update only that component, or you can also have conditions with v-if, so that you can change which components will render dynamically.
Sample fiddle: http://jsfiddle.net/mimani/6dgbg2dL/
Sample fiddle simulating ajax with setTimeout: http://jsfiddle.net/6dgbg2dL/1/
You can use vuex to communication between multiple components, check one sample here.
I wanted to create a Single page App without using front-end frameworks, since it was a small project.
So when user clicks on navigation, it fires an AJAX call and appends (HTML code with formatted data) it to HTML.
This is how it looks: https://gist.github.com/yask123/c786f49c7118e4cd91eab5c56f69257d
Is it super bad practice to do so ? Or should I use Handlebar.js just for this? (Would it be an overkill just for one thing ..? )
Live app: http://dtumart.com/
It is okay to write code in your logic (JavaScript).
Loading an entire framework/library for a single action is usually overkill and there can be several benefits to creating your code in the logic.
The only real concern here is if your JavaScript fails, or the clients browser doesn't support, then the client won't see anything.
I'm trying to create a one page website with jQuery. i'm trying to figure out how I change the URL of the website (E.g. www.test.be) when I click the right menu item. Right now it just gives (www.test.be/#) But I'd like it to say (www.test.be/work) for example. Also when I refresh I'd like the website to be on the page where the user was, not the first page. Would this be possible to achieve?
While you can do this with jQuery alone, it would be an uphill struggle. You're better off using a client-side MVC framework.
There are a number of client-side MVC frameworks available that should do this. I generally use Backbone.js, and using its routing you would easily be able to accomplish this kind of thing. It makes it very easy to define client-side routes with hashes and assign views to those routes. As long as you don't mind the URL being www.test.be/#work, that will be fine
You might also want to check out AngularJS as an alternative, but I can't speak for how easy it would be to implement this in Angular.
I just wondering what is the technique of creating a single page website by using javascript without using framework like ember js / angular js.
For example in php like they can get
example.com?view=homepage
Can easily get the view and load/display homepage and load homepage's content.
What if in javascript if want to load another page/content?Any technique for building it?
I just building with a simple function like
$("#otherpage").hide();
$("#homepage").show();
I don't know is it the best way to develop a javascript single website page with this way?Or any technique that you all can suggest, cause I need learn from basic, need use javascript to explore and create a single app page without php.
Thanks lot
If it was that easy, do you really think Ember, Spine and Angular would be that widely used?
Snarky comment aside, building a page that refreshes like what you've done, while simple and rather easy to modify, falls very short on quite a few things:
For sites larger than a couple of pages, your HTML markup will become MASSIVE. Not just that, but you'll have to run every single piece of code on every page...per page. Say hi to insane overhead, both on bandwidth and on server-side processing, even with caching.
If you want to dynamically update part of a page, you'll need to use AJAX anyway. Why would it suck to write stuff using an MVC approach from the get-go, rendering data as you go along with AJAX, rather than brute-feeding the entire DOM?
What is the problem with Angular, anyway? Widely used, bug-free, unit-tested, built by reliable people, and if a bug does go through, you can be sure that the community will fix it quicker than you could
If the last comment didn't dissuade you from building your own to replace an already-existing platform, I would strongly recommend you build your JS to be fed data (JSON or otherwise) from your server and to dynamically update the page. You might not want the full-blown MVC approach, but at least the MV part of it. This will also allow modularity.
Take a look at http://www.usatoday.com, the website is made with backbone.js but work perfectly without.
I don't think they use somethings like http://phantomjs.org.
Someone know how they did that?
Thanks
P.S. I also send a mail to usatoday, if they answer and give me the permission I will report her what they say.
They use a technique called progressive enhancement.
Essentially, this means you write the basic site without JS, and only add JavaScript on top of it later to improve the functionality.
There is nothing particularly special to it - the server simply sends the full HTML for the page which can be used to render the site instead of using Backbone to generate the markup on the fly from templates.
To be more specific about the techniques used in this case, it looks like they are generating the content mostly on the server even when using Ajax to load it.
When changing pages with JS enabled, they send the full page content markup from the server. Most likely this is done so that they can improve code reuse between the JS and non-JS versions of the site.
The HTML-block that is sent seems to contain some JSON. Most likely this is loaded for their client-side implementation so it knows what content you are currently viewing.