I have the following script:
index.php
<?php include("db.php"); ?>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
</head>
<body>
<div align="center">
<table cellpadding="0" cellspacing="0" width="500px">
<?php $sql = "SELECT * FROM items ORDER BY ID DESC";
$items= mysql_query($sql);
while ($item= mysql_fetch_array($items)){
$id = $item[ID]; ?>
<tr style="border: solid 4px red;">
<td>
<div class="<?= $id ?>">
<button class="my-btn" type="button" value="<?= $id ?>">BUTTON <?= $id ?></button>
</div>
</td>
</tr>
<?php } ?>
</table>
<div id="flash" align="left" ></div>
<ol id="update" class="timeline"></ol>
<div id="old_updates"></div>
</div>
<script src="script.js"></script>
</body>
</html>
script.js
$(function() {
$(".my-btn").click(function() {
var dataString = $(this).val();
$("#flash").show().fadeIn(200).html('');
$.ajax({
type : "POST",
url : "update_data.php",
data : {'not' : dataString},
cache : false,
success : function(html){
$("#update").prepend(html).find("li:first").slideDown("slow");
$('#content').val('');
$("#flash").hide();
}
});
});
$('.delete_update').live("click",function() {
var ID = $(this).attr("id");
var dataString = 'msg_id='+ ID;
if(confirm("Sure you want to delete this update? There is NO undo!")){
$.ajax({
type : "POST",
url : "delete_data.php",
data : dataString,
cache : false,
success : function(html){
$(".bar"+ID).slideUp('slow', function() {$(this).remove();});
}
});
}
return false;
});
});
update_data.php
<?php
include('db.php');
if(isSet($_POST['not'])) {
$not = $_POST['not'];
mysql_query("insert into items (name) values ('$not')");
$sql_in = mysql_query("SELECT wave, ID FROM actions order by ID desc");
$r = mysql_fetch_array($sql_in);
$msg = $r['name'];
$id = $r['ID'];
}
?>
<li class="bar<?php echo $msg_id; ?>">
<div align="left">
<span style=" padding:10px"><?php echo $msg; ?> </span>
<span class="delete_button">
X
</span>
</div>
</li>
delete_data.php
<?php
include("db.php");
if($_POST['msg_id']) {
$id = $_POST['msg_id'];
$id = mysql_escape_String($id);
$sql = "delete from items where ID='$id'";
mysql_query( $sql);
}
?>
I posted the whle code to be more specific and easy to understand.
The problem appear only with the delete function.
When i hit the link to delete an item, this item don't disappear instantly but is removed from sql database.
To see the item deleted i need to refresh the page and i don't want that.
I think the problem is with the second function of script.js but i can't figured it out what exactly is.
Related
how do i make my table output appear only when i click on the search button
<?php
require_once 'includes/header.php';
if ($_POST) {
$list = $_POST['categoryList'];
if ( $list != "") {
$sql = "SELECT product.product_name, product.product_image, product.category_id, product.active, category.category_name FROm product
INNER JOIN category on product.category_id = category.category_id
WHERE product.category_id = '".$_POST['categoryList']."' AND product.active = 1";
$result = $connect ->query($sql);
}
/*else{
$msg = echo 'Select category';
}*/
}
?>
HERE i am running a php script to pull data from the database table product
<div class="row">
<div class="col-md-12">
<div class="card mt-5" style="width: 30rem; margin-left: 25%" >
<div class="card-header bg-dark text-light"><span class="glyphicon glyphicon-th-list"></span> Categories </div>
<div class="card-body">
<form action="" method="post" enctype="multipart/form-data">
<div class="form-group row mt-5 ml-5">
<label for="categoryList" class="col-sm-8 col-form-label">Category Name</label>
<div class="col-sm-8">
<select class="form-control" id="categoryList" name="categoryList">
<option value="">--Select--</option>
<?php
$sql= "SELECT category_id, category_name FROM category where category_status = 1 AND category_status = 1";
$result =$connect->query($sql);
while ($row = $result->fetch_array()) {
echo '<option value="'.$row[0].'">'.$row[1].'</option>';
}
?>
</select>
</div>
</div>
<div class="col">
<button type="submit" onclick="myFunction()" class="btn btn-dark" id="searchButton" style="margin-left: 100px">Search </button>
</div>
</form>
</div>
This is the part where i select the categories pulled from the database
</div>
</div>
</div>
<div id="myDiv">
<table class="table" id="myTable">
<thead class="thead thead-dark">
<th>Photo</th>
<th>Name</th>
<th>Category</th>
</thead>
<tbody>
<?php
#$sql = "SELECT product.product_name, product.product_image, product.category_id, product.active, category.category_name FROM product
INNER JOIN category on product.category_id = category.category_id
WHERE product.category_id = '".$_POST['categoryList']."' AND product.active = 1";
$result = $connect ->query($sql);
while($row = $result->fetch_assoc())
{
$imageUrl = substr($row['product_image'], 3);
$name = $row['product_name'];
$category = $row['category_name'];
?>
<tr>
<td><?php echo '<img class="img-round" src='.$imageUrl.' style="height:30px; width:50px;">'?></td>
<td><?php echo $name?></td>
<td><?php echo $category?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
THIS IS THE TABLE THAT DISPLAYS THE PRODUCTS ON IN THE SELECTED CATEGORY ABOVE
<script>
$("#navDashboard").addClass('active');
$("#myTable").DataTable();
</script>
THIS IS THE SCRIPT RESPONSIBLE FOR DATATABLE AND ACTIVE NAVBAR
generally what I am doing is using ajax. give your form an id . for example en ajax call after submitting button
$(document).on('submit', '#show_table', function () {
event.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
type: 'POST',
url: 'your_file.php',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: (
function (formData) {
$(".result").html(formData)
}
)
});
});
in the URL pass the name of the file where the call will be made (create a new file). the value from the search input will pass in POST TYPE and then run your query . as you can see the result will display in a div with a class of result. so in the search page create a div
and the table will appear there .
the page will not be refreshed based on the event.preventDefault();
hope this give you any help :)
I am using two div(s). In the first div, all the WordPress users are shown on a page, with "ADD" Button Option. By adding Users, they get added to the second div using Ajax. But I want to cache the result shown in the second div. The code for users template are as follows-
<?php
/*
Template Name: Users
*/
?>
<style>
.container{
width: 800px;
}
.left{
float:left;
width: 300px;
background: ##66CDAA;
border-right: thick-solid #fff;
}
.right{
overflow: hidden;
width: 300px;
background: powderblue;
}
</style>
<?php
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="container">
<div class="left" id="xyz">
<table>
<tr>
<th>Name</th>
<th>Gravatar Image</th>
<th>Add to Div</th>
</tr>
<?php
$sql ="SELECT * FROM wp_users";
$results = $wpdb->get_results($sql) or die(mysql_error());
foreach( $results as $result ){ ?>
<tr>
<td id="<?php echo $result->ID; ?>">
<?php echo $result->display_name; ?>
</td>
<td>
<php echo get_avatar( $result->user_email, 42); ?>
</td>
<td>
<input type="button" class="submit" data-id="<?php echo $result->ID; ?>" data-name="<?php echo $result->display_name; ?>" data_image="<?php echo get_avatar_url($result->user_email, 42); ?>" value="ADD"><p style="display:none;">Added</p>
</td>
</tr>
<?php
}
?>
</table>
</div>
<div class="right">
<p>Added Users</p>
<table>
<tr>
<th>Name<th>
<th>Image</th>
</tr>
</table>
</div>
</div>
</main>
</div>
<?php get_footer(); ?>
Now, in ajax.js I have the following code:
(function($) {
$(document).ready(function() {
$(".submit").on("click", function(e){
e.preventDefault();
$(this).css("display", "none");
$(this).closest("td").find("p").css("display", "block");
var id = $(this).data('id');
var name = $(this).data('name);
var image = $(this).data('image');
$.ajax({
url: ajax_url,
method: 'post',
data: { action: 'work', id:id, name: name, image:image},
success: function(response){
var test = jQuery.parseJSON(response);
name1 = test.myname;
url1: test.url;
id: test.id;
$('.table').append('<tr id=" ' + id1+ ' "><td>' + name1 + '</td><br><td><img src=" ' + url1 + ' "></td><td><input type="button" value="Cancel" class="cancel"></td></tr>');
$('.cancel').on("click", function(e){
e.preventDefault();
var id2 =$(this).closest.("tr").attr('id');
$('td[id=' + id2 + ']').closest('tr').find('p').css('display', 'none');
$('td[id=' + id2 + ']').closest('tr').find('input').css('display', 'block');
$(this).closest("tr").hide();
})
}
})
})
})
})(jQuery);
Now, In ajax.php, I have the function which is as follow:
function work() {
$id = $_POST['id'];
$name = $_POST['name'];
$image_url = $_POST['image'];
$myObj->myname = $name;
$myObj->url = $image_url;
$myObj->id = $id;
$myJSON = json_encode($myObj);
echo $myJSON;
wp_die();
}
I want to add users to the second div using Ajax and also want to cache the result for some time. Also, suggest if there is a better way of hiding Add button or can I apply a condition to check whether a particular user has been added should not be added twice. But my primary question is that how can I cache ajax result.
This may help you, go through the below code snippet
// ask the browser to cache this response
$expires = 60 * 15; // 15 minutes
header('Pragma: public');
header('Cache-Control: maxage=' . $expires);
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + $expires) . ' GMT');
I am new to JQuery and I am making an html page where the user can search for a Book ID once the search button is clicked. The problem is, the search button is not responding. Here's my code.
Here's the php file:
<?php
require("dbconnect.php");
$sql = "select * from tbl_books";
$result = mysql_query($sql, $conn) or die(mysql_error());
/** table **/
echo "<table border='1'
cellpadding='5'>";
echo "<tr>";
echo "<th>Name</th>";
echo "<th>Category</th>";
echo "<th>Author</th>";
echo "</tr>";
while($row=mysql_fetch_array($result)) {
$id = $row['bid'];
$bname=$row['bname'];
$category=$row['category'];
$author=$row['author'];
echo "<tr>";
echo "<td>$bname</td>";
echo "<td>$category</td>";
echo "<td>$author</td>";
}
?>
Html
<!doctype html>
<html>
<header>
<title>
Main Page
</title>
<script type="text/javascript"
src="jquery-2.1.4.min.js"> </script>
<script>
$(function() {
$.post("bookoramaBookDisplay.php",
function(data){
$("#display").html(data);
});
});
</script>
<script>
$(function() {
$("#btnsearch").click(function() {
var search=$("#txtsearch").val();
$.post("bookoramaBookDisplay.php",
{txtsearch:search},
function(data){
$("#display").html(data);
});
});
});
</script>
</header>
<body>
<div id = "table2">
<div id = "taas">
<input type="text"
name = "txtsearch_name"
id = "txtsearch"
placeholder="Search Book">
<input type="button"
value="Search"
id = "btnsearch">
</div>
<div id = "baba">
<div id = "display">
</div>
</div>
</div>
A little help would be highly appreciated. Thank you!
Your query should be
$where='';
if($_POST[txtsearch]){
$where = "WHERE `bid`='".$_POST[txtsearch]."'";
}
$sql = "select * from tbl_books $where";
<!doctype html>
<html>
<head>
<title>
Main Page
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$.ajax({
type: 'POST',
cache: false ,
url: "bookoramaBookDisplay.php",
success: function(rmsg){
$("#display").html(rmsg);
}
});
$("#btnsearch").click(function() {
$.ajax({
type: 'POST',
cache: false ,
url: "bookoramaBookDisplay.php",
data: {txtsearch:search},
success: function(rmsg){
$("#display").html(rmsg);
}
});
});
});
</script>
</head>
<body>
<div id = "table2">
<div id = "taas">
<input type="text" name = "txtsearch_name" id = "txtsearch" placeholder="Search Book">
<input type="button" value="Search" id = "btnsearch">
</div>
<div id = "baba">
<div id = "display">
</div>
</div>
</div>
</body>
</html>
PHP
<?php
require("dbconnect.php");
$where='';
if($_POST[txtsearch]){
$where = "WHERE `bid`='".$_POST[txtsearch]."'";
}
$sql = "select * from tbl_books $where";
$result = mysql_query($sql, $conn) or die(mysql_error());
/** table **/
echo "<table border='1'
cellpadding='5'>";
echo "<tr>";
echo "<th>Name</th>";
echo "<th>Category</th>";
echo "<th>Author</th>";
echo "</tr>";
while($row=mysql_fetch_array($result)) {
$id = $row['bid'];
$bname=$row['bname'];
$category=$row['category'];
$author=$row['author'];
echo "<tr><td>".$bname."</td><td>".$category."</td><td>".$author."</td></tr>";
}
echo "</table>";
?>
I have a like and dislike system in a page, like and dislike works only on the first page but not on others post. Here is what I have tried
This is how I fetch information
Here is the php part
Like.php
if(isset($_POST['id'])){
$send = mysqli_query($connecDB, "UPDATE portfolio SET `like`='$view' WHERE `id`='$id'"); }
Javascript part
<script type="text/javascript">
$(".btn-success").click(function() {
var id = $('#id').val();
$.ajax({
type : "POST",
url : "ajax/like.php",
data: "id=" + id,
success: function(data) {
$('#result').html(data);
}
});
});
</script>
Here is the HTML part
$sql = "SELECT * FROM post ORDER BY id DESC LIMIT 10";
$result = mysqli_query($connecDB, $sql);
while($rowsmall = mysqli_fetch_array($result)){
<button class="btn btn-success btn-stroke" id="result"><?php echo $rowsmall['like']; ?> <i class="fa fa-thumbs-o-up fa-lg"></i> </button>
<input type="hidden" name="id" id="id" value="<?php echo $rowsmall['id']; ?>"> <?php } ?>
The problem I'm facing is that the javascript is again and again sending same hidden id.
In HTML id attribute must has an unique value in whole page and this line (var id = $('#id').val();) always return id of first post, use dataattributes to simply access post id, just like this
PHP
<?php $sql = "SELECT * FROM post ORDER BY id DESC LIMIT 10";
$result = mysqli_query($connecDB, $sql);
while($rowsmall = mysqli_fetch_array($result)){
<button class="btn btn-success btn-stroke" data-id="<?php echo $rowsmall['id']; ?>" >
<?php echo $rowsmall['like']; ?> <i class="fa fa-thumbs-o-up fa-lg"></i>
</button>
<input type="hidden" name="id" value="<?php echo $rowsmall['id']; ?>">
<?php } ?>
JavaScript
<script type="text/javascript">
$(".btn-success").click(function() {
var id = $(this).data('id'); // get data-id atrribute
var element = this;
$.ajax({
type : "POST",
url : "ajax/like.php",
data: "id=" + id,
success: function(data) {
$(element).html(data);
}
});
});
</script>
Below is the javascript part and load more button which I am using to load more posts from database it works fine I want to show a 'no more posts' message when all posts have been loaded but do not know how to do that exactly. Hope you guys can help.
<script>
$(document).ready(function(){
$(document).on('click','.show_more',function(){
var ID = $(this).attr('id');
$('.show_more').hide();
$('.loding').show();
$.ajax({
type:'POST',
url:'mload_more.php',
data:'id='+ID,
success:function(html){
$('#show_more_main'+ID).remove();
$('.posts').append(html);
}
});
});
});
</script>
<div class="show_more_main" id="show_more_main<?php echo $ID; ?>">
<span id="<?php echo $ID; ?>" class="show_more" title="Load more posts">
Show more
</span>
<span class="loding" style="display: none;">
<span class="loding_txt">Loading...</span>
</span>
</div>
Within mload_more.php file check the number of returned rows greater than zero. It would be as following code.
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
//display data
}
} else {
echo "No more posts to load";
}
Gayan just gave me a start and rest was not much difficult.
<?php
if ($query->rowCount() > 0) {
while($row = $result->fetch_assoc()) {
}
}
else {
echo $er = "No more posts to load";
}
?>
<script type="text/javascript">
var er = "<?php echo $er; ?>";
if(er!=''){
$("er").show();
$('.show_more').hide();
}
</script>