Solved

Ajax & JQuery

Posted on 2007-03-27
7
2,320 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
Technology Partners: 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 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

Independent Software Vendors: 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!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Non-Resizable Pharagraph 2 17
DataTable column sorting incorrectly 2 17
Read text on Table 7 25
Looking for solution to pass data to 3rd-party web platform? 4 24
A publishing tool, a Version Control System, or a Collaboration Platform! These can be some of the defining words for the two very famous web-hosting Git repositories: Bitbucket and Github. Git is widely used amongst the programmers and developers f…
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.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.

713 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