At this point in the debugging this is what I am sending to my javascript
header("Content-Type: application/json");
//echo json_encode($full_product_list);
echo json_encode(array());
and here is my ajax call
jQuery.get( "non public api sorry ")
.done(function(data) {
console.log("I got a response")
console.log(data)
})
.fail(function(data) {
console.log("Error?")
console.log(data);
})
It errors everytime and in the data my response string for the empty array is
"[]null"
Entire function being called for reference same thing I get an error and at the end of my json there is "null" appended.
function getAllProducts() {
$full_product_list = array();
$loop = new WP_Query( array( 'post_type' => 'product', 'posts_per_page' => -1 ) );
$pf = new WC_Product_Factory();
while ( $loop->have_posts() ) : $loop->the_post();
$post_id = get_the_ID();
$product = $pf->get_product($post_id);
$attributes = $product->get_attributes();
$attrs = array();
foreach ($attributes as $attr) {
$name = str_replace("pa_fablab_", "", $attr["name"]);
$attrs[$name] = $attr["value"];
}
$item = array(
"id" => $post_id,
"name" => get_the_title(),
"price" => $product->get_price()
);
if (sizeof($attrs) > 0) {
$full_product_list[] = array_merge($item, $attrs);
}
endwhile; wp_reset_query();
header("Content-Type: application/json");
//echo json_encode($full_product_list);
echo json_encode(array());
}
Return something from your php page, add die() after to remove the null
header("Content-Type: application/json");
//echo json_encode($full_product_list);
echo json_encode(array("message"=>"ok"));
die();
Related
I'm using jsGrid for my project. View here for original source code
I want to pass an additional variable call $user_session to use for mysql select query in fetch.php but failed. Below is what i have been trying.
<script>
var user_session = "<?php echo $user_session; ?>"; //<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
//......
controller: {
loadData: function(){
return $.ajax({
type: "GET",
url: "fetch_data.php",
data: {user_session:user_session} //<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
});
},
//......
Here's the fetch.php file
<?php
if($method == 'GET')
{
$user_session = $_GET['user_session']; //<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
$query = "SELECT * FROM sample_data WHERE first_name=? ORDER BY id DESC";
$statement = $connect->prepare($query);
$statement->execute($user_session); //<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
$result = $statement->fetchAll();
foreach($result as $row)
{
$output[] = array(
'id' => $row['id'],
'first_name' => $row['first_name'],
'last_name' => $row['last_name'],
'age' => $row['age'],
'gender' => $row['gender']
);
}
header("Content-Type: application/json");
echo json_encode($output);
}
//......
?>
What is the proper way to do this?
First of all, anyone could open up a dev console inside a browser and start fuzzing your session id. While you are correctly preparing your query, defusing sql injection, it does does not protect you from an IDOR, or, i could enumerate your users by just querying your application repeatedly.
If you really want to pass your session id client-side, maybe you could consider using a cookie, as it is less easily editable by a normal user.
I'm able to do by this way.
<script>
//......
controller: {
loadData: function(filter){
var user_session = "<?php echo $user_session; ?>"; //<<<<<<<<<<<<<<<<<<<<<<<<<<<
return $.ajax({
type: "GET",
url: "fetch_data.php",
data: {filter,
user_session:user_session //<<<<<<<<<<<<<<<<<<<<<<<<<<<
},
});
},
//......
</script>
In fetch.php i do this.
<?php
if($method == 'GET')
{
$user_session = $_GET['user_session'];//<<<<<<<<<<<<<<<<<<<<<<<<<<<
$query = "SELECT * FROM sample_data WHERE first_name=? ORDER BY id DESC";
$statement = $connect->prepare($query);
$statement->execute([$user_session]); //<<<<<<<<<<<<<<<<<<<<<<<<<<<
$result = $statement->fetchAll();
foreach($result as $row)
{
$output[] = array(
'id' => $row['id'],
'first_name' => $row['first_name'],
'last_name' => $row['last_name'],
'age' => $row['age'],
'gender' => $row['gender']
);
}
header("Content-Type: application/json");
echo json_encode($output);
}
//......
?>
For the security issue mentioned by #Andrea Golin, i will post another question.Thanks.
Finally, i found a better way.
I can directly call $user_session inside fetch.php.
<?php
require('user_session.php'); //<<<<<<<<<<<<<<<<<<<<<<<<<<<
require('includes/db.php');
$method = $_SERVER['REQUEST_METHOD'];
if($method == 'GET')
{
$query = "SELECT * FROM sample_data WHERE first_name=? ORDER BY id DESC";
$statement = $conn->prepare($query);
$statement->execute([$user_session]); //<<<<<<<<<<<<<<<<<<<<<<<<<<<
$result = $statement->fetchAll();
foreach($result as $row)
{
$output[] = array(
'ChildID' => $row['ChildID'],
'Name' => $row['Name'],
'BirthDate' => $row['BirthDate'],
'Gender' => $row['Gender'],
'StudyorWorking' => $row['StudyorWorking'],
'CourseorOccupation' => $row['CourseorOccupation'],
'Married' => $row['Married']
);
}
header("Content-Type: application/json");
echo json_encode($output);
}
?>
I found a solution how to get a load more button that displays more content on click, but it was for posts, I want to make it work for my custom post type 'Klanten'.
I tried editing the code to match my post type, but I get an error: "Undefined index: offset"
functions.php
wp_enqueue_script( 'dfib-theme-custom', get_template_directory_uri() .'/js/custom.js', array('jquery') );
wp_localize_script( 'dfib-theme-custom', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php')) );
add_action( 'wp_ajax_load_more_posts', 'load_more_posts' );
add_action( 'wp_ajax_nopriv_load_more_posts', 'load_more_posts' );
function load_more_posts(){
global $post;
$args = array('post_type'=>'klanten', 'posts_per_page'=> 4, 'offset'=> $_POST['offset']);
$rst=[];
$query = new WP_Query($args);
if($query->have_posts()):
while($query->have_posts()):$query->the_post();
$rst[] = $post;
endwhile;
wp_reset_postdata();
$offset = $_POST['offset']+4;
endif;
wp_send_json_success(array('klanten'=>$rst, 'offset'=>$offset));
}
custom.js
$('#load_more_posts').on('click', function(e){
console.log('hi');
e.preventDefault();
var $offset = $(this).data('offset');
console.log('var'+$offset);
$.ajax({
method: 'POST',
url: ajax_object.ajax_url,
type: 'JSON',
data: {
offset: $offset,
action: 'load_more_posts'
},
success:function(response){
console.log(response);
$('#load_more_posts').data('offset', parseInt(response.data.offset));
}
});
})
php-file
$query = new WP_Query( array(
'post_type' => 'klanten',
'posts_per_page' => 4,
'offset' => 0,
'paged' => 1,
'order' => 'ASC',
'orderby' => 'rand',
) );
if ( $query->have_posts() ) { ?>
<div class="klanten__wrapper">
<?php
while ( $query->have_posts() ) :
$query->the_post();
?>
<div class="logo__wrapper">
<img class="klant__logo" src="<?php the_post_thumbnail_url(); ?>">
</div>
<?php endwhile; ?>
<div id="load_more_posts" class="loadmore">Load More...</div>
</div>
<?php
wp_reset_postdata();
return ob_get_clean();
}
Console log
I want to show 4 logo's (elements), and load 4 more each time someone clicks the loadmore button
Replace this
<div id="load_more_posts" class="loadmore" data-offset="4">Load More...</div>
You need to return ajax data with logo array and then append data like below code.
AJAX call
$('#load_more_posts').on('click', function(e){
console.log('hi');
e.preventDefault();
var $offset = $(this).data('offset');
console.log('var'+$offset);
$.ajax({
method: 'POST',
url: ajax_object.ajax_url,
type: 'JSON',
data: {
offset: $offset,
action: 'load_more_posts'
},
success:function(response){
console.log(response);
var html = "";
$(response.data.klanten).each(function(index,value) {
html += '<div class="logo__wrapper"> <img class="klant__logo" src="'+value.post_thumbnail+'"></div>'
});
$('.logo_wrapper').append(html);
$('#load_more_posts').data('offset',
parseInt(response.data.offset));
}
});
})
HTML Code
<div class="klanten__wrapper">
<div class="logo_wrapper">
<?php
while ( $query->have_posts() ) :
$query->the_post();
?>
<div class="logo__wrapper">
<img class="klant__logo" src="<?php the_post_thumbnail_url(); ?>">
</div>
<?php endwhile; ?>
<div>
<div id="load_more_posts" class="loadmore">Load More...</div>
</div>
function.php
wp_enqueue_script( 'dfib-theme-custom', get_template_directory_uri() .'/js/custom.js', array('jquery') );
wp_localize_script( 'dfib-theme-custom', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php')) );
add_action( 'wp_ajax_load_more_posts', 'load_more_posts' );
add_action( 'wp_ajax_nopriv_load_more_posts', 'load_more_posts' );
function load_more_posts(){
global $post;
$args = array('post_type'=>'klanten', 'posts_per_page'=> 4, 'offset'=> $_POST['offset']);
$rst=[];
$query = new WP_Query($args);
if($query->have_posts()):
while($query->have_posts()):$query->the_post();
$rst[] = $post;
$post_thumbnail = get_the_post_thumbnail($post->id);
$rst['post_thumbnail'] = $post_thumbnail;
endwhile;
wp_reset_postdata();
$offset = $_POST['offset']+4;
endif;
wp_send_json_success(array('klanten'=>$rst, 'offset'=>$offset));
}
I got help from a colleague and he figured it out. I added this in my js-file (jQuery)
// Counter for logos
var logoCount = $('.logo__wrapper').length;
var counter = 12;
// Show only first 12 logos
$('.logo__wrapper:nth-of-type(1n+13)').addClass('is-hidden');
// Load more logos button click
$('#load_more_posts').on('click', function (e) {
// Loop hidden logo's
$('.logo__wrapper.is-hidden').each(function (i) {
// Hide button if no more logo's
if (counter++ === logoCount) {
$('#load_more_posts').hide();
$('.loadmore__end').toggle();
}
// Show next 12 logos
if (i < 12) {
$(this).removeClass('is-hidden');
}
// Break loop after 12 logos
else {
return false;
}
});
});
My ajax is
$.ajax({
type: 'POST',
url: ajax.ajax,
contentType: false,
processData: false,
dataType: 'JSON',
status: 200,
data: formdata,
success: function(msg){
$('#success_message').fadeIn().html(data);
setTimeout(function() {
$('#success_message').fadeOut("slow");
}, 2000 );
}
});
This is the PHP part
function form(){
global $wpdb;
$table = cars;
foreach ($_FILES as $file) {
if($file['error'] == UPLOAD_ERR_NO_FILE) {
continue;
}
$valid_ext = array( 'img' , 'png');
$extension_upload = strtolower( substr( strrchr($file['name'], '.') ,1) );
if ( in_array($extension_upload,$valid_ext) ) {
$name_upload = uniqid() . $file['name'];
$url_insert = trailingslashit( plugin_dir_path( dirname( __FILE__ ) ) ) . 'uploads';
wp_mkdir_p($url_insert);
$name_insert = trailingslashit($url_insert) . $name_upload;
$action = move_uploaded_file($file['tmp_name'],$name_insert);
$data = array( 'customer_resume' => $name_upload );
$format = array( '%s' );
$success=$wpdb->insert( $table, $data, $format );
$msg_true = 'Upload ok ';
} else {
$msg_error = 'Upload error';
}
}
$result = !isset($msg_error);
$msg = array();
if($result) {
$msg['error'] = 'true';
$msg['true'] = $msg_true;
} else {
$msg['error'] = 'false';
$msg['false'] = $msg_error;
}
header('Content-Type: application/json');
echo json_encode($msg);
}
And the HTML where I try to show the success or error message
<div id="error_message"></div>
<div id="success_message"></div>
When I click on Submit button I everything works fine and saved in database but there is no indication wheather is success or no. I've tried to add this msg's but still nothing shows on page.
PHP side:
You need to print same variable for success and failure:
if($result) {
$msg['error'] = 'true';
$msg['msg'] = $msg_true;
} else {
$msg['error'] = 'false';
$msg['msg'] = $msg_error;
}
JavaScript Side:
The AJAX response will come as
data.error -> true or false.
data.msg -> Success or Error message depending upon program logic.
...
success: function(data){
$('#success_message').fadeIn().html(data.msg);
...
What is hiding behind "ajax.ajax" ?
Also if you want to show your data you need to use "msg"
success: function(msg){
$('#success_message').fadeIn().html(msg);
setTimeout(function() {
$('#success_message').fadeOut("slow");
}, 2000 );
}
So basically... here are working two files, one is a curlphp script and the other an angular1 js file.
in the js file, When an admin user clicks on 'send notification' an event is triggered in order to send a message by invoking curl through a function.
That function looks like this
$scope.notify = function(title, content, ¿¿ userId ??){
$.ajax({
url: 'app/backend/src/curl-service.php',
type: 'POST',
data: {
userId: 'the problem is here',
title: title,
message: content
},
success: function(data) {
console.log('time to use curl service');
},
error: function(){
console.log('Error! you can't use curl service');
}
});
};
as you can see, I pass some data with ajax to fill the notification's content that will be pushed by this curl-service.php file
<?php
// Incluimos el api asignada al app
define('API_ACCESS_KEY', 'AIzaSyAJvT_Tx7vwZzViWkwUcQHdhx2osTiSXHA');
$registrationIds = array($_POST['userId']);
$title = array($_POST['title']);
$message = array($_POST['message']);
// preparamos los array
$msg = array
(
'title' => $title,
'message' => $message,
'sound' => default,
);
$fields = array
(
'registration_ids' => $registrationIds,
'data' => $msg
);
$headers = array
(
'Content-Type: application/json',
'Authorization: key=' . API_ACCESS_KEY
);
//iniciamos el servicio conectando con la url
$ch = curl_init();
curl_setopt( $ch,CURLOPT_URL, 'https://fcm.googleapis.com/fcm/send');
curl_setopt( $ch,CURLOPT_POST, true );
curl_setopt( $ch,CURLOPT_HTTPHEADER, $headers );
curl_setopt( $ch,CURLOPT_RETURNTRANSFER, true );
curl_setopt( $ch,CURLOPT_SSL_VERIFYPEER, false );
curl_setopt( $ch,CURLOPT_POSTFIELDS, json_encode( $fields ) );
$result = curl_exec($ch);
curl_close($ch);
echo $result;
//ejecutamos el servicio
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
//verificamos posibles errores y se genera la respuesta
if ($err) {
echo "Se ha producido el siguiente error:" . $err;
} else {
echo $response;
}
?>
What I actually need to know, is how can I obtain the registration ids so then I can use it in my php file too
What you are doing wrong is right here in this bit of code:
$registrationIds = array($_POST['userId']);
$title = array($_POST['title']);
$message = array($_POST['message']);
// preparamos los array
$msg = array
(
'title' => $title,
'message' => $message,
'sound' => default,
);
$fields = array
(
'registration_ids' => $registrationIds,
'data' => $msg
)
You are creating Arrays from your POST data and then using then as Strings afterwards, if you change the first bit to:
$registrationIds = $_POST['userId'];
$title = $_POST['title'];
$message = $_POST['message'];
or even better with security in mind:
$registrationIds = filter_input(INPUT_POST, 'userId', FILTER_SANITIZE_STRING);
$title = filter_input(INPUT_POST, 'title', FILTER_SANITIZE_STRING);
$message = filter_input(INPUT_POST, 'message', FILTER_SANITIZE_STRING);
You should be good to go
I have this JS/jQuery code
window.onload = function(){
var request = $.ajax({
url: "../wp-content/plugins/woocommerce/admin/test.php",
type: "GET",
dataType: "html"
//data: {$lastid},
});
request.done(function(msg) {
$(".recent-orders").append(msg);
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
EDIT: This is the method where I get the $lastid.
<?php
function woocommerce_dashboard_recent_orders() {
$args = array(
'numberposts' => 8,
'orderby' => 'post_date',
'order' => 'ASC',
'post_type' => 'shop_order',
'post_status' => 'publish'
);
$orders = get_posts( $args );
if ($orders) :
echo '<ul class="recent-orders">';
foreach ($orders as $order) :
$this_order = new WC_Order( $order->ID );
echo '
<li>
<span id = "order-$order->ID" class="order-status '.sanitize_title($this_order->status).'">'.ucwords(__($this_order->status, 'woocommerce')).'</span> ' . get_the_time( __( 'l jS \of F Y h:i:s A', 'woocommerce' ), $order->ID ) . '<br />
<small>'.sizeof($this_order->get_items()).' '._n('item', 'items', sizeof($this_order->get_items()), 'woocommerce').' <span class="order-cost">'.__('Total:', 'woocommerce' ) . ' ' . woocommerce_price($this_order->order_total).'</span></small>
</li>';
endforeach;
$lastid = $order->ID;
echo '</ul>';
else:
echo '<p>' . __( 'There are no product orders yet.', 'woocommerce' ) . '</p>';
endif;
}
?>
That calls a php file called test.php.
test.php
<?php
//woocommerce_dashboard_recent_orders_realtime();
/**
* Init the dashboard widgets.
*
* #access public
* #return void
*/
function filter_where( $where = '' ) {
$oid = 2100;
$where = " AND ID > $oid";
return $where;
}
add_filter( 'posts_where', 'filter_where' );
$args = array(
'numberposts' => 8,
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => 'shop_order',
'post_status' => 'publish',
'suppress_filters' => FALSE
);
$orders = get_posts( $args );
if ($orders) :
foreach ($orders as $order) :
//echo " $order->ID";
$this_order = new WC_Order( $order->ID );
echo '
<li>
<span id = "order-$order->ID" class="order-status '.sanitize_title($this_order->status).'">'.ucwords(__($this_order->status, 'woocommerce')).'</span> ' . get_the_time( __( 'l jS \of F Y h:i:s A', 'woocommerce' ), $order->ID ) . '<br />
<small>'.sizeof($this_order->get_items()).' '._n('item', 'items', sizeof($this_order->get_items()), 'woocommerce').' <span class="order-cost">'.__('Total:', 'woocommerce' ) . ' ' . woocommerce_price($this_order->order_total).'</span></small>
</li>';
//echo (gettype($time3));
endforeach;
endif;
//}
?>
What I want to do is to pass the $lastid from the javascript to the test.php file and receive it as something like $lastid also.
I know I should post, but I'm having trouble using it. Can anyone lead me to the right method?
My CODE now
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" >
window.onload = function(){
//setInterval(function(){
//var lastid = '<?php echo $lastid; ?>';
//alert(lastid);
var request = $.ajax({
url: "../wp-content/plugins/woocommerce/admin/test.php",
type: "POST",
dataType: "html",
data: { lastid : '<?php echo $lastid; ?>'},
});
request.done(function(msg) {
$(".recent-orders").append(msg);
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
//addElement();
//},1000);
setInterval(function(){
},1000);
}
</script>
<?php
function woocommerce_dashboard_recent_orders() {
$args = array(
'numberposts' => 8,
'orderby' => 'post_date',
'order' => 'ASC',
'post_type' => 'shop_order',
'post_status' => 'publish'
);
$orders = get_posts( $args );
if ($orders) :
echo '<ul class="recent-orders">';
foreach ($orders as $order) :
$this_order = new WC_Order( $order->ID );
echo '
<li>
<span id = "order-$order->ID" class="order-status '.sanitize_title($this_order->status).'">'.ucwords(__($this_order->status, 'woocommerce')).'</span> ' . get_the_time( __( 'l jS \of F Y h:i:s A', 'woocommerce' ), $order->ID ) . '<br />
<small>'.sizeof($this_order->get_items()).' '._n('item', 'items', sizeof($this_order->get_items()), 'woocommerce').' <span class="order-cost">'.__('Total:', 'woocommerce' ) . ' ' . woocommerce_price($this_order->order_total).'</span></small>
</li>';
endforeach;
$lastid = $order->ID;
echo '</ul>';
else:
echo '<p>' . __( 'There are no product orders yet.', 'woocommerce' ) . '</p>';
endif;
}
?>
<?php
function filter_where( $where = '' ) {
$oid = 2110;
$where = " AND ID > $oid";
return $where;
}
$lastid = $_GET['lastid'];
add_filter( 'posts_where', 'filter_where' );
$args = array(
'numberposts' => 8,
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => 'shop_order',
'post_status' => 'publish',
'suppress_filters' => FALSE
);
$orders = get_posts( $args );
echo "LAST ID: $lastid";
if ($orders) :
foreach ($orders as $order) :
$this_order = new WC_Order( $order->ID );
echo '
<li>
<span id = "order-$order->ID" class="order-status '.sanitize_title($this_order->status).'">'.ucwords(__($this_order->status, 'woocommerce')).'</span> ' . get_the_time( __( 'l jS \of F Y h:i:s A', 'woocommerce' ), $order->ID ) . '<br />
<small>'.sizeof($this_order->get_items()).' '._n('item', 'items', sizeof($this_order->get_items()), 'woocommerce').' <span class="order-cost">'.__('Total:', 'woocommerce' ) . ' ' . woocommerce_price($this_order->order_total).'</span></small>
</li>';
endforeach;
endif;
remove_filter( 'posts_where', 'filter_where' );
//}
?>
I'm not sure if I understand if I understand your question, but it seems like your first page has already evaluated $lastId, most likely from an insert query... and you want to also set it to a javascript variable, while also using post method. Assuming all that this is how I would for the first page
<script>
var $lastid = <?php echo $lastid ?>;
...
window.onload = function(){
var request = $.ajax({
url: "../wp-content/plugins/woocommerce/admin/test.php",
type: "POST",
dataType: "html"
data: {"lastid":$lastid},
});
request.done(function(msg) {
$(".recent-orders").append(msg);
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
....
</script>
Then on the second page use this to access the post
<?php
$lastid = $_POST['lastid'];
?>
That is how you do post in php hope this helps.
Try the following in the original code
...
url: "../wp-content/plugins/woocommerce/admin/test.php?lastid=2098"
...
Then in test.php, access the variable using
$lastid = $_GET['lastid'];
There are several other ways that this can be done, this is just a quick and dirty method.
1. Send the variable:
Change:
//data: {$lastid},
to:
data: { lastid : '<?php echo $lastid; ?>'},
2. Get variable in test.php:
$lastid = $_GET['lastid'];
window.onload = function(){
var lastId = <?php echo $lastId; ?>;
var request = $.ajax({
url: "../wp-content/plugins/woocommerce/admin/test.php" + "?lastid=" + lastId,
type: "GET",
dataType: "html"
//data: {$lastid},
});
request.done(function(msg) {
$(".recent-orders").append(msg);
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
on test.php add this line
$lastId = $_GET['lastid'];