In my dashboard, I'm using the datatables plugin to display records from a database.
At the end of every row, there is an edit button that when you click on, a modal pops up where you can update the data of that table row.
So I used document.querySelectorAll('#editBtn') to select all edit buttons so I can loop through them and add a click event listener to each one.
The problem I'm facing is when I go to the second page, new records are displayed and I don't know how I can select the new buttons.
This is my code:
var editBtn = document.querySelectorAll('#editBtn');
editBtn.forEach(btn => {
btn.addEventListener('click', () => {
alert('It works!');
})
})
Related
I've got a bootstrap modal which shows a confirmation message. If the 'accept' button is clicked then a function is being called with an id, if 'cancel' or 'close' buttons are clicked then the modal closes. The issue is that when the modal is displayed, if I clicked on cancel, and then open the modal again and this time I click on 'accept', the function is being called twice, once for the time I clicked on cancel and once for the time I clicked on 'accept'. How can I prevent this?
$(document).ready(initItems)
function initItems() {
$('.delete-item').on('click', initItemDeletion)
}
function initItemDeletion() {
const itemId = $(this).data('item-id')
$('h5.modal-title').text('Confirmation')
$('div.modal-content div.modal-body').text('Are you sure you want to delete this item?')
$('div.modal-footer button.btn.btn-primary').text('Yes, Delete It!')
$('#main-modal').modal()
$('div.modal-footer button.btn.btn-primary').click(() => {
deleteItem(itemId)
$('#main-modal').modal('hide')
})
return
}
function deleteItem(itemId) {
console.log('deleting item...' + itemId)
}
Again:
click on link: modal is shown but I click on cancel.
Console prints: nothing
click on link: modal is shown but I click on accept.
Console prints:
deleting item... 2
deleting item... 9
where item 2 was the row of the item I clicked on the first time, and 9 is the current row I'm clicking on.
Your problem is that every time you open new modal, you bind to div.modal-footer button.btn.btn-primary button, so when you close the modal, it is still there, and when you open new one, you bind again on top of that.
Bind to namespaced click event and unbind it just before, so you always have just one handler:
$('div.modal-footer button.btn.btn-primary').off('click.close').on('click.close', function () {
deleteItem(itemId)
$('#main-modal').modal('hide')
})
Working fiddle: https://jsfiddle.net/aq9Laaew/219529/
https://api.jquery.com/event.namespace/
I have a grid view that has rows, and within each rows have an action column that you can click. I want to programmatically click the action column and run whatever event it does. The action column's got a itemID as well. Here's what i got so far,
var yourgrid = Ext.ComponentQuery.query('grid[itemId=yourgridname]')[0];
var record = yourgrid .getSelectionModel().select(0, true);
How do you get click the action column ?
From the docs
Firing your own events is done by calling fireEvent with an event
name.
var actionColumn = Ext.getCmp('#actionColumnId');
actionColumn.fireEvent('click', actionColumn);
In
<script>
$all_hier_radio.on("change", function() {
// Grab an input radio checked handler
// Hide the radio options
$all_hier_div.hide();
$all_hier_radio.hide();
// Create a button to be added to another div like this:
$hierarq_but = $("<button/>", {
text: $hier_div_checked_id.text(),
type: "button",
id: "btn_hier",
});
// Append the button to another div
Whe a user selects one of the options, the list gets no visible, so it's fine.
But, I'd like that when a user clicks that button, the previously hidden radio option list could be displayed again
$("button#btn_hier").bind("click", resetHierarquia());
</script>
And in another file,
function resetHierarquia() {
console.log("RRRRRREEEESSSSEETT");
//$(this).preventDefault();
//$(this).stopPropagation();
$all_hier_div.show();
$all_hier_radio.show();
}
But I dont' get the desired effect. Please take into consideration that I'm delving into javascript for the first time...
The problem is this line:
$("button#btn_hier").bind("click", resetHierarquia());
It should be like this:
$("button#btn_hier").bind("click", resetHierarquia);
It's because you don't want to call the function resetHierarquia but pass it in parameter to the event listener.
I have a two tab layout. When the first tab button is clicked the rows are filled using data retrieved remotely. This is the same for the second tab but the layout of the data is different.
My problem is when you switch between tabs I need to fire a click event on the first row of each tab.
I am building this app for android only.
Any help is greatly appreciated...
EDIT: This is dummy code of the top of head, hope it makes a bit more sense.
leftTableView = Ti.UI.createTableView({
data: populateTableView(0),
allowsSelection:true
});
function populateTableView(byType)
{
for(length of array loop){
var tableViewRow=Ti.UI.createTableViewRow({
my_obj:myObj[i]
});
tabledata=[]
tableViewRow.addEventListener('click',function(e){
e.row.setBackgroundImage('/images/selected-row-background.png');
}
if byType 0
loop array display row for each object element
tableData.push(tableViewRow);
return tabledata
if byType 1
loop array display row for each object element, display differently
tableData.push(tableViewRow);
return tabledata
}
}
tab 1 click event listener
populateTableView(0);
leftTableView.data[0].rows[0].fireEvent('click');//this fires but says e.row.setBackgroundImage is undefined
tab 2 click event listener
populateTableView(1)
leftTableView.data[0].rows[0].fireEvent('click');//this fires but says e.row.setBackgroundImage is undefined
Listen for the blur event on the tabGroup and take action as each one of the tabs become the active tab
http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.TabGroup-event-blur
tabGroup.addEventListener('blur', function(_event) {
var activeTab = _event.tab;
// now that you have the activeTab, get the window, then the
// table and call a method to simulate a click on the first
// row
});
passing data when firing event
var row = leftTableView.data[0].rows[0];
row.fireEvent('click', { row : row } )
I am using ajax using jquery, I am deleting a row using the following code snippet:
$('#example a.delete'). live('click', function (e) {
e.preventDefault();
if (confirm("Are you sure you want to delete this row?"))
{
alert("Hello World!")
}
});
When I click grid view show button, grid view appears without page refreshing due to ajax. If I click grid view show button more than one time, it refresh again grid view area, accordingly. But confirm box show more than one time,which is equal to my no. of clicks on grid-view show button, when I click on a single row delete button.
How can avoid this !
Edited
HTML CODE:
<td><a class="delete" href="#" style="margin-left: 10px"><img src="images/delete-icon.png" width="16px" height="16px" /></a></td>
Edited
Complete Code Snippet:
$('#example a.delete'). live('click', function (e) {
e.preventDefault();
if (confirm("Are you sure you want to delete this row?"))
{
$getCode = $(this).parent().parent().attr('id');
var oTable = $('#example').dataTable();
var index =oTable.fnGetPosition( document.getElementById($getCode) );
$.post("DeleteDepartment", {
depID:$getCode
}, function(data) {
if(data.result >0){
var oTable = $('#example').dataTable();
oTable.fnDeleteRow( index );
}else{
alert("Operation Fail");
}
});
}
});
$('#example a.delete').unbind('click').bind('click', function (e) {
e.preventDefault();
if (confirm("Are you sure you want to delete this row?"))
{
alert("Hello World!")
}
});
You appear to be attaching multiple events to the button. Are you sure you're only calling live() ONCE, and once only? If you call it multiple times, you get multiple handlers.
(Of course, this is why I prefer to just use .onclick = function() {...} personally)
It looks like the code is written to do the confirm once for each click.
If you want it to confirm only once you have to make the code remember that you already confirmed.
The row is not deleted until the server calls your success callback function. During that time you can keep clicking on the row and firing the click event.
You could set a variable or a property on the row when the user confirms and then check this variable each time they click. Only show the confirm message if the variable is not set.
Or you could change the state of the element you click, change its image, change style, set an attribute. You could both inform your code that it has been clicked and indicate to the user that the row is already marked for deletion.
Or you could try jquery's .one() method to attach the event.