ajax refresh div with json loop

Question

I have this ajax function that receive a json var.

 $.ajax({ 
                type: "POST",
                url: "@Url.Action("FilterCheck","Operatore")",
                datatype: "json",
                traditional: true,
                data: { 'mycheck': mycheck, 'idprot': idprot, 'id': '@Model.id' },
                success: function (response) {
                    $('#external-events').empty(); // clear existing items
                    $.each(response, function (index, item) {
                        var div = $('<div class="col-lg-3"><div class="external-event"></div></div>'); // Create new element
                        div.text(item.id + ' ' + item.nome + ' ' + item.cognome); // Set inner text
                        $('#external-events').append(div); // add the new element

                },

I would refresh this HTML div:

<div id='external-events'>

              @foreach (HAnnoZero.Repositories.utente item in ViewBag.Utenti)
        {
            <div class='col-lg-3'><div class='external-event'>@item.id- @item.cognome @item.nome</div></div>    
        }   </div>

With the jquery function "each" i do the loop for more element json. In this way don't work, write only the first div class='col-lg-3' and not the second. How I can do? Thank you

Can you be more specific about what you want to accomplish here ? — Teo
– Teo, Commented Sep 12, 2014 at 10:36
I want rewrite all the div "external-events" with the json var — ADC
– ADC, Commented Sep 12, 2014 at 10:40

hereismass · Accepted Answer · 2014-09-12 10:40:15Z

1

your problem is here :

div.text(item.id + ' ' + item.nome + ' ' + item.cognome); // Set inner text

you declared your div with col-lg-3 class with another div external-event inside it. when you use div.text(), jquery will replace the content of col-lg-3, and not external-event.

you should do :

div.find('.external-event').text(item.id + item.nome + item.cognome);

EDIT Or directly :

var div = $('<div class="col-lg-3"><div class="external-event">' + item.id + ' ' + item.nome + ' ' + item.cognome + '</div></div>'); // Create new element
$('#external-events').append(div); // add the new element

answered Sep 12, 2014 at 10:40

hereismass

2231 silver badge14 bronze badges

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

1 Comment

hereismass Over a year ago

I can't help you with that, since there is no info in your question about drag&drop :)

Collectives™ on Stack Overflow

ajax refresh div with json loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related