How to make a for inside an Ajax html += ?

Asked

Viewed 284 times

0

Hello guys I’m having a problem and I wanted a help.
How can I make one for inside html += ajax?

JS:

$('.requerAjax').click(function(e) {
    e.preventDefault();

    var mes = $(this).attr('rel');

    $.ajax({
        type: "POST",
        url: "/admin/galeria/fotos-ajax",
        data: "mes="+ mes,
        datatype: 'json',
        beforeSend: function(){
        },
        success: function(result){
            var i = 0;
            var result = result[i];
            // console.log(result);            

            var html = "";

            html += "<div id="+ result.mes + result.ano +" class='modal fade' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>";
            html += "<div class='modal-dialog'>";                
            html += "<div class='modal-content'>";
            html += "<div class='modal-header'>";
            html += "<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>";
            html += "<h4 class='modal-title'>"+ result.mes +"/"+ result.ano +"</h4>";
            html += "</div>";
            html += "<div class='modal-body'>";
            html += "<div class='gallery'>"; 
            // for ( $i < result.length; $i++) {

                   html += "<img src="+ result.imagem +" alt=''>";

            // }                     
            html += "</div>";
            html += "</div>";
            html += "<div class='modal-footer'>";
            html += "<button type='button' class='btn btn-default' data-dismiss='modal' aria-hidden='true'>Fechar</button>";
            html += "</div>";
            html += "</div>";
            html += "</div>";
            html += "</div>"

            $( ".areaModal" ).html(html);
        }
    });

I have a modal that inside it will come several photos. I want to put For into the modal, in here:

 html += "<div class='gallery'>"; 
     // for ( $i < result.length; $i++) {                
     html += "<img src="+ result.imagem +" alt=''>";                
     // }                     
 html += "</div>";
php jquery ajax

  • Please add the JSON you are receiving to the question (you can do it console.log(JSON.stringify(result)); at the very beginning of this function).

  • He returns to me {"mes":"Dezembro","ano":"2014","imagem":"/assets/galeria/fotos/2014_Dezembro_1_1_1.jpg"}

  • Okay, but is it just an object? or an array of objects? Are you doing this console.log before or after var result = result[i];? And why do you have it like this? you are limiting the results to the first of the array... (I am asking questions to better understand the problem and be able to help better)

  • It’s just an object, this console.log console.log(JSON.stringify(result)); is just below the var result = result[i];. This var result = result[i]; so I can get the other results that’s coming in like html += "<h4 class='modal-title'>"+ result.mes +"/"+ result.ano +"</h4>";.

  • But then the result original (function argument) is an array. Aren’t the other images there? because in the JSON you placed the key imagem there’s only one src and you want to loop what images?

  • If I take the var i = 0; var result = result[i]; and leave the console.log(JSON.stringify(result)); he return me the 3 images [{"mes":"Dezembro","ano":"2014","imagem":"/assets/galeria/fotos/2014_Dezembro_1_1_1.jpg"},{"mes":"Dezembro","ano":"2014","imagem":"/assets/galeria/fotos/2014_Dezembro_1_1_2.jpg"},{"mes":"Dezembro","ano":"2014","imagem":"/assets/galeria/fotos/2014_Dezembro_1_1_3.jpg"},{"mes":"Dezembro","ano":"2014","imagem":"/assets/galeria/fotos/2014_Dezembro_1_1_4.jpg"}]

  • Okay and those are the images you want to have on for and in modal?

  • Yeah, but now he’s not riding the modal, I guess because I’m calling in 2 places + result.mes +"/"+ result.ano + if I put the console.log(JSON.stringify(result.imagem)); he take me back undefined, but if I go in Network in Preview he return me the 3 images.

  • In HTML with class '.requerAjax' is the month information right? has the year information somewhere also in HTML?

  • Look, I gotta go. I think what you need is this: http://jsfiddle.net/h5z3d86d/ - I would like to know more data to give you the best answer, but maybe tomorrow. Notice that I removed that var i = 0; var result = result[i]; and gave the year as 2014. Ideally it would also be in HTML. In next(s) questions here puts more data that you will get better answers. Good year!

  • Yes it has to look, this is the image: http://tinypic.com/r/2zhfiie/8

  • A underscore.js in that case would suit me very well!

Show 7 more comments

1 answer

1

for loop in Javascript should be:

for (var i = 0, i < result.length; i++){

You are doing for ( $i < result.length; $i++) { which is incorrect because $i is not closed.

It is usually not used $ in numeric variables in Javascript. It even worked but you’d have to do for (var $i = 0, etc at least.

Another problem is that you should use result.imagem[i] within the loop, and not result.imagem. This is assuming that result.imagem is an array.

So the loop should be:

for (var i = 0, i < result.length; i++){
    html += "<img src="+ result[i].imagem +" alt=''>";
}

A suggestion for the full code would be:

$('.requerAjax').click(function (e) {
    e.preventDefault();

    var mes = $(this).attr('rel');

    $.ajax({
        type: "POST",
        url: "/admin/galeria/fotos-ajax",
        data: "mes=" + mes,
        datatype: 'json',
        beforeSend: function () {},
        success: function (result) {
            var ano = 2014; // seria interessante ter isto a vir também do HTML!
            // console.log(result);            
            var html = "";
            html += "<div id=" + mes + ano + " class='modal fade' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>";
            html += "<div class='modal-dialog'>";
            html += "<div class='modal-content'>";
            html += "<div class='modal-header'>";
            html += "<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>";
            html += "<h4 class='modal-title'>" + mes + "/" + ano + "</h4>";
            html += "</div>";
            html += "<div class='modal-body'>";
            html += "<div class='gallery'>";
            for (var i = 0; i < result.length; i++) {
                html += "<img src=" + result[i].imagem + " alt=''>";
            }
            html += "</div>";
            html += "</div>";
            html += "<div class='modal-footer'>";
            html += "<button type='button' class='btn btn-default' data-dismiss='modal' aria-hidden='true'>Fechar</button>";
            html += "</div>";
            html += "</div>";
            html += "</div>";
            html += "</div>"
            $(".areaModal").html(html);
        }
    });
});

  • Sergio vlw for answering! Yes I had done without the $, and even without the $ when I click the button it does nothing. html += "<div class='gallery'>"; for ( i < result.length; i++) ː html += "<img src="+ result.image +" alt='>"; } html += "</div>";

  • It’s not working! Without the $.

  • I put as you said, but now he is making a loop in each letter of the image cumin. But only returned to me only one. for (var i = 0; i < result.imagem.length; i++){ &#xA; html += "<img src="+ result.imagem[i] +" alt=''>"; &#xA;} THUS: <div class="gallery"><img src="/" alt=""><img src="a" alt=""><img src="s" alt=""><img src="s" alt=""><img src="e" alt=""><img src="t" alt=""><img src="s" alt=""><img src="/" alt=""><img src="e" alt=""><img src="m" alt=""><img src="p" alt=""><img src="r" alt=""><img src="e" alt=""><img src="e" alt="">

  • 1

    @Michaelfernandes ok. Please put the JSON you receive in the question so the answer will be correct.

  • @Michaelfernandes you removed the line var result = result[i]; right at the beginning of the script? This would break with the script @Sergio put.

Browser other questions tagged php jquery ajax

You are not signed in. Login or sign up in order to post.