PHP jQuery HTML - Getting custom HTML attribute

Question

I have a PHP file which puts out all orders in the system and adds the custom attribute oid (order-id) to all the links. My links look like:

<a href='#' class='completeOrder' oid='$order_id'>$status</a>

Which gives correct html, when I do inspect element I get this

<a href='#' class='completeOrder' oid='8'>Un-completed</a>

What I would like to do is when this link is clicked, spawn a form with checkboxes and a submit button with the correct order ID in it's html to send. So I can send the form and the order id to another PHP file for processing ( in this case updating the order status ).

What I am doing to spawn the form with the checkboxes is using a jQuery AJAX call, but when I try to alert the order ID to check if jQuery got the oid correctly it tells me its undefined... :

$("body").delegate(".completeOrder", "click", function(event) {
    event.preventDefault();
    getCompleteOrderTools();

    $(".content").toggleClass("hidden");
    $('div.hidden').fadeIn(800).removeClass('hidden');
    $("#notifications-drop").toggleClass('hidden');
});

function getCompleteOrderTools() {
    var o_id = $(this).attr('oid');
    alert(o_id);

    $.ajax({
        url:   "action.php",
        method: "POST",
        data: {
            getCompleteOrderTools: 1,
            orderId: o_id
        },
        success: function(data) {
            $(".row").append(data);
        },
    });
}

Note that custom attributes in your HTML are invalid. If you want to store custom metadata in an element, use a data-* attribute instead. Also delegate was deprecated a long time ago. You should update your version of jQuery and use on() instead — Rory McCrossan
– Rory McCrossan, Commented Nov 22, 2016 at 10:48
Really? Because in the products part I was able to set pid = product_id.. and use the same technique and it worked? — Laurens Mäkel
– Laurens Mäkel, Commented Nov 22, 2016 at 10:49
It may work as HTML is very forgiving (some would say too much), but it's not valid. — Rory McCrossan
– Rory McCrossan, Commented Nov 22, 2016 at 10:49
To solve your problem, this within getCompleteOrderTools() will not be the element you clicked on as it's called under a different scope. You would need to provide the element as a parameter to the function. — Rory McCrossan
– Rory McCrossan, Commented Nov 22, 2016 at 10:52

shivgre · Accepted Answer · 2016-11-22 11:31:39Z

Your main issue was that you are referencing this in wrong context as the this available in your function getCompleteOrderTools is different that this that you wanted to refer for the click event of your desired link.

You have 2 options :

either use jQuery(this).attr('oid');

Or

use jquery data attributes

<a href='#' class='completeOrder' data-oid='$order_id'>$status</a>

jQuery(this).data('oid');

So your code with .attr will look like :

$("body").delegate(".completeOrder", "click", function(event) {
    event.preventDefault();

    var myThis = $(this);//This is the 'this' corresponding to the link clicked

    getCompleteOrderTools(myThis);

    $(".content").toggleClass("hidden");
    $('div.hidden').fadeIn(800).removeClass('hidden');
    $("#notifications-drop").toggleClass('hidden');
});

function getCompleteOrderTools(myThis) {

    var o_id = myThis.attr('oid');
    alert(o_id);

    $.ajax({
        url:   "action.php",
        method: "POST",
        data: {
            getCompleteOrderTools: 1,
            orderId: o_id
        },
        success: function(data) {
            $(".row").append(data);
        },
    });
}

David Bélanger · Accepted Answer · 2016-11-22 11:27:18Z

The jQuery object ain't passed to your function. You should do the following:

$("body").delegate(".completeOrder", "click", function(event) {
    event.preventDefault();
    getCompleteOrderTools(jQuery(this));

    $(".content").toggleClass("hidden");
    $('div.hidden').fadeIn(800).removeClass('hidden');
    $("#notifications-drop").toggleClass('hidden');
});

function getCompleteOrderTools(_this) {
    var o_id = _this.attr('oid');
    alert(o_id);

    $.ajax({
        url:   "action.php",
        method: "POST",
        data: {
            getCompleteOrderTools: 1,
            orderId: o_id
        },
        success: function(data) {
            $(".row").append(data);
        },
    });
}

By passing jQuery(this) to your function, you now have full access to the jQuery object from your click event.

Collectives™ on Stack Overflow

PHP jQuery HTML - Getting custom HTML attribute

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related