Add div to table column - javascript

Is it possible to add a div-element to a table cell/td by using jquery?
In my HTML code I have have div called s (just for testing):
<div id="s">12</div>
In my $(document).ready(function(){ function I I have added the following $("#sale_graph1").html('<div id="s"></div>'); where sale_graph1 is the id of the <td>/cell i want to add the <div>-element to. The cell gets populated with text if I write $("#sale_graph1").text
so I know it is the right cell I'm operating on. But when trying to add the div content nothing shows up in the cell.
Thanks for any help!

This working just fine. See here: http://jsfiddle.net/va5gr/
$('#sale_graph1').html("<div id='s'>12</div>");
(I've added the css to make it more visible)
If however you want to use the contents of your existing div#s then you can do this:
$('#sale_graph1').html($('div#s').html());

Try this code:
$("#sale_graph1").append($('#s'));
and ensure that you have only one element called sale_graph1

After this line:
$("#sale_graph1").html('');
You can add stuff inside your div doing this:
$("#sale_graph1 #s").text('12'); //to add text
or
$("#sale_graph1 #s").html('12'); //to add text with html content

Is this what you want:
$("#sale_graph1").html($('#s').html());

It seems the code is right? But I think maybe some errors at some place.
You can check it like as follow:
1. check if you got the right dom
console.log($('#sale_graph1').length);
insure that you can get '1' in the debugger tool's console
if you pass first step, then you can do
$("#sale_graph1").html('<div id="s">some text</div>');
to make sure you add some text in div#s
then if it dosen't work, you can say the four words;

Related

Click event added to appended html; element not working as anticipated

OK I am sure I am doing something simple fundamentally wrong but am unable to resolve this issue on my own. I have tried googling and searching this forum and reading through the relevant parts of the jquery documentation.
If you need any further information please let me know. Many thanks in advance.
What I am trying to do:
I have a table showing details of various tests at the bottom of which I have a button to ad a new test. As each test comprises several rows of the table I have a template in a hidden div which I have cloned and appended to the live table. I am the using jquery to add appropriate classes and ids based on a variable integer for the sake of uniqueness. I am also attempting to add a click event to an image within one of the table cell to delete the rows relating to that particular test.
My current function
function newTest(sampleID){
var testID = $("#testCount").val();
$("#newTest tr").clone(true)
.addClass("test"+testID)
.appendTo("#testsTable"+sampleID);
$(".newdelbox:first")
.attr("id","testDelete"+testID)
.addClass("delbox")
.removeClass("newdelbox");
$(".test"+testID).on('click',"#testDelete"+testID,delSample(testID));
testID++;
$("#testCount").val(testID);
}
What I need to happen
Function to be called when image is clicked.
What is happening
Function is called only when script is assigned (not clicked). Function will not subsequently run when clicked. I am seeing no errors within the console.
What I have tried
chained to preceeding code:
.click(delSample(testID));
.on("click",delSample(testID));
.bind("click",delSample(testID));
As new line within function:
$(".test"+testID).on('click',"#testDelete"+testID,delSample(testID));
document.getElementById("testDelete"+testID).onclick(delSample(testID));
document.getElementById("testDelete"+testID).addEventListener("click",delSample(testID),false);
try this:
.click(function(){
delSample(testID);
});
OR
.on("click",function(){
delSample(testID);
});
i do not know of your html but i supose something like
.on("click",function(){
var current_id = jQuery(this).attr('id');
delSample(current_id);
});
just locate your id

Selecting an HTML element by it's ID attribute with jQuery

I picked up some code on CodePen to help me dynamically replace the content of divs. It works, but as often happens when borrowing someone's code, I can't actually mold it to what I want it to do.
The original code provides pictures of animals, and when you click it, it sends the text of the name of the animal to a div. The Javascript looks like this:
$('#kittens').click(function() {
$('div').html('Kittens');
});
$('#aardvark').click(function() {
$('div').html('Aardvark');
});
I'm applying it to a more complicated webpage, so I really can't have it just replace the first level div with the word "Kittens."
I've found that by keeping the single quotes, I can put any text or code I want in there and it works just fine, but only if I'm writing to the first level div.
So I figure to target it, I should just give it the div ID. Something like:
$('#kittens').click(function() {
$('myDivName').html('Kittens');
});
This does nothing. I've also tried 'id=myDivName' , 'id="myDivName"' , id: myDivName , and a few others I can't recall right now. Nothing I can come up with seems to work.
Does anybody know how this parameter works and how I can get it to target just the div I want?
jQuery selectors work just like CSS selectors, so instead of $('myDivName'), do $('#myDivName')
when referencing an element in jquery, you need to use it's css selector. For an element with an id "myDivName" that selector would be #myDivName so your jquery would look like:
$('#kittens').click(function() {
$('#myDivName').html('Kittens');
});

Script affecting all images instead of only images in div that contains certain text (jQuery)

I've tried editing this code a number of ways (using if statments and each statements) with nothing working. The idea is so simple; if a div contains this specific text, I want to change the src attribute of the image in that div only.
I can't seem to figure out what I'm missing. The code below changes all the images in all divs with that class rather than just the ones that contain the specific text. I've tried to work in 'this' but apparently don't understand how it affects the function.
$(document).ready(function(){
$('.my-content').filter(':contains("Top")').find('img').attr("src", "http://www.samplestuff.com/kids/test.png");
});
Could someone kindly point me in the right direction of what I need to change to make the script target only images in the div that contain the text instead of all div with that class because one of the div did contain that text (I think that's what triggers it; I may be off about that too).
Try this:
$(document).ready(function(){
$('.my-content:contains("Top")').find('img').attr("src", "http://www.samplestuff.com/kids/test.png");
});
See jQuery :contains docs
Edit
Actually I think your answer should work as well. Seems to work fine in this jsfiddle, can you post your markup?
$('div').filter(':contains("Top")').css("color", "red")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Top</div>
<div>Right</div>
<div>Bottom</div>
<div>Left</div>

Display div on mouseover, containing html code (<br>)

I'm trying to display the content of myPosters array, that contain HTML code.
However this HTML code is not seen as HTML because it was created according to some gwt code which is understandable.
This is how the code is presented: This is a Title <br> This is a Description
And instead of this <br> I want to convert it, and insert a "real" break line.
I already tried to "convert" that code inside photoCaption div to text() and then to html(), using: $('#photoCaption').text($('#photoCaption').html());
But in this case instead of <br> I got <br>
How can I get rid of this, and present the information as "real" HTML code?
NOTE: Move your mouse over the first image to see the problem!
It should also been taken into account that there is an "image slider" in the real code, and it changes the image presented and the respective photoCaption content.
JSFIDDLE
Just change this line
$('#photoCaption').text(myPosters[0]);
To this
$('#photoCaption').html(myPosters[0]);
Fiddle
EDIT
I read your comment on another answer, try this, then:
http://jsfiddle.net/mgJLp/25/
Basically what it does is fix the text on mouse over, and keeps track of whether it's fixed, because otherwise it'll keep trying to fix while you move the mouse, which removes the line break completely.
you were not far off with your jquery, the following works in your fiddle: $('#photoCaption').html($('#photoCaption').text());
You're escaping in the wrong direction.
You need to set the HTML of the target to the text of the source.
Related to your JSFIDDLE, use:
var myPosters = ["This is a Title \<br\> This is a Description","Title 2"];
and
$('#photoCaption').html(myPosters[0]);

Removing appended html using jQuery?

Using jquery, I currently append html to a div on a click event. The following code allows me to fade in only the appended portion of the div:
var html = "..";
$('<div></div>').appendTo("#id").hide().append(html).fadeIn('slow');
This portion works perfectly. But how can I later remove (fade out) only the appended portion? I tried hacking this by storing the html prior to the appending, and then simply hiding everything and showing the stored html. But this does not work well when the same procedure is reused for several divs on the same page (and this seems like poor implementation). Is there a good way to do this?
Just to give an idea of why I need this: Think of a blog type page where for every article on the page there are several comments with only x amount showing by default: the click event fetches the remaining comments and displays them, and then toggling the button again removes the appended comments and sends it back to the original state.
empty() is always an option
jQuery('#main').empty();
Give a look at the empty() function.
It might better solve the problem. Here's the link http://api.jquery.com/empty/
I'd just set and clear the html with '.html()' ...
-- edit
to be more clear, have an area layed out specifically for the addition of these comments:
<div id='commentarea1'></div>
etc.
Try:
var html = "..";
$('<div></div>').appendTo("#id").hide().append(html).fadeIn('slow').addClass('appended');
then later
$('#id .appended').fadeOut('slow'); // or whatever you want to do.
It is not that clear from the question but say you show 5 comments by default and then show x more comments. To get back to the original 5 comment default state you can remove all comments with an index greater than 4 (zero based).
The following assumes each comment goes inside its own div that has a class comment.
$('#id>div.comment:gt(4)').remove();

Categories

Resources