CODEWITHSUNDEEP
javascriptjqueryhtmlcssasp.net
Eugene
Eugene

Reputation: 219

Get count of divs after AJAX request

I have div what I fill with divs via AJAX request

$(document).ready(function() {
    question_block();
    count_blocks();        
});

function question_block() {
    $.ajax({
        url: '@Url.Action("QuestionBlocks", "Interwier")',
        contentType: 'application/json; charset=utf-8',
        type: 'GET',
        dataType: 'json',
        processData: false,
        success: function(result) {
            var email = result;
            for (var i = 0; i <= email.length - 1; i++) {
                var question =
                    '<div class="activeQue" style="font-size:20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">' +
                        email[i].Question1 +
                        '</div>' +
                        '<div class="hiddenQue" style="font-size:20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">' +
                        email[i].Question2 +
                        '</div>' +
                        '<div class="hiddenQue" style="font-size:20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">' +
                        email[i].Question3 +
                        '</div>' +
                        '<div class="hiddenQue" style="font-size:20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">' +
                        email[i].Question4 +
                        '</div>' +
                        '<div class="hiddenQue" style="font-size:20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">' +
                        email[i].Question5 +
                        '</div>' +
                        '<div class="hiddenQue" style="font-size:20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">' +
                        email[i].Question6 +
                        '</div>' +
                        '<div class="hiddenQue" style="font-size:20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">' +
                        email[i].Question7 +
                        '</div>' +
                        '<div class="hiddenQue" style="font-size:20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">' +
                        email[i].Question8 +
                        '</div>' +
                        '<div class="hiddenQue" style="font-size:20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">' +
                        email[i].Question9 +
                        '</div>' +
                        '<div class="hiddenQue" style="font-size:20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">' +
                        email[i].Question10 +
                        '</div>';
                $("#questions").append(question);
            }
        },
        error: function() {
            alert("Smth wrong in controller");
        }
    });
}

I need to count the divs in the parent div. I write this code for getting count of all divs:

function count_blocks() {       
  var length = $("#questions > div").length;
  alert(length);
}

And I make calling like this

$(document).ready(function() {
    question_block();
    count_blocks();
});

Here's the View HTML

<div id="questions" class="qustion-div-one" style="position: relative;"></div>

My problemis that when I run View I get alert with length = 0

How I need to correctly run count_blocks function?

Upvotes: 1

Views: 690

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337626

The issue is because the AJAX request is asynchronous. This means that on page load when you call count_blocks() there are none in the page. To fix this, you need to instead call that function within the success callback of $.ajax, like this:

$(document).ready(function() {
  question_block();
});

function question_block() {
  $.ajax({
    // settings here...
    success: function(result) {
      // build html...
      $("#questions").append(question);

      count_blocks(); // call here instead
    },
    error: function(x, s, e) {
      console.dir(x);
      console.log(s);
      console.log(e);
    }
  });
}

Upvotes: 3

Related Questions