Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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 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.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Dec 2009
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #4
    New Coder
    Join Date
    Dec 2009
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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 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:
    Code:
    <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:

    Code:
    <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 Code:
    <?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.

  • #5
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    new

    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 |
    Comparateur mutuelles sante |
    Comparer comparatif mutuel

  • #6
    New Coder
    Join Date
    Dec 2009
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by procippin View Post
    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:
    .......?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •