parse feed url error - javascript

I'm parseing the rss feed and displaying it but it is showing only one record.I'm using the following javascript . Please let me know how can I show all records in one div?
<script type="text/javascript">
$(document).ready(function () {
$.get("http://www.footballfriendsonline.com/blogs/rss.xml", function (data) {
$(data).find('item').each(function(i){
var title = $(this).find('title').text();
var container=$(this).find('description').text();
var img_url = $('img',container).attr('src');
var url=$(this).find('link').text();
var result='<li><a href="'+url+'" target="_blank"><span>'+title+'</span><span><img src="'+img_url+'" width="154" height="115"></span></li>';
$("#new_widget").html(result);
});
});
});
</script>
<div id="new_widget"></div>

use append instead of html
html clear the previous html of div that's why you will get last feed
like this
$("#new_widget").append(result);
instead of
$("#new_widget").html(result);

You seem to be overwriting your html by calling this inside the $.each loop... You need to call this outside the loop..
$("#new_widget").html(result);
Try this piece of code
$(document).ready(function() {
$.get("http://www.footballfriendsonline.com/blogs/rss.xml", function(data) {
var result = '';
$(data).find('item').each(function(i) {
var title = $(this).find('title').text();
var container = $(this).find('description').text();
var img_url = $('img', container).attr('src');
var url = $(this).find('link').text();
result += '<li><a href="' + url + '" target="_blank"><span>' + title + '</span><span><img src="' + img_url + '" width="154" height="115"></span></li>';
});
$("#new_widget").html(result);
});
});​

There are two issues with your script. First, each loop result is overwriting the previous one. Second you are attaching li elements to a div, while you should attach them to an ol or ul element.
For example:
<script type="text/javascript">
var result="";
$(document).ready(function () {
$.get("http://www.footballfriendsonline.com/blogs/rss.xml", function (data) {
$(data).find('item').each(function(i){
...
result+='<li><a href="'+url+'" target="_blank"><span>'+title+'</span><span><img src="'+img_url+'" width="154" height="115"></span></li>';
});
$("#new_widget").html(result);
});
});
</script>
<ul id="new_widget"></ul>

Related

one statement to pull all the data with same attribute name from ajax call

My ajax call returns this :(there are two images and the number of images may vary)
[{"BadgeImage":"http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/1.png"},
{"BadgeImage":"http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/completionist.png"}]
I am able to display the images in my UI as follows :
if (counter<=0){
$('#imagesofBadges').append('<img src="' + data[0].BadgeImage + '"/>');
$('#imagesofBadges').append('<img src="' + data[1].BadgeImage + '"/>');
counter++;
}
Problem :
The point is I dont want to use two append statements as the no of images returned by the ajax call may vary.It will depend on the condition set to pull the images from DB.The images are pulled from the same column name "BadgeImage" as can be seen in the ajax data.
The code I tried :
var $img = $('<img src="' + data[0].BadgeImage + '"/>'); // create the image
$img.addClass('badge-image'); // add the class .badge-image to it
$('#imagesofBadges').append($img); // append it
$('#imagesofBadges .badge-image'); // will fetch all the elements that have the class .badge-image that are inside #imagesofBadges.
Kindly help.
Try the following code using .each function
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var data = '[{"BadgeImage":"http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/1.png"}, {"BadgeImage":"http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/completionist.png"},{"BadgeImage":"http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/2.png"},{"BadgeImage":"http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/3.png"}]';
data = jQuery.parseJSON(data);
$.each(data, function( index, value ) {
var $img = $('<img class="badge-image" src="' + data[index].BadgeImage + '"/>'); // create the image
$('#imagesofBadges').append($img); // append it
});
$('#imagesofBadges .badge-image').each(function () {
alert($(this).attr('src'));
}); // will fetch all the elements that have the class .badge-image that are inside #imagesofBadges.
});
</script>
</head>
<div id="imagesofBadges">
</div>
Actually,I do not get your point.Maybe you can try this!
var data = [
{"BadgeImage":"http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/1.png"},
{"BadgeImage":"http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/completionist.png"}];
var dom = data.map(function (value) {
return '<img src="' + value.BadgeImage + '"/>';
})
$('#imagesofBadges').append(dom.join(''));
try this :
$('#imagesofBadges').empty();
$.each(data, function(index, value) {
//Your code
});

replaceWith inside each don't work with my own tag

Hello I have function which take text with my own tag and convert this tag to a:
//<link src="" title=""> -> title
function ProceedLinkTag(text) {
var items = text.filter("link");
items.each(function () {
var currentElement = $(this);
var title = currentElement.attr("title");
var source = currentElement.attr("src");
var newElement = $("<a>" + title +"</a>");
newElement.attr("href", source);
$(this).replaceWith("<a href='" + source + "'>" + title + "</a>"); //don't work
});
}
It work fine(it is detect my own tag even without close tag), I don't get any errors, but it is don't replaceWith().
Try it:
var text = "<link src='http://lenta.ru/' title='title'>";
ProceedLinkTag($(text));
alert(text);
I also try use it with close tag:
var text = "<link src='http://lenta.ru/' title='title'/>";
ProceedLinkTag($(text));
alert(text);
But it don't work too.
#sqykly find error:
Text in my instance was not a part of document. I change it and now it work.

Iterating through a json object and appending each object(Image) to a HTML div tag

My Requirement is : I have a json object which contains some URL(URL is the URL of a image) and their names.I want to iterate through the JSON object and want to get the URL's (nothing but a image) and want to append the image into a div.So that i can see the images from the JSON object.
suppose this is my code
var JSON = [{"name:"A","url":".../a.jpg"},{"name:"B","url":".../b.jpg"},{"name:"C","url":".../c.jpg"}
I want to iterate through this object, get the name and the URL and want to append the name and URl to a div(with some div ID) in my HTML. Detailed code would be helpful.
Thanks for the help in advance.
A complete example :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
var jsonData = [{"name":"A","url":".../a.jpg"},{"name":"B","url":".../b.jpg"},{"name":"C","url":".../c.jpg"}];
var imgContainer = $("#imgContainer");
$.each(jsonData,function(key,value){
console.log(imgContainer);
imgContainer.append('<img title="'+value.name+'" src="'+value.url+'" />');
})
});
</script>
</head>
<body>
<div id="imgContainer"> </div>
</body>
</html>
var data = [{name:"A",url:".../a.jpg"},{name:"B",url:".../b.jpg"},{name:"C",url:".../c.jpg"}];
var div = document.getElementById("#id");
data.forEach(function(item, index){
div.innerHTML = div.innerHTML + ("Name:" + item.name + " URL:" + item.url + "<br>");
});
Inspired by Rajesh CP
function test() {
var JSON = [{ name: "A", url: "http://www.w3schools.com/images/pulpit.jpg" }, { name: "B", url: "http://www.w3schools.com/images/pulpit.jpg" }, { name: "C", url: "http://www.w3schools.com/images/pulpit.jpg" }];
var element = $("#divID");
$(myArray).each(function (key) {
html = '';
html += '<div class="example_result notranslate" style="text-align:center">\n'
html += '\t<h2>' + JSON[key].name + '</h2>\n';
html += '\t<img src="' + JSON[jey].url + '">\n';
html += '</div>\n';
html += '<br>\n';
element.append(html);
});
}

Passing a value from html to javascript function on click?

Basically, on clicking any image on a html page I want the id associated to be passed to a function.
This is what I have tried. It seems I am making a minor mistake here as I am getting the first id passed no matter what image I click from the array. I tried $(this).attr("id") as well, but did not work.
for(var i=0;i<jsonObj.length-1;i++){
var rows = '';
var bg_img = jsonObj[i].img;
var bg_img = decodeURIComponent(bg_img);
rows = "<img id='" + jsonObj[i].source_id + "' src='" + bg_img + "'/>";
document.getElementsByClassName('subscription')[i].innerHTML = rows;
}
$("body").delegate(".subscription", "click", function() {
// var id = $(this).attr("id");
alert("Welcome Test " + $('img').attr("id"));
return false;
});
$("img").click(function()
{
var id = $(this).attr("id");
});
Your $('img') selector is not confined to any specific area, so it will give you the first image on the entire page.
Try $('img',this) instead.

jquery .find and append img tag

I am trying to load pictures name from a xml object and append to div. I am getting confuse with append typing layout, not able to find where im doing typing mistake.
This is working
$("#nn").append("<img id='theImg' src='/pic/jas/pic1.jpg'/>");
This not working
$("#nn").append("<img id='theImg' src='/pic/jas/'" + customer.find("pic_name") + "/>");
My jquery script part is
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
var pic_infoVar = xml.find("pic_info");
pic_infoVar.each(function () {
var customer = $(this);
$("#picDiv").append("<img id='theImg' src='/pic/jas/'" + customer.find("pic_name") + "/>");
});
$("#loader").hide();
}
Html Div tag
<div id="picDiv">
LoadPic
</div>
Provded that pic_name is infact an element in an XML data structure (ex: <pic_name>pic1.jpg</pic_name>), the code that will do what you want is:
$("#nn").append("<img id='theImg' src='/pic/jas/" + customer.find("pic_name").text() + "'/>");
This is how i used to do
document.getElementById('nn').innerHTML +='<img src="'+customer.find(\"pic_name\")+'"/>';

Categories