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.

Answer 1

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.

Answer 2

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);
          } 
      });

Answer 3

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.