i have following code and its not working properly,basically i am willing to add popup on my click event for confirm delete but when i click deleting the row first and then apppear popup,i am stuck and coudn't understand whats going,here is my code
$.fn.matrix.deleteCategory = function ( jqObj ) {
jqObj.find("#award").on('click', ".categoryminus", function () {
var CategoryClass = $(this).closest('tr').attr('class'); // table row Class
//split all class of current table row
var CategoryArray = CategoryClass.split(' ');
//delete all rows having class like C-1-o-1
var categoryClassLike = '[class^=' + CategoryArray[0] + '-o-]';
//for rTenderDocument,check delete c-2,c-3 and appear popup
if ( formType == 'rTenderDocument') {
if ( CategoryArray[0] == 'C-2' ){
$('#priceConfirm').bPopup();
$('.priceConfirm').click(function(){
if($(this).attr('id') == 'priceDeleteNo'){
$('#priceConfirm').bPopup().close();
return false;
} else {
$('#priceConfirm').bPopup().close();
return true;
}
});
} else if ( CategoryArray[0] == 'C-3' ){
$('#fixedAnnualConfirm').bPopup();
$('.fixedAnnualConfirm').click(function(){
if($(this).attr('id') == 'fixedAnnualDeleteNo'){
$('#fixedAnnualConfirm').bPopup().close();
return false;
} else {
$('#fixedAnnualConfirm').bPopup().close();
return true;
}
});
}
}
//remove all child of sub category
$( categoryClassLike ).each(function(){
var obj = $(this);
var subCategoryClass = obj.closest('tr').attr('class'); // table row Class
//split all class of current table row
var subCategoryArray = subCategoryClass.split(' ');
//delete all rows having class like C-1-o-3-So-1
var classLike = '[class^=' + subCategoryArray[0] + '-So-]';
//remove all child of sub category
$( classLike ).each(function(){
$(this).remove();
});
//remove sub category
obj.remove();
});
//after removing child then delete their parent
$(this).closest('tr').remove();
});
return jqObj;
};
I'm not sure what your code does - but I'll give you another
approach to do what you want (based on tables and popup confirmation)
Take a look at this fiddle: JSFiddle Demo
I have created a basic table with rows that contains a del button:
<table>
<tr><td>ID</td><td>NAME</td><td>ACTION</td></tr>
<tr>
<td><div>1</div></td>
<td><div>Booba</div></td>
<td><div><button class='del'>Delete</button></div></td>
</tr>
<tr>
<td><div>2</div></td>
<td><div>Johnas</div></td>
<td><div><button class='del'>Delete</button></div></td>
</tr>
<tr>
<td><div>3</div></td>
<td><div>Coolio</div></td>
<td><div><button class='del'>Delete</button></div></td>
</tr>
</table>
Added a popup container with the message,buttons and hide it:
<div class='popup' id='popup' style='display:none'>
<div>
<p>Please confirm the delete action</p>
<button id='confirm'>Proceed</button>
<button id='cancel'>Cancel</button>
</div>
</div>
Now for the Magic part ~ as yo can see i'm using a variable to store the
row I wish to delete before the popup is displayed and only when the "proceed" button
is clicked this element is removed (otherwise variable is reset and popup removed):
$(function(){
//element to delete:
var ele_del;
// Expose popup message when del button clicked:
$('button.del').click(function(){
event.preventDefault();
$('#popup').fadeIn('slow');
ele_del = $(this).closest('tr');
return false;
});
//delete if proceed clicked:
$('button#confirm').click(function(){
event.preventDefault();
$('#popup').fadeOut('slow',function(){
$(ele_del).find('div').each(function(){
$(this).slideUp('slow',function(){
$(ele_del).remove();
ele_del = "";
});
});
});
return false;
});
//cancel delete operation:
$('button#cancel').click(function(){
event.preventDefault();
$('#popup').fadeOut('slow',function(){
ele_del = "";
});
return false;
});
});
Notes:
I'm using a " DIV " inside the TD's to make the slideUp effect cross-browser. Some browsers won't slideUp the TR's directly.
The entire script is based on the effects callback functions - If you don't want to use effects you can remove the div's and remove the TR directly.
If you use a dynamic table (rows are being added dynamically and not all present on DOM ready) just use the " .on('click' " instead of the .click() I used.
Have fun!
Related
I have a table with checkbox option for each row.
For each row I have href (dedicated link) handled by HTML file.
I have created a button called: "download" by JS, and I want to define this button to save all the links for the rows which have selected in the checkboxes, and save it in one variable, selectedLinks = []
Any idea how can i fix my JS function.
//function download button
$(document).on("click", "#downloadBtn", function() {
console.log("download button click")
var selectedLinks = []
$('.last')
.checkSingel("checkSingle")
.forEach(function(record) {
if (record.checked) {
//selectedLinks.push(record.href)
alert($(this).attr("href"));
}
})
console.log(selectedLinks)
});
</td>
<td class="last"><a style="font-weight:bold;text-decoration:underline;" href="/download/{{ elements.EvidencePath }}">Click here to download Evidence</a>
</td>
this is the proper code :
// function to add multiple check box for all rows
$(document).on("click", ".checkAll", function(){
$('input:checkbox').not(this).prop('checked', this.checked);
// this statement is checked it will enable the download button ( for check all button)
if(this.checked) {
$(".dt-buttons a:last-child").removeAttr("disabled");
}else {
$(".dt-buttons a:last-child").attr("disabled", "disabled");
}
});
// this statement is checked to eanbled the button if the checkbox checked. ( for check single button)
$(document).on("click", ".checkSingle", function(){
if(this.checked) {
$(".dt-buttons a:last-child").removeAttr("disabled");
}else {
$(".dt-buttons a:last-child").attr("disabled", "disabled");
}
});
//function download button
$(document).on("click", "#downloadBtn", function(){
console.log("download button click")
var selectedLinks = []
$('.last').checkSingel("checkSingle").forEach(function(record){
if (record.checked){
//selectedLinks.push(record.href)
alert($(this).attr("href"));
}
})
console.log(selectedLinks)
});
Javascript Code:
$(document).on('click', '#google_analytics', function() {
if ($("#google_analytics").prop('checked') == true) {
var google_analytics_cost = $('#google_analytics_cost').val();
$('.total-amount12').text(google_analytics_cost);
} else {
$('.total-amount12').text('0');
}
});
$(document).on('click', '#mailing_list', function() {
if ($("#mailing_list").prop('checked') == true) {
var mailing_cost = $('#mailing_list_cost').val();
$('.total-amount13').text(mailing_cost);
} else {
$('.total-amount13').text('0');
}
});
I just want to add both actions total in one div. Which is named total-amt <div class="total-amt">0</div> In this div, whenever i click any action the total should show total-amt div and then, if i click on other action then its total amount too added with the previous amount.
Try this, when you click on any action it will take the previous value from that div, convert it into integer (parseInt) then it will add newValue in it. Finally, It will put the new sum into that div again.
Edit-1
You need to remove the $ string from the div. Try this working snippet.
//Action performed and Add the sum to that div
$('a').click(function(){
//New value that is going to add into div
var newValueToAdd = 10;
//Replace the HTML with final summation
$('.total-amt')
.html("$" +
(parseInt($('.total-amt').html().replace('$', '')) +
newValueToAdd));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="total-amt">$0</div>
Add
I have a table like:
When user selects Edit, it opens up a bootstrap Modal containing all td of the tr the Modal is launched from. What I've done so far is:
Get Row Index on Edit Click:
$(document).on('click', '#editNominHref', function(e) {
var global_edit_row = $(this).closest('tr').index();
$('#editNomiModal').modal('show');
});
What I want is:
$('#editNomiModal').on('show.bs.modal', function () {
$("#Name_feild_of_Modal").val(name_in_td_of_nth_Tr);
// ..Similar for DOB, Relation and share%..
});
Question:
How do I pass the tr index from Edit.click to Modal.show function?
I don't believe you can pass data directly to the modal. However, you can use data attributes to modify the DOM which can then be read from the show.bs.modal event. Something like this:
$(document).on('click', '#editNominHref', function(e) {
$('#editNomiModal')
.data('row-index', $(this).closest('tr').index())
.modal('show');
});
$('#editNomiModal').on('show.bs.modal', function () {
var $tr = $('#myTable tr').eq($(this).data('row-index'));
var serial = $tr.find('td:eq(0)').text();
var name = $tr.find('td:eq(1)').text();
// and so on...
$("#Serial_field_of_Modal").val(serial);
$("#Name_field_of_Modal").val(name);
// and so on...
});
When you open the modal can't you just clone the <tr> and insert into modal-content?
$(document).on('click', '#editNominHref', function(e) {
var content = $(this).closest('tr').html();
$('#editNomiModal').find('modal-content').html(content).modal('show');
});
Obviously more formatting would be required.
I have a form with an HTML table that has a button (#addRows) that when clicked will clone the first table row and append it to the bottom of the table.
This table resides in a section of HTML with some other input fields that can also be cloned and appended onto the bottom of my form. When I am cloning the section I am changing all child element ID's to include a number that can be iterated dependent on how many times the user clones the section.
Example
<div id="someID"> ... </div>
<div id="someID2"> ... </div>
<div id="someID3"> ... </div>
I am doing this with JQuery like this
$(function() {
var $section = $("#facility_section_info").clone();
var $cloneID = 1;
$( ".addSection" ).click(function() {
var $sectionClone = $section.clone(true).find("*[id]").andSelf().each(function() { $(this).attr("id", $(this).attr("id") + $cloneID); });
$('#facility_section_info').append($sectionClone);
$cloneID++;
});
});
When I clone the section that holds the table I am also cloning the #addRows button which when clicked should append a table row to the table it is being clicked on. However if I clone my section and I click on my second `#addRows button it will clone my table row but it is appending to my first table and not the second.
Here is my addRows button and event handler
<input type="button" value="+" id="addRows" class="addRows"/>
$(function() {
var $componentTB = $("#component_tb"),
$firstTRCopy = $("#row0").clone();
$idVal = 1;
$(document).on('click', '.addRows', function(){
var copy = $firstTRCopy.clone(true);
var newId = 'row' +$idVal;
copy.attr('id', newId);
$idVal += 1;
copy.children('td').last().append("Remove");
$componentTB.append(copy);
});
});
My question is, when I clone my section of HTML that holds my table and #addButton how can I ensure that when the user clicks on the original button it will clone and append to that table or if I click the cloned button it will clone and append to the cloned table only?
If anything is unclear please let me know so I can try to better explain what I am trying to do, thanks.
Here is a JSFiddle demonstrating the problem I am having.
Because I truly love you BigRabbit, here is where I got to. You will see at least one useful fix here:
var $sectionClone = $section.clone(true);
$sectionClone.find("*[id]").andSelf().each(function () {
$(this).attr("id", $(this).attr("id") + $cloneID);
});
and a fix for an issue you did not report yet
$copy.children('td').last().append(' Remove');
using
$("#facility_section_info").on('click', '.remove', function (e) {
e.preventDefault();
$("#"+$(this).data("removeid")).remove();
});
FIDDLE
$(function () {
var $componentTB = $("#component_tb"),
$firstTRCopy = $("#row0").clone(),
$section = $("#facility_section_info>fieldset").clone(),
$cloneID = 0,
$idVal = 0;
$("#facility_section_info").on('click', '.remove', function (e) {
e.preventDefault();
$("#"+$(this).data("removeid")).remove();
});
$("#facility_section_info").on('click', '.addRows', function () {
$idVal++;
var $copy = $firstTRCopy.clone(true);
var newId = 'row' + $idVal;
$copy.attr('id', newId);
$copy.children('td').last().append(' Remove');
$(this).closest("fieldset").find("tbody").append($copy);
});
$("#facility_section_info").on("click", ".addSection", function () {
$cloneID++;
var $sectionClone = $section.clone(true);
$sectionClone.find("*[id]").andSelf().each(function () {
$(this).attr("id", $(this).attr("id") + $cloneID);
});
$('#facility_section_info').append($sectionClone);
});
});
Sample Code:
<table class="grid">
<tr>
<td>click me </td>
<td class="unitNumber"><span>Unit 1</span></td>
<td class="unitStatus">Open</td>
</tr><tr>
<td class="unitNumber"><span>Unit 2</span></td>
<td class="unitStatus">Sold</td>
</tr>
</table>
I am able to get the row index of the row selected to get the exact column data.
tr = $('.grid').find('tr');
tr.bind('click', function(event) {
unitNo = $(this).find("td.unitNumber span").html();
alert(unitNo);
});
The above tr click event is fine.
My problem now is how to trigger this tr binding event when clicking the anchor link <td>Show map </td>within the table row?
Goal:
To get first the unitNo (processed on tr.bind click event) before processing the rest of the code on anchored link?
I tried to duplicate the tr click function within the anchor link click event but got undefined value on unitNo. See my code:
$('a[id^="unit_floor_plan_preview"]').bind('click',function() {
var tr = $('.grid').find('tr');
unitNo = $(this).find("td.unitNumber span").html();
alert('From link: ' + unitNo);
});
test code:
http://jsfiddle.net/VjkML/29/
Change:
unitNo = tr.find("td.unitNumber span").html();
To:
unitNo = $(this).find("td.unitNumber span").html();
In $('a[id^="unit_floor_plan_preview"]').bind('click' You try to find "td.unitNumber span" within $(this). The problem is, this refers to the link clicked on, thus you'll never find anything!
FYI, you could easily rewrite that ENTIRE statement as follows:
$(document).on("click", '.grid tr, a[id^="unit_floor_plan_preview"]', function(e) {
e.stopPropagation(); // will prevent double click events from link being clicked within row
var unitNo = $.trim($(this).closest("tr").find(".unitNumber span").text()); // trim to remove end space, closest gets closest parent of selected type
if (e.target.tagName == "A") alert('From link: ' + unitNo);
else alert(unitNo);
});
Example
The best way is to bind the event only to your tr and use the event.target to check if it is tr or any other element that was clicked. This way your click event will not be duplicated.
This should work
var unitNo;
var tr;
tr = $('.grid').find('tr');
tr.bind('click', function (event) {
if ($(event.target).is('tr')) {
// If it is a tr that is clicked then just use find
unitNo = $(this).find("td.unitNumber span").html();
} else {
// If not tr find the closest tr and then find the element
unitNo = $(this).closest('tr').find("td.unitNumber span").html();
}
alert(unitNo);
});
Check Fiddle
Try:
var unitNo;
var tr = $('.grid').find('tr');
$('a[id^="unit_floor_plan_preview"]').on('click',function(e) {
e.stopPropagation();
unitNo = $(this).closest('tr').find("td.unitNumber span").html();
alert('From link: ' + unitNo);
});
tr.on('click', function(event) {
unitNo = $(this).find("td.unitNumber span").html();
alert(unitNo);
});
jsFiddle example
With the link you need to go up the DOM to the row (via .closest()), then use .find() to go back down the same row to find the span you want to get the Unit value.