If I want to append a button with my pic to the document, I would write:
$('#story_pages').append('<div><button value="'+window_value+'" onclick="reload_to_canvas(this.value)" > <img id= "w'+window_value+'", src="../pic/white_img.png", width="110px", height="110px"/> </button></div>');
It's too long and hard to debug. But how can I create an img tag, then wrapping it with a button tag and div tag...
Please suggest any clear and simple method with jQuery's help.
UPDATE:
story_pages is the jQuery UI dialog's id. I don't know if it affects or not.
UPDATE:
I found the problem. I want the image shown above on the button instead of a button and a image.
The script you give me will result this:
<div>
<button value="1"></button>
<img ......./>
</div>
The img tag has to be wrapped by button tag like:
<button>
<img.../>
</button>
So the image will attach on the button.
How about this:
var $button = $('<button>', {
value: window_value,
click: function() { reload_to_canvas(this.value); }
});
var $img = $('<img>', {
id : 'w'+ window_value,
src: '../pic/white_img.png'
})
.css({ height: '100px', width: '100px'});
$('#story_pages').append($('<div>').append($button, $img));
If a string is passed as the parameter to $(), jQuery examines the string to see if it looks like HTML (i.e., it starts with ). If not, the string is interpreted as a selector expression, as explained above. But if the string appears to be an HTML snippet, jQuery attempts to create new DOM elements as described by the HTML. Then a jQuery object is created and returned that refers to these elements.
try this
var div=$('<div>'); // creates new div element
//updated here
var img = $('<img />') .attr({ // create new img elementand adds the mentioned attr
id:'w'+window_value ,
src:"../pic/white_img.png",
width:"110px",
height:"110px"});
var button= $('<button/>', //creates new button
{
value: window_value, //add text to button
click: function(){ reload_to_canvas(this.value)} //and the click event
}).html(img); /// and <-- here... pushed the created img to buttons html
div.append(button); //append button ,img to div
$('#story_pages').append(div); //finally appends div to the selector
updated example fiddle
$('#story_pages').append(
$('<div>').append(
$('<button>', {
value : window_value
}).click(function() {
reload_to_canvas(this.value);
}).append(
$('<img>', {
id : 'w' + window_value,
src : '../pic/white_img.png'
}).width(110)
.height(110)
)
)
);
Related
I need to fetch an HTML element from an ExtJS panel and replace it with another HTML element.
I have a normal ExtJS panel -> rptPanel, whose innerHTML is copied to another panel -> outputDataPanel.
Please refer the code below.
var html = rptPanel.body.dom.innerHTML;
me.outputDataPanel.insert(me.itemIndex,{
html : html,
border : 0,
cls : 'htmlView_font_higher htmlView_font',
style : 'margin: 10px 0px 20px 0px; width: 100%;'
});
Now, I need to fetch an HTML element inside outputDataPanel (something like getElementById('table_data') on outputDataPanel ) and replace it with another HTML element.
Can anyone please help?
Try this (I suppose this is not Sencha's best practice):
outputDataPanel.getEl().down('#table_data')
You can set an ID to that element and get it like so:
// by id
var el = Ext.get("myDivId");
// by DOM element reference
var el = Ext.get(myDivElement);
// by id
var el = Ext.getDom('myDivId');
// by DOM element reference
var el = Ext.getDom(myDivElement);
Alternative way would be:
set an item-id to that element, lets say it's an item in the panel:
{
'text': 'myBTN',
iconCls: 'sprite',
disabled: true,
itemId: 'btn1',
handler: function(btn,e){
self.myFunction();
}
}
later on the code look for it by
this.down("#btn1")
I am trying to dynamically generate html content. However it seem like whenever I add tags or selectors to the li element, the code malfunctions
Correct behavior
Incorrect behavior
$('#btnName').click(function(){
var text = $('#inputName').val() + '<button>x</button>';
if(text.length){
$('<li name="somename" id="someid"/>', {html: text}).appendTo('ul.justList') // adding name tag and id selector cause error
}
});
$('ul').on('click','button' , function(el){
$(this).parent().remove()
});
Demo
Use the second parameter to set the other attributes rather than write them out in the tag. Also, you don't need to self-close the tag.
$('#btnName').click(function(){
var text = $('#inputName').val() + '<button>x</button>';
if(text.length){
$('<li>', {
html: text,
name: 'somename',
id: 'someid' + $('.justList li').length // for the sake of unique ids in the example
}).appendTo('ul.justList')
}
});
I want to get img tags attribute values from any element, img tags could be more than 1, and also can be randomized.
like,
<div> hellow <img src='icons/smile.png' title=':)'> how are u <img src='icons/smile2.png' title=':D'></div>
I want to grab their title attribute values and then want to store in some var currentHTML; with all existing div data.
and then insert into any element just like $('#div').html(currentHTML);
and output should be like this,
hellow :) how are u :D
How can I do this?
Thanks in advance.
Try this:
$("img").each(function()
{
$(this).replaceWith($(this).prop("title"));
});
Fiddle. Its just looping through each image and replacing it (with replaceWith()) with its own title attribute.
UPDATE:
Things got more complex. Check this snippet:
// The text result you want
var currentHTML = "";
// Instead of search for each image, we can search of elements that
// contains images and you want to get their text
$(".images").each(function()
{
// Check note #1
var cloned = $(this).clone().css("display", "none").appendTo($("body"));
// Here we select all images from the cloned element to what
// we did before: replace them with their own titles
cloned.find("img").each(function()
{
$(this).replaceWith($(this).prop("title"));
});
// Add the result to the global result text
currentHTML+= cloned.html();
});
// After all, just set the result to the desired element's html
$("#div").html(currentHTML);
Note #1: Here is what is happening in that line:
var cloned = here we create a var which will receive a cloned element;
the cloned element will the current element $(this).clone();
this element must be hidden .css("display", "none");
and then appended to the document's body .appendTo($("body"));.
Note that in your initial html, the div containing the images received the class images:
<div class="images"> hellow <img src='icons/smile.png' title=':)' /> how are u <img src='icons/smile2.png' title=':D' /></div>
So you can do that on more than one element. I hope this helps.
Here's a neat little function you can reuse.
$(function(){
function getImageReplace($el) {
var $copy = $el.clone();
$copy.find('img').each(function(){
$(this).replaceWith($(this).attr('title'));
});
return $copy.text();
}
//now you can use this on any div element you like
$('#go').click(function() {
alert(getImageReplace($('div')));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> hellow <img src='icons/smile.png' title=':)'> how are u <img src='icons/smile2.png' title=':D'></div>
<button id='go'>Convert images</button>
How to create dynamically tag inside table. At first create link then inside link create an img tag like if i have..
<table>
<tr>
<td>
<a>
<img />
</a>
// Add Some more when every time my function is run..? like that
// <a>
// <img/>
// </a>
</td>
</tr>
</table>
Im using this inside function but its didn't work help me.
$(document.createElement("img")).attr('Some attr');
If you mean JQuery by "jquree", then try this:
$('table tr td').append('<img src="/favicon.ico"/>');
Well, I wasn't going to answer that, but I'm not seeing any correct answer (from my POV):
function addElement(tdId) { // Specify the id the of the TD as an argument
$('#' + tdId).append( // Append to the td you want
$('<a></a>').attr({ // Create an element and specify its attributes
'href': '/home',
'title': 'Home'
}).append( // Also append the image to the link
$('<img />').attr({ // Same, create the element and specify its attributes
'src': 'image.png',
'width': '100px',
'height': '100px'
})
) // Close the "append image"
) // Close the "append anchor"
}
Now that is a pure jQuery answer. A javascript answer would be the following:
function addElement(tdId) { // Specify the id the of the TD as an argument
// Create the DOM elements
var a = document.createDocumentFragment('a'),
img = document.createDocumentFragment('img') // See the use of document fragments for performance
// Define the attributes of the anchor element
a.href = '/home'
a.title = 'Home'
// Define the attributes of the img element
img.src = 'image.png'
img.width = '100px'
img.height = '100px'
// Append the image to the anchor and the anchor to the td
document.getElementById(tdId).appendChild(a.appendChild(img))
}
I think the js version is more readable. But that's just my opinion ;o).
$(document).ready(function(){
$('.any_element_you_want').html('<img src="image.png">');
});
var td = $('table tr td');
td.append('<a><img src="whatever.jpg"/></a>');
Make use of jquery and than you cna crate image element like as below
$(document).ready(function(){
var elem = new Element('img',
{ src: 'pic.jpg', alt: 'alternate text' });
$(document).insert(elem); //here you can also make use of `append` method instead of this method
}
or
var img = new Image(1,1); ///params are optional
img.src = ''pic.jpg';
On Every click of button , it will add img tag with image url abc.png
and add to div having id imagediv.
$("button").click(function()
{
var img=$('<img id="dynamic">');
$(document.createElement('img'));
img.attr('src',"abc.png");
img.appendTo('#imagediv');
});
My div structure should be this:
<div id="dashboard">
<img id="pic1" src="...png" />
<h6>....</h6>
</div>
To create the div I use this:
$('<div>', {
'id': 'dashboard'
}).appendTo('body');
I need to append a h6 tag with text into the above div. How can this be done? Also how can I access the text within the h6 tag when the div is clicked?
$('#dashboard div').hover(function() {
alert($(this).children().eq(2) ?? );
};
To add the h6 element, try this:
var $div = $('<div>', {
'id':'dashboard'
}).appendTo('body');
$("<h6></h6>").text("Foo").appendTo($div);
To access the text of the h6 on click of the div, try this:
$("body").delegate("#dashboard", "click", function() {
var text = $("h6", this).text();
alert(text);
});
That assumes you are using jQuery 1.6 or lower. If you are using jQuery 1.7+, you can use on():
$("body").on("click", "#dashboard", function() {
var text = $("h6", this).text();
alert(text);
});
Example fiddle
Also, I have used $("body") here as an example - you should use a selector which is the closest to the element you are attaching the event to (in this case #dashboard) which is not dynamically created.