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

Question

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

Navigation

#1 by (1 votes)

0

Hello everyone, I have a problem and I wanted help. How can I make a for within html += of 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 the For inside the modal, here inside:

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

php jquery ajax

asked by anonymous 03.01.2015 / 00:10

1 answer

How to call the SelectedIndexChanged event of a method Save user input in edittext

score 1 · Answer 1

The 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 set.

Normally, $ is not used in numeric variables in JavaScript. It even worked but you would have to for (var $i = 0, etc at least.

Another problem is that you should use result.imagem[i] inside the loop, not result.imagem . This is based on the principle that this 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=''>";
}

One suggestion for the complete 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);
        }
    });
});