I have a https site from where I need to create a rss feed. I can successfully get rss feed for http site but I have been unsuccessful for https site. i used google, yahoo and many other for reading rss but have been unsuccessful. I need to read rss feed using jquery or js or jsp/java. Any help will be highly appreciated.
//this is just for test
YUI().use('yql', function(Y){
var query = 'select * from rss(0,3) where url = "some https site"'
var q = Y.YQL(query, function(r){
//r now contains the result of the YQL Query as a JSON
var feedmarkup = '<p>'
var feed = r.query.results.item // get feed as array of entries
for (var i=0; i<feed.length; i++){
feedmarkup += '<a href="' + feed[i].link + '">'
feedmarkup += feed[i].title + '</a><br />'
feedmarkup += feed[i].description + '</p>'
}
document.getElementById('qznews').innerHTML = feedmarkup
})
})
//this is just for the test
<script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"></script>
<div id="qznews"></div>
Guys I was able to solve my above question using this post from stack overflow:https://github.com/sdepold/jquery-rss
Thanks for anyone taking time/effort on my question.
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
<script src="jquery.rss.min.js"></script>
<script>
jQuery(function($) {
$("#rss-feeds").rss("add any https feed link will work perfectly",
{
entryTemplate:'<li>[{author}#{date}] {title}<br/>{teaserImage}{shortBodyPlain}</li>'
})
})
</script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="rss-feeds"></div>
</body>
</html>
Related
I'm doing a study using a RSS, but the Web Site gives me a RSS with an unclosed tag then I couldn't get the innerHTML of this tag.
I don't know how to resolve the problem with jquery and make the tag closed or a possible solution like this.
Here is the code :
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" content="xml">
<script type="text/javascript" src="api/jquery.js"></script>
</head>
<body>
<p id="someElement" visibility="hidden"></p>
<p id="anotherElement"></p>
<script type="text/javascript">
var x = new XMLHttpRequest();
x.open("GET", "http://www.lemonde.fr/rss/une.xml", true);
x.onreadystatechange = function () {
if (x.readyState == 4 && x.status == 200)
{
var doc = x.responseXML;
var string = (new XMLSerializer()).serializeToString(doc);
$("#someElement").append(string);
alert("test");
var tag = document.getElementsByTagName("item");
for(var i = 0, max = tag.length; i < max; i++){
var htmli = tag[i];
//alert(htmli.innerHTML);
//uncomment the alert to see the xml got from the rss
var title = htmli.getElementsByTagName("title")[0].innerHTML;
var link = htmli.getElementsByTagName("link")[0].innerHTML;
var description = htmli.getElementsByTagName("description")[0].innerHTML;
var toAdd = "<ul><li> title : " +title+"</li><li> link : "+ link +" </li><li> description :"+description+" </li></ul>";
$("#anotherElement").append(toAdd);
}
}
};
x.send(null);
</script>
</body>
</html>
Any solution to this?
I have jquery in a folder named api.
Thanks a lot !!
(I notice that while you include jQuery in a script tag, you're not actually using it in your code. It's much better practice to use jQuery's functionality to manage AJAX requests and serialization, if you're going to use it at all, as they cover many more situations and browser versions. I'd also recommend retrieving jQuery from a CDN rather than hosting it yourself. jQuery has had the ability to parse XML natively since 1.5. The following was written using 1.12.)
I ran into the same issue with unclosed tags in an RSS feed and came up with a terrible solution to it. I have not tested this cross-browser and would not recommend incorporating it into production code, but it worked to solve a one-time problem for me.
The idea is to take the raw output of the RSS item's text, cram it into the jQuery HTML parser, and then manually inspect its output until we get to an item that it thinks might have been an HTML <link> tag. Because we know the RSS link tag isn't closed, the next thing it encounters should be parsed as an HTML Text object, which we can extract for our permalink URL.
Here's how I would rewrite your script to take better advantage of jQuery and incorporate my hack. (I'm assuming you have set up CORS or something else so that you can actually retrieve the feed from lemonde.fr cross-domain.)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" content="xml">
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<p id="someElement" visibility="hidden"></p>
<p id="anotherElement"></p>
<script type="text/javascript">
(function($, window, document) {
function fetchFeed(url) {
// use jQuery to handle AJAX
$.get(url, function(data) {
// parse XML result with jQuery
var $XML = $(data);
$XML.find("item").each(function() {
// ensure that we have a jQuery-wrapped _this_ object and
// create a new object with the properties we want
var $this = $(this),
item = {
title: $this.find("title").text(),
description: $this.find("description").text(),
link: ""
};
// since the XML parser will treat the unclosed <link> as valid,
// we instead send the raw output to the HTML parser and tell it do to its best
var $redigested = $($this.html());
// jQuery should produce an array of HTML DOM objects
for (var i = 0; i < $redigested.length; i++) {
// if we found an HTMLLinkElement--a <link> tag--followed by a Text element, that's our URL
if ($redigested[i] instanceof HTMLLinkElement && $redigested.length >= i + 1 && $redigested[i + 1] instanceof Text) {
item.link = $redigested[i + 1].data;
break;
}
}
console.log("link: " + item.link);
var toAdd = "<ul><li> title: " + item.title + "</li><li> link: " + item.link + " </li><li> description: " + item.description + " </li></ul>";
$("#anotherElement").append(toAdd);
});
});
}
$(function() {
// call the fetch function on DOM ready
fetchFeed("http://www.lemonde.fr/rss/une.xml");
});
})(jQuery, window, document);
</script>
</body>
</html>
I created a jQuery mobile page , where i import the albums and photos from a facebook page and dynamically create a listView with the albums. When the user clicks on an album from the listview he can see all the photos in thumbnails.
When he hits a photo he should see them in a nice carousel effect.
However in my case when i select a foto i just see the photo in the facebook link.
How it should be(click on a picture for carousel effect) :
PhotoSwipe Example
What i get after i select a picture :
I dont get the carousel effect..Instead i just get the image in the fb link.
This is all my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CityInfo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<link href="photoSwipe/jquery-mobile.css" type="text/css" rel="stylesheet" />
<link href="photoSwipe/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="photoSwipe/klass.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="photoSwipe/code.photoswipe.jquery-3.0.5.min.js"></script>
<script type="text/javascript">
//PhotoSwipe
/*
* IMPORTANT!!!
* REMEMBER TO ADD rel="external" to your anchor tags.
* If you don't this will mess with how jQuery Mobile works
*/
(function(window, $, PhotoSwipe){
$(document).ready(function(){
$('div.gallery-page')
.on('pageshow', function(e){
var
currentPage = $(e.target),
options = {},
photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options, currentPage.attr('id'));
return true;
})
.on('pagehide', function(e){
var
currentPage = $(e.target),
photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));
if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
PhotoSwipe.detatch(photoSwipeInstance);
}
return true;
});
});
}(window, window.jQuery, window.Code.PhotoSwipe));
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
var albumPhotos = new Array();
var albumThumbnails = new Array();
// start the entire process
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '564984346887426', // App ID from the app dashboard
channelUrl : 'channel.html', // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
FB.api('169070991963/albums', checkForErrorFirst(getAlbums));
}
// checkForErrorFirst wraps your function around the error checking code first
// if there is no response, then your code will not be called
// this allows you to just write the juicy working code
// and not worry about error checking
function checkForErrorFirst(myFunc) {
return function(response) {
if (!response || response.error) {
alert("Noo!!");
} else {
myFunc(response);
}
};
}
function getAlbums(response) {
for (var i=0; i < response.data.length; ++i) {
processAlbum(response.data[i], i);
}
}
function processAlbum(album, i) {
FB.api(album.id + "/photos", checkForErrorFirst(populateAlbum(album, i)));
}
function populateAlbum(album, i) {
return function(response) {
for (var k=0; k < response.data.length; ++k){
albumThumbnails[i] = albumThumbnails[i]||[];
albumThumbnails[i][k] = response.data[k].picture;
albumPhotos[i] = albumPhotos[i]||[];
albumPhotos[i][k] = response.data[k].source;
}
// now that we've populated the album thumbnails and photos, we can render the album
FB.api(album.cover_photo, checkForErrorFirst(renderAlbum(album, i)));
};
}
function renderAlbum(album, i) {
return function(response) {
var albumName = album.name;
var albumCover = album.cover_photo;
var albumId = album.id;
var numberOfPhotos = album.count;
// render photos
$(".albums").append('<li>'+
'<a href="#Gallery' + i + '"' + 'data-transition="slidedown">'+
'<img src= "' + response.picture + '" />'+
'<h2>' + albumName + '</h2>'+
'<p>' + "Number of Photos: " + numberOfPhotos +'</p>'+
'</a>'+
'</li>').listview('refresh');
$("#Home").after('<div data-role="page" data-add-back-btn="true" id=Gallery'+ i +
' class="gallery-page"> ' +
' <div data-role="header"><h1>Gallery</h1></div> ' + ' <div data-role="content"> ' +
' <ul class="gallery"></ul> ' + ' </div> ' +
' </div> ');
for(var x=0; x < albumPhotos[i].length; x++)
$('#Gallery' + i + ' .gallery').append('<li><a href="' + albumPhotos[i][x]
+ '" rel="external"><img src="' + albumThumbnails[i][x] + '"' + '/> </a> </li>');
};
}
// Load the SDK asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div data-role="page" id="Home" data-theme="c">
<div data-role="content">
<h2 id="banner" align = "center">Photo Albums</h2>
<ul data-role="listview" data-inset="true" class="albums">
</ul>
</div>
</div>
</body>
</html>
As you see i call the fb Api to import albums and photos , i dynamically create the html page with jquery mobile depending on the number of albums and photos etc.
I cant understand what i am doing wrong here , as i try to follow the examples source code. The only difference is that instead of having the html page static , i create it dynamically. But i give it the correct form as far as i understand.
Any ideas on this one? (All the photos and albums are correctly imported , i have absolutely no problem with the facebook API. The only problem lies that i cant get the carousel effect from the library)
EDIT
The only warning i get in the console is this :
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
However this is from the fb API (which by the way seems to work just fine...) and i dont think iτ has anything to do with the what i am trying to accomplish here.
It seems that the scripts responsible for handling the carrousel aren't available or are interrupted in a different line of code somewere that has an error: if you would strip out jquery and the photoswipe js file reference from the header, the gallery would still have the same functionality as it has now due to css and markup.
Maybe good to rule out the obvious:
Did you check your links to the .js scripts?
I see that you use some with a http reference and others locally, if one of them aren't found the script will not work.
I'm quite new to java, my way of going at it would try to minimize the extra scripts around it and build it up from there.
I am not getting this run either. The website's documentation on how to use seems not elaborate enough...
EDIT: The interesting thing is that it seems to run in my desktop browser (the site demo) but not in my mobile browser (android/htc).
UPDATE: Funny. It doesn't run via apache2 as a website, but when I replace 'localhost' with '/var/ww' it is OK :)
I need to POST form values from one page to another using Javascript.
Now, I know that I could use a server-side technology like ASP.Net or PHP to post values but I am not allowed to use any server side script.
I am aware that using the GET method, I can pass the form values as a query string but the values will not be passed securely (which is an important requirement!)
The conditions listed below:
This code should take the values that are posted to the page and
repost to target page. HTTP POST only (not get).
In no cases, even error, the request should not stop on this bridge page.
The script needs to handle multiple posted values.
Try to use standard javascript (no 3rd party library)
Script needs to work in IE, FF, Safari, most standard browsers
Can anyone please help me find a solution to this or point me to some resource that will help me find the soln? Thanks in advance. Below is the code for passing values as a query string. Can I modify this so that my above requirements are satisfied?
FORM
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function goto_page(page) {
var usbnum = document.getElementById('usbnum').value;
var usbcode = document.getElementById('usbcode').value;
var q_str = '?usbnum=' + usbnum + '&usbcode=' + usbcode;
var url = page + q_str;
window.location = url;
}
</script>
</head>
<form id="form1" method="post">
<div>
USB No: <input name="usbnum" id="usbnum" type="text" size="80" /><br />
USB Code: <input name="usbcode" id="usbcode" type="text" size="80"/>
</div>
Next
</form>
</body>
</html>
BRIDGE PAGE
<html>
<head>
<title>Bridge Page</title>
<script type="text/javascript">
function get_params() {
var url = window.location.href;
var q_str_part = url.match(/\?(.+)$/)[1];
var val_pairs = q_str_part.split('&');
var params = {};
for (var i = 0; i < val_pairs.length; i++) {
var tmp = val_pairs[i].split('=');
params[tmp[0]] = typeof tmp[1] != 'undefined' ? tmp[1] : '';
}
return params;
}
function write_params() {
var params = get_params();
var txt = 'Hello ';
for (var i in params) {
txt += params[i] + ' ';
}
var body = document.getElementsByTagName('body')[0];
body.innerHTML += txt;
}
function write_params() {
var params = get_params();
var num_container = document.getElementById('usbnum');
var code_container = document.getElementById('usbcode');
num_container.innerHTML = params.usbnum;
code_container.innerHTML = params.usbcode;
}
</script>
</head>
<body onLoad="write_params()">
</body>
</html>
POST data can only be handled by server side code. There is no way you can use them in your javascript without help from a server side code.
You can only use GET or you can think about cookies. But at other hand, why do you want to change current page?! you can use AJAX to load more data without refreshing and no need of posting or getting variables.
I want to inject iframe head by yui3.The sample code works in FF but IE9 shows the error "YUI is not define". I don't know what happens in IE9.
<head>
<script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js"></script>
<script src="./test-yui.js"></script>
</head>
<body>
<iframe src="#" id="frame"></iframe>
</body>
var SC = 'script';
YUI().use('node', function (Y) {
var frame = Y.Node.getDOMNode(Y.one('#frame'));
o = frame.contentWindow.document;
o.open().write(
'<head><' + SC + ' type="text/javascript" src="http://yui.yahooapis.com/3.5.0/build``/yui/yui-min.js"></' + SC + '>'+
'<' + SC + '>YUI().use(\'tabview\', \'node\', function(Y) {});</' + SC + '>'+
'</head>'+
'<body><div class="unit_title" >HELLO WORLD</div></body>');
o.close();
});
Trying to write to iframes can be tricky I would suggest looking at the Frame module in YUI some details on using it can be found here http://www.andrewwooldridge.com/blog/2011/04/14/hidden-yui-gem-frame/
As an exercise, I'm trying to display a tarot card picture, the name of the card, and the meaning on a remote page using YQL/xpath/javascript. I've set up the script like the example on Yahoo but can't get it to display in the browser. Any suggestions as to how to improve it so it will display?
<html>
<head>
<title>Example</title>
<script type='text/javascript'>
function tarot(o){
var div = o.query.results.div;
var output = '';
var title = div[0].strong;
var content = div[0].p.content;
var src = div[1].img.src;
output = "<h3>" + title + "</h3></br><p>" + content + "</p><img src='" + src + "' alt="" />";
document.getElementById('results').innerHTML = output;
}
</script>
</head>
<body>
<div id='results'></div>
<script src="http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fwww.tarot.com%2Fdaily%22%20and%20xpath%3D%22%2F%2Fdiv%5B%40id%3D'cardHolder'%5D%20%7C%20%2F%2Fdiv%5B%40id%3D'cardMeaning'%5D%22&format=json&diagnostics=true&callback=tarot"></script>
</body>
</html>
Any help is greatly appreciated!
~Larys
P.S. - I updated the callback=functionName part of the code to reflect the most current code. Unfortunately, this doesn't seem to fix the problem. Is there something else I seem to be missing?
You have callback=cbfunc but you haven't defined function cbfunc
The problem I see is that you're never calling your tarot() function.
I think you should change your url end to callback=tarot
Hope this helps. Cheers