Solved

Adapting site to benefit from jQuery

Posted on 2011-02-17
2
375 Views
Last Modified: 2012-05-11

Subject:
Adapting an HTML site to benefit from Ajax & jQuery. (I am a newbie to Ajax/jQuery)

Goal:
To take advantage of the fact that we don't need to reload a page every time we submit from a form.

Context:
This is what it all the pages on site offer as menu choices:

Menu1 --- Menu 2 --- Menu 3 --- Menu 4

Menu 2 has 7 options. These 7 options currently use the same php file and they have a slightly different version of the initial form for the user. I would like to continue centralizing my code.

My Question:
How should I structure my code now that I want to benefit from jQuery given that I would like to not reload the page after it was loaded once - and let every submit thereafter be handled by jQuery?
I know how to have the page not reload from within the forms, but if the user makes another selection from Menu 2 I don't want the page to reload but just modify the form displayed.

Thank you.


0
Comment
Question by:gbeaulac
2 Comments
 
LVL 8

Accepted Solution

by:
rationalboss earned 500 total points
Comment Utility
What you want is to implement AJAX to your website, it is a technique that you use if you wish to make asynchronous calls to the server. You've chosen a Javascript framework that is easy to understand! :)

Here are tutorials to help you started:
http://viralpatel.net/blogs/2009/04/jquery-ajax-tutorial-example-ajax-jquery-development.html
http://articles.sitepoint.com/print/ajax-jquery
http://php4every1.com/tutorials/jquery-ajax-tutorial/
http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

These reads are worth it :)
0
 

Expert Comment

by:CodilX
Comment Utility
I'm not sure exactly what you want, but if you have:

<a href="#" id="option1">Option 1</a>

You add a jQuery onclick event and using $.post or $.get, retrieve information you want and add it to a div:

$('#option1').click('function', ({
  $.get('somefile.php?get=something', function(retrieved_data) {
    $('#some_div').html(retrieved_data);
 }
});
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
This article discusses four methods for overlaying images in a container on a web page
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

762 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

11 Experts available now in Live!

Get 1:1 Help Now