I am loading a tr onclick the first tr but the problem is each td in the tr should load the different div which is inside the second div. Now the content which is inside the custdata is loading but how do I load the content which is inside the respective div??
Here is the demo
http://jsfiddle.net/FMnTa/6/
I am not sure if this is what you are asking for, but it seems like it.
$(function(){
$(".info").find("img").click(function(){
var trid = $(this).parent().attr("idcust");
var trdata = $(this).parent().attr("custdata");
// Hide all content divs and show only the one related to the click
$("#"+trid).children().hide();
$(trdata).show();
$("#"+trid).css("display","block");
});
});
Here is a fiddle as well: http://jsfiddle.net/FMnTa/9/
The code could also be somewhat improved like this:
$(function(){
$("img", ".info").click(function(){
var parent = $(this).parent();
var trid = parent.attr("idcust");
var trdata = parent.attr("custdata");
// Hide all content divs and show only the one related to the click
$("#"+trid).show().children().hide();
$(trdata).show();
});
});
Custom data attributes
When using custom attributes, you should really consider using the custom data attributes (data- attributes) instead. In your case the attributes would be data-idcust and data-custdata.
You could then use jQuery's .data() to get/set the attributes. Given that you name the attribute data-idcust you could read it with .data("custid") and set it with .data("custid", "newValue").
See what happen with this:
$(".info").find("img").click(function(){
var trid = $(this).parent().attr("idcust");
var trdata = $(this).parent().attr("custdata");
$("#"+trid).show().find(trdata).css('border', '1px solid red');
$("#"+trid).show().find(trdata).toggle();
});
find(trdata) find the tr1 div with id trdata
Related
In the code below I'm dynamically creating different posts.
Each post has its own image.
$(function () {
for(post in data){
//get from the data post details
var titleData = data[post]["title"];
var descriptionData = data[post]["description"];
var imageData = "images/"+data[post]["image"];
//create elements with jquery
var postHolder = $('<div class="post row"></div>');
var img = $('<img src="'+imageData+'" data-title="'+titleData+'" class="col-sm-3 img-post">');
var textHolder = $('<div class="col-sm-9"></div>');
var title = $('<h4 class="title-post"></h4>').append(titleData);
var description = $('<p class="explanation-post"></p>').append(descriptionData);
textHolder.append(title);
textHolder.append(description);
postHolder.append(img);
postHolder.append(textHolder);
$('.posts-container').append(postHolder);
img.on('click',function(){alert(this.data-title);});
}
});
I want that when I click the image, it will alert the title of the post (what's known as "titleData") and that the "textHolder" will change his background color to grey.
The limitation on this challenge are:
To pass a different parameter as the "titleData" each time.
To use minimum space in the memory.
data-title is invalid identifier in JavaScript. To access the data-* attributes, You can use HTMLElement.dataset
alert(this.dataset.title)
OR, As you are using jQuery .data() method.
alert($(this).data("title"));
What is in the alert is wrong.
You are saying
this.data MINUS title
You sould be using bracket notation if the name has a dash in it.
alert(this["data-title"]);
or better with getAttribute
alert(this.getAttribute("data-title"));
or jQuery
alert($(this).data("title"));
alert($(this).attr("data-title"));
so the final code with the bg color change should be
img.on('click', function() {
alert($(this).attr("data-title"));
textHolder.css("background-color","#CCC");
console.log(textHolder.css("background-color"))
});
I am unable to retrieve the content of the first cell. I'm trying it like this:
console.log($(this).closest("tr").find('td:first').innerHTML);
//or...
console.log($('td:first', $(this).parents('tr')).text());
Code:
$('.editable').click(function () {
var text = $(this).text();
if (typeof $(this).find("textarea")[0]=="undefined")//checking if we have a textarea already
{
$(this).text('');
$('<textarea />').appendTo($(this)).val(text).select().blur(function () {
var newText = $(this).val();
$(this).parent().text(newText).find('textarea').remove();
console.log($(this).closest("tr").find('td:first').innerHTML);
});
}
});
JSfiddle: http://jsfiddle.net/KjknL/
I think the problem has to do with the textarea being added dynamically. But I cannot move from it. If I use .prev() or .next(), it returns empty. Any ideas?
try this: http://jsfiddle.net/KjknL/2/
the textarea doesn't exist anymore because you removed it just before trying to reach the first td from it.
console.log($(this).closest("tr").find('td:first').html());
$(this).parent().text(newText).find('textarea').remove();
I'm creating a JavaScript progress bar and the bar itself and the detail message are inside a table. Now, I'm creating this so that all that needs to be in the page is a div and then the class will fill in the rest when it's created. Since it's in a table, the bar and message are supposed to be on different rows, however when I try to create the rows with jQuery they aren't getting generated and the only thing that is getting put in the tables is the two td elements.
The code I currently have is down below. I've tried several different methods to accomplish it that I thought would work.
I have tried using .wrap('<tr></tr>') to try and get it before I put it in the table, and in the call for the table too (i.e. tdMessage.wrap('<tr></tr>') and tdMessage.wrap('<tr></tr>').html()).
I have tried both document.createElement('tr') and just $('<tr></tr>') and calling .html() when putting it in the table.
I feel like there was another attempt in there too...but I can't think of what it was.
var tdMessage = $(document.createElement('td'));
tdMessage.prop('id', this.MessageId.substr(1));
tdMessage.css('text-align', 'center');
//tdMessage.wrap('<tr></tr>');
//var trRow2 = $(document.createElement('tr'));
var trRow2 = $('<tr></tr>');
trRow2.html(tdMessage);
tdMessage = null;
var divBar = $(document.createElement('div'));
divBar.prop('id', this.BarId.substr(1));
divBar.css('width', '0%');
divBar.css('height', '15px');
divBar.css('background', 'url(images/LoadingBarBG.gif)');
var tdBar = $(document.createElement('td'));
tdBar.css('border', '1px #B0B1B1 solid');
tdBar.css('padding', '1px');
tdBar.html(divBar);
//tdBar.wrap('<tr></tr>');
divBar = null;
//var trRow1 = $(document.createElement('tr'));
var trRow1 = $('<tr></tr>');
trRow1.html(tdBar);
tdBar = null;
var tblInner = $(document.createElement('table'));
tblInner.prop('width', '400');
tblInner.prop('cellpadding', '0');
tblInner.prop('cellspacing', '0');
tblInner.prop('border', '0');
tblInner.html(trRow1.html() + trRow2.html());
trRow1 = null;
trRow2 = null;
I'm probably just missing something, but I can't for the life of me figure it out. Everything looks like it should work, and everything else seems to be.
Also, the HTML that it keeps generating is either just putting both td elements in the table without the tr elements surrounding them or it will even just put the bars td and omit the message one.
Thanks for any help.
Don't use .html() because everything you have is a jQuery object, not raw HTML, instead append the cell to the row:
trRow2.append(tdMessage);
trRow1.append(tdBar);
Then append the rows to the table:
tblInner
.append(trRow1)
.append(trRow2);
Do the same with your div when you want to insert it into the cell:
tdBar.append(divBar);
I am looking to move or copy the contents of an HTML element. This has been asked before and I can get innerHTML() or Jquery's html() method to work, but I am trying to automate it.
If an element's ID begins with 'rep_', replace the contents of the element after the underscore.
So,
<div id="rep_target">
Hello World.
</div>
would replace:
<div id="target">
Hrm it doesn't seem to work..
</div>
I've tried:
$(document).ready(function() {
$('[id^="rep_"]').html(function() {
$(this).replaceAll($(this).replace('rep_', ''));
});
});
-and-
$(document).ready(function() {
$('[id^="rep_"]').each(function() {
$(this).replace('rep_', '').html($(this));
});
});
Neither seem to work, however, this does work, only manual:
var target = document.getElementById('rep_target').innerHTML;
document.getElementById('target').innerHTML = target;
Related, but this is only text.
JQuery replace all text for element containing string in id
You have two basic options for the first part: replace with an HTML string, or replace with actual elements.
Option #1: HTML
$('#target').html($('#rep_target').html());
Option #2: Elements
$('#target').empty().append($('#rep_target').children());
If you have no preference, the latter option is better, as the browser won't have to re-construct all the DOM bits (whenever the browser turns HTML in to elements, it takes work and thus affects performance; option #2 avoids that work by not making the browser create any new elements).
That should cover replacing the insides. You also want to change the ID of the element, and that has only one way (that I know)
var $this = $(this)
$this.attr($this.attr('id').replace('rep_', ''));
So, putting it all together, something like:
$('[id^="rep_"]').each(function() {
var $this = $(this)
// Get the ID without the "rep_" part
var nonRepId = $this.attr('id').replace('rep_', '');
// Clear the nonRep element, then add all of the rep element's children to it
$('#' + nonRepId).empty().append($this.children());
// Alternatively you could also do:
// $('#' + nonRepId).html($this.html());
// Change the ID
$this.attr(nonRepId);
// If you're done with with the repId element, you may want to delete it:
// $this.remove();
});
should do the trick. Hope that helps.
Get the id using the attr method, remove the prefix, create a selector from it, get the HTML code from the element, and return it from the function:
$('[id^="rep_"]').html(function() {
var id = $(this).attr('id');
id = id.replace('rep_', '');
var selector = '#' + id;
return $(selector).html();
});
Or simply:
$('[id^="rep_"]').html(function() {
return $('#' + $(this).attr('id').replace('rep_', '')).html();
});
From my question, my understanding is that you want to replace the id by removing the re-_ prefix and then change the content of that div. This script will do that.
$(document).ready(function() {
var items= $('[id^="rep_"]');
$.each(items,function(){
var item=$(this);
var currentid=item.attr("id");
var newId= currentid.substring(4,currentid.length);
item.attr("id",newId).html("This does not work");
alert("newid : "+newId);
});
});
Working Sample : http://jsfiddle.net/eh3RL/13/
I'm trying to populate featured with data then append it to #wrapper. This isn't working for me. What am i doing wrong?
var featured = '<div id="featured"></div>';
$('#imageTable tbody tr td img').each(function(){
$(featured).append($(this).attr('src'));
});
$(featured).appendTo('#wrapper');
var $featured = $('<div id="featured"></div>');
$('#imageTable tbody tr td img').each(function(){
$featured.append($(this).attr('src')).append('<br />');
});
$featured.appendTo('#wrapper');
Explaination:
When you do this inside the loop $(featured), it creates a NEW div for each selected element, so only the last div will be appended to your #wrapper. You need to create the jQuery object outside of the each loop.
It's because you have the $(featured) call inside the loop. You only want to call it once.
Try this:
var $featured = $('<div id="featured"></div>');
$('#imageTable tbody tr td img').each(function(){
$featured.append($(this).attr('src'));
});
$featured.appendTo('#wrapper');
Very Similar to Bryan Ross's, just creating the div in a more efficient manner. It may not be as straight forward, but I believe it is more performant.
var $f = $('<div>',{id:'featured'});
$('img,#imageTable > td').each(function(i){
$f.append($(this).attr('src');
})
$f.appendTo('#wrapper');