JS/AJAX problem. Help needed (please)!

Firstly I apologize if this is the wrong forum, I wasn't too sure of where to post it as my problem covers several areas.

I have been writing a 'Facebook Application' which is primarily in PHP. It is about the economics of futuristic spaceship production. I have done the bulk of the game mechanics in PHP and have set about making the interface.

I am stuck on a page which can be viewed here (http://faceappz.com/sa/test.php) where you can employ workers to work in your mines/factories.

Each worker has five skill types (worker, miner, manager etc...) and to be employed he must be offered a contract for one of those skills.

The process of employing someone works like this.

1. You search for the 'type' of worker you want.
2. Search Results are shown.
3. You click on the name of the person you want to employ.
4. A new form appears (under the table) for you to fill in the contract details.
5. The person (PHP function!) rejects or accepts the contract.

If you look at the link above you will see I've made a search box which uses AJAX/html/php to make the table (which I'm quite proud of as I'm a bit of a noob when it comes to javascript/ajax). Ive come unstuck as to how to select which worker to offer a contract to. What needs to happen is:

1. The name or a tick box is selected.
2. It sends some form of unique identifier back to the same page so the form (to offer a contract) knows which person in the table is being referred to *preferably without a page refresh*.

Any help/advice would be greatly appreciated. I'm assuming I'm going to need to use some form of get/post and ajax but i cant figure out how to do it.
I hope all this makes sense.

Hate to bust your bubble, but you are *NOT* using AJAX. At all.

The page just submits to the PHP page and reloads the entire page.

None of your JavaScript is working *AT ALL*. Period.

And the reason is simple:

Apparently you misunderstood the directions for using jQuery.

You have this code:
<script type="text/javascript" src="yourDirectory/jquery.js"></script>
but you do *NOT* have any directory named "yourDirectory" so of course the client can't find the "jquery.js" library. KABLOOEY.

It's probably just as well.

Your code is structured all wrong for using AJAX.

The URL you are asking AJAX to "hit" is the same page ("test.php") as you are currently displaying. Uh-uh. Wrong concept.

AJAX code should be hitting a PHP page designed *explicitly* for sending back *ONLY* the needed "objects" (in one of various forms) that are then read by the JS code in the client and used to update only *PART* of the page being displayed.

So...

Your code, so far, is a fine PHP application, but there's not a lick of AJAX in it. Needs a ton of rework to make it AJAX-friendly.

oh dear :(
Thank you very much, for your help. I will go and have a further look at AJAX was kind of hoping I could just copy and past some stuff off the web and get rid of the refreshes but looks like I'm going to have to do some reading.
Thanks

I have gone over what I have written and changed the link in the header to actually point the jquery library! I have also made a seperate mail.php file however it is still not working and was wondering if someone would be kind enough to have a glance over the function and tell me what I have done wrong.

I don't think the function is being called because I have set return to false in the function and it still loads mail.php when I click the form submit button.

I have used a tutorial which can be seen here (http://tutorialblog.org/how-to-create-your-own-ajax-contact-form/) and modified it to suit my needs (I think/hope!). The page I am working on/problem can be seen here: http://faceappz.com/sa/

The function and link to jquery file is this:

<script type="text/javascript" src="jquery.js"></script>
<script language="javascript">
//engage on the page load
$(function() {
//trigger ajax on submit
$('#contactForm').submit( function(){

//hide the form
$('#contactForm').hide();

//show the loading bar
$('.loader').append($('.bar'));
$('.bar').css({display:'block'});

//send the ajax request
$.get('mail.php',{job:$('#job').val(),
lower:$('#lower').val(),
upper:$('#upper').val()},

//return the data
function(data){
//hide the graphic
$('.bar').css({display:'none'});
$('.loader').append(data);
});

//stay on the page
return false;
});
});


The html form looks like this:


<div id="search" style="display:block">
<div class="loader">
</div>

<div class="bar">
</div>
<br><br><br>

<div id="container">
<form id="contactForm" method="" action="mail.php">
I am looking for a
<select id="job" name="job"><option value=""><option value="Manager">Manager</option><option value="Crew Member">Crew Member</option><option>Captain</option><option>Construction Worker</option><option>General Worker</option></select>
with a minimum certified skill level of
<input id="lower" name="lower" size="3" />
and a maximum certified skill level of
<input id="upper" name="upper" size="3" />
in that field.
<input class="submit" type="submit" value="Search"/>
</form>
</div>
</div>


and mail.php....


<?php
$job = $_GET['job'];
$lower = $_GET['lower'];
$upper = $_GET['upper'];
?>


If someone could give me some advice I would be eternally grateful. I am dyslexic and for some reason the php/html/css syntax makes perfect sense to me but javascript looks like a foreign language to me. I have spent quite a while reading about it and doing various tutorials but I can't get even the most simple functions to work.

Hate to bust your bubble, but you are *NOT* using AJAX. At all.

The page just submits to the PHP page and reloads the entire page.

None of your JavaScript is working *AT ALL*. Period.

And the reason is simple:
___________________________________
Devis comparatif mutuelle sante |
(http://comparatifmutuelle.org/)Comparateur mutuelles sante |
(http://comparatifmutuelle.org/)Comparer comparatif mutuel (http://comparatifmutuelle.org/)

Hate to bust your bubble, but you are *NOT* using AJAX. At all.

The page just submits to the PHP page and reloads the entire page.

None of your JavaScript is working *AT ALL*. Period.

And the reason is simple:


.......?