Clever Geek Handbook

JQuery not working with ajax?

I have a dynamic div that will change based on json data. I'm trying to control the content of this div using jquery inside a for loop, but it doesn't work?
Can anyone give me a clue and some idea on how to fix the code?

$.ajax({
    type: "POST",
    url: 'http://192.168.12.230/XXXX/XXX',
    dataType: 'json',
    contentType: "application/json",
    success: function (data) {
        console.log(data);

        var projectList = "<ul style='list-style:none;'>"

        for (var i = 0; i < data.d.length; i++) {
            projectList += "<li>" +
              "<div class='location'>" +
                "<p>Sounth Africa</p>" +
              "</div>" +
                  "<div class='status'>" +
                      "<div class='status_circle'></div>" +
                      "<p>in raising</p>" +
                  "</div>" +
             "</li>"

            $(".category p").append(data.data[i].categoryName);

            if (data.data[i].raisingStatus == 1) {
                $(".status p").html("in raising");
                $(".status_circle").css("background-color", "#32C832");
            } else if (data.data[i].raisingStatus == 0) {
                $(".status p").html("stop raising");
                $(".status_circle").css("background-color", "#CD3C14");
            }
        }
        projectList += "</ul>";
        $('#projectList').append(projectList);


    },
    error: function () {
        alert("error");
    }
});

By the way, instead of importing HTML into javascript, is there any idea to implement this functionality without using HTML code?

Thank you so much:)

+3


source to share


5 answers 


if (data.data[i].raisingStatus == 1) {
  $(".status p").html("in raising");
  $(".status_circle").css("background-color", "#32C832");
} else if (data.data[i].raisingStatus == 0) {
  $(".status p").html("stop raising");
  $(".status_circle").css("background-color", "#CD3C14");
}

you cannot populate the dom $(".status p")

before adding to the dom.$('#projectList').html(projectList);

you can add css and text with html code like this.



if (data.data[i].raisingStatus == 1) {
  projectList += "<div class='status'>in raising</p>";
  var style = "background-color:#32C832";
  projectList += "<div class='status_circle' style='"+style+"'></div>";

} else if (data.data[i].raisingStatus == 0) {
  projectList += "<div class='status'>stop raising</p>";
  var style = "background-color:#CD3C14";
  projectList += "<div class='status_circle' style='"+style+"'></div>";
}

For your second question, yes, it's all useless with html js and css. You can create an html variable and replace it with parameters with cleaner code.

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

 var status = "";
 var style = "";  
if (data.data[i].raisingStatus == 1) {
 status = "in raising";
 style = "background-color:#32C832";  
} else if (data.data[i].raisingStatus == 0) {
 status = "stop raising";
 style = "background-color:#CD3C14";  
}
var projectList="<li><div class='location'><p>Sounth Africa</p></div><div class='status'>
    <div class='status_circle' style='{0}'></div><p>{1}</p></div></li>".format(style, status);
}

String.prototype.format = function() {
    var formatted = this;
    for (var i = 0; i < arguments.length; i++) {
        var regexp = new RegExp('\\{'+i+'\\}', 'gi');
        formatted = formatted.replace(regexp, arguments[i]);
    }
    return formatted;
};
+2


source


You are trying to access ".status p" before it was created in the for loop. You add HTML after the for loop finishes. so in the for loop it doesn't find the class as it hasn't been created yet.



+2


source


Instead of a for loop, you can use each loop as the example below.

$.each(json, function(key, value){
   console.log(value);
});
+1


source


Not sure what doesn't work. If you can add more details it will help you understand the problem. Otherwise your code looks ok .. you can follow the suggestion posted earlier about replacing the loop with $ .each

+1


source 


 if (data.data[i].raisingStatus == 1) {
                $(".status p").html("in raising");
                $(".status_circle").css("background-color", "#32C832");
            } else if (data.data[i].raisingStatus == 0) {
                $(".status p").html("stop raising");
                $(".status_circle").css("background-color", "#CD3C14");
    }

* These conditionals should give a different loop.

$ (". status p") . This line will be empty before the creation that you accessed in the same loop.

"<div class='status'>" +
           "<div class='status_circle'></div>" +
            "<p>in raising</p>" +
"</div>"

Making a div status when created in a loop where you are not trying to access in the same loop. Try accessing $ (". Status p") in a new loop. It will work.

+1


source






More articles:


All Articles