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>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>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);
});
}
})
});
});