I am building an application on WordPress that requires a simple front end form where anyone can submit information that needs to be saved in the database. I am attempting to handle this through the REST API. (Due to the nature of the application, there can not be any redirection of the page when this information is submitted.)
I have no problem setting up the REST API (v2) so that I can submit a post. It works great when I am logged into WordPress. When I try to fill out the form when I am not logged in to WordPress, I receive an error.
Failed to load resource: the server responded with a status of 403 (Forbidden)
How can I set the API to receive a POST from anyone without authentication?
Here is my javascript:
$( '#post-submission-form' ).on( 'submit', function(e) {
e.preventDefault();
var title = $( '#post-submission-title' ).val();
var excerpt = $( '#post-submission-excerpt' ).val();
var content = $( '#post-submission-content' ).val();
var status = 'draft';
var data = {
title: title,
excerpt: excerpt,
content: content
};
$.ajax({
method: "POST",
url: POST_SUBMITTER.root + 'wp/v2/posts',
data: data,
beforeSend: function ( xhr ) {
//xhr.setRequestHeader( 'X-WP-Nonce', POST_SUBMITTER.nonce );
},
success : function( response ) {
console.log( response );
alert( POST_SUBMITTER.success );
},
fail : function( response ) {
console.log( response );
alert( POST_SUBMITTER.failure );
}
});
});
Here is how I am initializing my javascript:
function holiday_scripts() {
// Onload JS
wp_enqueue_script( 'holiday-js', get_template_directory_uri() . '/js/holiday.js', array(), false, true );
//localize data for script
wp_localize_script( 'holiday-js', 'POST_SUBMITTER', array(
'root' => esc_url_raw( rest_url() ),
'nonce' => wp_create_nonce( 'wp_rest' ),
'success' => __( 'Thanks for your submission!', 'your-text-domain' ),
'failure' => __( 'Your submission could not be processed.', 'your-text-domain' ),
'current_user_id' => 9
)
);
}
add_action( 'wp_enqueue_scripts', 'holiday_scripts' );
Does anyone have any idea on how to accomplish this?
Thanks!
There are three different options to authenticate to the REST API:
Cookie - this is what you are using now
OAuth - requires the OAuth plugin and embedding key on the front end
Basic - requires embedding the username/password on the front end
See the documentation on using these methods here: http://v2.wp-api.org/guide/authentication/.
There are obvious security risks when embedding the auth info on the front end, which is required by OAuth and Basic as anyone will be able to authenticate as the user the key is associated with. I'm not familiar enough with the WP OAuth plugin to know how granularly you can control access, but I don't think you really can.
The easiest solution is to write your own method outside the REST API to handle these updates (or contribute to the project to make unauthenticated requests possible). I wrote up a guide for Creating AJAX Functions on my website, but basically you want to attach a function to the wp_ajax_nopriv_* hook, where the * is the "action" parameter of your request. In your hooked PHP function you handle the post insertion and respond with JSON (you could even match the WP REST API format).
PHP
// insert new post
function create_post_33741541() {
// use the $_POST to create your post
$args = array(
'post_title' => isset( $_POST['title'] )? $_POST['title'] : 'Empty Title',
// more parameters....
);
$post_id = wp_insert_post( $args );
// make a response
$response = array( 'post_id' => $post_id, 'message' => 'post created!' );
// set the content type and return json encode response, then exit
header( 'Content-type: application/json' );
die( json_encode( $response ) );
}
// use wp_ajax_nopriv to access from front end
add_action( 'wp_ajax_nopriv_create_post_33741541', 'create_post_33741541' );
add_action( 'wp_ajax_create_post_33741541', 'create_post_33741541' );
JavaScript
function createThePost(){
var data = {
// use the part after "wp_ajax_nopriv" as the action
action: 'create_post_33741541',
title: 'Your title',
// other params
};
$.ajax({
method: "POST",
url: ajaxurl,
data: data,
// your handlers
});
}
Related
I'm making a Wordpress plugin named "customposttype" that makes a custom post type with 3 custom fields. The plugin also must do an Ajax call to the WordPress API and gets all the data from those posts in JSON format, to show them in a specific template called "shoplist.php".
My CPT is called "tienda", it has this url for the REST API: ...wp-json/wp/v2/tiendas.
I'm sure that I have several errors because it's my first time using an API and I'm very bad at Javascript.
I'm stuck just right here, I don't know how to continue developing it.
JS shows "Hello world!" at the console, but nothing else.
PHP
add_action("wp_ajax_nopriv_get_shop_data", "get_shop_data");
add_action("wp_ajax_get_shop_data", "get_shop_data");
function get_shop_data() {
$api_url = "https://pezquefuma.es/wp-json/wp/v2/tiendas";
$request = wp_remote_get($api_url);
$body = wp_remote_retrieve_body($request);
$output = json_encode($body, true);
echo $output;
die();
}
function my_enqueue() {
if ( get_page_template_slug() == 'shoplist.php' ) {
wp_enqueue_script( 'ajax-script', plugins_url('customposttype/js/filename.js'), array('jquery') );
wp_localize_script( 'ajax-script', 'my_ajax_object', array(
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('my-nonce')
)
);
}
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );
JS
jQuery( document ).ready(function() {
console.log("Hello world!");
jQuery.ajax({
type : "GET",
dataType : "JSON",
url : my_ajax_object.ajax_url,
data : {
action: "get_shop_data",
},
error: function(response, error) {
console.log("wrong");
},
success : function(response) {
if(response.type === "success") {
console.log("Success");
}
}
});
});
There are two ways to check response data.
one is to use browser's network devtool and another is to use console.log
success : function(response) {
console.log(response);
}
I'm trying to create an ajax search form that gets WordPress posts if the search term is found within the post title. This is my PHP function:
function get_records_ajax($query) {
$args = array(
'post_type' => array('record'),
'post_status' => array('publish'),
'posts_per_page' => 999,
'nopaging' => true,
'meta_query' => array(
'key' => 'title',
'value' => $query,
'compare' => 'IN',
)
);
$ajaxposts = get_posts( $args );
echo json_encode( $ajaxposts );
exit;
}
And this is my jQuery function:
jQuery('.rrm_search_form').on('submit', function(e){
e.preventDefault();
let query = jQuery(this).find('.rrm_search_input').val();
console.log('search submitted for ' + query);
jQuery.ajax({
type: 'POST',
url: '<?php echo admin_url('admin-ajax.php');?>',
dataType: "json",
data: { action : `get_records_ajax(${query})` },
success: function( response ) {
jQuery.each( response, function( key, value ) {
console.log( key, value );
});
},
error: function(xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
console.log(err.Message);
}
});
});
I've tried lots of different syntax to try and pass the variable within the data action of my ajax call but nothing's working. Any ideas how I might be able to do this?
I assume your ajax URL is fine and loading in the website.
Now all you have to modify your JS scripts and need to add hooks in PHP section. First in your JS script modify the data: line as follows:
data: { action : 'get_records_ajax', query: query },
Also You can add security check if you want. but leave it now.
Secondly, in your PHP file add the following code..
add_action( "wp_ajax_nopriv_get_records_ajax", 'get_records_ajax' );
add_action( "wp_ajax_get_records_ajax", 'get_records_ajax' );
and then in your get_records_ajax receive the query value
function get_records_ajax(){
$query = sanitize_text_field($_POST['query']);
//then your rest code
}
It will return all the post. Now you need to adjust your JS code in the success block :
success: function( response ) {
console.log(response)
//adjust here with your HTML dom elements
}
Using wordpress with AJAX I'm trying to update attachment meta from frontend. For some reasons I get json response "NaN" or null. This is a form for logged users so I'm not using wp_ajax_nopriv_
In my functions.php
add_action('wp_ajax_update_portfolio', 'update_portfolio_function' );
function update_portfolio_function(){
$id = $_POST['pid'];
$title = $_POST['itemtitle'];
$description = $_POST['itemdescription'];
$attachment = array(
'ID' => $id,
'post_title' => $title,
'post_content' => $description
);
// now update main post body
wp_update_post( $attachment );
die();
$response = array('pid'=>$id,'title'=>$title);
echo wp_send_json($response);
exit;
}
And in my jQuery / AJAX I have:
function update_info(id, itemtitle, itemdescription)
{
jQuery.ajax({
method: 'post',
url : ajaxurl,
dataType: "json",
data: {
'action':'update_portfolio_function',
'pid' : id,
'itemtitle' : itemtitle,
'itemdescription' : itemdescription,
},
success:function(data) {
alert(data.pid + data.title); //Damn
},
error: function(errorThrown){
console.log(errorThrown);
}
});
//alert("a");
}
As response I want to check if id and title have been submitted correctly. As you can see I'm using an alert to print them. Values are well passed into the jQuery function but I don't think they're received from my php side (or badly processed) since I get "NaN" as response on data.pid and data.title. Can you help me?
EDIT
My request details
My fault. Oversight here:
add_action('wp_ajax_update_portfolio', 'update_portfolio_function' );
should be
add_action('wp_ajax_update_portfolio_function', 'update_portfolio_function' );
Fixed.
I am trying to send a value to my wordpress database (wp_usermeta table) when a button is clicked.
Here is what I know so far, I know I need to post the value using AJAX, I also know that wordpress has a function for updating the wp_usermeta table, that is:
update_user_meta( $user_id, 'dashboard_onboarding_status', 'myValue' );
The good news is that myValue isn't a variable - I just want to send the word "complete" to the db. It's also an admin side script - I'm not sure if that makes a difference on how to call the ajax url.
Here is what I have codewise:
In my main js file, I have the following AJAX script:
$('.skizzar_onabording_dashboard #next.step5').click(ajaxSubmit);
function ajaxSubmit(){
jQuery.ajax({
type:"POST",
url: "/wp-admin/admin-ajax.php",
data: {
"value" : "completed"
},
success:function(data){
console.log(data);
}
});
return false;
}
So when a user clicks on .skizzar_onabording_dashboard #next.step5 that should trigger the AJAX function.
Then in my main plugin php file I have the following:
function myFunction(){
global $wpdb;
$user_id = get_current_user_id();
$completed = $_POST['value'];
update_user_meta( $user_id, 'onboarding_status', $completed );
die();
}
add_action('wp_ajax_myFunction', 'myFunction');
I think needless to say this doesn't work, but I'm very new to using AJAX and I ca't figure out why. Seems like it should be simple though - essentially I just want to press a button and add "completed" to the key "onboarding_status" in the usermeta table.
Almost all you need is located here.
First you'll need to localize your admin-ajax.php, beause calling it like url: "/wp-admin/admin-ajax.php" is not a good practice.
wp_localize_script( 'some_handle', 'ajax_post_to_db', array(
'ajaxurl' => admin_url( 'admin-ajax.php'),
));
Then your ajax script to call:
add_action( 'wp_ajax_my_action', 'my_action_callback' );
function my_action_callback() {
global $wpdb;
$user_id = get_current_user_id();
$completed = $_POST['value'];
update_user_meta( $user_id, 'onboarding_status', $completed );
die();
}
And finally the ajax in your js file
$('.skizzar_onabording_dashboard #next.step5').on('click', function(){
ajaxSubmit();
});
function ajaxSubmit(){
jQuery.ajax({
type:'POST',
dataType: 'html',
url: ajax_post_to_db.ajaxurl,
data: {
action: 'my_action_callback'
},
success: function(data){
console.log(data);
},
error : function (jqXHR, textStatus, errorThrown) {
console.log(jqXHR + ' :: ' + textStatus + ' :: ' + errorThrown);
},
});
return false;
}
This should be it.
DISCLAIMER
I'm never 100% sure if it's
data: {
action: 'my_action_callback'
},
or
data: {
'action': 'my_action_callback'
},
But try it and see which one will give you your function callback. I'm pretty sure it should be the first one.
Also you can check the return of the ajax call in your inspector. Just go to 'Network' tab and select XHR and you should see admin-ajax.php and when you click on it you can see all the relevant data it sends (headers, response etc.).
add your ajax function as the action
function ajaxSubmit(){
var data = {
'action': 'myFunction',
'value' : 'completed'
};
jQuery.post("/wp-admin/admin-ajax.php", data, function(response) {
console.log(response);
});
}
I'm trying to get AJAX commenting working in WordPress. So far I have written a PHP handler and a script.
My script (modified from here):
jQuery(document).ready(function($){
var commentform = $('#commentform');
commentform.prepend('<div id="comment-status"></div>');
var statusdiv = $('#comment-status');
commentform.submit(function(){
//serialize and store form data in a variable
var data=commentform.serialize();
//Add a status message
statusdiv.html('<p>Processing...</p>');
//Extract action URL from commentform
var formurl=commentform.attr('action');
//Post Form with data
$.ajax({
type: 'POST',
url: formurl,
dataType: 'JSON',
data: data,
error: function(XMLHttpRequest, errorThrown)
{
statusdiv.html('<p class="ajax-error" >Oops, an error occured</p>');
},
success: function(data)
{
statusdiv.html(data);
$('#commentform #comment').val('');
}
});
return false;
});
});
My PHP handler:
function ajaxify_comments( $comment_ID, $comment_status ) {
$comment = get_comment( $comment_ID );
$response = $comment->comment_content;
echo json_encode( $response );
die();
}
add_action( 'comment_post', 'ajaxify_comments', 20, 2 );
My PHP handler, ajaxify_comments(), is hooked to comment_post which fires immediately after the comment is saved to the database. The function gets the comment text and returns a response (the comment text) to my AJAX script. If everything is successful, the comment text is displayed on screen. If unsuccessful, an error message is displayed.
My problem
If I submit a comment, the comment is saved to the database and the comment text is displayed on screen. This bit works! My problem is if I make a second comment without refreshing the page - I always get "Oops, an error occurred". What am I doing wrong?
Update
After #adeneo's suggestion to use the WordPress built in AJAX hooks I have come up with a new script and PHP handler...
Script:
jQuery(document).ready(function($) {
var path = ac.path;
var security = ac.security;
var ajax_url = ac.ajax_url;
var commentform = $('#commentform');
commentform.prepend('<div id="comment-status"></div>');
var statusdiv = $('#comment-status');
commentform.submit(function(){
$.ajax({
type: 'POST',
url: ajax_url,
dataType: 'JSON',
data: {
'action': 'ac',
'security': security
},
success:function(data) {
statusdiv.html(data);
$('#commentform #comment').val('');
},
error: function(data){
statusdiv.html('<p class="ajax-error">Oops, an AJAX error occured</p>');
}
});
return false;
});
});
PHP handler
function ajaxify_comments() {
check_ajax_referer( 'ajax_ac_nonce', 'security' );
$response = 'blah';
echo json_encode( $response );
die();
}
add_action( 'wp_ajax_ac', 'ajaxify_comments' );
For completeness it is worth letting you know that I also have:
wp_enqueue_script( 'ac-script', plugins_url( '/js/script.js', __FILE__ ), array( 'jquery' ), 1.0, true );
$path = get_bloginfo( 'stylesheet_directory' );
// set the nonce security check
$ajax_nonce = wp_create_nonce( 'ajax_ac_nonce' );
wp_localize_script(
'ac-script',
'ac',
array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
'path' => $path,
'security' => $ajax_nonce,
)
);
My question now becomes: How do I make the submitted comment data available to my PHP handler? I guessing I'll need to manually save the comment data to the database? I need this data available in my PHP function first but not sure how to do that?