jNavigate jQuery Plugin
Posted on April 12, 2011 by Phil 28 comments
This plugin has had a rewrite and can now be found at the official jNavigate website
I started building this plugin a while back when I wanted to replicate some of the nicer features of ColdFusion’s CFajax library such as the connection between a CFForm and it’s parent CFDiv where the CFForm submits and loads back into the CFDiv via ajax. If any of you are familiar with the ColdFusion implemetation of this then you are also probably aware of just how crap it is with all sorts of JavaScript files being added to your page header and mindless attributes spread all around your HTML page.
I knocked together this jQuery version of the aforementioned functionality and recently added in some support for history states. While still a work in progress it certainly has enough in it already to pick up and use whether that be to enable a single page brochure site, submit a newsletter sign up form or to just populate a small content box. You can check out the little demo/documentation site I put together using jNavigate to get an idea of how it works.
Related Posts
28 Responses So Far
-
Pingback: Download jNavigate | Free Web Script
-
-
Phil April 25, 2011 at 6:12 am
If you mean just loading the content without using a link or form e.g.
$("#contentbox").navigate(url)then that is something I have been planning to add in. For now you could just use load().-
Nixon Girard April 25, 2011 at 2:13 pm
Wow it’s a shame!
I have to deliver multiple projects and could not use your plugin at this time
-
-
-
-
Turnthefire May 18, 2011 at 5:11 pm
I’m having trouble with the anchor and submit button, if I use href=”index?page=main” then comes up the hole index page in the main div!? Wat I’m doing wrong? how to setup the script?
-
Phil May 18, 2011 at 7:35 pm
You’d need to check for the jnavigate flag in the query string and return only the content needed. For example:
if (!array_key_exists('jnavigate', $_GET) ) : // show header/footer or whatever
// show content
-
-
Turnthefire May 18, 2011 at 8:56 pm
I don’t get it, my page looks somthing like this:
html
head
bodyinclude(header);
if(isset($_GET["page"]))
{
echo $_GET["page"]".php";
}include(footer);
body
html
I’m รก little bit newbie to this kind of stuff… But how can I prevent not loading the whole website in the main div?
-
Phil May 19, 2011 at 12:35 pm
Ok so what you would need to do is separate what content you need to return based on the jnavigate flag.
if !array_key_exists('jnavigate', $_GET) :
html
head
bodyinclude(header);
endif;
if(isset($_GET["page"]))
{
echo $_GET["page"]".php";
}if !array_key_exists('jnavigate', $_GET) :
include(footer);
body
htmlendif;
-
-
Turnthefire May 19, 2011 at 2:52 pm
alright great, it works fine now.
But I’m having some trouble in IE7 and 8. IE9 works fine. in 7 and 8 the main does not show up. and in none of the IE browser is the browser-address “index.php?page=main” showing.
any advise?btw. great plugin
-
Phil May 19, 2011 at 9:27 pm
Should show up OK in IE?
The URL, IE (not even 9 AFAIKR) does not support the new History API.
Thanks
-
Turnthefire May 22, 2011 at 2:47 pm
hmmm, not for me in IE7 and IE8, IE9 works fine… , I use exactly the script you have written above..??
-
David June 30, 2011 at 9:27 pm
Help me out please! I seem to have a bit of a problem like Turnthefire’s orginal post. I was dealing with the whole page appearing in the main div. Right now I have an “unexpected end” error.
Bare with me, Im a newbie to PHP. My code looks something like this:
html
bodymain content div
scriptsbody
html -
David June 30, 2011 at 9:30 pm
Oops, here is my code again:
?php
include(“nav.php”);
?
?php
if(isset($_GET["page"])) {
if(file_exists(“pages/”.$_GET["page"].”.php”)) {
include(“pages/”.$_GET["page"].”.php”);
}
else {
echo(“Page not found.”);
exit;
if (array_key_exists(“jNavigate”,$_GET["page"]))
?-
Phil June 30, 2011 at 10:42 pm
From what I can see of your code the line;
if (array_key_exists("jNavigate",$_GET["page"])should just beif (array_key_exists("jNavigate",$_GET).
-
-
David July 3, 2011 at 8:09 pm
Thanks for the last post, for some reason I still am having problems getting it to work. Right now, the page turns up blank. Im think the array key exists is returning false, though I could easily be wrong. Here is my code. I have the html, css, and scripts before the php on my index.php file. My main.php includes my nav and closing divs for body and html. Any guess what’s wrong Phil?
//
-
David July 3, 2011 at 8:10 pm
?php
if (array_key_exists(“jNavigate”, $_GET)):
include (“main.php”);
endif;
if (isset($_GET["page"]))
{
include(“pages/”.$_GET["page"].”.php”);
}
if (array_key_exists(“jNavigate”, $_GET)):
endif;
? -
Phil July 4, 2011 at 8:37 pm
Again it’s hard to tell from the code you posted but jnavigate should be all lower case. If you only wish to pull in the page.php section you should be negating the check for jnavigate also i.e. if (!array_key_exists…
-
David July 5, 2011 at 7:51 pm
Works now thank God! Thanks for your help Phil!
-
-
David July 6, 2011 at 9:11 pm
Hey Phil, any idea why when using Google Chrome the links will not work after the first initial click? from my index page, I can navigate to any page, but after that the links stop.
When I use Firefox I have no problem. The only thing I cannot get to work yet on any browser is a javascript slider within the main content.
David
-
Dev August 19, 2011 at 11:49 am
Hi,
Really nice plugin. Exactly what I was looking for. But I can’t get it work properly. Could you please provide the php code too please?
-
-
Dev August 20, 2011 at 4:46 pm
Thanks Phil. Am a PHP/jQuery/HTML newbie and this would help me a lot.
-
Phil August 20, 2011 at 5:25 pm
I actually checked in a branch of a rewrite I am doing on the plugin which has all of the code from the demo site. If you go to the project on GitHub you can get it all there in the v0.1 branch.
-
-
Dev August 20, 2011 at 6:08 pm
Thanks Phil. Appreciate it.
-
Pingback: Have You Seen These 30 Ajax Plugins Before? | RockingCode
-
Pingback: Have You Seen These 30 Ajax Plugins Before? | Web Help 101
How do I make an autoload using your plugin?