jquery .find and append img tag - javascript

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\")+'"/>';

Related

Append Content to iframe jQuery

I am trying to get the get the textarea content entered by user from one of my and form and print that content in iframe, following is the code:
$('.btn-options > ul > li:nth-child(1) > a').on("click", function(e){
$(".textField > textarea").each(function(){
var textareaCon = $(this).html();
$(this).next().append("<div class='notes-data'>" + textareaCon + "</div>");
});
var divElements = $(".sg-Tab-panel.is-open").html();
var oldPage = document.body.innerHTML;
var iframe = $('<iframe class="hidden" id="printer"></iframe>').appendTo('body');
var printer = $('#printer');
printer.contents().find('body').append(" + divElements + ");
printer.get(0).contentWindow.print();
printer.remove();
});
The content is not showing in the print preview, however when I cancel and come back to the page again its working but not when I click on the print link.
EDIT Following code is not sending data to iframe, but when I console, I see that data:
$(".textField > textarea").each(function(){
var textareaCon = $(this).html();
$(this).next().append("<div class='notes-data'>" + textareaCon + "</div>");
});
Whats wrong here, please suggest
thanks
Try storing $(this) in a temporary variable

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.

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.

Pass string from one function to the next javascript

I've got a simple JavaScript client that pulls from a REST API to present some book data, however I seem unable to call the function createBookRow(bookid) and return the appropriate html string to the document ready function where it is called,
The output is currently being produced correctly as verified by the append to .row-fluid on the html page, ideas or suggestions welcome
function createBookRow(bookid)
{
$.get('http://mysite.co.uk/atiwd/books/course/'+bookid+'/xml', function(xml){
$(xml).find('book').each(function(){
var $book = $(this);
var id = $book.attr("id");
var title = $book.attr("title");
var isbn = $book.attr("isbn");
var borrowedcount = $book.attr("borrowedcount");
var html = '<div class="span3"><img name="test" src="http://covers.openlibrary.org/b/isbn/'+isbn+'-L.jpg" width="32" height="32" alt=""></p>' ;
html += '<p> ' + title + '</p>' ;
html += '<p> ' + isbn + '</p>' ;
html += '<p> ' + borrowedcount + '</p>' ;
html += '</div>';
$('.row-fluid').append($(html));
});
});
}
$(document).ready(function()
{
$.get('xml/courses.xml', function(xml){
$(xml).find('course').each(function(){
var $course = $(this);
var id = $course.attr("id");
var title = $course.text();
var html = '<div class="span12"><p>' + title + '</p><row id="'+id+'" >'+createBookRow(id)+'</row></div>' ;
$('.row-fluid').append($(html));
$('.loadingPic').fadeOut(1400);
});
});
});
The line
var html = '<div class="span12"><p>' + title + '</p><row id="'+id+'" >'+createBookRow(id)+'</row></div>' ;
should be just
var html = '<div class="span12"><p>' + title + '</p><row id="'+id+'" ></row></div>' ;
createBookRow(id);
createBookRow(id) function is making a get request to get some details, which happens asynchronously. Unless you explicitly mention it is a synchronous call(which is not advised).
I guess the functionality you need is to render some rows for course and in between you need books details displayed. In that case you need to explicitly say where your book row needs to be appended.
$('.row-fluid').append($(html));
The above code will always append book row at the end.
You aren't returning anything in the code you provided. You just append some HTML to a jQuery object. Try adding a return statement
return html;

parse feed url error

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>

Categories