i used this code for click event but how to get when the form load get the TR values
my code
var table = $('#mytable').DataTable();
$('#mytable tbody').on('click','#btnview',function () {
var data = table.row($(this).parents('tr')).data();
alert(data[0]);
});
After binding the click event you can trigger the click event of btn
var table = $('#mytable').DataTable();
$('#mytable tbody').on('click','#btnview',function () {
var data = table.row($(this).parents('tr')).data();
GetRowData(data);
});
//trigger the click event
$('#btnview').trigger('click');
function GetRowData(data)
{
alert(data[0]);
}
Now when you will click button this function will be called and you can get the data.
Related
how to let new element like new radio button be include the onchange function event
in my case
$('input[type=radio]').onchange(function(){
$(`:radio[name=${this.name}]`).val($(this).attr("logic"));
});
only use for document ready but when click #btnAddRow button , the new radio button in new row not
$(document).ready(function () {
$('#btnAddRow').click(function(){
var loop_length=$('.loop_length').last().text()
var $lastRow = $("tr:last"); //grab row before the last row
var $newRow = $lastRow.clone(); //clone it
$newRow.find(":text").val(""); //clear out textbox values
$newRow.find(".td_id_span").text(""); //clear out textbox values
$newRow.find(".td_btnRuleDelete_btn").remove()
$newRow.find("input[type=radio]").prop("name", 'Logic_'+(parseInt(loop_length)+1));
$lastRow.after($newRow); //add in the new row at the end
})
$('input[type=radio]').onchange(function(){
$(`:radio[name=${this.name}]`).val($(this).attr("logic"));
});
})
i find a way like this
$('#button1').click(function() {
$('div').html("<p id='button2'>Hello</p>");
});
$('#button2').click(function() {
alert(0); //THIS DOESN'T WORK
});
$(document).on("click", "#button2", function() {
alert(0); //THIS WORKS!
});
but on radio button how to ajdust code
i try this work
$(document).ready(function () {
$(document).on("change", "#new_radio", function() {
$(`:radio[name=${this.name}]`).val($(this).attr("logic"));
});
$('#btnAddRow').click(function(){
var loop_length=$('.loop_length').last().text()
var $lastRow = $("tr:last"); //grab row before the last row
var $newRow = $lastRow.clone(); //clone it
$newRow.find(":text").val(""); //clear out textbox values
$newRow.find(".td_id_span").text(""); //clear out textbox values
$newRow.find(".td_btnRuleDelete_btn").remove()
//$newRow.find("radio").attr("name","")
$newRow.find("input[type=radio]").prop("name", 'Logic_'+(parseInt(loop_length)+1));
$newRow.find("input[type=radio]").attr("id","new_radio");
$lastRow.after($newRow); //add in the new row at the end
})
but still a problem if click #btnAddRow over 1 time
how can i dynamic add new "#new_radio_01"、"#new_radio_02"..........
$(document).on("change", "#new_radio", function()
jquery function not firing when I use dataTable.fnAddData to append the HTML string.
So I have a function populateDataTable(), there are two columns I needed to render an icon instead of data from JSON.
Hence, I tried to like appending the HTML string including classes for the element in fnAddData(). But somehow it's not firing the click event on the icon.
function populateDataTable(data) {
$("#customerTable").DataTable().clear();
var length = Object.keys(data).length;
for(var i = 1; i < length+1; i++) {
var index = i - 1;
var name = data[index].name;
var queue = data[index].queue;
var expire = data[index].expire;
$('#customerTable').dataTable().fnAddData( [
i,
name,
queue,
'<td id="tb-manage-key" class="tb-manage-key"><div class="tb-btn manage-key-btn switch-view" data-hide="manageCustomers" data-title="#Resources.ManageKeys" data-target="manageKeys"><span></span></div></td>',
'<td class="tb-manage-subs"><div class="tb-btn manage-subs-btn switch-view" data-hide="manageCustomers" data-title="#Resources.ManageSubscriptions" data-target="manageSubscriptions"><span></span></div></td>',
expire,
name
]);
}}
$('.tb-btn.switch-view').on('click', function(e) {
e.preventDefault();
switchView(this);
console.log('Testing'); //not firing
});
Icon is showing, but not firing click event as it supposed to be. Attached below shows that we can see it appends the div as expected.
Solutions
Adding the click event within the populateDataTable() works.
$('#customerTable tbody').on('click', '.tb-btn.switch-view', function() {
switchView(this);
});
You can try a different syntax to listen to the click event...
$('td').on('click', '.tb-btn.switch-view', function(e) {
e.preventDefault();
switchView(this);
console.log('Testing'); //not firing
});
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.
Im working on a CRUD Table populated using Knockout. jQuery Click event is not working on new pushed elements to the observable array
click event function
$('td').on('click', function () {
var spanElement = $(this).find('span');
$(this).find('span').hide();
$(this).find('input').show().select().on('blur', function () {
$(this).hide();
spanElement.show();
});
});
This code is working for all rows populated on-load, but not for those I add using add button.
Why is it so? How to fix it?
JSFiddle
It does not work because you are adding the event handler directly to the table cells. When you add new rows, you never add the click element.
To solve this problem, apply the click event to the table and let event delegation take over
$('table').on('click', 'td', function () {
var spanElement = $(this).find('span').hide();
$(this).find('input').show().select().on('blur', function () {
$(this).hide();
spanElement.show();
});
});
Try this
$(document).on('click', 'table td', function () {
//Your Functions
});
Hi i am trying to create dropdownlists dynamically and populating the contents via an ajax call, this sort of works in the sense that the drop down is created and populated as required but its 'change' event does not fire. I am posting the code below, if anyone can spot something obvious, can you please let me know
regards
$(document).ready(function () {
$("#positions select").change(function (e) {
alert("in");
var id = $("#category_id").val();
$.getJSON("/Category/GetSubCategories/" + id, function (data) {
if (data.length > 0) {
alert(data.length);
var position = document.getElementById('positions');
var tr = position.insertRow(7);
var td1 = tr.insertCell(-1);
var td = tr.insertCell(-1);
var sel = document.createElement("select");
sel.name = 'sel';
sel.id = 'sel';
sel.setAttribute('class', 'category');
td.appendChild(sel);
$.each(data, function (GetSubCatergories, category) {
$('#sel').append($("<option></option>").
attr("value", category.category_id).
text(category.name));
});
}
});
});
});
If your drop down is dynamically generated then you have to bind the change event using .live() handler. live() attaches a handler to the event for all elements which match the current selector, now or in the future.
$("positions select").live("change", function(){
});
Edit
To get the id
$(this).attr("id");
To get value
$(this).val();
To get class name
$(this).attr("class");
inside the change event handler.