how to use ajax to update this page?
hi so i managed to figure out my biggest problem and i am happy its pretty much working the way i want. Now the second stage to reach my goal is for me to be able to update the page without a refresh using ajax. The php etc is below, can someone show me or point me in the right direction. Thanks .
<?php
$link = mysqli_connect('localhost','root','password','database');
if (mysqli_connect_errno()) {
echo 'Error: Could not connect to database. Please try again later';
exit;
}
$db = mysqli_select_db($link, "database");
//check if the starting row variable was passed in the URL or not
if (!isset($_GET['feedback']) or !is_numeric($_GET['feedback'])) {
//we give the value of the starting row to 0 because nothing was found in URL
$feedback = 0;
//otherwise we take the value from the URL
} else {
$feedback = (int)$_GET['feedback'];
}
$prev = $feedback - 4;
$query = "SELECT * FROM clients, orders WHERE clients.ID = orders.ID ORDER BY Date DESC LIMIT开发者_开发技巧 $feedback,4";
$result = mysqli_query($link,$query);
?>
<div class="sidebar">
<div class="clientwrapper">
<h2>Client Feedback</h2>
<div class="box">
<?php
while($row=mysqli_fetch_array($result)){
echo '<p> '.$row["Comments"].' <span class="name"> By '.$row["Organisation"].' </span></p>';
}
?>
<?php echo '<a class="nodecoration" href=" '.$_SERVER['PHP_SELF'].'?feedback='.($feedback+4).'" ><span class="next-button">More</span></a>' ?>
<?php if ($prev >= 0) echo '<a class="nodecoration" href=" '.$_SERVER['PHP_SELF'].'?feedback='.$prev.'" ><span class="prev-button"></span></a>' ?>
<div class="clear"></div>
</div>
</div>
<div class="announcewrapper">
<h2>Announcements</h2>
<div class="box">
<p>There are currently no announcements.</p>
</div>
</div>
</div>
This is a bit of a long shot, as I am not working on your code, and I normally develop by tweaking the code (and testing it) step by step. So this may need a bit more work on your end to get it to behave properly...
// BUGGY INITIAL CODE REMOVED
Appendum
This solution uses jQuery's $.load() function - See http://api.jquery.com/load.
You will need to include jQuery in the <head> section of the page the above code will be within, using the following:
<head>
<!-- Whatever other bits are already here //-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"
type="text/javascript"></script>
</head>
Appendum #2
The following is a self-contained PHP Script which demonstrates this functionality. Has been tested and works. Simply remove the lines marked "TEST DATA ONLY" and remove the #s from the beginnings of lines marked "PROD DATA" and it should be halfway to a complete solution for you:
<html>
<head>
<title>Tester</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<style>
a.inactive { color:#AAA; }
</style>
</head>
<body>
<?php
# Page Configuration Details
$dbHost = 'localhost';
$dbUser = 'root' ;
$dbPass = 'password';
$dbBase = 'database';
$reviewsPerPage = 4;
#$link = mysqli_connect( $dbHost , $dbUser , $dbPass , $dbBase ); // PROD DATA ONLY
#if( mysqli_connect_errno() ) // PROD DATA ONLY
# die( 'Error: Could not connect to database. Please try again later' ); // PROD DATA ONLY
#$db = mysqli_select_db( $link , $dbBase ); // PROD DATA ONLY
//check if the starting row variable was passed in the URL or not
if( !isset( $_GET['feedback'] ) || !is_numeric( $_GET['feedback'] ) ){
//we give the value of the starting row to 0 because nothing was found in URL
$feedback = 0;
$prevPage = false;
}else{
//otherwise we take the value from the URL
$feedback = (int) $_GET['feedback'];
$prevPage = max( $feedback-$reviewsPerPage , 0 );
}
$nextPage = $reviewsPerPage+$feedback;
#$query = "SELECT * FROM clients, orders // PROD DATA ONLY
# WHERE clients.ID = orders.ID // PROD DATA ONLY
# ORDER BY Date DESC // PROD DATA ONLY
# LIMIT $feedback,$reviewsPerPage"; // PROD DATA ONLY
#$result = mysqli_query( $link , $query ); // PROD DATA ONLY
$result = array_fill( // TEST DATA ONLY
$feedback , // TEST DATA ONLY
$reviewsPerPage , // TEST DATA ONLY
array( // TEST DATA ONLY
'Comments'=>'The comments' , // TEST DATA ONLY
'Organisation'=>'John Smith' // TEST DATA ONLY
) // TEST DATA ONLY
); // TEST DATA ONLY
?>
<div class="sidebar">
<div class="clientwrapper">
<h2>Client Feedback</h2>
<div id="clientFeedback" class="box">
<div class="feedbackHolder">
<div id="clientFeedbackContent">
<?php
#while( $row = mysqli_fetch_array( $result ) ){ // PROD DATA ONLY
foreach( $result as $k => $row ){ // TEST DATA ONLY
#echo ' <p>'.$row['Comments']. // PROD DATA ONLY
# ' <span class="name">By '.$row['Organisation'].'</span></p>'; // PROD DATA ONLY
echo ' <p>#'.$k.': '.$row['Comments']. // TEST DATA ONLY
' <span class="name">By '.$row['Organisation'].'</span></p>'; // TEST DATA ONLY
}
echo ' <a class="nodecoration" href="'.$_SERVER['PHP_SELF'].'?feedback='.$nextPage.'" ><span class="next-button">More</span></a>'."\n";
echo ' <a class="nodecoration'.( $prevPage===false ? ' inactive' : '' ).'" href="'.$_SERVER['PHP_SELF'].'?feedback='.(int) $prevPage.'" ><span class="prev-button">Prev</span></a>'."\n";
?>
</div>
</div>
<div class="clear"></div>
<script type="text/javascript">
var reviewsPerPage = <?php echo $reviewsPerPage; ?>;
$(document).ready(function(){
// Bind our Custom Code to the "A" tags with class "nodecoration" within the "clientFeedback" div
$( '#clientFeedback a.nodecoration' ).live( 'click' , function(e){
console.log( 'Running' );
e.preventDefault();
// Get the URL to Load
theURL = $( this ).attr( 'href' );
// Use the jQuery $.load() function to replace the contents of this element
// with another element gained through AJAX
$( '#clientFeedback .feedbackHolder' )
.load(
theURL+' #clientFeedbackContent' ,
function(){
e.preventDefault(); // Prevent the link from behaving like it normally would.
});
});
});
</script>
</div>
</div>
<div class="announcewrapper">
<h2>Announcements</h2>
<div class="box">
<p>There are currently no announcements.</p>
</div>
</div>
</div>
</body>
</html>
Looking at this code, it suggests that you're developing a larger application. First, read up on PHP OOP. Learning this rather than using old scripting methods will help you tremendously in the long run. The benefits of spending the time to do this now far outweigh the downside of not getting it working quite as quickly as you may want to.
Having said that, whether or not you decide to class'ify this, I'd rip out the logic in the top part of your script and stick it in another file, accessible from your web server. Rather than echo out table-formatted data, dump out JSON-formatted content.
Replace the top code in this page to curl wherever you stick the newly created file on your server and json_decode it to get an iterate-able object that you can use to construct your table. If you're dealing with a post-back, then do a POST (or better DELETE) curl.
Now comes the tricky(ish) part. You want your script to enhance your server-driven functionality and not be obtrusive. Easiest way is to use a framework like jQuery, binding to click events and using event.preventDefault() functionality to prevent the server post-back. Within the function that your scripted event is bound to, make your $.ajax call there, displaying whatever data you want to in the continuation.
Hope that helps. If you're unfamiliar with any of the terms, a quick google search will yield a ton of documentation on each subject.
Try this below code for AJAX,
function change_category(id)
{
$.ajax({
type: "POST",
url: "ajax_update_query.php?subcat="+sub_cat,
data: "pid=" + id,
success: function(html){
$("#response_sub_cat").html(html);
}
});
}
you can put this function on whatever event you are using, i means onClick,onChange etc.. And in ajax_update_query.php page having you query for updating database based on your requirements.
Thanks.
加载中,请稍侯......
精彩评论