Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Ajax & JQuery

Posted on 2007-03-27
7
2,319 Views
Last Modified: 2011-10-03
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  !
0
Comment
Question by:matthew016
  • 4
  • 3
7 Comments
 
LVL 5

Expert Comment

by:NickVd
ID: 18804676
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
 
LVL 9

Author Comment

by:matthew016
ID: 18806571
I will have SEO problems if I work like this, no ?
0
 
LVL 9

Author Comment

by:matthew016
ID: 18806625
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
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.

 
LVL 5

Accepted Solution

by:
NickVd earned 500 total points
ID: 18810457
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
 
LVL 9

Author Comment

by:matthew016
ID: 18811560
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
 
LVL 5

Expert Comment

by:NickVd
ID: 18811632
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
 
LVL 9

Author Comment

by:matthew016
ID: 18811658
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

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

It’s a strangely common occurrence that when you send someone their login details for a system, they can’t get in. This article will help you understand why it happens, and what you can do about it.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to choose which pages of your form are visible to your users based on their inputs. The page rules feature provides you with an opportunity to create if:then statements for y…
Learn how to set-up custom confirmation messages to users who complete your Wufoo form. Include inputs from fields in your form, webpage redirects, and more with Wufoo’s confirmation options.

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question