ajax post not being posted to php (for sql query)

blahaha · January 15, 2015

Here there,

This is a post for all of you ajax/php pimps who don't mind helping a beginner. I have been working on a little ajax script to filter a table called "recipes2" in a database called "recipes" using a dropdown menu. Once I get this script to work, I can run queries without having to refresh the page.

The problem, something is not right, the php script does not seem to be getting the posted data. even though the ajax script returns success when i check for it. What am I doing wrong?

Also please note that, if possible, I'd like all the code to stay on one page.

This is the SQL script if you want to create the database and table:

Here is the code, the file should be named 'filterRecipes.php'.

blahaha · January 15, 2015

sorry, this is my first post, and for some reason I did not have rights to modify my old one, there was an error in what I posted due to a typeo, this is the code that you should look at:

<!doctype html>
 
<?php 
    // php script that should get the ajax post 
    // and run the sql query
    
                      
    //host, username, password
    $connection = mysql_connect('localhost','root','');
    mysql_select_db('recipes');
                    
        
    //run query if post successful 
    $data = '';
    if(isset($_POST['countrySelected']))
    {
      $var = $_POST['countrySelected'];
      
     if($query = mysql_query("SELECT name FROM recipes2 WHERE country='%$var%'"))
        {  
 
          while($d = mysql_fetch_array($query))
                 {
              $data .= $data . '<div>' . $d['name'] . '</div>'; //incrementation .=
             }
        
         echo $data;
         } 
 
    // if not successful print, echo report
    }
    else{
              echo "<html><br /> <br /> <br />
                    ***POST NOT SET****
                    <br /> <br /> <br /></html>";
          }             

?>
 
       <!-- html code for display -->                   
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>change demo</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
  
  <!-- code for drop down menu -->
<select name="countries" id = "countries">
  <option>Hungary</option>
  <option>United States</option>
  <option>Mexico</option>
  <option >India</option>
</select>
    <div>   </div>
 
<script>
 
//javascript that detects when the button has been updated and retrieves the button option text value. 
$( "select" )
  .change(function () {
    var str = "";
    var countrySelectedStr = "";
    $( "#countries option:selected" ).each(function() {
      str += $( this ).text(); 
        });
     countrySelectedStr += "countrySelected=" + str;
    $( "div" ).text( countrySelectedStr ); 
  
    // ajax post  
    jQuery.ajax({
    
            type: "POST",
            url: "filterRecipes.php",
            data: countrySelectedStr,
            dataType: "text" ,
           cache: false
        });
})
    .change();                        
</script>

</body>
</html>

blahaha · January 15, 2015

this is the sql code to create and load the database

CREATE DATABASE recipes;
USE recipes;            
CREATE TABLE recipe2
(
name varchar(20),
country varchar(20)

);

INSERT INTO recipe2 (name,country)
VALUES ('palaak paneer','India');

INSERT INTO recipe2 (name,country)
VALUES ('gulyas leves','Hungary');

INSERT INTO recipe2 (name,country)
VALUES ('fajita','Mexico');

INSERT INTO recipe2 (name,country)
VALUES ('peanut butter and jelly','United States');

Barand · January 15, 2015

I can see the problem but am unable to help without confessing to being a pimp. Sorry.

mac_gyver · January 15, 2015

when your ajax request is made, the only thing that the code on the page should send back to the browser is the expected data. that means no <!DOCTYPE tag and none of the markup that makes up the main page.

in order to do this all on one page, you must use conditional statements and other flow control statements (exit; for example) to insure that only the correct portions of the code run when the page is originally requested and when the ajax request is made.

once you get your code organized correctly, you need to actually debug what it is doing to find out where it is working and where it is not to pin down where the problem is at.

CroNiX · January 15, 2015

In your ajax request, all do you is send the request but do nothing with the result that gets returned. Look at the success(), comlete(), error(), etc, events of jQuery's ajax function.

Since your ajax request is supposed to be returning HTML (based on your code), this shouldn't be set to 'text' in your ajax request. It should be left off completely or set to 'html':

dataType: "text" ,

I believe this line is wrong:

$data .= $data . '<div>' . $d['name'] . '</div>';

and should be

$data .= '<div>' . $d['name'] . '</div>';

This SQL looks wrong and you should be using a LIKE instead of an = for country:

if($query = mysql_query("SELECT name FROM recipes2 WHERE country='%$var%'"))

Sign In

ajax post not being posted to php (for sql query)

Recommended Posts

blahaha

Link to comment

Share on other sites

blahaha

Link to comment

Share on other sites

blahaha

Link to comment

Share on other sites

Barand

Link to comment

Share on other sites

mac_gyver

Link to comment

Share on other sites

CroNiX

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information