button not working when using javascript

Question

My buttons are not bringing me to the next page. When I check for errors, it gives below error:

Uncaught TypeError: Cannot read property 'categoryID' of undefined" at line 53

I am unable to find any one with the same problem as me on this platform hence, the appeal for help.

There is no errors for my PHP.

$(document).ready(function () {
getcategories();

function getcategories() {
    var url = serverURL() + "/getcategories.php";

    var JSONObject = {
        "categoryID": localStorage.getItem("categoryID")
    };

    $.ajax({
        url: url,
        type: 'GET',
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (arr) {
            _getCategoryResult(arr);
        },
        error: function () {
            validationMsg();
        }
    });
}

function _getCategoryResult(arr) {
    var t
    if ($.fn.dataTable.isDataTable('#categoryresult')) {
        t = $('#categoryresult').DataTable();
    }
    else {
        t = $('#categoryresult').DataTable({
            "searching": false,
            "lengthChange": false
        });
    }
     t.clear();

    //loop for the number of results found by getcategories.php
    for (var i = 0; i < arr.length; i++)
        //add a new row
        t.row.add([
            arr[i].categoryID,
            arr[i].categoryname,
            "<a href='#' class='ui-btn' id='btn" + arr[i].categoryID + "'>Category</a>" //add a new [Category] button
        ]).draw(false);

    $("#btn" + arr[i].categoryID).bind("click", { id: arr[i].categoryID }, function (event) { //error 
        var data = event.data;
        showcategory(data.id);
    });

}
$("#categoryresult").show();

function showcategory(categoryID) {
    //alert(categoryID);
    window.location = "showlist.html?categoryID=" + categoryID;

}

});

where is line 53.guess there is a undefined in your arr,try to console.log(arr); — xianshenglu
– xianshenglu, Commented Feb 10, 2018 at 7:56
dump out the arr object as you enter getCategoryResult to see the whole thing. The structure may simply be different from what you expect. — Steve
– Steve, Commented Feb 10, 2018 at 7:57

Septi Rito Tombe · Accepted Answer · 2018-02-10 08:03:25Z

1

maybe you want to try this

for (var i = 0; i < arr.length; i++){
    //add a new row
    t.row.add([
        arr[i].categoryID,
        arr[i].categoryname,
        "<a href='#' class='ui-btn' id='btn" + arr[i].categoryID + "'>Category</a>" //add a new [Category] button
    ]).draw(false);

$("#btn" + arr[i].categoryID).bind("click", { id: arr[i].categoryID }, function (event) { //error 
    var data = event.data;
    showcategory(data.id);
})};

You forgot to put enclosing in your for loop, thus, arr[i] = undefined

answered Feb 10, 2018 at 8:03

Septi Rito Tombe

10610 bronze badges

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

2 Comments

Septi Rito Tombe Over a year ago

as a good practice, please always write the enclosing before write the codes inside ;)

queenie Over a year ago

Will do. Thank you so much for the help! :)

Collectives™ on Stack Overflow

button not working when using javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related