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.
Related
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);
?>
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 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.
I have heard a lot about backbone.js and quite frankly I don't understand its concept. Does it require that all the elements should be in single page to work out with its animations and effects ? Or it can grab items from server and load it with transition or i mean different pages but make look like a single page. I didn't understand its concept well, so that's why i am asking. What i am looking for is to combine backbone or any other javascript framework to work with a rails project, that could give some ease transition across pages and can give native application look.
Backbone is also here to give you structure by being MVC, and it allows to communicate in a really simple way with the server. You'll be able to update / fetch / save your data (your rails models for example) on the server. So you'll need it if you want your user to work on an Ajax page without having to reload the page.
For example, you'll fetch all your data from the server when the page loads and then you'll have access to all attributes of your models and will be able to modify it and save it to the server.
Moreover, if you want your models to appear with transition, as Backbone is MVC, you'll be able to make that easily. As you have to choose when and where your views will appear on the DOM, you'll be able to put transition at that time.
By the way, Backbone works really great with Rails!
Backbone.js is all about data to be used in some way from your users, think about it as ActiveRecord plus Sinatra (or rails) on a browser, infact, the framework will give you a way to handle your data inside a browser instead of the server.
If you are looking for a simple way to add transitions to your existing app/website you could use a jquery plugin like Pagify (it rely on $.getHtml()) modifying it to get a fragment of the subpages like my (buggy) fork.
I want to build a website which will accommodate the basics like a navigation bar and contact form, ect. I was wondering what the best way to go about this is. I would want to be able to make any layout I want, (which theoretically I could do with css,) like make it look like http://www.jquery.com or http://www.sciencedaily.com or even http://www.stackoverflow.com .
Whats the best method to do this? Should I use Joomla (which I'll need to learn), some site builder (which I'll also need to learn), some template, or just make it from scratch?
Keep in mind I want to be able to add js code and be able to easily add new features and options.
It depends on your experience and effort. Of course building from scratch is the best option if you want to build the thing that you want it to be. But it also take time and skill and effort to build such website (HTML, CSS jQuery etc.)
Choosing website template is just for people who don't have time or expertise on the field.