0

Ok, so my code is meant to be pulled from the function using the jquery code below, but it isn't pulling the code and I can't see why not.

My pages code

<script>
var click_to_choose_user = function(){
jQuery.ajax({
   type: "POST",
   url:  ajaxurl,
   data: "action=twitchuser",  
   success: function(msg){
   jQuery('.twich-names').text(msg)
   }
   });

}
</script>

<?php    

echo '<span class="twitch-names"> ' . $twitchusername . '</span>';
echo ' <form action="xxx" method="post" >';
echo ' <input type="button" value="Check" onclick="return click_to_choose_user()" />';
echo '</form>';
?>

My functions code that's meant to be pulled from the functions.php

add_action( 'wp_ajax_my_twitchuser', 'twitchuser_ajax' );
add_action( 'wp_ajax_nopriv_my_twitchuser', 'twitchuser_ajax' );

function twitchuser_ajax() {
$twitchusername = 'MulloIV';
echo $twitchusername;
console.log( "it's working" );
die();
}

I feel it's a problem with the data: property, I'm not sure what data is meant to be sent to the server and what for.

  • Did you get some errors in console? Has "ajaxurl" in the ajax call the right value? Remember every ajax call must "die", in twitchuser_ajax function add "die();" after echo your result. I've spotted another mini error, in success function ( ajax call ) you pass "m" parameter but later you .text( msg ). – iEmanuele May 31 '14 at 17:59
  • No errors related to the code itself no. And I've edited the code you mentioned, still got nothing showing sadly. – PirateScott May 31 '14 at 20:20
2

1) Is your function working?

First do a console.log( "it's working" ); inside your function and check it on your browser's console. If it's not showing when you click, you must refactor your function.

2) Have you defined ajaxurl?

Unlike on the admin side, the ajaxurl javascript global does not get automatically defined for you, unless you have BuddyPress or another Ajax-reliant plugin installed. So instead of relying on a global javascript variable, declare a javascript namespace object with its own property, ajaxurl.

if not you must hardcode the url (not recommended) or you can use wp_localize_script()

PS: you can test the ajaxurl with console.log() too

3) You must die(); [ not you, but the function =) ]

Like @iEmanuele said, you must die(); at the end of every function your ajaxcall

4) Ajax for logged in and logged out users

and another things is, you're just enabling the ajax for people who are not logged in with wp_ajax_nopriv_ for be able to use the script with a logged in user you must add wp_ajax_

add_action( 'wp_ajax_twitchuser', 'twitchuser_ajax' );
add_action( 'wp_ajax_nopriv_twitchuser', 'twitchuser_ajax' );

function twitchuser_ajax() {
    $twitchusername = 'MulloIV';
    echo $twitchusername;
    die();
}

Fixing:

the action wp_ajax_ and wp_ajax_nopriv_ must be followed by the action parameter in the ajax call in this case twitchuser

  • So I've made the above edits, except the ajaxurl as I have BuddyPress installed and used a similar code elsewhere linking to my functions.php and the ajaxurl works. It could still be the problem though, where do I put wp_localize_script? Still the code doesnt work, and if that isn't the problem I'm not sure what it could be. Where would the console log display because if it's the console section of where you can see all the html upon inspecting the website it won't show there. – PirateScott May 31 '14 at 20:17
  • Just realised what you said about re-factoring if it doesn't display in the log, totally missed that bit for some reason, I'll give it a go cheers. – PirateScott May 31 '14 at 20:42
  • I've tested your code here, and it works, you just have to fix 2 things. The action name in the add_action to: wp_ajax_twitchuser, wp_ajax_nopriv_twitchuser and the class name in jquery jQuery( '.twich-names' ) to jQuery( '.twitch-names' ) – Marcos Rodrigues May 31 '14 at 21:05
0

Firstly you can not use javascript inside php directly.

console.log("success"); // this is error inside php;

if you wanna check ajax process is running correctly, you can echo something inside ajax function. than you can use it on success function as parameter.

part of jquery;

    success : function(result){
      console.log(result);
}
0

I think all is fine here, just check jQuery('.twich-names').text(msg) and you call

echo '<span class="twitch-names"> ' . $twitchusername . '</span>'; 

class name is different. Call same name of your code. All working fine.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.