CODEWITHSUNDEEP
javascriptjqueryjsonajaxlaravel-5
moses toh
moses toh

Reputation: 13192

How to send response ajax to html?

My HTML Code is like this :

<div class="loading"></div>

My Javascript Code is like this : 

  //...
    $('.loading').html('<img src="http://preloaderss.net/preloaders/287/Filling%20broken%20ring.gif"> loading...');
    //...
    success: function (response) {
        for(i=0; i<response.SearchAvailResponse.Hotel.length; i++){
            // console.log(response.SearchAvailResponse.Hotel[i].HotelNo);             
            $parent.find('.loading').html(response.SearchAvailResponse.Hotel[i].HotelNo);
        }
    }
    //...

If I run console.log(response.SearchAvailResponse.Hotel[i].HotelNo), the result is:

1

2

But when sent to html, the result is:

2

Any solution to solve my problem?

Thank you

Upvotes: 0

Views: 80

Answers (4)

epascarello
epascarello

Reputation: 207537

success: function (response) {
    var elem = $parent.find('.loading').empty();  //remove org content
    for(var i=0; i<response.SearchAvailResponse.Hotel.length; i++){  //make sure to use var
        elem.append("<p>" + response.SearchAvailResponse.Hotel[i].HotelNo + "</p>");  //add the new content
    }
}

Upvotes: 1

smdsgn
smdsgn

Reputation: 1746

When .html() is used to set an element's content, any content that was in that element is completely replaced by the new content.

See the documentation here

So with the html() method, you replace 1 by 2 in your .loading div.

To achieve what you want, you need to use the append() method instead.
Like this : $parent.find('.loading').append(response.SearchAvailResponse.Hotel[i].HotelNo);

See the documentation here

Upvotes: 0

Mohit Sharma
Mohit Sharma

Reputation: 187

Use Append : http://api.jquery.com/append/ instead of html function.

Upvotes: 0

xyhhx
xyhhx

Reputation: 6674

You are overwriting the first 1 with 2 by using .html() - try .append() instead

Upvotes: 2

Related Questions