Solved

Ajax & JQuery

Posted on 2007-03-27
7
2,316 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
React or Angular? 6 52
Allow space in this pattern 2 47
Use a select control to call a javascript function 5 29
Interview question Javascript, database 12 29
Developer tools in browsers have been around for a while, yet they are still heavily underused by developers. Developers still fix html or CSS then refresh page to see effect, or they put alert or debugger in JavaScript and then try again and again …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

919 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now