I am currently building a website in codeigniter that is one page site, basically one the user comes to the page, they created with a main menu from that menu they choose which sections of the sites they would like to see, and clicks on the associated links...clicking on these links should display the content in their own accordian menu.
My question is I assume the easiest way to do this would be load the selected views in using jquery and ajax? If I am on the wrong lines what would be a better solution, also I can't find anything about loading in views using ajax, does any one have any advice?
Yes, you can easily load content with AJAX and jQuery, by binding click-events on your menus and links, like this:
$("a.menuitem").click(function () {
var link = $(this), url = link.attr("href");
$("#content_pane").load(url);
return false; // prevent default link-behavior
});
However, by going down this route you forego some key functionality in the browser. The Back-button won't work. Your users can't bookmark any of the subpages. There are workarounds (like this jquery history plugin), but it'll be a lot of work to replace functionality that comes natively with every users browser.
Related
I'm at my very first steps with jquery.I've got an index.php file which includes:
header.html
indexview.html
footer.html.
Into the indexview.html file there are two divs. One on the left (a menu) and one on the right(div id="content"). Whenever I click an item on the left menu, jquery is responsible to load other html pages(and eventually fetch data from the DB thanks to ajax) INTO the right div (div id="content"). I'm really liking this kind of approach, but the problem is that if, for example, I load:
Photo.html
Contacts.html
Info.html
Into the main div (the right one: div id="content") and then I press the back arrow, it just brings me to index.php with the indexview.html page loaded (instead of showing me contacts->photo->indexview).
I've already did some searches on the web and find out that I should build something that fetches the url thanks to the event handler "popstate". I've already dig a bit into that or into a little framework that can let me handle all of that, but, still I'm not fully understanding what I am supposed to do. The items on the left are NOT "<a> links" and don't have href attributes of course. Do I have to substitute every item (now a li item) with an <a> element? If so, how do I proceed to make the history work as I wish?
P.s. Of course, every time I load something into my right div (being photo.html,contacts,html etc) my url does NOT change.
Here is a little jsfiddle (not sure if it can help: doubt that). Clicking on whatever item in the menu makes jquery load() an html page in the right div ("overriding" the div where you "find Welcome, this is the integrated information management system web interface of the ...etc!").
http://jsfiddle.net/5by64tsn/
$("#listContact").click(function(){
$("#content").load('view/contacts.html');
document.title = 'Contacts';
});
When I click listContact, the contacts.html is loaded into the content div.
What you're hoping to accomplish isn't how Ajax/browser history stuff works. Ajax calls are independent of the browser's history and do not affect the back/forward buttons without adding code to do so. You've mentioned popState, which is close to what you want. You actually want pushState.
// Add the url to history
window.history.pushState(null, null, [url that you load via Ajax goes here]);
Using your example:
$("#listContact").click(function(){
$("#content").load('view/contacts.html');
document.title = 'Contacts';
window.history.pushState(null, null, '/view/contacts.html'); // You'll need to add a leading '/' otherwise the url will just keep appending the relative path
});
I have a website that loads its content by the user clicking a button, then the clicks calls a javascript function that updates just the content of a central <div> element by changing its inner html with AJAX and jQuery.
So for example, when the visitor wants to go to my contact page, they click the contact button, and the div's content is updated to the contact form by pulling that content from an external file and using it to replace the div's innerHTML. The actual address of the entire page doesnt change, as the entire page isnt being reloaded, just the innerHTML of the div.
Further to this, my site uses PHP, and I've coded it such that various content can be populated in the div on page load by passing variables in the url. For example, index.php?page=home will tell the PHP script to load the home page content from an external file, while index.php?page=contact will load the contact form. This way search engines can find each page and their content by following these links in my sitemap.
My problem is that if a visitor clicks a button and loads different content into the div, then clicks the reload button of their browser or presses CTRL+R, the entire page reloads and the div of course reverts to its original content.
My question is, is there a way to load a particular page when the browser refreshes? For example, if the visitor has loaded the page index.php?page=home then clicked on the contact button and updated the div content, then pressed the refresh button of their browser, can i somehow write a script that will load index.php?page=contact instead, preserving the look of the page and the content?
Option 1: location.hash
Easier, but not as robust. Worth taking a look at, but if you want to store the states of multiple elements, you probably want option 2.
Here's a demonstration of the code below.
Example:
function onHashChange() {
var hash = window.location.hash;
// Load the appropriate content based on the hash.
}
$(window).on('hashchange', onHashChange);
$(document).on('load', onHashChange);
$('#button').click(function(){
window.location.hash = "home";
});
This way, all you need to do is change the hash on button change and handle the page load using the hashchange event.
Option 2: History API using History.js
A little harder to implement (but not much!), but infinitely more robust. Relies on a widely used framework.
Another, and perhaps a cleaner way of doing this would be to use the History API. It allows you to change window.location without refreshing the page, allowing you to handle those changes using JavaScript.
Not all browsers support the API yet though, but you could use History.js, which provides location.hash fallbacks if needed. Here's a demo.
From History.js's github page:
History.js gracefully supports the HTML5 History/State APIs
(pushState, replaceState, onPopState) in all browsers. Including
continued support for data, titles, replaceState. Supports jQuery,
MooTools and Prototype. For HTML5 browsers this means that you can
modify the URL directly, without needing to use hashes anymore. For
HTML4 browsers it will revert back to using the old onhashchange
functionality.
Example of History.js:
function onStateChange() {
var state = window.History.getState();
// Handle state accordingly.
// Fetch the data passed with pushState.
var data = state.data;
var title = state.title;
var url = state.url;
}
// Check the initial state.
$('document').on('load', onStateChange);
// Listen for state changes.
window.History.Adapter.bind(window, 'statechange', onStateChange);
// Any data you want to be passed with the state change.
var stateObj = { variable : 'value' }
// Change state using pushState()
window.History.pushState(stateObj, "State name", "/page.html");
The state name is ignored by most browsers. The third parameter is the bit that gets added to the URL.
Weeks ago I've released a jQuery plugin for this situations, when the developer wants to add ajax content to a page, and dynamically change the URL.
The plugin is jQuery Dynamic URL https://github.com/promatik/jQuery-Dynamic-URL
There is a demo here: http://promatik.pt/github/dynamic-url/
When you load ajax content, you can push a path to the URL, ex:
$.pushPath( 0 /*level*/, "contact" )
Your site instantly turns to: example.com/contact
Or in your case, you can use:
$.pushVar( "page", "contact" )
Your site instantly turns to: example.com/?page=contact
This plugin also allows you to do this:
Imagine that you give me a link for: example.com/?page=contact
In the index page, $.getVars( ) will return: {"page" : "contact"}
So with this info you can build your page based on the this queries.
There's more thigs you can do with the plugin, like listening to event onPopState (that means user went back or forward in browser, so you can rebuild your pages based on that) just try out the demo...
Important information: This plugin works in all modern browsers except IE9, witch works partially, you still can access url data like example.com/?page=contact (and build your page based on this queries) but not modify dynamically the URL during the user experience.
i am trying to make a control panel for my site, but i have no idea on what logic to use.
for example my control panel has an add user button,what i would like to happen is that when a user clicks on that button.. the page will show up on a specific <div></div> with out refreshing the page.
The logic i was thinking was:
1.to use an iframe and load all the relevant pages their(which i don't know the PRO's and CON's)
2.Use FLASH, for the control panel(which i don't know the PRO's and CON's)
3.Use javascript or a JS library like JQuery which i don't know what to call it..
the question is what logic would i use, or you can advise something more secured and netter. thanks
If you expect people to frequently add users from this page, it might be wise to just load the form necessary for adding users into the DOM to begin with, and toggle its visibility when the admin clicks on this button.
The last option you mentioned, loading data asynchronously with jQuery (or any JS library), would also be pretty trivial. There are numerous ways you could do that, but one simple method is to just use the Ajax .load method:
$(".addUser").on("click", function(){
$("#myDiv").load("/addUserForm.php");
});
I am looking to build a single page with 1000+ pages, dynamically generated from a database. One row in the db = 1 page.
I'd like the navigation to load a different, initially hidden with jQuery, and I believe I'll be ok doing so, however I'm also hoping for each individual post/div to be accessible with a direct URL, for example site.com/page.php?page=1
Is there a way to make the url change onclick, along with the div? This way, if I had a facebook share button, it would actually share a specific post, and not just the same static page.
Thanks!
You can use the jQuery plugin BBQ http://benalman.com/projects/jquery-bbq-plugin/
thanks for coming in and looking at my question.
I have a page that has a bunch of dynamic a tags with ids like aTag1, aTag2 ans so on.
now I need to make these tags open the same lightbox that initially loads a partial page named register.php,
and the user will fill out the form, sumbit it then go to another partial page named payment.php and go on until the registration and payment are all settled.
this process needs to be done using ajax.
I think this should be relatively easy if appropriate ajax plugin is used.
Could you please advise any plugins and tips?
Thanks a bunch!
Check out jQuery and jQuery UI Dialogs. Of particular interest to you would be the modal form demo. If you definitely need to have the content loaded from separate URLs, you could put an iframe in the dialog or do something like this example.