javascript - Getting php results to show after AJAX call without page reload -
i have 3 sections on page. pending, accepted, , denied users. output of data through php while loop. next pending users section, each user in section have 2 buttons (accept , deny). when either of buttons pressed run ajax call php file updates users status either accepted or denied (whichever pressed).
the issue having without letting page refresh user's data not moved updated status section(everything updates correctly on db side). however, if move out return false; code page refreshes, $('#success').html('user status changed!'); $('#success').delay(5000).fadeout(400); goes away right when page refreshes, instantly.
i need way page not refresh, user's data moved appropriate section, success message still appears.
$(document).ready(function () { $('.approve').click(function () { $.ajax({ url: 'userrequest_approve.php', type: 'post', data: { id: $(this).val(), //id status: 'approved' //status }, success: function (data) { //do data got returned $("#success").fadein(); $("#success").show(); $('#success').html('user status changed!'); $('#success').delay(5000).fadeout(400); }, //type: 'post' }); return false; }); }); form
<form action="" method="post" id="status"> <input type='hidden' name='id' value='<?php echo $pending_id; ?>' id='pending_id' /> <?php if ($pending_firstname==t rue) { echo "name - ". $pending_firstname . " " . $pending_lastname . "</br>" . "username - ". $pending_username . "</br></br>" //echo print_r($_post); ?> </form> <button class="approve" type="submit" form="status" name="approve" value="<?=$pending_id;?>">approve</button> <button id="deny" type="submit" form="status" name="deny" value="denied">deny</button> <br> <br> <br> <?php ;} else { echo "there no pending requests @ time."; } code html part:
<?php $con = mysqli_connect("localhost", "root", "", "db"); $run = mysqli_query($con,"select * user_requests order id desc"); $numrows = mysqli_num_rows($run); if( $numrows ) { while($row = mysqli_fetch_assoc($run)){ if($row['status'] == "pending"){ $pending_id = $row['id']; $pending_user_id = $row['user_id']; $pending_firstname = $row['firstname']; $pending_lastname = $row['lastname']; $pending_username = $row['username']; ?> <form action="" method="post" id="status"> <input type='hidden' name='id' value='<?php echo $pending_id; ?>' id='pending_id'/> <?php if ($pending_firstname == true) { echo "name - ". $pending_firstname . " " . $pending_lastname . "</br>" . "username - ". $pending_username . "</br></br>" //echo print_r($_post); ?> <button class="approve" type="submit" form="status" name="approve" value="<?=$pending_id;?>">approve</button> <button id="deny" type="submit" form="status" name="deny" value="denied">deny</button> </form><br><br><br> <?php ;} else { echo "there no pending requests @ time."; } } } } ?> <hr><br> <h2>approved user requests</h2><br> <div id="success" style="color: red;"></div><br> <?php $con2 = mysqli_connect("localhost", "root", "", "db"); $run2 = mysqli_query($con2,"select * user_requests order id desc"); $numrows2 = mysqli_num_rows($run2); if( $numrows2 ) { while($row2 = mysqli_fetch_assoc($run2)){ if($row2['status'] == "approved"){ $approved_id = $row2['user_id']; $approved_firstname = $row2['firstname']; $approved_lastname = $row2['lastname']; $approved_username = $row2['username']; if ($approved_firstname == true) { echo "name - ". $approved_firstname . " " . $approved_lastname . "</br>" . "username - ". $approved_username . "</br></br>" ?>
try this. trapping click event, doesn't stop form submission. if change handler on submit , prevent default action should work.
$(document).ready(function () { $('#status').on('submit', function (event) { event.preventdefault(); $.ajax({ url: 'userrequest_approve.php', type: 'post', data: { id: $(this).val(), //id status: 'approved' //status }, success: function (data) { //do data got returned $("#success").fadein(); $("#success").show(); $('#success').html('user status changed!'); $('#success').delay(5000).fadeout(400); } //type: 'post' }); }); }); form
<form action="" method="post" id="status"> <input type='hidden' name='id' value='<?php echo $pending_id; ?>' id='pending_id' /> <?php if ($pending_firstname == true) { echo "name - ". $pending_firstname . " " . $pending_lastname . "</br>" . "username - ". $pending_username . "</br></br>" //echo print_r($_post); ?> <button class="approve" type="submit" form="status" name="approve" value="<?=$pending_id;?>">approve</button> <button id="deny" type="submit" form="status" name="deny" value="denied">deny</button> </form> <br> <br> <br> <?php ;} else { echo "there no pending requests @ time."; } new edit section try this
<!doctype html> <html> <head> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <meta charset="utf-8"> <title>js bin</title> </head> <body> <?php $con = mysqli_connect("localhost", "root", "", "db"); $run = mysqli_query($con,"select * user_requests status='pending' order id desc"); $numrows = mysqli_num_rows($run); if( $numrows ) { while($row = mysqli_fetch_assoc($run)){ if($row['status'] == "pending"){ $pending_id = $row['id']; $pending_user_id = $row['user_id']; $pending_firstname = $row['firstname']; $pending_lastname = $row['lastname']; $pending_username = $row['username']; if ($pending_firstname == true) { // note removed id echo '<form action="" method="post">'; echo "name - " . $pending_firstname . " " . $pending_lastname . "</br>" . "username - " . $pending_username . "</br></br>"; echo '<button class="approve" type="submit" name="approve" action="approved" value="', $pending_id ,'">approve</button>'; echo '<button class="deny" type="submit" name="deny" action="denied" value="', $pending_id ,'" >deny</button>'; echo '</form><br><br><br>'; } } } } else { echo "there no pending requests @ time."; } ?> <hr><br> <h2>approved user requests</h2><br> <div id="success" style="color: red;"></div><br> <?php $con2 = mysqli_connect("localhost", "root", "", "db"); $run2 = mysqli_query($con2,"select * user_requests status='approved' order id desc"); $numrows2 = mysqli_num_rows($run2); if( $numrows2 ) { while($row2 = mysqli_fetch_assoc($run2)) { $approved_id = $row2['user_id']; $approved_firstname = $row2['firstname']; $approved_lastname = $row2['lastname']; $approved_username = $row2['username']; if ($approved_firstname == true) { echo "name - ". $approved_firstname . " " . $approved_lastname . "</br>" . "username - ". $approved_username . "</br></br>"; } } } else { // none in approved status } ?> <script type="text/javascript"> $(document).ready(function(){ // button handler $('button').on('click', function (event) { event.preventdefault(); // button pressed var _button = $(this); // value of button var _val = _button.val(); // action button (either approved or denied) var _action = _button.attr('action'); // form button in var _form = _button.closest('form'); var _datapassed = {status:_action,id:_val}; // log data i'm seding (for debug) console.log(_datapassed); // trigger submit event , pass submit handler value of button pressed. _form.triggerhandler('submit', _datapassed); }); $('form').submit(function (event, passeddata) { // prevent submit event page doesn't refresh. event.preventdefault(); // make ajax request value of button pressed. $.ajax({ url: 'userrequest_approve.php', type: 'post', data: passeddata, success: function (data) { //do data got returned $("#success").fadein(); $("#success").show(); $('#success').html('user status changed!'); $('#success').delay(5000).fadeout(400); }, error: function (jqxhr, textstatus, errorthrown) { // alert on http error alert(textstatus + errorthrown); } }); }); }); </script> </body> </html>
Comments
Post a Comment