Send and recieve parameter with ajax using jquery

Question

I'm tring to send and receive parameters with AJAX without any sucess

First I choose AREA and than the CITIES in this area.

Can you please tell me what do I do wrong?

Client side:

<script>
$(document).ready(function(){

  $("#first").click( 

    function(){

        var area_id=$("#area_id").val();

        $.ajax({
        type: "POST",
        url: "recs.php",
        data: "area_id="+area_id,
        cache:false,
        success: 
          function(data){
            $("#second").html(data.message); 
          }

        });

      return false;

    });


});


</script>


<form method="post" action="tosomewhere.php">

    <select id="first" name="area_id">
      <option value="1">1</option>
      <option value="2">2</option>
    </select>

    <select id="second" name="section">  </select>

</form>

Server Side:

$areaID = $_POST['area_id'];
$second_option = "";

$query2 = mysql_query("SELECT * FROM `cities` WHERE area_id = $areaID ORDER BY id ASC");
while($index = mysql_fetch_array($query2)) 
{
    $id = $index['id'];
    $name  = $index['name'];

    $second_option .= "<option value='$id'>$name</option>";
}

echo $second_option;
exit;

Thank you in advanced

After editing:

I changed the code to something even simpler:

Client side:

<script>
$(document).ready(function(){
  $("#first").click( 
    function(){
        var area_id=$("#area_id").val();

        $.ajax({
        type: "GET",
        url: "recs.php",
        data: "area_id="+area_id,
        cache:false,
        success: 
          function(data){
            $("#second").html(data); 

          }

        });

      return false;

    });


});


</script>

<form method="post" action="tosomewhere.php">

    <select id="first" name="area_id">
      <option value="1">1</option>
      <option value="2">2</option>
    </select>

    <div id="second"></div>

</form>

Server side:

some text

I'm still not getting the string into

I found this nice tuto, so i share it with you w3schools.com/php/php_ajax_database.asp — Xavier S.
– Xavier S., Commented Aug 22, 2013 at 8:43
What do you mean by "without success"? What happens when your code runs? — Aleks G
– Aleks G, Commented Aug 22, 2013 at 8:44

slash197 · Accepted Answer · 2013-08-22 08:44:32Z

3

change

$("#second").html(data.message);

to

$("#second").html(data);

answered Aug 22, 2013 at 8:44

slash197

9,0246 gold badges44 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Roi Over a year ago

I'm still not getting respond from the server side. I tried to type simple string instead of the SQL query, and it's still not send to the client side...

slash197 Over a year ago

Use echo '<option>test</option>'; instead of echo $second_option;. If you see that then the problem is in your mysql query.

Roi Over a year ago

Please check again my first post. I edited it and add new simple code (After editing:)

Gillian Lo Wong · Accepted Answer · 2013-08-22 09:02:20Z

0

<script>
$(document).ready(function(){
  $("#first").click(function(){
        var area_id=$("#area_id").val();
        $("#second").load('tosomewhere.php?area_id=' + area_id);
      return false;
    });
});
</script>

Changed the jquery a bit. Using GET.

Also the script has changed:

$areaID = (int) $_GET['area_id'];
$second_option = "";

$query2 = mysql_query("SELECT * FROM `cities` WHERE area_id = '$areaID' ORDER BY id ASC");
if (mysql_num_rows($query2) > 0){    
    while($index = mysql_fetch_array($query2)){
        $second_option .= '<option value="'.$index['id'].'">'.$index['name'].'</option>';
    }
    echo $second_option;
} else {
    echo 'No result!';
}

die();

Added (int) before $_GET as a pre-security measurement.

edited Aug 22, 2013 at 9:02

answered Aug 22, 2013 at 8:50

Gillian Lo Wong

9,7225 gold badges36 silver badges39 bronze badges

7 Comments

Roi Over a year ago

I'm still not getting respond from the server side. I tried to type simple string instead of the SQL query, and it's still not send to the client side...

Gillian Lo Wong Over a year ago

make sure tosomewhere.php?area_id is pointing to the same directory. Try to add the full path to the script first. Then try this string in your browser: tosomewhere.php?area_id=5 You should get a response. If you dont, then something is wrong in your php script

Gillian Lo Wong Over a year ago

Try the new serverscript, it will echo something even if there is something wrong with your query

Roi Over a year ago

Please check again my first post. I edited it and add new simple code (After editing:)

Gillian Lo Wong Over a year ago

Try opening F12 in your browser. Go to the network tab and click on the #first. You should see a new request appear. If it is in red, it means that the request url is not correct. If it is not red, you can check the response somewhere there too. I have tried your new script and mine and they are both working. I think the path is not pointing to your server script

|

jsertx · Accepted Answer · 2013-08-22 09:13:04Z

0

Add this parameter to the ajax function

dataType:'text'

answered Aug 22, 2013 at 9:13

jsertx

6468 silver badges18 bronze badges

1 Comment

Roi Over a year ago

done, but still not getting the string form the php file (server side)

irfanmcsd · Accepted Answer · 2013-08-22 09:45:40Z

0

You need to debug code where is actually fault whether you ajax call is actually initialize.

i: check whether value properly fetch in "area_id" js variable

alert(area_id);

ii: if it ok check whether data proper returned from server scriptinog

alert(data); or alert(data.message);

iii: for testing whether you receive data properly, just send out test script.

echo "sample text";
exit;

or try to send data in json format

die('{"message" : "sample text"}');

If all three steps working, then there should be fault in data access script.

If you are not getting output in ajax try using firebug to check what is actually happening in sending request and getting response.

edited Aug 22, 2013 at 9:45

answered Aug 22, 2013 at 8:49

irfanmcsd

6,5807 gold badges41 silver badges53 bronze badges

2 Comments

Roi Over a year ago

Please check again my first post. I edited it and add new simple code (After editing:)

irfanmcsd Over a year ago

use firebug to track what is actually happening when ajax call initialize.

Collectives™ on Stack Overflow

Send and recieve parameter with ajax using jquery

4 Answers 4

3 Comments

7 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

7 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related