Develop Reference

Keeping a live log while looping through PHP in an AJAX call

I am creating a Wordpress plugin to call an API and create new Wordpress posts for each object returned in the response. Here is the PHP for my function that loops over the API response to create new Wordpress posts:
add_action('wp_ajax_sync_posts', 'sync_posts_from_api' );
function sync_posts_from_api() {
// MAKING API CALL HERE
foreach ($data as $post) {
$new_post = array(
'post_type' => 'post',
'post_title' => $post->title,
'post_status' => 'publish',
'post_author' => 1,
'post_content' => $post->description,
);
$wp_post = wp_insert_post($new_post);
echo '<pre>Post ID ' . $wp_post->ID . ') has been created.</pre>';
}
}
And then I have my Javascript like this:
jQuery(function($) {
$('form').submit(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: ajaxurl,
data: {
action: 'sync_posts'
},
}).done(function(response) {
$('.log').html(response);
});
});
});
This works after the AJAX call is completely finished, but I am hoping to be able to append each echo to the .log container as it goes, instead of all at once when the call is finished. How would I go about making that change?

You can only access the ajax request response after the request finishes. The proper way of accomplishing what you want is using web sockets.
In the old days we used to create an iframe loading with something like this:
foreach ($data as $post) {
echo "
<script>
window.parent.postMessage({message: '".$post."'}, 'http://localhost/');
</script>
";
flush();
}
The browser executes the js in real time when loading the page and the js sends a message to the parent frame. You'll also need the proper js code on the parent frame to receive and process those posts. Even though this may still work, it's very sketchy and not recommended.

Ajax javascript php

I'm going to ask a question that has been mentioned very often but I can't understand what is missing in my code to make it work.
I have two PHP files, one that acts as a viewer and the other one that processes, performs processes and a javascript file where I put my ajax requests. My goal is simple to pass a variable between my Js and my PHP.
My global.js file
window.onload = function(){
for($i = 0; $i <= 0; $i++){
console.log("after for");
console.log($i);
$input = document.getElementsByClassName('from_1')[$i].textContent;
$sub = document.getElementsByClassName('subject_1')[$i].textContent;
$recei = document.getElementsByClassName('received_1')[$i].textContent;
$preview = document.getElementsByClassName('bodypreview_1')[$i].textContent;
$body_1 = document.getElementsByClassName('body_1')[$i].textContent;
console.log("*********************");
console.log($input);
console.log($sub);
console.log($recei);
console.log($preview);
console.log($body_1);
console.log("*********************");
}};
I recover data with getElementsById and store it in variables. Then in the same file I make my Ajax call
function btn_urgent(html){
console.log("*************************");
console.log("btn_urgent");
console.log($input);
console.log("*************************");
$.ajax({url: '../../wp-content/plugins/game_plugin/process_general.php',
type: 'POST',
data: {info: 'insert_to_db', $input: $input},
success: function(output) {
console.log("*************************");
console.log("ssrtsgsgsg");
alert(output);
console.log("*************************");
return($input);
}
In my game. php file I have an onclick that calls my function "btn_urgent".
<button type="submit" class="btn btn-primary col-2" onclick="btn_urgent()" >urgent</button>
Once my Ajax function is called it calls another function insert_to_db in the process_general file.
function insert_to_db($input){
global $wpdb;
echo json_encode;
$wpdb->insert(
'test_insert', //table name
array(
'id' => 550,
'from_mail' => $input,
), //columns
array(
'%d',
'%s',
)
);
}
As you can see I'm trying to make a $input insert when I click my onclick. but it doesn't work. On the other hand my function insert_to_db is well called by my Ajax request but it does not pass $input.
I think I'm forgetting something in the success story, but I don't know what. If someone has a few tips solution to offer me I am a buyer.
I don't know how important this is, but I'm getting into wordpress.
I remain available if necessary, thank you all and have a good day.

On your ajax data, it have invalid field name:
data: {info: 'insert_to_db', $input: $input},
Change to this:
data: {info: 'insert_to_db', input: $input},
on your php, you need grab the data like this:
$info = $_POST['info'];
$input= $_POST['input'];
// Then call the function
insert_to_db($input)

ajax request is successful, but php is not running

I have a very simple jquery function that sends an Ajax call to a php file that should echo out an alert, but for the life of me, cannot get it to run. For now, I'm just trying to trigger the php to run. Here is the javascript:
function getObdDescription(){
var $code = document.getElementById("vehicle_obd_code").value;
var $length = $code.length;
if($length == 5){
window.confirm($length);
$.ajax({ url: '/new.php',
data: {action: 'test'},
type: 'post',
success:function(result)//we got the response
{
alert('Successfully called');
},
error:function(exception){alert('Exception:'+exception);}
});
}
return false;
}
Here is new.php
<?php
echo '<script language="javascript">';
echo 'alert("message successfully sent")';
echo '</script>';
?>
I'm testing in Chrome, and have the network tab up, and can see that the call is successful, as well, I get the 'Successfully called' message that pops up, so the jquery is running, and the Ajax call is successful. I also know that the url: '/new.php is correct, because when I delete new.php from my server, I get a status "404 (Not Found)" from the console and network tab. I've even test without the conditional if($length ==... and still no luck. Of course, I know that's not the problem though, because I get the 'Successfully called' response. Any ideas?

This isnt the way it works if you need to alert the text, you should do it at the front-end in your ajax success function, follow KISS (Keep It Simple Stupid) and in the php just echo the text . that is the right way to do it.
You should do this:
function getObdDescription() {
var $code = document.getElementById("vehicle_obd_code").value;
var $length = $code.length;
if ($length == 5) {
window.confirm($length);
$.ajax({
url: '/new.php',
data: {
action: 'test'
},
type: 'post',
success: function (result) //we got the response
{
alert(result);
},
error: function (exception) {
alert('Exception:' + exception);
}
});
}
return false;
}
In your php
<?php
echo 'message successfully sent';
?>

You are exactly right Muhammad. It was not going to work the way I was expecting it. I wasn't really trying to do an Ajax call, but just to get an alert box to pop up; I just wanted confirmation that the call was working, and the PHP was running. Changing the alert('Successfully called'); to alert(result); and reading the text from the php definitely confirmed that the php was running all along.
I want to stay on topic, so will post another topic if that's what's needed, but have a follow-up question. To elaborate a bit more on what I'm trying to do, I am trying to run a function in my php file, that will in turn, update a template variable. As an example, here is one such function:
function get_vehicle_makes()
{
$sql = 'SELECT DISTINCT make FROM phpbb_vehicles
WHERE year = ' . $select_vehicle_year;
$result = $db->sql_query($sql);
while($row = $db->sql_fetchrow($result))
{
$template->assign_block_vars('vehicle_makes', array(
'MAKE' => $row['make'],
));
}
$db->sql_freeresult($result);
}
Now, I know that this function works. I can then access this function in my Javascript with:
<!-- BEGIN vehicle_makes -->
var option = document.createElement("option");
option.text = ('{vehicle_makes.MAKE}');
makeSelect.add(option);
<!-- END vehicle_makes -->
This is a block loop, and will loop through the block variable set in the php function. This work upon loading the page because the page that loads, is the new.php that I'm trying to do an Ajax call to, and all of the php runs in that file upon loading. However, I need the function to run again, to update that block variable, since it will change based on a selection change in the html. I don't know if this type of block loop is common. I'm learning about them since they are used with a forum I've installed on my site, phpBB. (I've looked in their support forums for help on this.). I think another possible solution would be to return an array, but I would like to stick to the block variable if possible for the sake of consistency.
I'm using this conditional and switch to call the function:
if(isset($_POST['action']) && !empty($_POST['action'])) {
$action = $_POST['action'];
//Get vehicle vars - $select_vehicle_model is used right now, but what the heck.
$select_vehicle_year = utf8_normalize_nfc(request_var('vehicle_year', '', true));
$select_vehicle_make = utf8_normalize_nfc(request_var('vehicle_make', '', true));
$select_vehicle_model = utf8_normalize_nfc(request_var('vehicle_model', '', true));
switch($action) {
case 'get_vehicle_makes' :
get_vehicle_makes();
break;
case 'get_vehicle_models' :
get_vehicle_models();
break;
// ...etc...
}
}
And this is the javascript to run the Ajax:
function updateMakes(pageLoaded) {
var yearSelect = document.getElementById("vehicle_year");
var makeSelect = document.getElementById("vehicle_make");
var modelSelect = document.getElementById("vehicle_model");
$('#vehicle_make').html('');
$.ajax({ url: '/posting.php',
data: {action: 'get_vehicle_makes'},
type: 'post',
success:function(result)//we got the response
{
alert(result);
},
error:function(exception){alert('Exception:'+exception);}
});
<!-- BEGIN vehicle_makes -->
var option = document.createElement("option");
option.text = ('{vehicle_makes.MAKE}');
makeSelect.add(option);
<!-- END vehicle_makes -->
if(pageLoaded){
makeSelect.value='{VEHICLE_MAKE}{DRAFT_VEHICLE_MAKE}';
updateModels(true);
}else{
makeSelect.selectedIndex = -1;
updateModels(false);
}
}
The javascript will run, and the ajax will be successful. It appears that the block variable is not being set.

Can't get a json response from Cakephp 3 controller

I am trying to send an ajax request to a Cakephp 3 controller.
The controller will find the data from the model and return it to the same view to be displayed,
The view and the js function are as follows
<script type = "text/javascript" language = "javascript">
$(document).ready(function(){
$("button").click(function(){
$.ajax({
type : "POST",
url : "<?php echo $this->Url->build(['controller' => 'users', 'action' => 'getByCategories', '_ext' => 'json']); ?>",
success: function (data){
console.log(JSON.stringify(data));
}
});
});
});</script>
The above function is in the index view of the controller.
Upon the click of the button a request will be sent to the getByCategories function in the same controller.
The getByCategories function is as follows
public function getByCategories()
{
$id = 33;
$this->request->allowMethod(['ajax']);
$this->autoRender = false;
$cat = $this->Users->Categories->get($id);
if ($this->Users->Categories->childCount($cat) > 0)
{
$result = $this->Users->Categories->find('all', ['conditions' => ['parent_id' => $id]]);
$this->set(compact($result));
$this->set('_serialize', $result);
}
else
{
$result['Machines'] = $this->Users->Machines->find('all', ['conditions' => ['category_id' => $id]]);
$result['Medias'] = $this->Users->Medias->find('all', ['conditions' => ['category_id' => $id]]);
$this->set(compact($result));
$this->set('_serialize', $result);
}
}
The ajax response from this function is alway empty but the debugkit display the _serialize variable correctly.
I have enabled the json extensions in the routes.php file. the variable for the this call in the debugkit is as follows
debugkit varables
I would appreciated if someone can guide to get the variable from the debugkit in the ajax response
Thank you in advance

Looks like you're close, except for a misunderstanding of how _serialize (and maybe either set or compact) works. Check the manual for all the details, but what you should be setting in _serialize is either a list of names of variables, or else true to serialize everything.
Also, if you're using compact with set, you give it names of variables, not the variables themselves.
So, what you should be using there is probably:
$this->set(compact('result'));
$this->set('_serialize', ['result']);

Can I include a php sql update within my javascript?

I am trying to use a combination of javascript and php to update a column within a sql database when a form gets submitted. The name of the sql database is "answers," the name of the column within the database is "FunctionsConsistency," and the form's id is "easytohard." I'm not sure, however, if it's possible to include the php (noted below by the asterisks) within this javascript code.
<script type='text/javascript'>
$(document).ready(function () {
$('#easytohard').on('submit', function(e) {
e.preventDefault();
$.ajax({
url : $(this).attr('action') || window.location.pathname,
type: "POST",
data: $(this).serialize(),
success: function (data) {
******THIS IS THE PHP CODE*********
$stmt = $db->prepare("UPDATE answers SET FunctionsConsistency = 1
WHERE id = ? AND FunctionsConsistency = 0") or die($db->error);
$stmt->bind_param("i", $id);
$stmt->execute();
******************
},
});
});
});
</script>
Thanks!

You can't mix Javascript and PHP like that.
Php should be executed on the server side while javascript meant to be executed on the client side.
You can put the Php file on your server, and just send the request to it using ajax or whatever.
Something like:
<script type='text/javascript'>
$(document).ready(function () {
$('#easytohard').on('submit', function(e) {
e.preventDefault();
$.ajax({
url : $('http://path/to/your/php/file/on/server'),
type: "POST",
data: {id: 'your desired id here'},
success: function (data) {
// if it reach this line, it means script on the php file is executed
},
});
});
});
</script>
And your php file should be on your server (path: http://path/to/your/php/file/on/server), containing proper includes to work.
<?php
$stmt = $db->prepare("UPDATE answers SET FunctionsConsistency = 1
WHERE id = ? AND FunctionsConsistency = 0") or die($db->error);
$stmt->bind_param("i", $_POST['id']);
$stmt->execute();
Notice you can access to post parameters using $_POST in php.
There are still a few things you should consider, for example when the requests don't reach to server or what if server fail to execute php file ..., but you got the idea.
Also, take a look at this and this. Hope this helps.