CODEWITHSUNDEEP
javascriptphpjquerymysqlajax
n34_panda
n34_panda

Reputation: 2677

Simple Jquery Ajax from Mysql advice

I have this basic HTML:

<div id="main">
  <form id="search_form" role="form" action="" method="post">
  <div class="form-group">
    <input type="text" class="form-control" name="txt_search" id="txt_search" placeholder="Enter name here" autocomplete="off" >
    <p></p>
    <button type="submit" id="btn_search" class="btn btn-default">Retrieve </button>
  </div>
  </form>
  <div class="result" id="result">this element used by jquery and replaced by db</div>
</div>

I want the user to type in their search query and click the btn_search which will "hopefully" populate (without refreshing the page) the results div (eventually I want to use a graph but for the time being a table is fine).

I have this within my javascript file, specifically this part under the $(document).ready...

$('#btn_search').click(function(){
$.ajax({                                      
 url: './php/search.php',        
 data: "",                    
 dataType: 'json',   
 success: function(rows)         
    {
    for (var i in rows)
    {
      var row = rows[i];          
      var id = rows[0];
      var vname = rows[1];
      $('#result').append("<b>id: </b>"+id+"<b> name: </b>"+vname).append("<hr />");


     } 
    }
});
});

I have checked my search.php page and it returns the values i expect from the database (about 6 columns eventually) so I am wondering why it isn't being correctly displayed on the result div.

I am a beginner trying to pick it all up, no doubt I have much to work on but I am grateful for any advice and for an answer to my problem.

EDIT: Added search.php:

<?php
if (isset($_POST["txt_search"])){
    $field_search= $_POST["txt_search"];
}
else{ 
}

//sql
$sql = "SELECT * From tbl1 INNER JOIN tbl2  ON tbl1._tbl1.id = tbl2.tbl1_id WHERE tbl1.name like '%$field_search%'";

// Connect to the database
mysql_connect("", "", "") or die (mysql_error());
mysql_select_db("") or die (mysql_error());

// Lets build the query and execute
$result = mysql_query($sql) or die(mysql_error());
$item_num = 0;
$num_records = mysql_num_rows($result);

// Put the table data into an array
$data = array();
while ( $row = mysql_fetch_row($result) )
{
  $data[] = $row;
}
echo json_encode( $data );
 ?>

Upvotes: 0

Views: 65

Answers (2)

cljk
cljk

Reputation: 975

Your question lacks the content of the result of search.php but I think your mistake is in here - you are iterating over the rows array with the var "i" but are using the rows-variable.... you mixed up iterating over array indices and iterating over array elements

for (var i in rows)
{
  var row = rows[i];          
  var id = rows[0];
  var vname = rows[1];
  $('#result').append("<b>id: </b>"+id+"<b> name: </b>"+vname).append("<hr />");


 }

Think it should be like this

for (var row in rows)
{
  var id = row[0];
  var vname = row[1];
  $('#result').append("<b>id: </b>"+id+"<b> name: </b>"+vname).append("<hr />");


 }

Upvotes: 1

dcclassics
dcclassics

Reputation: 896

Check this fiddle out: http://jsfiddle.net/LsB2d/2/

First, I added return: false; to your click function, so the form isn't submitted through html. Second, I added txt_search = $('#txt_search').val(); and added data: txt_search to your ajax function. This way, you're actually sending the value of the search input to the PHP file. If this doesn't work, let us know and we can go from there. (Although not seeing your PHP we can't help you with that yet)

In your PHP, you use $search = $_GET['search'];, and now $search contains your search string, which can be used to query your db or whatever you need to do.

Upvotes: 1

Related Questions