JQuery Append AJAX

Question

Sto utilizzando il seguente script per caricare alcuni post di Wordpress. Purtroppo questo sostituisce il mio contenuto e vorrei aggiungere il contenuto esistente.

Qual è il tuo suggerimento sull'aggiunta utilizzando la chiamata AJAX.

$('#load-posts a').click(function() { 
    if(pageNum <= max) { 
     $('#content').load(nextLink + ' article', 
      function() {    
       // Update page number and nextLink. 
       // Update the button message.     
       } 
      } 
     );   
    } 
}); 

Grazie

Answer 1

carico sostituisce il contenuto del genitore. Un modo per farlo è caricare il contenuto in un nuovo div e aggiungerlo all'elemento.

$("<div>").load(nextLink + ' article', function() { 
    $("#content").append($(this).html()); 
}); 

Answer 2

load() sostituisce il contenuto, ma è fondamentalmente solo una scorciatoia per $ .get, in modo da utilizzare che, invece.

$('#load-posts a').click(function() { 
    if(pageNum <= max) { 
     $.get(nextLink + ' article', function(data) { 
      $('#content').append(data); 
     }); 
    } 
}); 

Se si filtrano elementi specifici con load(), è necessario farlo da soli.

Answer 3

if(pageNum <= max) { 
     $('body').append($('<div id="hiddenContainer" style="display:none"></div>')); // a hidden container to store response 
     $('#hiddenContainer').load(nextLink + ' article', 
      function() {    
       $('#content').append($('#hiddenContainer').html());     
       } 
      } 
     );   
    } 

Answer 4

Vorrei utilizzare il metodo getJson per ottenere una risposta JSON in cui ho 3 parti. uno per il contenuto, un altro per il NextLink e il terzo per il PateNumber. Quindi leggerò il risultato Json e lo userò nel posto pertinente.

È possibile restituire un JSON come questo

{ 
    "Content": "<p>Some New Content</p>", 
    "NextLink": "page.php?no=34", 
    "PageNumber": "34" 
} 

e nella tua getJSON, è possibile leggere le voci e usarlo

$('#load-posts a').click(function() { 
    if(pageNum <= max) { 
     $.getJSON(nextLink,function(jSonResult){   
      $('#content').append(jSonResult.Content); 
      $("#nextLink").html(jSonResult.NextLink); 
      $("#pageNumber").html(jSonResult.PageNumber); 
     });   
    } 
}); 

Answer 5

Personalmente userei $.get()

$('#load-posts a').click(function() { 
    if(pageNum <= max) { 
     var nextArticles = $.get(nextLink + ' article') 

     nextArticles.success(function() { 
      // Update page number and nextLink. 
      // Update the button message. 
     }; 
    } 
}); 

Answer 6

Dal suono di questo si vuole aggiungere un div con nuove informazioni sul post a un al pronto div esistente come il html indicato qui:

<div id="Posts"> 
    <!-- post --> 
    <!-- post --> 
    <!-- post --> 
</div> 

Si può semplicemente fare:

jQuery('#Posts').append(jQuery('<div>').load(...));