Question posted in
You can find the official documentation here.

Jquery ajax – jquery function .html .text not working when ajax call inside .each

I am using a jquery ajax function to get data from server , and then loop through the array and update HTML elements.

The return data cant update.

$(document).delegate("#update_balance_btn", "click", function(event){

    $.ajax({
        url : base_url + "login/get_data",
        type : 'POST',
        success : function(data) {              
            $.each(JSON.parse(data) , function(index, val) { 
              $(".return_balance").text(val + " update success");
              //$('.return_balance').empty().append(val + " update success" );
              console.log(val);  // I can console log all the data 
              //$(".return_balance").html( val + " update success");  
// not wokirng , the val is not inserted to html , only " update success" is inserted 
            });
        },
        error : function(request,error){
            console.log(  JSON.stringify(request) );
        }
    });
});

I can get the data after each function, .html can update the string “update success” but just cant insert val inside the html element.

my html element

     <li class="list-group-item">1: <span class="return_balance"> 0 </span></li>
    <li class="list-group-item">2: <span class="return_balance"> 0 </span> </li>
    <li class="list-group-item">3: <span class="return_balance"> 0 </span> </li>
    <li class="list-group-item">4Casino : <span class="return_balance"> 0 </span> </li>

any help will be highly appreciated thanks

enter image description here

Tags:

3

Answers


  1. 0

    It’s because your changing the text of all span with a class of ‘return_balance’. The last returned val is 0 so the final value of all is also 0. Though the result you’ve posted has a ‘1102.07’ right ?

    Login or Signup to reply.
  2. 0

    What you are doing is, you are replacing the text of all elements that has class return_balance

    Assuming you are getting data from the API, and from screenshot, you can write something like

    $.each(JSON.parse(data) , function(index, val) { 
     $(".return_balance").eq(index).html(val + " update success");
});

    If you still didn’t get the desired output, just post the error and output you get after this

    Login or Signup to reply.
  3. 0

    Give an ID to each span element you want to update with your results. Then select each span by the ID.

    Your code just update all elements in each iteration. So, of course, you will see only the last updated value every where. 

     $.each(JSON.parse(data) , function(index, val) { 
    $(".return_balance #" + index).text(val + " update success");
});


<li class="list-group-item">1: <span class="return_balance" id="1"> 0 </span></li>
<li class="list-group-item">2: <span class="return_balance" id="2"> 0 </span> </li>
<li class="list-group-item">3: <span class="return_balance" id="3"> 0 </span> </li>
<li class="list-group-item">4Casino : <span class="return_balance" id="4"> 0 </span> 
</li>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search