Refresh div contents without closing dropdown

Question

I'm trying to learn php, mysql and javascript/jquery by building a live bidding system. I want to refresh the value of a bid button and dropdown automatically, but only if the value has changed. I've made a bidbuttons.php that outputs the buttons after querying the db for the current values, and I load and reload the page with this jquery I found elsewhere. I have tried several different methods of refreshing the div, and the best I came up with unfortunately closed the dropdown on the timer. This current version was described as exactly what I need but doesn't seem to work, in fact it logs me out. would prefer the div to refresh and the dropdown to close ONLY if the bidbuttons.php is updated. This is my first post, I hope I did this right.

<div id="bidbuttons"></div>

<script type="text/javascript">    
    var loadUrl = "includes/bidbuttons.php?id='.$item->id.'";  
    $("#bidbuttons").load(loadUrl).fadeIn("slow");
    var auto_refresh = setInterval(function () {
      $.get(loadUrl, function(data) {
        if (data.changed) {
          $("#bidbuttons").load(loadUrl).fadeIn("slow");
        }
      });
    }, 10000);
</script>

and my bidbuttons.php

    <?php
    include_once 'db_connect.php';
include_once 'functions.php';
sec_session_start();

if (login_check($mysqli) == true) { 
$getid = (int)$_GET['id'];

// get current price
    $result = $mysqli->query("SELECT ammount, bidder_id FROM bids WHERE ammount=(SELECT MAX(ammount)) && item_id like $getid order by ammount desc");
    while($row = $result->fetch_assoc()) {
        $bidder_id = $row["bidder_id"];
        $current = $row['ammount'];
        echo ($mysqli->error);
        $result->free();
    }
//get item info
    $results = $mysqli->query("SELECT * FROM items WHERE id like $getid ");
        while($row = $results->fetch_assoc()) {
            if (empty ($current)) { $current = $row["start"];}

            $title =  $row["title"];
            $item->thenext = ($current + $row["raise"]);
            $buyout = $row["buyout"];
            $raise =  $row["raise"];
            $sold = $row["sold"];

        }
        $results->free();


echo ('<div id="buttons">
    <a class="btn btn-primary btn-lg" style="margin-bottom: 10px; margin-top: 10px;  width: 80%;" href="includes\placebid.php?itemid=' . $getid . '&ammount=' . $item->thenext .'">Bid $' . $item->thenext . '</a>
    ');
if ($buyout){echo ('
<a class="btn btn-success btn-lg" style="margin-bottom: 10px; width: 80%;"  href="includes\placebid.php?itemid='.$getid.'&ammount='.$buyout.'">Buyout $'.$buyout.'</a>

');}
echo '</div><!-- buttons -->';
echo ('
    <div class="dropdown">
        <button style="margin-bottom: 10px; width: 80%;" type="button" class="btn btn-info btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Custom Bid<span class="caret"></span></button>
<ul class="dropdown-menu">

');
// build the custom bid dropdown
    if (!$buyout) { $maxcust = $item->thenext*25;
        for ($cust = $item->thenext; $cust <= $maxcust; $cust = $cust + $raise) {
            echo ('<li><a href="includes\placebid.php?itemid=' . $id . '&ammount=' . $cust .'">' .$cust. '</a></li>');
        }
    }
    if ($buyout) {
        for ($cust = $item->thenext; $cust <= $buyout; $cust = $cust + $raise) {
        echo ('<li><a href="includes\placebid.php?itemid=' . $id . '&ammount=' .         $cust .'">' .$cust. '</a></li>');
        }   
}

echo ('
    </ul> 
    </div><!-- dropdown -->
'); 

}
mysqli_close($mysqli);
?>

score 0 · Answer 1 · edited May 23 '17 at 11:51

0

I think the problem may be in that your PHP file is generating HTML which is continually replacing elements on your page due to them being loaded via AJAX.

Just an idea but you could make your PHP output a JSON instead that contains the database results, then have jQuery read the output. Your code would then process that JSON file and create or update the HTML elements accordingly (rather than replace them).

This way you have more fine grained control in the JavaScript for when your dropdown should close.

See this answer if you'd like to output from MySQLi to JSON.

edited May 23 '17 at 11:51

Community

1
1

answered Oct 28 '15 at 04:53

mattbell87

565
6
9

Thanks for the direction! I have since updated my code, I am now returning json from my ajax call and using it to update my page contents! This is a MUCH more elegant solution. While this fixed a LOT of problems, my initial problem still exists. What should I compare the ajax response json to? – RIchard W Oct 30 '15 at 03:34
No problems! Just make sure you're only replacing the child elements on the ajax call. I don't think you would need to replace #bidbuttons or #dropdown, only replace the child elements inside. If you can get away with only updating text and/or attributes do it! If you did need to do json comparison (you may be able to get away without it) id probably store the json to memory somewhere, then compare it to the new ajaxed json on every update. Hope you manage to get it running smoothly! – mattbell87 Nov 01 '15 at 01:55

Refresh div contents without closing dropdown

1 Answers1