• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 386
  • Last Modified:

Adapting site to benefit from jQuery


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
gbeaulac
Asked:
gbeaulac
1 Solution
 
rationalbossCommented:
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
 
CodilXCommented:
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

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!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now