ajax script loading new html instead of appending to current page...?

Question

Once again, I'm stumped. I have a little search field and button to search a mysql db. I want it to append the results in the current page instead of reloading or loading a separate results page.

Here's the script:

<script>
$(function() {

$(".search_button").click(function() {
    // getting the value that user typed
    var searchString    = $("#search_box").val();
    // forming the queryString
    var data            = 'search='+ searchString;
    //var data = searchString;

    // if searchString is not empty
    if(searchString) {
        // ajax call
        $.ajax({
            console.log(data);
            type: "POST",
            url: "do_search.php",
            data: data,
            beforeSend: function(html) { // this happens before actual call
                $("#results").html(''); 
                $("#searchresults").show();
                $(".word").html(searchString);
           },
           success: function(html){ // this happens after we get results
                $("#results").show();
                $("#results").append(html);
          }
        });    
    }
    return false;
});

});
</script>

Here's the originating page that is supposed to be appended to, within the ul tags:

<div id="SEARCH2" class="panel">
<div style="margin:20px auto; text-align: center;">
<form method="post" action="do_search.php">
    <input type="text" name="search" id="search_box" class='search_box'/>
    <input type="submit" value="Search" class="search_button" /><br />
</form>
</div>      
<div>

<div id="searchresults">Search results :</div>
<ul id="results" class="update">
</ul>

</div>
</div>

And here's the do_search.php that's supposed to insert some html within the ul tags:

<?php

if (isset($_POST['search'])) {

include('db.php');

$word = mysql_real_escape_string($_POST['search']);
$word = htmlentities($word);

$sql = "SELECT id, last_name, first_name, u_name, skype_id, primary_location, phone, status FROM users WHERE (last_name LIKE '%" . $word . "%' OR
first_name LIKE '%" . $word . "%' OR u_name LIKE '%" . $word . "%' OR skype_id LIKE '%" . $word . "%' OR phone LIKE '%" . $word . "%') ORDER BY last_name";

$fetched = mysql_query($sql)or die('query error'.mysql_error());
$end_result = '';
if($fetched){
    while($row = MySQL_fetch_array($fetched)):
          //TEST TO SEE IF THIS WORKS
        $result         = $row['id'];
        // we will use this to bold the search word in result
        $bold           = '<span class="found">' . $word . '</span>';    
        $end_result     .= '<li>' . str_ireplace($word, $bold, $result) . '</li>';            
    endwhile;
    echo $end_result;
}
else{
    echo '<li>No results found</li>';
}    
}
//echo 'crap2';
?>

if you want to append it to existing search result then why are you doing this ? $("#results").html(''); — N20084753
– N20084753, Commented Oct 25, 2013 at 12:02
is there a javascript error? I'm not sure you can plop a console.log() inside the $.ajax({ call — Aaron W.
– Aaron W., Commented Oct 25, 2013 at 12:04
FRACK! it was the console.log(). Commented that out...works like charm! Thanks!!!!! — user2747609
– user2747609, Commented Oct 25, 2013 at 12:15

Aaron W. · Accepted Answer · 2013-10-25 12:19:32Z

1

Remove the console.log(data); from your AJAX call. And if you're constantly appending, remove the $("#results").html(''); from beforeSend:

$.ajax({
    type: "POST",
    url: "do_search.php",
    data: data,
    beforeSend: function(html) { // this happens before actual call
        $("#results").html(''); 
        $("#searchresults").show();
        $(".word").html(searchString);
   },
   success: function(html){ // this happens after we get results
        $("#results").show();
        $("#results").append(html);
  }
});

answered Oct 25, 2013 at 12:19

Aaron W.

9,2952 gold badges36 silver badges47 bronze badges

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

1 Comment

chopss Over a year ago

is div id and classname to be inserted in single quotes or double quotes

Collectives™ on Stack Overflow

ajax script loading new html instead of appending to current page...?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related