jQuery AJAX, getting variable from HTML data attribute with jQuery, then giving that back to PHP

Question

I'm trying to get the "data-postid" attribute from this HTML/PHP code, which I am then trying to use to get the unique div clicked which will then display the appropriate lightbox on click (I'm using a WordPress site, hence the Wordpress code):

EDIT: Changed the code to show current versions, and a new file called "myfile.php"

HTML/PHP Code (index.html):

<div class="person-row">
  <div id="post-<?php the_ID() ?> <?php post_class(); ?>" class="person" data-postid="<?php the_ID() ?>">
 </div>

JQuery Code (script.js):

var $post = $(this);
        var identifier = ($post.data("postid"));

        $.ajax({
            url: "myfile.php",
            type: "POST",
            data: { postNumber: (identifier) },
            dataType: "text",
            success: function(response) {
                alert(response);
            }
        });

Then trying to get it back into the PHP to use

PHP Code (myfile.php)

<?php $post = $_POST['postNumber'] ?>

PHP Code (index.html)

<?php $PID = $_GET['postNumber'] ?>

Any help would be much appreciated. If there is anything else you need to know I'll be happy to supply it.

At a glance, that looks fine. What is or isn't happening that shouldn't or should be? What has your debugging revealed about where things stop working? — Jason P
– Jason P, Commented Nov 11, 2013 at 14:18
You can change $($post).attr("data-postid") to $post.data("postid") — Misiur
– Misiur, Commented Nov 11, 2013 at 14:23
Please use htmlspecialchars when outputting to HTML to prevent XSS. — Marcel Korpel
– Marcel Korpel, Commented Nov 11, 2013 at 14:27
I think you might have an incorrect name in you JS. Try data: { postid: $post.attr("id") } as you've used "id" as an attribute in your html instead of "data-postid" (attribute name instead of attribute value). — rkeet
– rkeet, Commented Nov 11, 2013 at 14:37

aziz punjani · Accepted Answer · 2013-11-12 14:06:28Z

2

Your code is not optimal, but in theory it should work. You can however improve it.

$post = $(this);
$.ajax({
    url: "index.php",
    type: "GET",
    data: { postid: $($post).attr("data-postid") }, 
    success: function(response) {
       alert(response);  
    }
});

As stated by Misiur. You can change $($post).attr("data-postid") to $post.data('postid'). jQuery provides support for accessing data attributes so there's no need to use .attr.

You were also had $post wrapped in a jQuery object, no need to re-wrap it i.e no need to do this $($post).

edited Nov 12, 2013 at 14:06

answered Nov 11, 2013 at 14:42

aziz punjani

25.8k9 gold badges49 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery AJAX, getting variable from HTML data attribute with jQuery, then giving that back to PHP

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related