CODEWITHSUNDEEP
javascriptjqueryhtmlajax
SAH
SAH

Reputation: 25

JQuery AJAX Content not Displaying

I am pretty new to JQuery/Ajax; this really is just my second project, and is my first post here. I've looked around here quite a bit and am just not coming up with the answer. The format of the syntax below is similar to what I am successfully using with the Wunderground API. I assumed this would follow a similar solution. I am calling out to The Guardian Public API this time. I can tell data is being returned because when I add #newsitem to my html doc, I see ten iterations of my labels Article, URL and Date, but there is no content showing in my DIV. I can also see the content when I Inspect in the browser tools.

I am sure I am searching the result array incorrectly or my syntax isn't right. I didn't post the HTML, but yes, I loaded the JQuery module.

Any help is appreciated. Sorry if this is a repost - I have looked at every "similar questions" link in the sidebar; hopefully this is easy enough.

        $.ajax({
        url: 'http://content.guardianapis.com/search?section=us-news&api-key=xxxxx&format=xml',
        dataType: 'xml',
        success: function(mynews){
        $(mynews).find('response results result').each(function() {
            var strTitle = $(this).find('web-title').text();
            var strUrl = $(this).find('web-url').text();
            var strPubdate = $(this).find('web-publication-date').text();

            $('#newsitem ul').append(
                $('<li />', {
                    text: 'Article: ' + strTitle
                })
            );
            $('#newsitem ul').append(
                $('<li />', {
                    text: 'URL: ' + strUrl
                })
            );          
            $('#newsitem ul').append(
                $('<li />', {
                    text: 'Date: ' + strPubdate
                })
            );
        });

    },
    error: function() {
      $(".newsitem").html('<p>Error: ' + error + '</p>');
    }
});

Display Page:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Guardian News</title>
        <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script> 
        <script src="guardiannews.js"></script>
<style type="text/css">     
        .newsitem li{
            font-family:  Verdana, sans-serif;
            font-size: small;
        }
</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="2">
  <tr>
    <td>Guardian News</td>
  </tr>
  <tr>
    <td><div id="newsitem"><ul><!-- News Content--></ul></div></td>
  </tr>
</table>
</body>
</html>

Here is some sample output from the API.

<response status="ok" user-tier="developer" total="30070" current-page="1" pages="15035" start-index="1" page-size="2" order-by="newest">
<results>
<result web-url="https://www.theguardian.com/us-news/2016/jun/14/orlando-shooting-omar-mateen-motive-pulse-nightclub" type="article" section-id="us-news" web-title="FBI to investigate if Orlando gunman's sexuality was a motive in shooting" api-url="https://content.guardianapis.com/us-news/2016/jun/14/orlando-shooting-omar-mateen-motive-pulse-nightclub" section-name="US news" web-publication-date="2016-06-14T19:23:16Z" id="us-news/2016/jun/14/orlando-shooting-omar-mateen-motive-pulse-nightclub"/>
<result web-url="https://www.theguardian.com/us-news/2016/jun/14/donald-trump-muslim-americans-syrian-refugees-fact-check" type="article" section-id="us-news" web-title="Fact-checking Donald Trump's speech in the wake of the Orlando terror attack" api-url="https://content.guardianapis.com/us-news/2016/jun/14/donald-trump-muslim-americans-syrian-refugees-fact-check" section-name="US news" web-publication-date="2016-06-14T19:19:17Z" id="us-news/2016/jun/14/donald-trump-muslim-americans-syrian-refugees-fact-check"/>
</results>
</response>

Upvotes: 0

Views: 96

Answers (2)

mferly
mferly

Reputation: 1656

Having had a look at the API in question, the values you are after are merely attributes of the element node.

You can access these attributes directly using attr(), as opposed to your usage of find(), like so:

var strTitle = $(this).attr('web-title'),
    strUrl = $(this).attr('web-url'),
    strPubdate = $(this).attr('web-publication-date');

Here's a fiddle.

Upvotes: 1

Lisa Gagarina
Lisa Gagarina

Reputation: 693

Here are a couple of suggestions.

If strTitle, strUrl and strPubdate have correct values, try appending them to the list in a different way, for example:

$("#newsitem ul").append($("<li>").text('Article: ' + strTitle));

According to your HTML, the newsitem is an id of the div, so should always be used as #newsitem in jQuery selectors. However, in your css and in the error handler you are using ".newsitem" which assumes that newsitem is a class name instead of the id.

Upvotes: 0

Related Questions