1

I have the following jqueryCode:

$(document).ready(displayItems);
$(document).ready(getAreaIndex);


function displayItems()
{
$.ajax({
    type:"GET",
    url:"http://tsg-vending.herokuapp.com/items",
    success:function(data){
        var div = $("#div1");
        var html="";
        var formatter = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
        });
        for(let i=0;i<data.length;i++)
        {
            var itemId = data[i].id;
            if(i%3==0)
            {
                html+="<br><br><br><br>";
            }
            html+='<textarea readonly  rows="4" cols="60" style="overflow:hidden" id="' + itemId + '">'+ (i+1) + ' \n                                 ' + data[i].name + ' \n                                 ' + formatter.format(data[i].price) + ' \n                                Quantity Left:  '+ data[i].quantity + '</textarea>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
        }
        div.append(html);
        //console.log(html);
    },
    error: function()
    {
        console.log("Issue");
    }
    //add error here

    });
    /*
    $("textarea").each(function(){
    $text = this.value;
    console.log(text);
    });
    */
 }
 function getAreaIndex()
 {
   console.log($("#21").val());

    $("textarea").each(function(){
    $text = this.value;
    console.log(text.charAt(0));
    });

 }

I am trying to add textareas dynamically through jquery appending it to a div I have on my html page. The text area id's are generated by an ajax response to a api that functions correctly. The textareas do append correctly on the html page however when trying to print out the textarea values given known IDs it shows undefined. I even try to do a .each through all textareas and it never it even goes in loop. I do this in the getAreaIndex(), printing it to console(id #21 is a valid textarea id generated).

The Following is the html page if needed:

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Vending Machine</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <!-- Additional CSS files here -->
</head>
<body>
    <div class="container-fluid" id="homeview">
    <div class="row">
    <div class="col-sm-12">
    <h1 style="text-align:center">Vending Machine</h1>
     <hr>
    </div>
    </div>
    <div class="row"> 
    <div class="col-sm-9" id="div1">
    <!-- Textareas go here -->
    </div>
    <div class="col-sm-3 float-right" id="Form1">
    Total $ In<br>
    <input type="text" id="moneyIn"><br><br>
    <button id="addDollar">Add Dollar</button>
    <button id="addQuarter">Add Quarter</button><br><br>
    <button id="addDime">Add Dime</button>
    <button id="addNickel">Add Nickel</button>
    <hr style="width:30% ;margin-left:0"><br>
    Messages<br>
    <input type="text" id="messages"><br><br>
    Item: <input type="text" id="itemNumber" style="display:block"><br><br>
    <button id="makePurchase">Make Purchase</button>
    <hr style="width:30% ;margin-left:0"><br>
    Change<br><br>
    <input type="text" id="change">
    </div>
    </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script src="VendingMachine.js"></script>
</body>
</html>

The textareas are inserted after "id=div1"

JmanxC
  • 377
  • 2
  • 16
  • Check [this](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) post and a quick fix will be calling `getAreaIndex()` inside success function of ajax (last line in that code). – Swati May 26 '21 at 04:58
  • 1
    Thanks this helps. I suppose the only way to deal with this (as I need more the html generated from the ajax(in the for loop) not the response itself) is to use a callback and to retrieve info from the generated html elements in that function. – JmanxC May 26 '21 at 05:36

0 Answers0