What I want:
I am building a simple gallery system plugin and uploading the images using AJAX so that the page does not referesh image insertion, deletion and displaying. Everything is fine with my code except this problem: When I upload the image into database, it is inserting correctly, but it does not display on front-end at that time. The image display on front-end when I refresh the page, which I don't want.
Please tell me if anyone have solution for this: How can I display faster on front-end page when upload is done?
Screenshot of the front-end where I want all the images to display with last inserted images:
This is my code for displaying all images from database for front-end:
<script>
$(document).ready(function(){
// function alertFunc(){
var ajaxurl='<?php echo admin_url('admin-ajax.php')?>';
var data={
action:'ajax_json_request'
};
$.post(ajaxurl,data,function(data1){
var p=data1.lastIndexOf("0");
var res = data1.substring(0, p);
//alert(res);
//var res = data1.replace(/0/g, "");
var json = $.parseJSON(res);
// console.log(json);
var allGall='';
$.each(json,function(key,value){
//var img_url=value.image_url.replace(/2/g, "20");
var img_url=value.image_url;
var category=value.category;
allGall=allGall+
'<div class="col-md-4">'+
'<div class="thumbnail">'+
'<img src="'+img_url+'" alt="Lights" class="img-responsive">'+
'<div class="caption">'+
'<p>'+category+'</p>'+
'</div>'+
'<div class="btn-section">'+
'<div class="btn-group" >'+
'<input type="hidden" data-value="'+img_url+'" name="delete_file" id="delete_file" />'+
'<input type="button" class="btn btn-primary delete-btn" onclick="deletefun2(this)" value="Delete" data-value="'+img_url+'">'+
'</div>'+
'</div>'+
'</div>'+
'</div>'
});
$('div#gallery').html(allGall);
});
//}
});
</script>
functions.php code where I am sending the request to get the result.:
/*=======================================ajax for json=============================================*/
add_action('wp_ajax_ajax_json_request','ajax_json_request');
add_action('wp_ajax_nopriv_ajax_json_request','ajax_json_request');
$newarray = array();
function ajax_json_request(){
global $wpdb;
$tablename = $wpdb->prefix.'doctors_dallery';
$result = $wpdb->get_results("SELECT * FROM $tablename");
$keynew=1;
foreach($result as $key=>$value){
$newarray[$keynew]['image_url']=$value->image_url;
$newarray[$keynew]['category']=$value->category;
$newarray[$keynew]['Gallery']=$value->Gallery;
$newarray[$keynew]['image_url']=$value->image_url;
$newarray[$keynew]['image_name']=$value->image_name;
$keynew++;
}
echo json_encode($newarray);
}
/*====================================end===================================================*/
I encoded the data into json format so that I can show data faster at front-end of my plugin, but it does not show all the previously inserted data. It is only showing current inserted images, it is not showing without page referece.
Any help is appreciated.