CODEWITHSUNDEEP
phpjqueryajax
Bundy
Bundy

Reputation: 725

replace div content with ajax

hey ive got a working php script, and as far as i can tell my jquery ajax function mimics anything ive seen on SO, but somehow this wont work. im posting my HTML, php, and js. can someone please help me out here? ive been at this for days without success.

on submit it seems as though the page flickers for a short (refresh?) period, but nothing happens.

HTML/js:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Trade diving equipment online at DiveBay</title>
<link rel="stylesheet" type="text/css" href="dbstylesheet.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript">


$(document).ready(function(){
    %("#searchdivebay").submit(function(){

        var word = $("#searchbox").val();
        $.ajax({
            type: "GET",
            url: "trysearch.php",
            data: $("#searchdivebay").serialize(),
            context: '#content',
            success: function(data){                
                            $(this).html(data);
                    }
        });
    });

});
</script>
</head>

<body>
<center>
    <div id="wrapper">

        <div id="header">
            <div id="hbackground">
                <img src="db3.jpg" alt="hbackground" width="100%" height="100%" style="z-index:1;" />
                <div id="htitle">
                    <span class="banner">DIVEBAY.COM</span>
                    <span class="byline">GET INTO DIVING, TRADE DIVING EQUIPMENT ONLINE</span>      
                </div>
            </div>
        </div>

        <div id="searchandlog">
            <div id="search">
                <form id="searchdivebay" action="#" method="get">
                    <div id="searchboxholder"><input type="text" name="searchbox" id="searchbox" /></div>
                    <div id="searchbuttonholder"><input type="submit" name="searchbutton" id="searchbutton" value="Search DiveBay"/></div>
                </form>
            </div>
            <div id="login">
                <ul class="signreg">
                    <li><i>Existing user?</i><a href="divebaylogin.html">SIGN IN</a></li>
                    <li><i>or, new?</i><a href="createaccount.html">REGISTER</a></li>
                </ul>
            </div>
        </div>
        <div id="searchresults">Search results for <span id="searchword" class="word"></span></div>
        <div id="content">


        </div>
        <div id="sitemap">
        </div>
    </div>
</center>
</body>

</html>

PHP:

<?php
echo '
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>searchdbresults</title>
<link rel="stylesheet" type = "text/css" href = "styledb.css" />
</head>

<body>';

$user = 'root';
$pass = null;
$pdo = new PDO('mysql:host=localhost; dbname=divebay;', $user, $pass);

$search = $_GET['searchbox'];
if($search == ""){
    echo '<p style="color:black; font-size:18pt; font-family: Impact; "> You didn"t search for anything!</p>';
}
else{
try{
    $stmt = $pdo->prepare('SELECT * FROM auction WHERE name LIKE ?');
    $stmt->bindValue(1, '%'. trim($search) .'%');
    $stmt->execute();



    $numrows = 0;

    echo '<table id="showresult">';

    while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
        $numrows++;
        $ID = $row['ID'];
        $img = $row['img'];
        $name = $row['name'];
        $owner = $row['owner'];
        $cprice = $row['cprice'];
        $iprice = $row['iprice'];
        $incprice = $row['incprice'];
        $etime = $row['etime'];

    echo '
    <tr class = "resultindex">
        <td class = "imgholder">' .$img. '</td>
        <td class = "infoholder">
            <div style ="height:4px;"></div>
            <div class = "infodiv">'.$name.'</div>
            <div class = "locdiv"></div>
            <div class = "userdiv"><span class="fromuser">From user: </span><br/>'.$owner.'</div>
        </td>
        <td style = "width:2px; background-color:#330066;"></td>
        <td class ="priceholder">
            <div class = "currentp"><span class="currentbid">Current Bid: </span><br/>'.$cprice.'</div>
            <div class = "instantp"><span class="instantbid">Instant Sale: </span><br/>'.$iprice.'</div>
            <div style = "height:5px;"></div>
            <div class = "incp"><span class="nextbid">Next Bid:</span><br/>'.$incprice.'</div>
        </td>
        <td style = "width:2px; background-color:#330066;"></td>
        <td class = "timer"><span class="timeleft">Time Left: </span><br/>'.$etime.'</td>
    </tr>';
    }
    if($numrows == 0){
        echo '
        <tr>
        <td colspan="4">Sorry your search for '.$search.' returned no results</td>
    </tr>';
    }
    else{
        echo '
        <tr>
        <td colspan="4">Displaying'.$numrows.'results</td>

    </tr>';
    $pdo = null;
    }
    }catch(PDOException $e){
        echo $e->getMessage();
    }
    }
    echo '
    </table>
</body>
</html>';

?>

Upvotes: 0

Views: 1631

Answers (5)

davidethell
davidethell

Reputation: 12018

In addition to the prevent default comments it looks like your success function does not correctly update the html. If you want to put the search results into the #searchresults div then you'll want your success function to be:

success: function(data){                
    $('#searchresults').html(data);
}

Upvotes: 0

Dennis Hackethal
Dennis Hackethal

Reputation: 14275

In addition to all other answers, it seems that all you need to do to load the content from php file, right?

You don't need the whole ajax function for that, simply use load() with the php's path as string parameter. This will load whatever is echoed out in the php where you call load().

Upvotes: 0

Uzair Sajid
Uzair Sajid

Reputation: 2165

You need to create a separate PHP file as your Ajax handler which returns only the HTML that is supposed to go in the content section of your search results.

Right now, you are returning a complete HTML page would break the semantics and the structure of the DOM.

You're seeing a flicker because the page automatically refreshes when you click the submit button. You need to call the e.preventDefault() method to prevent that, or return false at the end of your submit handler.

Upvotes: 0

Monski
Monski

Reputation: 310

$(document).ready(function(){
    %("#searchdivebay").submit(function(e){

        var word = $("#searchbox").val();
        $.ajax({
            type: "GET",
            url: "trysearch.php",
            data: $("#searchdivebay").serialize(),
            context: '#content',
            success: function(data){                
                            $(this).html(data);
                    }
        });
    e.preventDefault();
    });

});

Upvotes: 1

Quentin
Quentin

Reputation: 943569

When you submit the form, the browser loads a new page, which creates a fresh JS environment.

Prevent the default event. (The event object is the first argument to your submit handler function, you need to capture that before you can call methods on it).

Upvotes: 1

Related Questions