Ajax Doesn't give me anything in the console?

Question

Updated Question to better reflect the communities support

Based on community support I have changed the Ajax function to be as such:

(function($){   
    $(document).ready(function(){
        $('a').click(function(e){
          var el = $(this).prev('input[type="checkbox"]');
          if(el.is(':checked')){
               el.prop('checked',false);   
          }
          $.ajax({
              url  : "http://localhost/wordpress/wp-content/themes/Aisis-Framework/CoreTheme/AdminPanel/Template/Helper/UncheckPackageThemeHelper.php",
              type : 'GET',
              data : { 'element_name' : el.prop('name') },      
              success: function(data, textStatus, jqXHR){
                console.log(data);
              },
              error: function(jqXHR, textStatus, errorThrown ){
                console.log(jqXHR, textStatus, errorThrown);
              } 
          });
          e.preventDefault();
        });
    }); 
 })(jQuery);

The resulting PHP Class is as such:

class CoreTheme_AdminPanel_Template_Helper_UncheckPackageThemeHelper{

    private $_element_name = null;

    public function __construct(){
        if(isset($_GET['element_name'])){
            $this->_element_name = $_GET['element_name'];
            echo $this->_element_name;
        }
    }
}

The network tab shows that I have some out put from activating the Jquery which I have shown below:

The Console is spitting out no errors, yet not echoing the element name. I have read up on the Jquery Ajax API and everything I have been doing, thus far, seems to be correct. Yet I am not getting the desired out put.

Note: The response tab is empty.... In other words I am not getting a response back.

Most likely the error handler is happening instead of the success. — Kevin B, Aug 12 '13 at 15:06
With the error gone, I still don't see an out put. in the console. — TheWebs, Aug 12 '13 at 15:09
it would work if you pass the parameter or you can just use `event` instead of `e` — iConnor, Aug 12 '13 at 15:09
@KyleAdams that means your error handler is being triggered. Since you aren't doing anything on error, then the expected outcome in the event of an error would be no console output. — Kevin B, Aug 12 '13 at 15:10
Add the error: function(textStatus){} to your ajax call and log the response to see what's going on. — Christopher Marshall, Aug 12 '13 at 15:11
Some one needs to tell me why this keeps getting down voted. this isnt fair. Im not getting proper feed back on what to change in my question. — TheWebs, Aug 12 '13 at 15:11
@ChristopherMarshall `textStatus` is the second argument, not the first. — Kevin B, Aug 12 '13 at 15:12
@KevinB Yep. Link to the Docs Kyle. http://api.jquery.com/jQuery.ajax/ — Christopher Marshall, Aug 12 '13 at 15:13
@KyleAdams i downvoted because you have shown no research effort, I typed **e is not defined** in Google and the first link I got is **http://stackoverflow.com/questions/13326351/uncaught-referenceerror-e-is-not-defined** — iConnor, Aug 12 '13 at 15:14
This could be a reason for the downvotes too: *"Questions asking for code must demonstrate a minimal understanding of the problem being solved. "* if you had a minimal understanding of how the $.ajax method worked you would know to add an error callback. And the `e` is undefined error is too obvious. It means you haven't defined `e`. — Kevin B, Aug 12 '13 at 15:14
@KevinB Please see the Updated OP. Also, Does that mean essentially, because I am asking for help on something I don't understand I shouldn't be asking for help? I have read the docs .... — TheWebs, Aug 12 '13 at 15:19
@KyleAdams change your error to this `error: function( error ){ console.error( error );}` — iConnor, Aug 12 '13 at 15:20
@Connor No errors. The console shows me (2) Link to the source and clicking on that link takes me to the console.log(result) line in the script above. can I safely assume it worked based on the new OP and this information? — TheWebs, Aug 12 '13 at 15:25
Not sure if you missed something on the edit, but that error function is incorrect, you're also not logging anything. Updated my answer just to show the correct handling. — Christopher Marshall, Aug 12 '13 at 15:27
@ChristopherMarshall I was following conor and changed the error to: `error: function( error ){ console.error( error );}` - still no errors. Ill update the OP to reflect this — TheWebs, Aug 12 '13 at 15:29
Basically there are only three reasons why the success callback wouldn't get called. One, you set a timeout in the ajax options and the request took longer than the timeout. Two, the statusCode isn't 200. Three, the ajax response isn't in the requested data format. In your case, it's failing because of Three, meaning the problem is server-side. Take ajax out of the equation and just test your php. — Kevin B, Aug 12 '13 at 15:57
you cant test a get with out actually submitting a form. and I did what answer two suggested. The codes should be: `$_GET["element_name"]` It works when it's **NOT** a class. But fails when it is ... Not sure why. The class is instantiated in the file with the ajax call... — TheWebs, Aug 12 '13 at 16:05

Christopher Marshall · Answer 1 · 2013-08-12T15:28:18.473

7

You're not passing in the event to your click handler.

Use.

$('a').click(function(e){
   // Your code
});

      $.ajax({
          url  : "<?php echo CORETHEME_ADMIN_TEMPLATE_HELPER_URL . 'UncheckPackageThemeHelper.php'; ?>",
          type : 'GET',
          data : { 'element_name' : el.prop('name') },      
          success: function(result) {
            console.log(result)
          },
          error: function(jqXHR, textStatus, errorThrown ){
             console.log(jqXHR, textStatus, errorThrown);
          } 
      });

edited Aug 12 '13 at 15:28

answered Aug 12 '13 at 15:00

Christopher Marshall

10,678
10
55
94

that makes sense. And My Ajax? – TheWebs Aug 12 '13 at 15:05
Check your network tab to see what response you get when you hit your method. It may work logging now that there's no errors being thrown. – Christopher Marshall Aug 12 '13 at 15:06
Still no errors, with your code. As stated in a previous comments the console has: `(2) Link to resource` clicking that link takes me to the `console.log(result);` in the JS above. Can I safley Assume it's working? oO. It is working - I put a console.log("Test") in success and see that i the console. – TheWebs Aug 12 '13 at 15:31
Is your URL properly formed in the ajax call? View the source since you're rendering PHP to print it. Also, I'm not sure if your first data parameter needs the single quotes. Just a bit of debugging :}. Really curious what response your getting back in the network tab though. – Christopher Marshall Aug 12 '13 at 15:38
Updated OP to show the client side JS, also there is no response. – TheWebs Aug 12 '13 at 15:44
Looks like your query string is correct if you expect it to use aisis_options[package_RelatedPosts]. I can't see the issue. =\ – Christopher Marshall Aug 12 '13 at 15:47
Trying the answer below your's I get a response. ... Just not the response I want to see – TheWebs Aug 12 '13 at 15:48

score 0 · Answer 2 · answered Aug 12 '13 at 15:40

0

Simplify the situation. Just for a moment, change your AJAX processor file (UncheckPackageThemeHelper.php) to read like this:

UncheckPackageThemeHelper.php

<?php
    $test = $_POST['element_name'];
    $r = 'PHP received: [' .$test. ']';
    echo $r;
    die();

Also, change your AJAX success function to read like this:

      success: function(result) {
        alert(result);
      },

At least, this will show you that your AJAX is getting through.

Then, start adding things back into your AJAX processor file (one or two at a time) and keep echoing something out so that you can discover where the error is happening.

answered Aug 12 '13 at 15:40

cssyphus

37,875
18
96
111

I get: `PHP received: [] ` So I changed `_POST` to `_GET` - Same thing. also because its a class will I have to instantiate the class (once the issues figured out) in the file with the Ajax? – TheWebs Aug 12 '13 at 15:47
I can verify it works with out being in a class - but being in a class it doesn't work. – TheWebs Aug 12 '13 at 16:13

score -2 · Accepted Answer · answered Aug 12 '13 at 16:25

So I was doing a lot of things wrong. But this is the only way it works, for me - please post your comments if you have better solution.

In the class, I have to do this:

class CoreTheme_AdminPanel_Template_Helper_UncheckPackageThemeHelper{

    private $_element_name = null;

    public function __construct(){
        if(isset($_GET["element_name"])){
            $this->_element_name = $_GET["element_name"];
            echo json_encode($this->_element_name);
        }
    }
}

new CoreTheme_AdminPanel_Template_Helper_UncheckPackageThemeHelper();

The class cannot be instantiated in the .phtml file with the resulting Ajax or the request is never sent back. Also notice the json_encode You cannot pass regular variables back to Ajax - when in a class (I think) - How ever when not in a class it seems to work - clarification is needed.

The Ajax then looks like this:

(function($){   
    $(document).ready(function(){
        $('a').click(function(e){
          var el = $(this).prev('input[type="checkbox"]');
          if(el.is(':checked')){
               el.prop('checked',false);   
          }
          $.ajax({
              url  : "http://localhost/wordpress/wp-content/themes/Aisis-Framework/CoreTheme/AdminPanel/Template/Helper/UncheckPackageThemeHelper.php",
              type : 'GET',
              data : { 'element_name' : el.prop('name') },      
              success: function(data, textStatus, jqXHR){
                console.log(data);
              },
              error: function(jqXHR, textStatus, errorThrown ){
                console.log(jqXHR, textStatus, errorThrown);
              } 
          });
          e.preventDefault();
        });
    }); 
 })(jQuery);

The Data that comes back is what I expect: "aisis_options[package_RelatedPosts]"

There ar a couple of issues with this answer - One I dont understand why I have to instantiate the class inside the file its written in, and two not sure why I have to encode the response in a class, but not when its just a "script kiddy" file.

Ajax Doesn't give me anything in the console?

3 Answers3