How to refresh only 2 column values from database onclick button - javascript

i have one table, in that i have 2 columns one is files & and another permissions.
for all table rows i have refresh buttons.
What i need is when i click the refresh button it should only refresh the columns of the same row,where the refresh button is.
but now it is refreshing the particular row and particular column, but when i change the values in database and click refresh, the changed value is not getting updated...
here is my code:
Jquery Code
<script type="text/javascript">
$(document).ready(function(){
$("#buton").click(function(){
$(this).parent().siblings(".b1").load(".b1");
$(this).parent().siblings(".b2").load(".b2");
});
});
</script>
jsp code:
<table border="1">
<tr>
<td class = "b1"><s:property value="%{#u.files}" /></td>
<td class = "b2"><s:property value="%{#u.perm}" /></td>
<td><img src="images/refresh.png" title="Refresh" id="buton"></td>
</tr>
</table>

The $(this) in your button click function is the <img> element (which isn't closed by the way). The parent, which you call by $(this).parent() of that element is the <a> element, not the <td>. So you're searching for siblings of that <a> element instead of the <td> element.

Related

Jquery effects from c#

I am wondering if there is any code, dll that allows developer to give effects to server control from code behind. I have a empty div and two TextBoxes to select dates in kinda leave application form. When user select two values say 11-Oct-2014 and 14-Oct-2014 in those TextBoxes then I want to append html table markup to that empty div and it will consist number of tr equal to days of leave. I am doing it in AJAX UpdatePanel and and showing that on form. It's working fine but I want to know what if I want to use Jquery like FadeIn and FadeOut effect after appending table markup to div, is it possible?
This is very generic, but you can adapt it to suit...
http://jsfiddle.net/dv9a0ubw/1/
html
<button id="add-row">add a row</button>
<br />
<br />
<table id="my-table">
<tr>
<td>something 1</td>
<td>something 2</td>
<td>something 3</td>
</tr>
</table>
javascript
$("#my-table").on("DOMSubtreeModified", function() {
$(this).find("tr:last").hide().fadeIn(2000);
});
$("#add-row").on("click", function() {
var $row = $("<tr><td>new 1</td><td>new 2</td><td>new 3</td></tr>");
$("#my-table").append($row);
});
As you can see, the button simply adds a row and that's it. The animation is applied by the event handler detecting a change in the table. You can retro-fit this to any table by modifying the table selector, using a class if you mean to use it in multiple instances.

How to turn off jQuery click event

I have a table and the TDs have a class and based on that class I'm adding click events to it like this
$('#regRegionsTable').on('click', '.toggleDetail', toggleDetail);
I'm using on because the table appears, goes away, and returns, and so on, so I need to be able to add events to the table as it gets added to the DOM. In certain circumstances I need to disable the events for a specific row. I'm trying it like this, but it's not working.
$(row).off('click', '.toggleDetail');
row is the TR DOM node. So I'm trying to get all of the TDs in the row that have the toggleDetail class and turn off the click event binding.
This is an example that could be useful. I add the click event on each td. On certain circumstances (clicking on a button in my example) I disable the click event for all the td on a specific row (the first row) using unbind()
$('#regRegionsTable td.toggleDetail').on('click', toggleDetails);
function toggleDetails(){
console.log("click avvenuto")
}
$("button").on("click",function(){
$('#regRegionsTable tr:first-of-type td.toggleDetail').unbind('click', toggleDetails);
})
function toggleDetails(){
console.log("click avvenuto")
}
<table id="regRegionsTable" border="1">
<tr>
<td class="toggleDetail">1</td>
<td class="toggleDetail">2</td>
<td class="toggleDetail">3</td>
</tr>
<tr>
<td class="toggleDetail">4</td>
<td class="toggleDetail">5</td>
<td class="toggleDetail">6</td>
</tr>
</table>
<button>Remove event on a specific tr</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Use JQuery to Unhide Table Rows

I have a table containing Employee Names. I would like to add a hidden row after each row that contained contact information for that particular employee. I would like to use JQuery to do a slideDown animation that reveals that information.
If I was using Javascript, I would do something like name the TR element with an ID such as "employee-xx" and the hidden line as "hidden-xx" where xx is the employeeid. I would do an onClick event that called a function(using the employeeid as a parameter) to hide or unhide the line. As I am just starting JQuery, I don't know how to code this elegantly. I would like to tell it "When you click a visible line in the table, slideDown the invisible line below it", but don't know how to do that. If I use the ID of the row, how do I access the ID via JQuery? I know it's probably simple, but I am stuck.
Thank you,
John
http://www.w3schools.com/jquery/jquery_traversing_siblings.asp
var clickhandler = function(e) {
$(e.target).next().show();
}
btw, this has been answered on here before.
Retrieve previous and next rows in a table using jQuery
EDIT: Fixed a derpy mistake with missing class name. Fiddle has been updated.
I think this is what you want? Clicking on a row with a name causes the hidden row underneath to slide down. Click again to retract.
HTML:
<table>
<tr class="show">
<td>Bob Robertson</td>
</tr>
<tr class="hide">
<td>
<div>(555)123-4567</div>
</td>
</tr>
<tr class="show">
<td>Richard Johnson</td>
</tr>
<tr class="hide">
<td>
<div>(000)000-0000</div>
</td>
</tr>
</table>
JS:
$('.hide').toggle().find('div').slideToggle();
$('.show').on('click', function () {
var next = $(this).next();
if (next.css('display') == 'none') {
next.toggle();
next.find('div').slideToggle();
} else {
next.find('div').slideToggle(function () {
next.toggle();
});
}
});
Here's a fiddle.

jQuery append() div tag not working as expected

i'm having a problem with my append div.
here is a rough idea of my html
<table>
<tr>
<td>title 1</td>
<td>subject 2</td>
</tr>
<div id='appenddiv'></div>
<tr>
<td>title 2</td>
<td>subject 2</td>
</tr>
</table>
and my jquery script is this:
var output = "<tr><td>title added</td><td>subject added</td></tr>";
$('#appenddiv').append(htmloutput);
All works fine with the script and it fires when it should etc.. but my problem is, instead of placing the new html inside the div tags, it just adds it to the top of the table?
any idea why?
As moonwave99 said, you can't have a <div> as a direct child of your table element. If you always to add after the first row, you can do:
var output = "<tr><td>title added</td><td>subject added</td></tr>";
$('table tr:first').after(output);
You can't have a <div> as a direct child of a <table> element, so it's rendered outside of it.
Your html structure is not valid. You shouldn't place a div between tr's. You should place it inside a td if you want it inside your table.
If you want to add another row to your table, you should place a tr instead of your div element, and append it's content, or you should use jQuery .after() or .before() to position your element at a specific position.
you can only append div inside a <td> if you want to have a div in a table otherwise you cannot just add <div> inside <table>
I think no need to assign a variable, you can put html code directly to after() method.
Below is the script:
$('table tr:first').after("<tr><td>title added</td><td>subject added</td></tr>");
Above script will always add new row after the first row.

Deleting Row of Table based on div id using JavaScript

Really need your help.
I have a table that can dynamically add and delete row. But the problem is I want to delete the row of the table based on div id. I mean, on one column for every row of table i have div id which are auto increment. Then, I want to delete the row based on the div id. Is that possible?
Thanks a lot.
You can do this really easy with jQuery.
http://jsfiddle.net/KWPWr/1/
$('#d2').closest('tr').remove();
Yes.
$('#row-id').closest('tr').fadeOut(200, function() { $(this).remove(); });
The above will first select the div, then find the table row it exists in, fades it out and the removes it.
If your table looks like this:
<table>
<tbody>
<tr>
<td>
<div id="01"></div>
</td>
</tr>
<tr>
<td>
<div id="02"></div>
</td>
</tr>
</tbody>
</table>
You can use document.getElementById(DIVID).parentNode.parentNode to access the <tr> Element.

Categories