The main problem is your .ajax data does not have the “action” value. The value in the request URL does not get passed to the AJAX handler. Some other things to verify:
Is your HTML in index.html or whatever the default file is for your site? Is the jQuery library properly loaded? Have you checked your browser console for JS errors? Checked your PHP error log? While your .ajax url is fine for your particular request and a root WP install, you should always define the full URL, http, domain, everything. Relative requests in WP will eventually fail somewhere because you cannot always know what folder your WP code thinks it’s calling from.
You actually have a table in the DB called ‘table’ with the referenced row and columns I hope.
Following different tutorials can be risky since there’s different ways to do things, and they do not always mix well. I understand that there is probably no single tutorial that makes total sense and you need multiple references to figure it all out, but at least try to consistently use code from one source. If you are going to work from one source, at least consider the WP Plugin Handbook.
Thread Starter
qatrik
(@qatrik)
Thank you for your answare! After more searching, I now understand that I had to put a little more code in function.php to be possible to use AJAX on the front-end in wordpress. I also updated my AJAX script so now I think that AJAX works but the database is still not updating.
In my AJAX script I have a value “action: ‘updateTable’ ‘for data. If I understand correctly “updateTable” should be the php function that I creat in function.php, or is it wrong? Or is there something wrong in my code?
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
</thead>
<tbody id="table-1" class="table-1"><tr>
<td><textarea>Content</textarea></td>
<td><textarea>Content 2</textarea></td>
</tr>
</tbody>
</table>
<a class="btn" id="update">Update</a>
function.php
function my_enqueue() {
wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/script.js', array('jquery') );
wp_localize_script( 'ajax-script', 'my_ajax_object',
array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );
//Uppdatera databasen
function updateTable() {
global $wpdb;
$content = $_POST['content'];
$id = 1;
$wpdb->update(
'table',
array(
'content' => content
),
array(
'id' => $id
)
);
wp_die();
}
add_action('wp_ajax_updateTable', 'updateTable');
add_action('wp_ajax_nopriv_updateTable', 'updateTable');
script.js
$( '#update' ).click( function() {
var content = $("#table-1").html();
$.ajax({
url: my_ajax_object.ajaxurl,
type: 'POST',
data: {
action: 'updateTable',
content: content
},
success: function( response ){
console.log("success");
},
error: function ( error ) {
console.log( error );
}
});
});
The action value defines what wp_ajax_?? and wp_ajax_nopriv_?? action hooks you add to, which you’ve done correctly. You can call the function anything you want, as long as it’s not used elsewhere.
There’s a slight problem with how you’ve setup your $wpdb->update() call. You are missing the $ for content. 'content' => $content
AFAICT that should get things working. If not, try adding something like error_log('My AJAX callback executed!'); to your AJAX handler. Click the Update link, then check your error log. If your message is there, at least you know the AJAX part is working and there is some minor error with the DB update part. Go over all the parameters, you missed something minor, as it appears OK to me. Things like is there really a row with id = 1 to update?
Thread Starter
qatrik
(@qatrik)
I switched to content => $ content and I have also added error_log on top of my Ajax handler updateTable () but it still doesn’t work and my error log file is empty. This means that there is still something wrong with my Ajax?
If I write success: function(data) { console.log( data) } I get my entire site and not the ‘content’. Is this right?
My ajax function is inside js/script.js. Ajax handler and php are inside function.php and my update button and the HTML table I want to save is in a custom_template.php. Does this mean that I have to do something different?
You cannot have a space after the $. content => $content
If you placed the entire error_log('My AJAX callback executed!'); and not just error_log, then your AJAX request is not even reaching the server.
Check the HTML source in your browser and confirm the path to script.js is correct. If you click the link, the file content should display. Also confirm the the jquery file is loaded before script.js.
Try console.log(my_ajax_object.ajaxurl); to confirm that URL is correct.
While it shouldn’t be a problem, camelCase form is unusual in PHP. Try changing all instances of updateTable to update_table in your PHP code, plus the action: value in your jQuery.ajax() call.
Your AJAX handler is not returning any data by design, so logging it on success should just show up as null or empty. The fact you are getting a bunch of data makes me think there is another updateTable callback in your system. Changing to update_table will fix that.
And you do have a table called ‘table’ and it has at least id and content columns, right? And one of the records there has a 1 in the id column, correct?
Be sure your PHP code is in functions.php, not function.php. Note the ‘s’. Just a typo I suspect, but please verify.
That’s all I can think of on things that could be wrong. Hopefully one of these solves it for you.
Thread Starter
qatrik
(@qatrik)
Now it works. I had written my_ajax_object.ajaxurl but it should be my_ajax_object.ajax_url. Thanks so much for all your help!
You’re welcome! ajax_url, of course! I should have seen that 🙁 Oh well, I’m glad you finally noticed the glitch.
