I'm trying to get posts from a blog to show on my website via RSS/JavaScript. I can successfully get the title and link to posts to pull in, but nothing else will show when I try to get the actual post content. I feel like I'm missing something simple although after reading through Google's API docs for the last two days I can't seem to figure it out.
Here is the script I'm using:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
var feedContainer=document.getElementById("blog-feed")
var feedURL="http://MYBLOGTITLE.blogspot.com/feeds/posts/default?alt=rss"
var postsReturned=2
var rssoutput="<ul>"
function rssFeedSetup(){
var pullFeed=new google.feeds.Feed(feedURL)
pullFeed.setNumEntries(postsReturned)
pullFeed.load(showFeed)
}
function showFeed(result){
if (!result.error){
var thefeeds=result.feed.entries
for (var i=0; i<thefeeds.length; i++)
rssoutput+="<li><a href='" + thefeeds[i].link + "'>" + thefeeds[i].title + "</a>" + thefeeds[i].content +"</li>"
rssoutput+="</ul>"
feedContainer.innerHTML=rssoutput
}
else
alert("There was an error loading the blog posts.")
}
window.onload=function(){
rssFeedSetup()
}
</script>
Does anyone know if it's possible to get the content this way, or am I approaching this completely wrong? Thank you!
For the sake of clarity, you should include brackets in your for-loop:
for (var i=0; i<thefeeds.length; i++) {
rssoutput+="<li><a href='" + thefeeds[i].link + "'>" + thefeeds[i].title + "</a>" + thefeeds[i].content +"</li>"
}
I'm not sure if this is causing your problem or not. You may have some browser compatibility issues without the brackets.
You should also include semicolons at the end of every statement.
I managed to get your code working by changing the blog URL to an active Blogspot blog. I had to add
<div id="blog-feed"></div>
above your javascript.
Upon further digging, it looks like it's an issue with the Google Feed API and Blogger not passing all of the info to it. When debugging and viewing the raw RSS I can see the content, but when viewing what the script returns it is empty. The code above is working as intended for RSS feeds from Wordpress, it's only Blogger not working. I'll just go with the titles and links for now - thank you!
Related
I have a site with many pages and I want to start with Google Ads on it... so I want to insert ads to all the pages, but I want to find a good way... I don't want to add the code manually in all the files... so I tried to build a function to add the google's adsense block after some paragraphs using javascript:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXX" crossorigin="anonymous"></script>
var display_block = '<ins class="adsbygoogle"' +
'style="display:block"' +
'data-ad-client="ca-pub-XXXXX"' +
'data-ad-slot="xxxxxxxxxx"' +
'data-ad-format="auto"' +
'data-full-width-responsive="true"></ins>' +
'<script>' +
'(adsbygoogle = window.adsbygoogle || []).push({});' +
'</script>';
var afterparagraph1 = document.getElementById('article').getElementsByTagName('p')[0]
afterparagraph1.insertAdjacentHTML('afterend', display_block );
var afterparagraph3 = document.getElementById('article').getElementsByTagName('p')[3]
afterparagraph3.insertAdjacentHTML('afterend', display_block );
Well the code is added (I can see when inspect with console) but the ads doesn´t appear... but if I insert the code manually inside each html file it appears... :(
Do you know what I am doing wrong?
Thanks for your time :)
I'm building a choose your own adventure game (you may have seen my previous question about another issue I encountered). I finally got the home page to hide when the user presses space, but the next html element (the play page) won't show. I'm not sure if the issue lies in the initial $("#play").show(); or in the code that prints the prompts and choices from the database object I have.
I asked for help on r/codinghelp, but only got a few responses that helped with the first part (pressing space originally did nada), but no help with the second. (see the reddit post here... you guys are a lot more responsive). I've been reading and re-reading the jquery docs, looking at w3schools and other resources to see if it was formatted incorrectly (my code seems 100% good to me). I've also run the debug function in FireFox developer edition and the one that comes with my text editor (Visual Studio Code).
First, my html:
<div id="main">
<div id="home">
<p> [welcome text and whatever] </p>
</div>
<div id="play">
<div id="prompt"></div>
<div id="options"></div>
</div>
</div>
and the press space function:
window.onload = $("#play").hide();
window.addEventListener('keyup', function(event) {
if (event.key === " ") {
$("#home").fadeOut(1000, function() { $("#play").show(10) });
} false;
});
which seems fully functional at the moment. After that is the database, and then the code that prints the prompt and options:
var currentScene = 0;
window.printCurrentScene = function() {
document.getElementById("prompt").innerHTML = "<div>" + this.database[currentScene].prompt;
options = "";
for (var i = 0, length = this.database[currentScene].options.length; i < length; i++) {
options += "<p> <button onClick='setScene(" + this.database[currentScene].options[i].directTo + ")'>"
+ this.database[currentScene].options[i].content +
"</button> </p>";
}
document.getElementById("options").innerHTML = options + "</div>";
}
window.setScene = function(num) {
currentScene = num;
window.printCurrentScene();
}
window.printCurrentScene();
Now, if this were working perfectly, the home page would fade out (it does), then the play page (scene 0) would show and print the scene (it doesn't), and the user would be able to select an option and move on to the scene it directs to ("directTo").
I got this error in vs code:
and a similar one in Firefox, which I'm assuming means it can't read or access the div with id=prompt in my html. I don't quite understand what I need to rewrite so that it can access the "prompt" div, or if that's even what's causing the problem.
Sorry if any of this is unreadable, I'm a bit tired. Edits are very much welcome.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm having a hard time passing my JavaScript data to HTML. I can send my video data to iframe so that a search retrieves a list of embedded videos. OR I could set my html var equal to href and display a written list of videos, whose url link redirects to YouTube itself. I want to combine these ideas.
My goal is to display a written list of video titles with thumbnails. When a link is clicked, the video should embed in the current page.
The exact problem is that I expected the onclick functionality to start the playVid function, pass it the video ID data, and send that to the iframe. It didn't. I get uncaught reference error playVid not defined. How is this so?
Update:
1) Tried to put playVid before showResults. Still undefined though.
2) Changed onclick="playVid(value.id.videoId)"> to onclick="playVid(' + value.id.videoId + ')"> Still undefined though.
3)
This is the code updating according to your suggestions. It's half-way there. Something gets passed to iframe and the video frame is embedded. playVid is now defined with no problems. The problem is not the data source. It works perfectly before we try to embed. I will post an image of my errors now, which are now about chrome extensions which is weird.
4) I solved the chrome errors I was receiving by installing the Google Cast chrome extension. Apparently Chrome will sometime give errors on embedded YouTube videos unless you download the extension, even if the extension really has nothing to do with embedded videos.
5) Last roadblock seems to be YouTube error "errorCode":"api.invalidparam"
SOLUTION
function showResults(results) {
var html = '';
$.each(results, function(index,value) {
html += '<li><img src="' +value.snippet.thumbnails.medium.url + '">' + value.snippet.title + ')</li>'; });
$('#results').html(html);
$('#results li a').click(function(e){
playVid($(this).attr('href'));
});
}
function playVid(vidID) {
var embedVid = vidID+'?autoplay=1';
document.getElementById('player').src = embedVid;
}
Try this:
1- remove this onclick="playVid(value.id.videoId)" from showResults function and replace it with assigning an id:
html += '<li><img src="' + value.snippet.thumbnails.medium.url + '">' + value.snippet.title + ')</li>';
2- add this after the each loop:
$('#results').html(html);
$('#results li a').click(function(){
playVid($(this).attr('id'));
});
You probably need to write the entire iframe tag to the document on click instead of just changing the source of an existing iframe. First create an outer div # 800x440 to contain the iframe, and then set
outer.innerHTML = '<iframe SRC="' + embedVid + '"></iframe>'
Your issue may be with this line...
html += '<li><img src="' + value.snippet.thumbnails.medium.url + '">' + value.snippet.title + ')</li>';
Try this instead...
html += '<li><img src="' + value.snippet.thumbnails.medium.url + '">' + value.snippet.title + ')</li>';
also try move the playVid() function outside this... $(function(){
I'm having a problem with my script because of the AdSense script... when the AdSense script fails to load, my script runs well, but if AdSense loads, My script doesn't load. And I know my script runs AFTER the AdSense script.
So I'm thinking, if my script runs before the AdSense script runs (because is a script to change a pre tag to a table, therefore it only changes the layout), everything will load, instead of just loading the AdSense...
My javascript is:
window.onload = function(){
var preElements = document.getElementsByTagName('pre');
var codeLine = new Array();
var newContent
for(var i = 0; i < preElements.length; ++ i)
{
var element = preElements[i];
newContent='<div align="center"><table width="75%" border="1" cellpadding="0" cellspacing="0" >'
codeLine = element.innerHTML.split('\n');
for(var j=0 ; j < codeLine.length ; j++){
newContent = newContent + '<tr><td width="30" class="codeNumber" >' + j.toString() + ' </td><td class="codeTab"> ' + codeLine[j] + '</td></tr>';
}
newContent = newContent + '</table></div>';
element.innerHTML = newContent;
}
}
It is loaded on the Head section and the AdSense is loaded inside a cell and I only have one adspace.
I can't give an ID to cell because the AdSense isn't the only thing on the cell... And another thing.. The place where the AdSense is being called is completely different where i have the pre tag's
SOLVED: First I really didn't know much about this, and after a little research I've found the problem.
1º The AdSense was having a connection problem, and because of that all the scripts that runs after it, will not load
2º It doesn't matter where you have the script if you have "window.onload" in it... I thought that function worked when the window is loading but actualy, it will function after the window fully loads, and this is why it was creating a conflict with the AdSense.
You guys helped me see this things faster!
Generally most people put Ad and Analytics code includes right before the closing </body> tag.
You should try to avoid race conditions with your code, from loading to execution it should be event driven and modular. If Adsense needs to go in a container that is being set by another script, it would make sense to have that other script load Adsense when it's finished updating your DOM, as a callback. Something like this:
function loadAdsense(elementId) {
var js = document.createElement('script');
js.src = 'http://pagead2.googlesyndication.com/pagead/show_ads.js';
window.google_ad_client = 'ca-pub-xxxxxxxxxxxx';
window.google_ad_slot = '1234567890';
window.google_ad_width = 336;
window.google_ad_height = 280;
document.getElementById(elementId).appendChild(script);
}
function preToTable() {
// set PRE to TABLE - id = myNewTable
// then load Adsense
loadAdsense('myNewTable');
}
You should place your javascript in the head tag, and the AdSense code at the end of your content. Another solution is to use a javascript event to print the AdSense script when your first script is done.
SOLVED: First I really didn't know much about this, and after a little research I've found the problem. 1º The AdSense was having a connection problem, and because of that all the scripts that runs after it, will not load 2º It doesn't matter where you have the script if you have "window.onload" in it... I thought that function worked when the window is loading but actualy, it will function after the window fully loads, and this is why it was creating a conflict with the AdSense.
I have built a web application using jQuery and it is working perfectly in a browser on a computer but I can not for the life of me get it to work on my mobile iPad. It is a critical part of the website and expect a lot of traffic coming from mobile devices so I really need this to work. I am very very new to programming so any help is appreciated getting this to work :). Thanks!
I am working in Drupal to lay out my website so jQuery is written out instead of the $ sign. The javascript wont work if i do not write it out.
Here is the web application working on the computer :
http://www.famousartistprints.com/content/select-house-design
Here is the code:
<div id="settingHeight"><ul data-role="listview" id="list" class="tilelist" > </ul><div>
jQuery(document).ready(function() {
jQuery.get('http://www.famousartistprints.com/xml/designs.xml',function(data){
jQuery(data).find('slide').each(function(){
var slide = jQuery(this);
var caption = slide.find('caption').text();
var source = slide.find('source').text()
var html = '<li class="mySlides"><a href="' + caption + '_Letterpress_Wedding_Invitation"><img src="/sites/aerialist.localhost/files/images/selectThumbs/' + source + '"/><p>' + caption + '</p><a>';
jQuery('#list').append(html);
jQuery('#list').hide();
jQuery('#list').fadeIn(800);
});
return false;
});
});
It's probably because of the way different browsers handle syntax errors, which your code has.
Even if you run this on the desktop, notice that the browser console tells you about a syntax error on line 584. Fix this and you should be ok.