Jquery event listener in the Editor

lesalgado47

Hi I have an jquery event listener within the "document ready" statement of jquery. This event picks up an on click event for when I click on a certain ID. I have placed an element with the same id in the datatable and it is not picking it up. to test for error I also inserted the same element outside of data table to test if i made a typo. The event is fired when the element is outside of datatables but not on an element outside of datatables. Do i have to use "editor.on"

allan

Can you give me a link to the page you are working on so I can debug it. Alternatively, can you show the Editor initialisation code and also the event listener code.

Allan

lesalgado47

$('#example tbody').on('click', '#btnStatus', function() {
var stat = (this).value;
editor.edit($(this).closest('td'){
.val('Tracker.Status', stat)
.submit().draw();
}
});

lesalgado47

Objective in the code above:

1. I have a button held in the datatable column using html.
2. when the button is clicked jquery should check if it is of a certain id = "btnStatus"
3. if it , is then i should pick up the value of the button that is in the html value="1"
4. i want to then change the value of that cell or td in the server
5. then redraw that cell

lesalgado47

This is the HTML which is held in the tables, I also want to point out that this is a joined table. The HTML is held in a separate table and it gets pulled in with a join statement in the server side. in the datatables init statement I have explicitly marked the editField to the main tables holding the id's for the HTML to be joined.

Done

Done In Progress Not Started

lesalgado47

Done

Done In Progress Not Started

lesalgado47

""

Done

Done In Progress Not Started

""

lesalgado47

|div class="dropdown"|
|button class="dropbtn-ns"|Done|/button|
|div class="dropdown-content"|
|button id="btnStatus" class="dropbtn-done" value="1"|Done|/button|
|button id="btnStatus" class="dropbtn-ip" value="2"|In Progress|/button|
|button id="btnStatus" class="dropbtn-ns"value="3"|Not Started|/button|
|/div|
|/div|

lesalgado47

$("#btnStatus").click(
function () {
alert("You clicked a button" + (this).value);
}
);

this event listener was able to show the id value of the button. I may have to change the syntax

lesalgado47

https://jsfiddle.net/lesalgado47/rgbf9j1t/2/

lesalgado47

I want to do something similar to this link, except I want to pass the value of the button clicked so that the join gets the HTML for the phase that was clicked from the dropdown
https://datatables.net/reference/api/cell().data()

allan

want to pass the value of the button clicked

Your click event listener should do that - although I would suggest using a delegated event listener - see second top FAQ.

Allan

lesalgado47

i got this even listener working --> and there is a 2 second delay on getting the html to update on the screen. how can I make it update on screen faster? The $("#example").on('click', '#btnStatus',
function(e){
e.preventDefault();
var stat = (this).value
editor
.edit( $(this).closest('td'), false )
.val('Trackers.Status', stat)
.submit();

});

allan

I would need to be able to profile the page to be able to say what is consuming the time. I would suggest trying to use Chrome's profiling tools which are excellent.

Allan