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
Related
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.
If i have some basic html that is saved in a variable $html and I want to use an each (jQuery) statement on it before appending to the page and I want to look in this string for each instance of a class and ammend $html.
This is what I was thinking...
$('.flipper', $html).each(function(){
var frontContent = $(this).find('.front > .content');
var backContent = $(this).find('.back > .content');
$(this).append('<div class="background"><div class="content">' + frontContent.html() + '<div class="back">' + backContent.html() + '</div></div></div>');
console.log($html);
});
this doesnt run - i guess because i am trying to update an element on the page rather than one stored in a variable
can I still use the each ?
Cheers
Looks like $html is a string, not a dom element reference... in that case changes made to the elements in the loop will not be reflected in the original string.
Try something like
var html = '';
var $html = $(html);
$('.flipper', $html).each(function () {
var frontContent = $(this).find('.front > .content');
var backContent = $(this).find('.back > .content');
$(this).append('<div class="background"><div class="content">' + frontContent.html() + '<div class="back">' + backContent.html() + '</div></div></div>');
});
console.log($html[0].outerHTML);
Demo: Fiddle
Try this:
$($html).find('.flipper').each(....);
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.
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\")+'"/>';
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>