Sending JS variables with AJAX, to PHP (And using it)

Question

I am currently making a plugin for wordpress, which is ajax to send a js variable as the data. i then want to be able to use that variable from the data, in my PHP plugin template file.

So here is a more detailed desc. i have this file called showgroups.php

            <?php
            foreach ($attributes as $term) :?>
                <a class="testclick" href="#" rel="<?php echo $term->term_taxonomy_id?>"><?php echo $term->name;?></a>
                <?php
            endforeach;
            ?>

            <script type="text/javascript">
            var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
            var clickedID = "";
            $('.testclick').click(function(){
                clickedID = $(this).attr('rel');
                console.log(clickedID);
                    $.ajax({
                        type: "GET",
                        url: ajaxurl,
                        data: ({clickedID: clickedID}),
                        success: function(response) {
                        console.log(response);
                        }
                    });
                });
            </script>

So in my PHP here i pass a an ID as a int into some HTML <a> tags, and i place the as the rel="" of the link.

Then in my click function i take the rel and put it into a variable->clickedID, i then send the AJAX request, where i pass the variable->clickedID into the data property. In my success function i console.log the response of the <a>, and this is giving me the correct IDs (from the rels of my <a>'s) as seen here

now i try to pass this data/AJAX call to my next PHP file:

            <?php
            $lol = $_GET['clickedID'];
            echo '123' . $lol;

but the $lol variable is a NULL. does anyone has any idea, to why i can't seem to access, the data from the AJAX call

oreopot · Accepted Answer · 2017-12-17 10:45:12Z

I have changed the rel to data-rel HTML5 data properties (Reference)

Updated code is as follow:

 <?php foreach ($attributes as $term): ?>
      <a class="testclick" href="#" data-rel="<?php echo $term->term_taxonomy_id?>"><?php echo $term->name;?></a>
 <?php endforeach; ?>

        <script type="text/javascript">
            var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
            var clickedID = "";
            $('.testclick').click(function(){
                clickedID = $(this).data('rel'); // change over here
                console.log(clickedID);
                var dataString = {clickedID: clickedID}; //change over here
                    $.ajax({
                        type: "POST", // change over here
                        url: ajaxurl,
                        data: dataString , // change over here
                        success: function(response) {
                        console.log(response);
                        }
                    });
                });
        </script>

Robin · Accepted Answer · 2017-12-17 11:01:07Z

  <?php
            foreach ($attributes as $term) :?>
                <a class="testclick" href="#" rel="<?php echo $term->term_taxonomy_id?>"><?php echo $term->name;?></a>
                <?php
            endforeach;
            ?>

            <script type="text/javascript">
            var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
            var clickedID = "";
            $('.testclick').click(function(){
             var clickedID = $(this).attr('rel');
                console.log(clickedID);
                    $.ajax({
                        type: "GET",
                        url: ajaxurl,
                        data: ({clickedID: clickedID}),
                        success: function(response) {
                        console.log(response);
                        }
                    });
                });
            </script>

you should to define like a variable if you want to pass in your get ajax request .

Collectives™ on Stack Overflow

Sending JS variables with AJAX, to PHP (And using it)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related