Jump to content

Recommended Posts

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

 

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>

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');

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.

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%'"))
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.