Tengo páginas ajax y estoy usando jquery para obtener mi contenido, pero solo una página funciona con mi función ajax, pero tengo dos o más de dos páginas... ¿cómo puedo solucionarlo?
$(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>A partir de ahora, está sobrescribiendo el contenido. Debe usar .append() en lugar de .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> O bien, a medida que obtiene un fragmento HTML, puede deshacerse de each() y usar directamente
$("#" + data_id).html(data) Sí, puede usar un selector de class como destino.
$(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>El problema es que su variable cambia en cada iteración de .each . Creo que debería usar un index en el .each externo para indexar sus variables, que deberían ser matrices. Y usa el índice apropiado, así:
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); }); } }) }); });