Ajax & JQuery

Hi,

I am new to Ajax & I am new to JQuery,

I have a website with a header and menus below it,
like this:

__________________________
|                                                         |
|               HEADER                          |
__________________________
|   Menu1  |  Menu2  |    Menu3     |
__________________________
|                                                         |
|              CONTENT                        |
|                                                         |
__________________________

What I want to achive is having a dynamic content with ajax & jquery,
without relaoding the header and menus,
if that is even possible.

1) Is that a good idea ?
2) Can anyone help me with that ?

I started to read the doc of jquery but it's not easy, this is what I have for now on :

      $(document).ready(function(){
            
            $("#ajax-loader").ajaxStart(function(){
                  $(this).show();
            });
            
            $("#ajax-loader").ajaxStop(function(){
                  $(this).hide();
            });
               ...............

The first lines gives me an image loading when there is a ajax request, now I want to display my dynamic content.

(I am working with JSP for now on.)

Any comments, any tips, any tutorials are welcome ...

Thank u  !
LVL 9
matthew016Asked:
Who is Participating?
 
NickVdConnect With a Mentor Commented:
The only way to have a unique url system when using ajax to load all content, is to use the hash of the url to hold persistent data (http://www.example.com/#pagename).

I don't believe that search engines care about anything after the hash mark, so they won't see it in any links, and they definitely don't use javascript to get the content.

--HOWEVER--

As long as you make sure that your site will work without Javascript, then normal SEO techniques will work just fine.

The best way to implement and use Ajax is to not create an ajax driven website, it's to create a standard website which is augmented with javascript to enhance the user experience.

Create a standard website first, then use javascript and ajax to enhance the website, this way it will still work for those people who don't have Javascript turned on.

jQuery lends itself perfectly to this, it's also known as "Unobtrusive Javascript".
0
 
NickVdCommented:
Hi Matthew!

I'm glad you found jQuery, and have decided to use it, it's an amazing JS Framework and is worth it's filesize in gold.

The function you want to use is $.load().  You would give the content area (where you want the content loaded) a unique id  (id="mainContent") and you would use:

$('#mainContent').load("<<FILENAME>>",{parameter:'value'});

to load the contents of <<FILENAME>> into the element with the id of "mainContent"

I would suggest reading up on the other ajax functions that jQuery provides: http://docs.jquery.com/Ajax

Hope this solution helps you!
0
 
matthew016Author Commented:
I will have SEO problems if I work like this, no ?
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
matthew016Author Commented:
I tested this laod function and it works great :)

But I am worried about SEO's,

do I have other options then using ajax to achieve what I want to do ?

(which is : not realoding header and menu, only content)
0
 
matthew016Author Commented:
Thanks Nick !!

There is just one thing I didnt udnerstand :
The only way to have a unique url system when using ajax to load all content, is to use the hash of the url to hold persistent data (http://www.example.com/#pagename).

To load content in ajax i don't need this # thing right ?
I tried and it works without .. or what were u trying to make me understand with this ?

Thank u!
0
 
NickVdCommented:
Search google for "don't break the back button" and you'll see.

When you "change pages" (replace the current content with the content loaded by ajax) you would update the hash with the new page name. That way the user can still bookmark the current page which isn't possible without it because the url will never change.

Glad I could help and welcome to the wonderful world of jQuery!
0
 
matthew016Author Commented:
Thank u Nick,
It is clear now,
I already posted a newx question about jQuery in Javascript and CSS,
If u can help me  ;-)

As I have a small website I try to show / hide divs according to the menu clicked, and which is more friendly for SEO.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.