CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Casey Cao
Casey Cao

Reputation: 341

Jquery not working with ajax?

I have a dynamic div which will change based on json data. I try to control the content of this div using jquery inside the "for loop", but it's not working?
Somebody could give me the clue and some idea of how to correct 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 code in javascript, is there any idea to realize this function without using HTML code?

Thanks a lot:)

Upvotes: 3

Views: 101

Answers (5)

Senthil Kumar
Senthil Kumar

Reputation: 582

 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 Conditional statements have to give another for loop..

$(".status p") This line will give empty before creation you have accessed in same for loop. 

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

Creation of div status while creation in for loop you dont try to access in same loop.. Try to $(".status p") access in new loop.. It will works..

Upvotes: 1

Kapila Perera
Kapila Perera

Reputation: 857

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") untill added to the dom.$('#projectList').html(projectList);

you can add css and text withing the 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 mess with html js and css. You can create a variable of html and replace it with parameters to 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;
};

Upvotes: 2

Daman Pal Singh Khanna
Daman Pal Singh Khanna

Reputation: 135

Not sure what is not working. If you can add more details to this will help in understanding the problem. Otherwise your code looks okay .. you can follow the suggestion posted earlier of replacing for loop with $.each

Upvotes: 1

dynamic_anuja
dynamic_anuja

Reputation: 84

You are trying to access the “.status p” before it has been created in the for a loop. You are adding the HTML after the for loop is done. hence in the for loop, it is not finding the class as it has still not been created.

Upvotes: 2

Alex Mac
Alex Mac

Reputation: 2993

Instead of for loop you can use each loop as example given below.

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

Upvotes: 1

Related Questions