?
Solved

Ajax & JQuery

Posted on 2007-03-27
7
Medium Priority
?
2,323 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
[X]
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
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 5

Accepted Solution

by:
NickVd earned 2000 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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to implement server side field validation and display customized error messages to the client.
This video teaches viewers how to create their own website using cPanel and Wordpress. Tutorial walks users through how to set up their own domain name from tools like Domain Registrar, Hosting Account, and Wordpress. More specifically, the order in…
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to selectively show certain fields based on user input using rules to gather relevant information and data from your forms. The rules feature provides you with an opportunity…

765 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