Jquery event listener in the Editor
Jquery event listener in the Editor
lesalgado47
Posts: 40Questions: 14Answers: 0
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"
This discussion has been closed.
Answers
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
$('#example tbody').on('click', '#btnStatus', function() {
var stat = (this).value;
editor.edit($(this).closest('td'){
.val('Tracker.Status', stat)
.submit().draw();
}
});
Objective in the code above:
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.
""
""
|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|
$("#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
https://jsfiddle.net/lesalgado47/rgbf9j1t/2/
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()
Your click event listener should do that - although I would suggest using a delegated event listener - see second top FAQ.
Allan
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();
});
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