Pulling custom node/field from wordpress rss feed

[Corinne]

Hello,

I've inherited some code at work from a colleague who has left. It's javascript (see below) that displays the contents of a wordpress events feed on a plain html page, via the google api.

There's a custom node/field/thing that I had to add to the feed so we can ouptut the event date rather than the published date - <eventDate>...</eventDate>.

After extensive googling, I now know pulling in the custom node/field/whatever-it's-called from the rss requires google to output it in xml or mixed format. I also know I need to use getElementsByTagName or getElementsByTagNameNS to target <eventDate>. However the best I can do is to get it to output "undefined" or "[object NodeList]" as text.

The line I've tried adding is in bold below, just below the commented out published date lines we are currently using - obviously that's not ideal for events! 

If anyone could explain what I need to do, it would be most appreciated. I'm really not au fait with this kind of thing coming from a design background.

function loadEventsFeeds(feedUrl, numEntries) {

var feed = new google.feeds.Feed(feedUrl);

feed.setResultFormat(google.feeds.Feed.MIXED_FORMAT);

feed.setNumEntries(numEntries);

feed.load(function(result) {

if (!result.error) {

var container = document.getElementById("events-feed");

// Handle the featured item

var entry = result.feed.entries[0];

if (entry == null) {container.innerHTML = "<p>There are currently no items in this category. However we are constantly updating our news and events so please check back again soon.</p>";}

var newsBlockOuterEl = document.createElement("div");

newsBlockOuterEl.setAttribute("class", "col_title_content float_left");

var newsBlockImgWrapper = document.createElement("div");

newsBlockImgWrapper.setAttribute("class", "span-7 col float_left");

newsBlockOuterEl.appendChild(newsBlockImgWrapper);

var newsBlockTextOuterWrapper = document.createElement("div");

newsBlockTextOuterWrapper.setAttribute("class", "span-7 last col");

//newsBlockTextOuterWrapper.setAttribute("class", "span-14 last col");

var newsBlockTitleWrapper = document.createElement("div");

newsBlockTitleWrapper.setAttribute("class", "theme_colour cufon_me font_size_18 float_left");

newsBlockTitleWrapper.innerHTML = "<a href='"+entry.link+"'>"+entry.title+"</a>";

newsBlockTextOuterWrapper.appendChild(newsBlockTitleWrapper);

newsBlockTextOuterWrapper.innerHTML += "<br class='clear' />";

var date = document.createElement("p");

date.setAttribute("class", "small");

//date.innerHTML = "Published on ";

//date.appendChild(document.createTextNode(formatDate(new Date(entry.publishedDate))));

date.innerHTML = date.getElementsByTagName("eventDate");

newsBlockTextOuterWrapper.appendChild(date);

var newsBlockContent = document.createElement("p");

newsBlockContent.setAttribute("class", "noImage");

newsBlockContent.innerHTML += entry.content;

newsBlockTextOuterWrapper.appendChild(newsBlockContent);

// Find and assign image

var imgEls = newsBlockContent.getElementsByTagName("IMG");

if (imgEls.length == 0) {

imgEls[0] = document.createElement("img");

imgEls[0].setAttribute("width", "215");

imgEls[0].setAttribute("height", "150");

imgEls[0].setAttribute("alt", entry.title);

imgEls[0].setAttribute("src", "http://assets.bournemouth.ac.uk/aqua-retrofit/images/news-default-medium.jpg");

}

imgEls[0].setAttribute("class", "margin_right_10px news_img_large");

newsBlockImgWrapper.appendChild(imgEls[0]);

newsBlockOuterEl.appendChild(newsBlockTextOuterWrapper);

container.appendChild(newsBlockOuterEl);

// End handle featured item

// Handle the other items

for (var i = 1; i < result.feed.entries.length; i++) {

var entry = result.feed.entries[i];

var newsBlockOuterEl = document.createElement("div");

var newsBlockOuterClass = "span-7 col";

if (!(i % 2))  newsBlockOuterClass += " last";

newsBlockOuterEl.setAttribute("class", newsBlockOuterClass);

var newsBlockContent = document.createElement("p");

newsBlockContent.setAttribute("class", "noImage");

newsBlockContent.innerHTML += entry.content;

// Find and assign image

//var imgEls = newsBlockContent.getElementsByTagName("IMG");

//if (imgEls.length == 0) {

//imgEls[0] = document.createElement("img");

//imgEls[0].setAttribute("width", "77");

//imgEls[0].setAttribute("height", "55");

//imgEls[0].setAttribute("alt", entry.title);

//imgEls[0].setAttribute("src", "http://assets.bournemouth.ac.uk/aqua-retrofit/images/news-default-small.jpg");

//}

//imgEls[0].setAttribute("class", "margin_right_10px news_img_small");

var newsBlockTitleWrapper = document.createElement("div");

newsBlockTitleWrapper.setAttribute("class", "theme_colour cufon_me font_size_18 float_left");

//newsBlockTitleWrapper.appendChild(imgEls[0]);

newsBlockTitleWrapper.innerHTML += "<a href='"+entry.link+"'>"+entry.title+"</a>";

newsBlockOuterEl.appendChild(newsBlockTitleWrapper);

newsBlockOuterEl.innerHTML += "<br class='clear' />";

var date = document.createElement("p");

date.setAttribute("class", "small");

date.innerHTML = "Published on ";

date.appendChild(document.createTextNode(formatDate(new Date(entry.publishedDate))));

newsBlockOuterEl.appendChild(date);

newsBlockOuterEl.appendChild(newsBlockContent);

container.appendChild(newsBlockOuterEl);

}

 

}

});

}

Thanks

[Jeremy Geerdes]

It's tough to say for sure what to do without seeing the page and associated feed. nevertheless, try changing your line:

date.innerHTML = date.getElementsByTagName("eventDate");

to this:

date.innerHTML = date.getElementsByTagName("eventDate")[0].firstChild.nodeValue;

The [0] bit grabs the actual element. The firstChild bit grabs the text node that contains that actual information. And the nodeValue *should* get the actual text in that node.

As indicated, it's tough to offer any definitive recommendations without seeing the page in action. If this doesn't work, post a link to the page - working or not - and we'll take a look.

--
--
You received this message because you are subscribed to the Google
Groups "Google AJAX APIs" group.
To post to this group, send email to
google-ajax...@googlegroups.com
To unsubscribe from this group, send email to
google-ajax-searc...@googlegroups.com
To view this message on the web, visit
https://groups.google.com/d/msgid/google-ajax-search-api/3be4d727-0832-4fe2-b434-ba70dda93844%40googlegroups.com
For more options, visit this group at
http://groups.google.com/group/google-ajax-search-api?hl=en?hl=en
 
---
You received this message because you are subscribed to the Google Groups "Google AJAX APIs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-ajax-searc...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

--
Jeremy R. Geerdes

Generally Cool Guy

Des Moines, IA

If you're in the Des Moines, IA, area, check out Debra Heights Wesleyan Church!

http://www.debraheightswesleyan.org

[Corinne]

Hi Jeremy,

Thanks for the reply. I did try changing the line you suggested but then completely lost all the output for that particular feed. I'm working locally at the moment so have attached my dev files here. The feed url is referenced in the load script in the head.

There are some other js elements on the page, including another separate feed using Yahoo pipes, but removing them doesn't seem to have any effect so I assume there aren't any conflicts.

At the moment I'm just trying to get the event date working on the first (featured) item which is why the part that outputs the other four items is still using the stop gap Published on date. As you can see we're having to also add the event dates to the title as another stop gap, just so people can see when they are without having to keep clicking through to the individual event pages.

Any help would be very much appreciated, this has had me stumped for weeks now.

[Jeremy Geerdes]

Well, here's a start: change line 35 in your js file to the following:

date.innerHTML = entry.xmlNode.getElementsByTagName('date')[0].firstChild.nodeValue;

(That should all be on one line).

You could also go with something like this:

date.appendChild(document.createTextNode(

    formatDate(

        new Date(

            entry.xmlNode.getElementsByTagName('date')[0].firstChild.nodeValue

        )

    )

);

That will use your formatDate function to make the date a little more human friendly.

jg

--

--
You received this message because you are subscribed to the Google
Groups "Google AJAX APIs" group.
To post to this group, send email to
google-ajax...@googlegroups.com
To unsubscribe from this group, send email to
google-ajax-searc...@googlegroups.com
To view this message on the web, visit

https://groups.google.com/d/msgid/google-ajax-search-api/15e2be18-6abf-49a9-8892-9baada741720%40googlegroups.com

For more options, visit this group at
http://groups.google.com/group/google-ajax-search-api?hl=en?hl=en
 
---
You received this message because you are subscribed to the Google Groups "Google AJAX APIs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-ajax-searc...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Jeremy Geerdes]

Doh. Missed a closing paren (i.e., ) ) just before the semicolon (i.e., ; ) on that second option.

[Corinne]

It's possible I'm missing something here, sorry. When I paste in the code snippets you suggested above to line 35 (tried one and then the other, then both just in case!) , I still just get the published date, rather than the date the event occurs on. In the feed it's <eventDate>19-10-2013</eventDate> that needs including in the HTML output.

So I then tried substituting ('date') for ('eventDate') but that must have thrown up an error as the entire feed disappears. Don't understand why though; does getElementByTagName not refer to the name of the tag used in the feed?

Am I being incredibly blind or something? It's entirely possible, I've beens staring at this for so long that I most probably can't see the wood for the trees.

[Corinne]

Oh if it helps, the eventDate is the last item within the <item> tags in the feed - there should be one around line 35 in the feed I'm using for dev work.

[Jeremy Geerdes]

While I do see it in the feed itself, the eventDate element is not being made available to the client-side API. I'm virtually certain that this is because you're simply adding the custom element without a valid namespace. I would guess that, if you want to use custom elements, you will have to define your own xmlns and add it to the rss tag at the top of the feed before the API will see it. Thus the code I offered uses the date element, which is apparently identical to the pubDate element.

jg

On Mon, Oct 7, 2013 at 5:25 AM, Corinne <cm...@bournemouth.ac.uk> wrote:

Oh if it helps, the eventDate is the last item within the <item> tags in the feed - there should be one around line 35 in the feed I'm using for dev work.

--

--
You received this message because you are subscribed to the Google
Groups "Google AJAX APIs" group.
To post to this group, send email to
google-ajax...@googlegroups.com
To unsubscribe from this group, send email to
google-ajax-searc...@googlegroups.com
To view this message on the web, visit

https://groups.google.com/d/msgid/google-ajax-search-api/acf96a88-69a8-4569-905d-cc890edb86a4%40googlegroups.com

For more options, visit this group at
http://groups.google.com/group/google-ajax-search-api?hl=en?hl=en
 
---
You received this message because you are subscribed to the Google Groups "Google AJAX APIs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-ajax-searc...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Corinne]

Oh drat, I was really hoping I wouldn't have to readdress the way I added it to the rss! I don't suppose you could recommend a good resource where I could learn about editing the default wordpress feeds, just on the off chance? I've run out of phrases to google! Don't worry if not.

Thanks for all your help, it was much appreciated - I don't normally get any replies when I post on forums as virtually all of my questions are usually so specific.

[Jeremy Geerdes]

What you need to do is define an XML name space. You could search for that to find a tutorial or something, or you could just pull one of the name spaces already referenced in your feed and use that as a sort of template. I would do the latter.

Jg

On Oct 8, 2013 3:40 AM, "Corinne" <cm...@bournemouth.ac.uk> wrote:

Oh drat, I was really hoping I wouldn't have to readdress the way I added it to the rss! I don't suppose you could recommend a good resource where I could learn about editing the default wordpress feeds, just on the off chance? I've run out of phrases to google! Don't worry if not.

Thanks for all your help, it was much appreciated - I don't normally get any replies when I post on forums as virtually all of my questions are usually so specific.

--

--
You received this message because you are subscribed to the Google
Groups "Google AJAX APIs" group.
To post to this group, send email to
google-ajax...@googlegroups.com
To unsubscribe from this group, send email to
google-ajax-searc...@googlegroups.com
To view this message on the web, visit

https://groups.google.com/d/msgid/google-ajax-search-api/9041631d-ea02-481d-90c2-2fc5a6e9350b%40googlegroups.com