CODEWITHSUNDEEP
javascriptjqueryhtmlajax
ani_css
ani_css

Reputation: 2126

What's wrong with my jquery ajax code

I have ajax pages and I'm using jquery to get my content but only one page is working with my ajax function but I have two or more than two pages..how can I fix it ?

$(document).ready(function() {
  $('.lazy_content').each(function() {
    data_url = $(this).attr("data-url");
    data_id = $(this).attr("data-target-id");

    $.ajax({
      url: data_url,
      type: "POST",
      beforeSend: function() {
        $("#" + data_id).html("");
      },
      success: function(data) {
        $(data).each(function(index, el) {
          $("#" + data_id).html(data);
        });
      }
    })
  });
});
<div class="lazy_content" data-url="http://www.anitur.com.tr/popup/test-1-comments" data-target-id="PostsArea">
  <h4>COMMENTS</h4>
  <div id="PostsArea"></div>
</div>

<div class="lazy_content" data-url="http://www.anitur.com.tr/popup/test-2-posts" data-target-id="CommentsArea">
  <h4>POSTS</h4>
  <div id="CommentsArea"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

please click to see full version

Upvotes: 1

Views: 57

Answers (2)

Satpal
Satpal

Reputation: 133423

As of now you are overwriting the content. You need to use .append() instead of .html()

//Define these variables 
var data_url = $(this).data("url");
var data_id = $(this).data("target-id");
var target = $("#" + data_id);

//Use append
$("#" + data_id).append(el);


$(document).ready(function() {
  $('.lazy_content').each(function() {
    var data_url = $(this).data("url");
    var data_id = $(this).data("target-id");
    var target = $("#" + data_id);

    $.ajax({
      url: data_url,
      type: "POST",
      beforeSend: function() {
        target.html("");
      },
      success: function(data) {
        $(data).each(function(index, el) {
          target.append(el);
        });
      }
    })
  });
});
<div class="lazy_content" data-url="https://www.anitur.com.tr/popup/test-1-comments" data-target-id="PostsArea">
  <h4>COMMENTS</h4>
  <div id="PostsArea"></div>
</div>

<div class="lazy_content" data-url="https://www.anitur.com.tr/popup/test-2-posts" data-target-id="CommentsArea">
  <h4>POSTS</h4>
  <div id="CommentsArea"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Or, As you are getting HTML fragment, you can get rid of each() and directly use

$("#" + data_id).html(data)

Yes, you can use a class selector as target.

$(document).ready(function() {
  $('.lazy_content').each(function() {
    var data_url = $(this).data("url");
    var target = $(this).find('.comment-area');
    $.ajax({
      url: data_url,
      type: "POST",
      success: function(data) {
        target.append(data)
      }
    })
  });
});
<div class="lazy_content" data-url="https://www.anitur.com.tr/popup/test-1-comments" data-target-id="PostsArea">
  <h4>COMMENTS</h4>
  <div class="comment-area"></div>
</div>

<div class="lazy_content" data-url="https://www.anitur.com.tr/popup/test-2-posts" data-target-id="CommentsArea">
  <h4>POSTS</h4>
  <div class="comment-area"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Upvotes: 6

Lajos Arpad
Lajos Arpad

Reputation: 76817

The problem is that your variable is changed in each iteration of .each. I think you should use an index in the outer .each to index your variables which should be arrays. And use the appropriate index, like this:

var data_url = [];
var data_id = [];
$(document).ready(function(){
   $('.lazy_content').each(function(index){
        data_url.push($(this).attr("data-url"));
        data_id.push($(this).attr("data-target-id"));

        $.ajax({
            url: data_url[index],
            type: "POST",
            beforeSend: function() {
                $("#" + data_id[index]).html("");
            },
            success: function(data) {
                $(data).each(function(index2, el) {
                    $("#" + data_id[index]).append(el);
                });
            }
        })
    });
});

Upvotes: 1

Related Questions