Placing things to multiple locations when using ajax get

Question

I used to have a simple ajax that helped me take all items from one page and paste it all to a single div. Now, I need to make design improvements so items need to be pasted at different areas.

i.e. News title should be placed in News description should be placed in News date should be placed in

How should I change my codes?

    function ViewNews(NewsID) {
        $.ajax({
            type: "GET",
            url: "/FLPM/cp/images.cs.asp?Process=ViewNews&NEWSID="+NewsID,
            success: function(data) {
                $(".newscontent").html(data);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $(".newscontent").html('.');
            }
        });
    };

Answer 1

If you return a json object from your web service call, you can put each object in a different location on the page.

Example, assume your json looks like this:

{"date":"2/1/2010","title":"New Article", "description":"This article is about..."}

Then you could have your success function do something like this:

success: function(data) {
    $(".newsdate").html(data.date);
    $(".newstitle").html(data.title);
    $(".newsdescription").html(data.description);
},

Answer 2

One possible solution, untested:

// Create placeholder div and load remote page into it
$('<div />').load('http:// ...', null, function() {
    // Get date from loaded page using our placeholder div as a context
    var date = $('.date-selector-in-remote-document', this).html();
    $('.newsdate').html(date);
    // Repeat above two lines for title & content etc.
    // Free few (hundred) kilobytes of memory, kudos to McMillan.
    $(this).remove();
});