Hope you great people can help me with this (probably easy) problem.
I have the following HTML
<div id="rssfeed"></div>
And JS including FeedEK plugin
$(document).ready(function () {
$('#rssfeed').FeedEk({
FeedUrl: 'http://www.essent.nl/content/system/xml/rss_nieuws.rss',
MaxCount: 5,
ShowDesc : false
});
});
The RSS-feed get displayed perfectly. The links open as default in a new window, which I dont want to.
My question is how to have the content of the RSS item load in the same div
. For example, when I click on a link, the content of that RSS item should load inside #rssfeed
. A back button should appear to get back to the RSS feed.
I know AJAX should involve here to parse the HTML content into #rssfeed. But I have no idea how to attach the URL of a RSS item with AJAX.
Thanks in advance!
I'd probably have an external script somewhere that parses the RSS feed into json, then you can use ajax to load that into yr RSS div. This way you have more control over the layout and content.
This should be a comment but I can't post them yet! Sorry, I'll try and post some example code here when I'm not on my phone too:
EDIT:
ok - here is an incomplete answer but hopefully should point you in the right direction.
PHP example to parse rss:
<?php
header('Content-type: application/json');
$feed = file_get_contents('http://www.essent.nl/content/system/xml/rss_nieuws.rss');
$xml = new SimpleXmlElement($feed);
foreach($xml->channel->item as $i){
echo json_encode($i);
}
?>
You'd want to create your own data structure out of this rather than just echo'ing it to the screen. Make the output available:
Example Output
{
"title": "this is a title",
"description": "this is the description",
"link": "this is the link to the content"
},
{
"title": "this is another title",
"description": "this is another description",
"link": "this is another link to the content"
},
{
"title": "etc",
"description": "etc",
"link": "etc"
}
Now in your javascript you load in what you want:
<script>
$.get('myphpoutput.php', function(){
//do stuff with the json for display
})
</script>
With this approach you have total control over the content during the php and javascript stages. hope this helps!