We Keep Coding

Update the DOM using One AJAX Call in WordPress

I update vote count on the content of a post, but I also have a widget that has counts of votes on each post. When the user clicks on the vote on a post, the vote counts
in each post of the widget does not get updated.
I wrote an AJAX function that calls function through actions like so
// AJAX function file ajax-vote-on-post.js
function voteOnPost(postId) {
jQuery.ajax({
type: 'POST',
url: voteonpostajax.ajaxurl,
data: {
action: 'addvote-to-post',
postid: postId
},
success: function(data, textStatus, XMLHttpRequest) {
var votecontainerid = '#vote-count-' + postId;
jQuery(votecontainerid).html('');
jQuery(votecontainerid).append(data);
},
error: function(MLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
}
I properly registered the ajax file to be called by WP in a Widget file that contains other functions and PHP codes.
...
// function in the PHP file that is called.
function addvote-to-post(){
$result = '';
// get vote count from DB
$post_ID = $_POST['postid'];
$votepostcount = get_post_meta($post_ID, '_votepostcount', true) != '' ? get_post_meta($post_ID, '_votepostcount', true) : '0';
// Code that updates the DB in WordPress does other things
...
// Output count on the DOM
$votecountnew = $votepostcount + 1;
$result = '<div class="vote-count-'.$post_ID.'" >'.$votepostcountNew.'</div>'
// update_all_count_for_post($post_ID, $votecountnew);
die($result);
}
The page load slowly and how best to update the DOM without using an extra function.
class MyVotePostWidget extends WP_Widget {
// Widget Front End
public function widget {
// HTML code to display posts with votes
}
}

Fetch number of rows using javascript

I'm trying to fetch number of rows that were not in another table and show them using javascript.
First, in the main page, it will list the inbox name from inboxtb table. Then I have a script that should pass the value (inboxid) to another file and return the number of result back to the main file, in its corresponding row.
I'll fetch first all the inbox row (main page):
while($stmt->fetch()){
echo '<li>'.$name.' <span id="loadnumber"></span></li>';
}
Then my script:
$(function(){
$('.loadmessage').ready(function(){
var elem = $(this);
var dataString = "inboxid="+elem.attr('data-artid');
var $parent = $(this).closest('loadmessage');
setInterval(function() {
$.ajax({
type: "GET",
url: "noofres.php",
data: dataString,
success: function(data) {
var $span = $parent.find('.loadnumber'); /* FIND THE CORRESPONDING SPAN */
$span.append(data); /* LOAD THE DATA INSIDE THE SPAN */
}
});
});
return false;
});
});
And my noofres.php:
if($stmt = $con->prepare("SELECT a.messageid FROM messagetb a LEFT JOIN readtb b ON a.messageid = b.messageid WHERE a.inboxid = ? AND b.readid IS NULL")){
$stmt->bind_param("i",$_GET["inboxid"]);
$stmt->execute();
$stmt->store_result();
$noofunreadmessages = $stmt->num_rows;
$stmt->close();
} /* END OF SECOND PREPARED STATEMENT */
echo '<span class="badges">'.$noofunreadmessages.'</span>';
But it doesn't return the numbers, where it should. What am I doing wrong? Or a better script to do it?
Very rough example output:
Person1 Message - 3
Person2 Message - 1
Person3 Message - 10
But my current output is:
Person1 Message
Person2 Message
Person3 Message
Number does not return the corresponding number at all. And error are showing up and continuously growing with this message.

Your code is incorrect in terms of logic.
You are executing AJAX once and receiving the value once as well.
Then, you update your element's HTML many times with the same one value.
$.ajax({}, {
success: function(data) {
setInterval(function() {
$('#loadunreadmessages').html(data);
}, 1000);
}
});
In order to get fresh values every time, you need to change it such way that it will execute AJAX many times and every time it will update value once. It sounds logical.
setInterval(function() {
$.ajax({}, {
success: function(data) {
$('#loadunreadmessages').html(data);
}
});
}, 1000);
In your case it is:
setInterval(function() { /* EVERY SECOND, IT EXECUTES NEW REQUEST TO GET FRESH VALUES */
$.ajax({
type: "GET",
url: "../fetch/noofres.php", /* THIS IS WHERE THE NUMBER OF UNREAD MESSAGES SHOULD COME FROM */
data: dataString,
success: function(data) {
$('#loadunreadmessages').html(data); /* LOAD THE NUMBER TO THIS SPAN WITH THE ID OF loadunreadmessages */
}
}) ;
}, 1000);

Server is crashing

I am running a longpolling script to grab data from the database. It was working fine until moving my script to an MVC.
I have viewed the chrome developer tool and it's showing nothing in there, but the page just carries on loading, and when I go to refresh it won't load, I have to shut down my xampp server or close my browser... Here's my script:
class SystemController extends Controller
{
public function lastbid()
{
set_time_limit(0);
// main loop
while (true) {
//get the product info
$getbidresult = ProductModel::bidprice(Request::get('item'));
// if ajax request has send a timestamp, then $last_ajax_call = timestamp, else $last_ajax_call = null
$last_ajax_call = Request::get('timestamp');
// get timestamp of when file has been changed the last time
$lastbid = isset($getbidresult->timestamp) ? $getbidresult->timestamp : 0;
// if no timestamp delivered via ajax or data.txt has been changed SINCE last ajax timestamp
if ($last_ajax_call == null || $lastbid > $last_ajax_call) {
// put last bid info into an array
$result = array(
'bidamount' => isset($getbidresult->amount) ? System::escape($getbidresult->amount): 0,
'timestamp' => System::escape($lastbid)
);
// encode to JSON, render the result (for AJAX)
$json = json_encode($result);
echo $json;
// leave this loop step
break;
} else {
// wait for 1 sec (not very sexy as this blocks the PHP/Apache process, but that's how it goes)
sleep(10);
continue;
}
}
}
}
This is how I am grabbing the data with JS.
function getContent(timestamp)
{
var queryString = {
'timestamp': timestamp
};
$.ajax(
{
type: 'GET',
url: '<?php echo Config::get('URL'); ?>system/lastbid?item=<?php echo System::escape($recentitem->id); ?>',
data: queryString,
success: function(data)
{
var obj = jQuery.parseJSON(data);
$('#bidprice-<?php echo System::escape($recentitem->id); ?>').html(obj.bidamount);
getContent(obj.timestamp);
}
});
}
$(function()
{
getContent();
});
$(document).ready(function() {
});
I've looked in apache logs with no avail unless I am looking in the wrong place. Does anything in the code look out of place, It doesn't to my knowledge but I may be overlooking something.
I have the script in a foreach, so I can initiate the div, for each product.
Edit, viewed apache and mysql logs and it showing nothing. Could it be a memory leak?

I think I have fixed it with the help of someone from an external website. It was to do with the sleep()
I have fixed it using:
session_write_close();
I will do more testing to see how it hold up before reporting back. With the reason why etc.

send array over ajax

I have a xml file containing information i want to store or update in database. my server redirects me to previous page if in 30 seconds script doesn't finish executing (changed max execution time, didn't help)
I want to split the file into multiple arrays and send them over ajax to be processed in more instances thus trying to shorten the execution time.
the file contains 38k rows and in 30 seconds i can add 6700 new objects in db or update 3800 existing ones.
so is there a way to do this? i'm very new to ajax so i don't even know where to start looking for a solution.
EDIT1:
<?php
$time = microtime(TRUE);
$xml = simplexml_load_string(file_get_contents($feed));
$json = json_encode($xml);
$array = json_decode($json,TRUE);
$array= $array['Row'];
set_time_limit(0);
ini_set('memory_limit','4000M');
//echo ini_get('max_execution_time');
//die();
$new = 0;
$existent = 0;
foreach($array as $produs)
{
$prod = Products::model()->findbyattributes(array('cod'=>$produs['ProductId']));
if(!$prod)
{
$prod = new Products;
$prod->cod = $produs['ProductId'];
$prod->price = $produs['PriceSRP'];
$prod->name = $produs['Name'];
$prod->furnizor= 'ABCData';
$prod->brand = $produs['HierarchyNameLevel1'];
//$prod->stock = $produs['Available'];
if($produs['Available'] == "+")
$prod->stock = 'Da';
else
{$prod->stock = 'Nu';}
$prod->category = $prod->getCategory($produs['MinorGroup'], 'ABC');
if(!$prod->category)
continue;
if(!$prod->save())
{
echo '<pre>';
var_dump($prod->geterrors());
echo '</pre>';
}
else{$new++;}
}
elseif($prod)
{
$prod->brand = $produs['HierarchyNameLevel1'];
$prod->price = $produs['PriceSRP'];
$prod->last_edit = date('Y-m-d H:i:s');
if($produs['Available'] == "+")
$prod->stock = 'Da';
else
{$prod->stock = 'Nu';}
if(!$prod->save())
{
echo '<pre>';
var_dump($prod->geterrors());
echo '</pre>';
}
else {$existent++;}
}
}
echo 'adaugat '.$new.' si updatat '.$existent.' produse in ';
print (microtime(TRUE)-$time). ' secunde!';
?>
it appears i may have been unclear in my initial post.
so this is my existing code. the $feed file has 38k items in it that i need to process and add or update existing db entries.
if i run the full 38k file after 30 sec the browser performs a history.back() called by the apache server. i would have liked to process the file from crond and process for example 1 entry every second but that is imposible since i have no access to crond on that specific server. i've tried to split up the file manually and it works perfectly fine for ~6700 new entries or 3500 - 4000 existing ones (since it has to find them, load them, update them and save )
so my initial problem, and what i was asking if it is posible to do it over ajax so the server won't stop the script from executing if its longer them 30 seconds(as in i don't even know if the server will interpret the ajax as a new request and existing script won't wait for it to respond).

I would save the xml file in a temp folder, then do an ajax get that runs the file from a specific off-set for (e.g.) 100 records:
function processScript(offset) {
$.ajax({
type: "POST",
url: "some.php",
data: { offset:offset },
dataType:'json',
success: function(data) {
var o = parseJSON(data);
if(o.offset > 0) {
processScript(o.offset);
}
}
})
}
processScript(0);
In some.php you would want to return a json object with a property 'offset' containing the next block of elements you want to process. When the xml file is complete, set offset to 0.
The above code is enough to get you started. You will also want to do some sort of error cheching in the success function, as well as give a progress notification to the user (e.g. "3,600 of 38,000 lines process"?).

array = $('.def-mask :checkbox:checked').serialize();
$.ajax({
url: 'ajax/battle.php',
type: 'post',
data: { playerReady: 1, attack: attack, defence: array },
success: function(data) {
alert(data);
}
});
More info

How to return json value from php page to html page by ajax and how to show result on html page

I m validating email id in php and ajax, and want to return value from php page to html in JSON format.
I want to keep that return value in php variable for the further use.
I'm doing these all in codeigniter, and I want to show .gif image while my AJAX is processing. (Pre loader image)
AJAX/Javascript/jQuery:
function checkEmail(value_email_mobile) {
if (value_email_mobile !== '') {
//alert('te');
$.ajax({
type: "POST",
url: url_check_user_avail_status,
data: "value_email_mobile=" + value_email_mobile,
success: function(msg) {
alert(msg);
//$('#psid').html("<img src='images/spacer.gif'>");
// $('#stat').html(msg);
//
//$('#sid').sSelect({ddMaxHeight: '300px'});
},
error: function() {
//alert('some error has occured...');
},
start: function() {
//alert('ajax has been started...');
}
});
}
}
PHP/Controller:
<?php
function check_email_or_mobile($param)
{
$ci = CI();
$value = $param['email_or_mobile'];
$query = "SELECT user_email , mobile FROM tb_users WHERE user_email = '$value' or mobile = '$value'";
$query = $ci->db->query($query);
if ($query->num_rows() > 0)
{
if (is_numeric($value))
{
return $res = "This mobile number is not registerd";
}
else
{
return $res = "This Email id is not registerd";
}
}
}

This is just to give you an example on how it will work.
First off, (obviously) there must the a preloader image ready inside the document. This must be hidden initially.
Second, before triggering the AJAX request, show the loading animated GIF.
Third, after the request if successful. Hide the image again inside your success: block inside the $.ajax().
Consider this example: Sample Output
PHP:
function check_email_or_mobile($param) {
// your functions, processes, blah blah
// lets say your processes and functions takes time
// lets emulate the processing by using sleep :)
sleep(3); // THIS IS JUST AN EXAMPLE! If your processing really takes time
$data['message'] = 'Process finished!';
// with regarding to storing, use sessions $_SESSION for further use
$_SESSION['your_data'] = $data_that_you_got;
echo json_encode($data); // use this function
exit;
}
// just a simple trigger for that post request (only used in this example)
// you really dont need this since you will access it thru your url
// domain/controller/method
if(isset($_POST['request'])) {
check_email_or_mobile(1);
}
HTML/jQuery/AJAX:
<!-- your animated loading image -->
<img src="http://i600.photobucket.com/albums/tt82/ugmhemhe/preloader.gif" id="loader" style="display: none;" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- <script type="text/javascript" src="jquery.min.js"></script> -->
<script type="text/javascript">
$(document).ready(function(){
// before the request, show the GIF
$('#loader').show();
$.ajax({
url: document.URL, // JUST A SAMPLE (url_check_user_avail_status)
type: 'POST',
data: {request: true},
dataType: 'JSON',
// data: "value_email_mobile=" + value_email_mobile,
success: function(response) {
// After a succesful response, hide the GIF
$('#loader').fadeOut();
alert(response.message);
}
});
});
</script>
My assumption is, since this is just a simple email checking, this wont really take a chunk of time. The other way is to fake the loading process.
success: function(response) {
// After a succesful response, hide the GIF
// Fake the loading time, lets say 3 seconds
setInterval(function(){
$('#loader').fadeOut();
alert(response.message);
}, 3000);
}

Let us know what part of your code is not working?
1) Check if the request flow is hitting the function checkEmail? PHP has inbuilt JSON converting utility json_encode. You could start using that.
2) If you want to store this on the server for further use, you could think about usage like
a) Storing it in Database (If really needed based on your requirements. Note: This is always expensive)
b) Session - If you would want this info to be available for all the other users too.
c) Or keep it in the memory like any of the caching mechanisms like memcache etc
3) For displaying the busy display,
// Before the below ajax call, show the busy display
$.ajax({
});
// After the ajax call, hide the busy display.
You could do this using JavaScript / JQuery on your choice.

I remember using
JSON.parse(data)
to convert JSON ino a javascript object.
Jquery has its own JSON parser btw. Something like $.JSONParse(data)