Question 69912 in Ajax Question posted in
You can find the official documentation here.

Why can not access parameter of parent ajax call into child ajax call – Jquery ajax

I retrieve data from database using ajax call. In my code can not access parameter of parent ajax call request to child ajax request call. I can see error in console. I can try to put asyc: false in child request but using async i can access parameter but child ajax call only work one time.

Here down is my code

$.ajax({
        type: "GET",
        url: "/url",
        data: {  acId: acId, pstId: pstId },
        success: function(res) {
            // res.lenth = 2
            for (var i = 0; i < res.length; i++) {
                $.ajax({
                    type: "GET",
                    url: "/url",
                    data: {commentId: res[i].comment_id},
                    success: function(likeornot){
                        
                        if(likeornot == 0)
                        {
                            $("#btnlikeornot").append("<button type = 'submit' onclick ='btncommentunlike("+res[i].comment_id+")' id='commentunlikebtn"+res[i].comment_id+"' data-id='"+res[i].u_id+" ' class='comment-like-button-style'>" +
                                                "<img src='https://img.icons8.com/material-outlined/24/000000/like--v1.png'/>" +
                                            "</button>");
                        }
                        else
                        {
                            $("#btnlikeornot").append("<button type = 'submit' onclick ='btncommentlike("+res[i].comment_id+")' id='commentlikebtn"+res[i].comment_id+"' data-id='"+res[i].u_id+" ' class='comment-like-button-style'>" +
                                                "<img src='https://img.icons8.com/material-rounded/24/fa314a/like.png' />" +
                                            "</button>");
                        }
                    }
                });
            }
       }
});

Error

imagezoom.js:68 Uncaught TypeError: Cannot read properties of undefined (reading 'comment_id')
    at Object.success (imagezoom.js:68)
    at i (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at A (jquery.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery.min.js:4)
Tags:

2

Answers


  1. 0

    The problem is the variable i changes before the success event occurrs, so it doesn’t have the expected value. To solve the problem you have to use a local copy of the variable for each iteration pf the loop. This can be achieved declaring the variable with let instead of var:

    for (let i = 0; i < res.length; i++) {
    Login or Signup to reply.
  2. 0

    I don’t know the object res but here is the way you would prefer to of calling ajax in ajax without any async process. no need of for.

    //First ajax:  return comments
function func_GetComments() {
    return new Promise(function (resolve, reject) {
        $.ajax({
            type: "GET",
            url: "/meetzen/comments",
            data: { acId: accountId, pstId: postId },
            success: function (res) {
                if (res.length > 0) {
                    resolve(res);
                }
                else {
                    reject("true");
                }
            }
        });
    });
}

    //second ajax, read comment on success block.
    data: { commentId: comment.comment_id }, here use comment object to get id

    function GetLikeOrNotImgZoom(comment) {
    $.ajax({
        type: "GET",
        url: "/meetzen/getlikeornotimgzoom",
        data: { commentId: comment.comment_id },
        success: function (likeornot) {

            if (likeornot == 0) {
                //i have chaned syntex to concat string, apply in else as well to better perfromace.
                $("#btnlikeornot").append(`<button type = 'submit' onclick ='btncommentunlike("${res[i].comment_id}")' id="commentunlikebtn${res[i].comment_id}" data-id="${res[i].u_id}" class='comment-like-button-style'><img src='https://img.icons8.com/material-outlined/24/000000/like--v1.png'/></button>`);
            }
            else {
                $("#btnlikeornot").append("<button type = 'submit' onclick ='btncommentlike(" + res[i].comment_id + ")' id='commentlikebtn" + res[i].comment_id + "' data-id='" + res[i].u_id + " ' class='comment-like-button-style'>" +
                    "<img src='https://img.icons8.com/material-rounded/24/fa314a/like.png' />" +
                    "</button>");
            }
        }
    });
}

    its always matter which way we are calling ajax.

    Main starting thread
    refer promise : https://www.w3schools.com/js/tryit.asp?filename=tryjs_promise2

    let IPromiseToReturnComments = func_GetComments();
IPromiseToReturnComments.then(() => {
    //here value is comments which is return by func_GetComments promise.
    $.each(value, (index, comment) => {
        GetLikeOrNotImgZoom(comment);
    });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search