i have table and it has 2 tag. when i click hidden button then will dissapear by using $().empty(). but i don't know how to restore.
i don't want to use $().append or something like add new data. I want restore it.
How can i do that. thanks
<script type="text/javascript">
$(function(){
$('#hidden').click(function(){
$('.hidden').empty();
});
$('#restore').click(function(){
// restore defaults
});
});
</script>
<table>
<tr class="hidden">
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<td>d</td>
</tr>
</table>
<input type = "button" id ='hidden' value="hidden"/>
<input type = "button" id ='restore' value="restore"/>
Instead of emptying, you can simply hide and show the items.
$('#hidden').click(function(){
$('.hidden').hide();
});
$('#restore').click(function(){
$('.hidden').show();
});
Why not just using hide and show:
$(function(){
$('#hidden').click(function(){
$('.hidden').hide();
});
$('#restore').click(function(){
// restore defaults
$('.hidden').show();
});
});
If you don't want to simply hide it (as already suggested), you can save it in an object.
$(function(){
var data;
$('#hidden').click(function(){
data = $('.hidden').html();
$('.hidden').empty();
});
$('#restore').click(function(){
$('.hidden').html(data);
});
});
empty() will remove content from dom, so it's lost forever
If you want only hide content, you should use
$.hide()
and then
$.show()
There's no way to restore content after calling .empty(). There is another function: .detach() that detaches selected elements from the DOM, but not fully erase them. After detaching the element can be appended again with .append() or .prepend().
Related
Consider this example:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
How can I get reference to <td>2</td>?
I need reference as I want to trigger event on it.
Just loop like:
$('table td').each(function() {
if ($(this).text() === '2') {
// trigger some event
$(this).doTheThing();
}
});
$('td:contains("2")')
Selects the td with number 2 inside.
.filter()
Description: Reduce the set of matched elements to those that match the selector or pass the function's test.
$("td").filter(function() {
return $(this).text() === "2";
}).trigger("whatever");
I basically have multiple elements like this:
<tr class="class1">
...
</tr>
<tr class="class1">
...
</tr>
<tr class="class1">
...
</tr>
<tr class="class1">
...
</tr>
etc. I want to request the DOM like this:
dom.query(".class1").live("click", function() {
if (dom.query("#div1InsideClass1").is(':visible')) {
dom.query("#div1InsideClass1").hide();
...
} else {
dom.query("#div1InsideClass1").show();
...
}
});
But the way that this function works is that it does the function for every single instance of the above, as well as every instance of #div1InsideClass1. Is there a way to detect which particular tr element was clicked on? I heard the .next() function usually helps, but I'm not sure.
You have a root problem: there can't be duplicated ids on your html. You'll need to address that first of all.
Assuming you add a css class to those divs named div1InsideClass1, this should do the trick
$(".class1").live("click", function() {
$(this).find('.div1InsideClass1').toggle();
});
If you need to keep using the if statement, this code is equivalent but allows you to add extra logic within if else
$(".class1").live("click", function() {
var $this = $(this);
var $div = $this.find('.div1InsideClass1');
if ($div.is(':visible')) {
$div.hide();
...
} else {
$div.show();
...
}
});
I am trying to neatly package up some functionality that adds editing controls to a table cell. Below is an example of what I am trying to achieve.
What I want to know is if this is the correct way to do this. I end up having to re-bind the event handlers when I empty the cell. I think jQuery removes them but I am not certain. I expected them to remain since I have saved the DOM elements within the ScoreManager object.
<div id="main">
<table id="points-table">
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</thead>
<tr>
<td>Joe</td>
<td>Bloggs</td>
<td class="points">
<span>100</span>
<button>edit</button>
</td>
</tr>
<tr>
<td>Jiminy</td>
<td>Cricket</td>
<td class="points">
<span>77</span>
<button>edit</button>
</td>
</tr>
</table>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
window.onload = init;
var ScoreManagers = [];
function init() {
$('#points-table .points').each(function(){
ScoreManagers.push( new ScoreManager(this) );
});
}
var ScoreManager = function(cell) {
this.cell = $(cell);
this.edit = $('button', this.cell);
this.points = $('span', this.cell);
this.scoreInput = $('<input>');
this.submit = $('<button>Submit</button>');
this.cancel = $('<button>Cancel</button>');
this.init();
};
ScoreManager.prototype.init = function() {
this.edit.bind('click', $.proxy(this.showEditControls, this));
};
ScoreManager.prototype.showEditControls = function(e) {
this.cell.empty();
this.cell.append(this.scoreInput, this.submit, this.cancel);
this.submit.bind('click', $.proxy(this.savePoints, this));
this.cancel.bind('click', $.proxy(this.cancelEdit, this));
};
ScoreManager.prototype.cancelEdit = function() {
this.cell.empty();
this.cell.append(this.points, this.edit);
this.edit.bind('click', $.proxy(this.showEditControls, this));
}
ScoreManager.prototype.savePoints = function() {
this.cell.empty();
this.points.text(this.scoreInput.val());
this.cell.append(this.points, this.edit);
this.edit.bind('click', $.proxy(this.showEditControls, this));
}
</script>
You should take a look at event delegation and event bubbling in browsers, the PPK blog is a good place.
Then take a look at jQuery on method which implements delegation in an elegent way.
Now bind events to the top element under consideration that doesnt get removed added to DOM, it can be body also, and delegate to the element you want.
$('#points-table').on('click', '.points', function(){
//what should be done when you click a point element
});
bind will not work after element is removed. It will attach an event to all already available elements, but if you remove that element - binidng will be lost. Newly added elements will have no binding too. You may find usefull jQuery.live which allows to bind an event to elements with specified selector no matter if it already exists or will be added later. But if you are using latest jQuery, you may need to use alternatives as it is depricated. Also you may find usefull to use .detach() instead of .empty() because detach keeps event handler bindings. But you will need to modify your code as this.cell.detach(); will remove whole cell) instead of its children only.
I want to access the div tag in the following HTML code:
<table>
<div class="rowBound">
<tr onclick="expandLastResultDetails(this);">
<td class="c1">56835-14513</td>
...
</tr>
<tr class="rowDetails">
<td colspan="0">
<div style="background-color: #0F9;"> expandable
</div></td>
</tr>
</div>
</table>
But jQuery commands just give me a TBODY instead of my DIV ..
This is what I was doing in another case:
function expandNavContent(navEntryTitle) {
var content = $(navEntryTitle).parent().children('.navContent');
$(content).slideToggle('slow', function () {
// Animation complete.
});
}
What I want:
rowDetails should be animated with slideToggle if someone clicks on the tr
If I use this code:
function expandLastResultDetails(tableEntry) {
var content =$(tableEntry).parent().children('.rowDetails');
$(content).slideToggle('slow', function () {
// Animation complete.
});
}
It toggles ALL rows but it should just toggle ONE row so I nested them into a division, maybe that was wrong
Try this:
$('tr.rowDetails').find('div');
But, your Markup is not valid. tr is element of table, not for div.
To get the outer parent div:
$('tr.rowDetails').closest('div');
After edit
function expandLastResultDetails(tableEntry) {
var content =$(tableEntry).next('.rowDetails'); // will point to next tr
$(content).slideToggle('slow', function () {
// Animation complete.
});
}
Try $('.rowDetails').closest('div.rowBound');
It will bubble from the current element (outwards) until it find a div element.
Hope it helps
What command did you try? You could have used this:
$(".rowDetails tr td div");
And moreover, there cannot be a <tr> inside a <div>!
Since your markup is invalid the browser will propably insert the tbody and table for you (look at the markup in FireBug/Dev tools). Something like $(".rowDetails").parent().parent().parent() could work (in some browsers) but I'd recommend fixing the markup instead
In jQuery, how can I get text to toggle when the user hovers over an image?
I have code that changes the text when the user hovers:
# HTML
<table id="support-people">
<tr>
<td><img data-bio="Bio 1" src="person1.jpg" alt="Person 1"/></td>
<td><img data-bio="Bio 2" src="person2.jpg" alt="Person 2"/></td>
</tr>
<tr><td colspan="2">
<p id="support-person-description">Default text</p>
</td></tr></table>
# JS
$('#support-people img').hover(function(){
$('#support-person-description').text(this.getAttribute("data-bio"));
});
But when the user moves away, the text stays the same - is there a neat way I can get it to toggle back to the original, default text?
Thanks.
Use the two functions of hover (first for mouse over, second for mouse out) then in the first save the oldtext as data on the element. Then read this value and set it in the second function:
$('#support-people img').hover(function(){
var desc = $('#support-person-description');
desc.data('oldtext', desc.text()).text(this.getAttribute("data-bio"));
}, function() {
var desc = $('#support-person-description');
desc.text(desc.data('oldtext'));
});
try :
$('#support-people img').hover(function(){
var $elem = $('#support-person-description');
$elem.data('oldText', $elem.text()).text(this.getAttribute("data-bio")); // Add text on mouse hover
},function(){
var $elem = $('#support-person-description');
$elem.text($elem.data('oldText')); // Return to default
});
Change your javascript to the following.
$('#support-people img').hover(function(){
$('#support-person-description').text(this.getAttribute("data-bio"));
}, function(){
$('#support-person-description').text('Default text');
});
You can write onMouseOver and onMouseOut functions in the same call
http://api.jquery.com/hover/
the .hover() method requires TWO parameters. On for what happens when hovering and one for when not hovering. Your code only has the instruction to display the element. You are missing the instruction to remove it again.