I have a leaflet map with the boundaries of Europe countries. When the user clicks on a feature I get the name of Country by a field in geojson file.
I also have a datatable with data from database and I have a function on row click.
How I can perform a click on datatable row from leaflet feature click?
The problem: on feature click -> execute a function
With the below code I get Feature Name and search on datatable
layer_europe_with_data_0.on('click', function(e) {
var dd = e.layer.feature.properties.NAME_ENGL
var tbldump = $('#europetbl').DataTable();
tbldump.search(dd).draw();
}
One way was that I found the search option on datatable, so I can search on datatable for the row. But I can perform the click on.
The function on row click
$('#europetbl tbody').on('click', 'tr', function () {
// bla bla bla
}
I want to do this:
layer_europe_with_data_0.on('click', function(e) {
do this $('#europetbl tbody').on('click', 'tr', function () {
}
code for row click
$('#europetbl tbody').on('click', 'tr', function () {
var tbl = $('#europetbl').DataTable();
var dt = tbl.row( this ).data();
mymap.setView([dt[4], dt[3]],6)
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
tbl.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
$("#fetchtbl tbody").html("");
var id = dt[0];
idforcountrystats = id;
localStorage.setItem("idforstats", idforcountrystats);
$.ajax({
url: "fetchdata.php",
method: "POST",
data:{id:id},
dataType: "JSON",
success: function(data){
if (data){
var trHTML = '';
$.each(data, function (i, item) {
trHTML +='<tr><td><input type="checkbox" data-id="'+ item.fetID+'"
onclick="QuickView(this)"></td><td>' + item.Fua_name + '</td></tr>' ;
});
$('#fetchtbl tbody').append(trHTML);
}
}
})
})
Related
I have written a code in Javascript in which I have attached an input type submit to a form. On form submit the listener gets called.
The problem is that on when I click the button once, one ajax call occurs. When I click it again two calls occur while only one call should occur on each click. Similarly on clicking 3 times 3 calls occur and so on...(the calls get increasing). If I refresh the page then the number gets reset. I have tried everything but I had no luck. If anyone found out what is wrong here it would be awesome. Thanks in advance.
javascript code:
$('input.create-discounts-quotations').click(function () {
var discount_quotation_type = $('input.quotation-discount-type').val();
if (discount_quotation_type == "value") {
var total = $('input.discount-input-quotation').val();
var discounted_price = product_price - total;
$('#final_discounted_amount').val(discounted_price);
$("table.product-response-table tr").each(function () {
var row = $(this).index() + 1;
var td = $(this).find('td.quotation-response-discounts');
$(td).each(function () {
$(this).html(total);
});
});
$("table.product-response-table tr").each(function () {
var row = $(this).index() + 1;
var td = $(this).find('td.product_final_price_discounted');
$(td).each(function () {
$(this).html(discounted_price);
});
});
var form1 = $('form#quotation_discount_update_form');
form1.on("submit", function (e) {
var form_data1 = form1.serialize();
$.ajax({
type: 'POST',
url: form1.attr('action'),
data: form_data1,
dataType: "json",
success: function (data) {
$('.quotation-discount-status-update').empty();
$('.quotation-discount-status-update').append('<div class="alert alert-success">Discount Added</div>');
}
});
e.preventDefault();
});
}
if (discount_quotation_type == "percentage") {
var total = $('input.discount-input-quotation').val();
var temp_first = product_price;
var temp1 = total / 100;
var temp2 = temp1 * product_price;
var discounted_price = product_price - temp2;
$('#final_discounted_amount').val(discounted_price);
$("table.product-response-table tr").each(function () {
var row = $(this).index() + 1;
var td = $(this).find('td.quotation-response-discounts');
$(td).each(function () {
$(this).html(total);
});
});
$("table.product-response-table tr").each(function () {
var row = $(this).index() + 1;
var td = $(this).find('td.product_final_price_discounted');
$(td).each(function () {
$(this).html(discounted_price);
});
});
var form1 = $('form#quotation_discount_update_form');
form1.on("submit", function (e) {
var form_data1 = form1.serialize();
$.ajax({
type: 'POST',
url: form1.attr('action'),
data: form_data1,
dataType: "json",
success: function (data) {
$('.quotation-discount-status-update').empty();
$('.quotation-discount-status-update').append('<div class="alert alert-success">Discount Added</div>');
}
});
e.preventDefault();
});
}
if (discount_quotation_type == "not_selected") {
$('.quotation-discount-status-update').empty();
$('.quotation-discount-status-update').append('<div class="alert alert-danger">Discount Method Not Selected</div>');
return false;
}
// return false;
});
That happen because every time you click your code will reattach the submit event so it will be duplicated in every click.
You should never attach the events inside other events, please put the submit event outside of the click event and the code should work, example :
var form1 = $('form#quotation_discount_update_form');
form1.on("submit", function (e) {
var form_data1 = form1.serialize();
$.ajax({
type: 'POST',
url: form1.attr('action'),
data: form_data1,
dataType: "json",
success: function (data) {
$('.quotation-discount-status-update').empty();
$('.quotation-discount-status-update').append('<div class="alert alert-success">Discount Added</div>');
}
});
e.preventDefault();
});
Else you have to remove the event handler every time using .off(), like :
form1.off("submit").on("submit", function (e) {
I have two jquery dataTables in my php file. First table is loaded in the main file php from mysql database. The second table is loaded with ajax to the same php file but the content depend of row clicked on the first dataTable.
I have a problem, when I click the row of the first dataTable it loads the second table correctly. However when I click a row in the second dataTable not get some value, like not found the row. It show undefined value...
$(document).ready(function() {
**//I create dataTable 1**
var table = $('#example').DataTable({
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Spanish.json"
}, "dom": '<"toolbar">frtip'
});
**//I create dataTable 2**
var table2 = $('#example2').DataTable({
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Spanish.json"
}, "dom": '<"toolbar">frtip'
});
**//I load dataTable 1**
$('#example tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}else{
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
var getted = table.row('.selected').data();
$.ajax({
type:'POST',
data: 'usuario=' + getted,
url: 'loadF1.php',
success: function(msg) {
$('#example2 tbody').html(msg); //Here set content into div2
}
});
**//I load dataTable 2**
$('#example2 tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}else{
table2.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
var getted2 = table2.row('.selected').data();
$.ajax({
type:'POST',
data: 'usuario=' + getted2,
url: 'loadF2.php',
success: function(msg) {
$('#example3 tbody').html(msg); //Here set content into div3
}
});
What am I doing wrong, why when I select the second table it's not getting get the row selected?
Thanks!
I am trying to bind a child table with a parent table. I am not able to figure out how this can be done when the data for the child table is coming through an AJAX call which then creates a dynamic table.
I have followed this
Below is my code.
$('#myTable tbody).on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = $('#myTable').DataTable().row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(format()).show();
tr.addClass('shown');
}
});
function format() {
$.ajax({
type: 'GET',
url: '#Url.Action("MyFunction", "Home")',
data: { "Id": MyId },
dataType: "json",
async: false,
success: function (data) {
var list = data;
$.each(list, function (index, item) {
return '<table>.......<table />';
//i need to loop across the list and create a dynamic table with tr and td
});
},
error: function (result) {
var error = JSON.stringify(result);
throw "Error...";
}
});
}
$('#myTable tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = $('#myTable').DataTable().row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
format(row.child); // create new if not exist
tr.addClass('shown');
}
});
and then the format() will be
function format(callback) {
$.ajax({
....
//async: false, you can use async
success: function (data) {
var list = data;
var html = '';
$.each(list, function (index, item) {
...
//create <tr> <td> with loop
html= '<tr><td>.......</tr>';
});
callback($('<table>' + html + '</table>')).show();
},
...
});
}
demo here jsfiddle
I have created a table with two select boxes and a single text box in jade.
When I click my button to add more rows, after the user has changed the second select box, by changing a selection in the first using ajax, my row addition code stops working.
Can anyone see in the following code where I may be going wrong.
My jade code:
form(method ='Post', action='/orderlist/#{login_id}', data-bv-message='')
.form-group
input.form-control(type='text', name='order_date', value='', id='orderdate' ,placeholder='Enter the date' style='width:65%;')
.table-responsive
table#item_table.items.table.table-striped.table-bordered
thead
tr
th(style='min-width: 200px;') Menu
th(style='min-width: 200px;') Item
th(style='min-width: 200px;') Item Quantity
//th(style='min-width: 200px;') Action
tbody
tr
td(style='vertical-align: top; width:150px')
select.form-control(name='menu' , class = 'menu_list' , id="menu_item" )
option(value='' ) ---Select---
each val in orders
option(name = 'food' ,value=' #{val.availability_type }' , selected = selected) #{val.availability_type }
td(class='item_select' style='vertical-align: top; width:150px')
select.form-control(name="" )
option(value='' ) ---Select---
td(style='vertical-align: top; width:150px')
input.form-control(type='text',placeholder='Enter the quantity' value='', name='order_qty')
//td(style='vertical-align: top; width:150px')
//button.btn.btn-success.color(type='button',value='addrow',name='add',class='addRow') Add
// 
//button.btn.btn-success.color(type='button',value='removerow',name='remove' id='deleteRow') Delete
.pull-left
.form-group
button#forgot-btn.btn.btn-success.color(type='submit',value='ordered',name='submit') Submit
 
button#forgot-btn.btn.btn-success.color(type='cancel',value='cancelled',name='cancel') Cancel
.pull-right
.form-group
button.btn.btn-success.color(type='button',value='addrow',name='add' , id="addRow") Add
 
button.btn.btn-success.color(type='button',value='removerow',name='remove' id='deleteRow') Delete
My ajax code :
script.
$.noConflict();
$(document).ready(function() {
$('.menu_list').change(function() {
var menus = $('.menu_list').val();
console.log($(this).val());
var t = $(this);
t.parents('tr').find('.item_select').html("kkkkk");
$.ajax({
url: '/submenu',
type: "POST",
dataType: 'json',
data: {"menu": menus},
success: function(item) {
var selectList = "<select name='item' class='form-control'>";
$.each(item, function(key, value){
//var product_id = value.product_id;
selectList += "<option value='"+value.product_id+"'>"+value.product_name+"</option>";
});
selectList +="</select>";
t.parents('tr').find('.item_select').html(selectList);
}
});
});
$('#addRow').click(function(){
alert("table");
$('#item_table tbody').append($("#item_table tbody tr:last").clone());
});
Can you tell us what exactly is not working in the ajax call ? The select list is not getting fill or you don't even execute something on the server ?
Here a couple comment about the code :
$('.menu_list').change(function() {
var menus = $(this).val(); //If you have menu_list on each row use the current one
console.log($(this).val());
var t = $(this);
t.parents('tr').find('.item_select').html("kkkkk");
$.ajax({
url: '/submenu',
type: "POST",
dataType: 'json',
data: {"menu": menus},
success: function(item) {
var selectList = "<select name='item' class='form-control'>";
//it's json so don't need scan the array like this. You can access the property directly.
$.each(item, function(){
selectList += "<option value='"+this.product_id+"'>"+this.product_name+"</option>";
});
selectList +="</select>";
t.parents('tr').find('.item_select').html(selectList);
}
});
});
Also, you have to bind the event when your creating html dynamically :
$('#addRow').click(function(){
$('#item_table tbody').append($("#item_table tbody tr:last").clone());
$("#item_table tbody tr:last").find('.menu_list').change(function() {
var menus = $(this).val(); //If you have menu_list on each row use the current one
console.log($(this).val());
var t = $(this);
t.parents('tr').find('.item_select').html("kkkkk");
$.ajax({
url: '/submenu',
type: "POST",
dataType: 'json',
data: {"menu": menus},
success: function(item) {
var selectList = "<select name='item' class='form-control'>";
//it's json so don't need scan the array like this. You can access the property directly.
$.each(item, function(){
selectList += "<option value='"+this.product_id+"'>"+this.product_name+"</option>";
});
selectList +="</select>";
t.parents('tr').find('.item_select').html(selectList);
}
});
});
});
I have found the solution for my problem which I posted yesterday.
script.
$.noConflict();
$(document).ready(function() {
Items();
$('#addRow').click(function(){
alert("table");
$('.item_menu tbody').append($(".item_menu tbody tr:last").clone());
alert("enter23")
Items();
});
$("#orderdate").click(function(){
alert("welcome");
var date = new Date();
var currentMonth = date.getMonth();
var currentDate = date.getDate();
var currentYear = date.getFullYear();
var minDate=new Date(currentYear, currentMonth, currentDate);
$("#orderdate").datepicker({dateFormat:'yy-mm-dd', beforeShowDay:
});
});
function Items(){
$('.menu_list').on('change',function() {
var menus = $(this).val();
console.log($(this).val());
var t = $(this);
t.parents('tr').find('.item_select').html("kkkkk");
$.ajax({
url: '/submenu',
type: "POST",
dataType: 'json',
data: {"menu": menus},
success: function(item) {
var selectList = "<select name='item' class='form-control'>";
$.each(item, function(key, value){
//var product_id = value.product_id;
selectList += "<option value='"+value.product_id+"'>"+value.product_name+"
</option>";
});
selectList +="</select>";
t.parents('tr').find('.item_select').html(selectList);
}
});
});
}
FOUND THE PROBLEM:
Just needed to replace row.replaceWith with row.parent().parent().replaceWith().
I'm trying to update a WebGrid row with JQuery after I've clicked a submit button in a modal dialog, but the updated data just append the last column, not the whole row as I want.
Let's say I want the table to look like this after the update:
ID - Name - Phone number
But with my code it looks like this after the update:
ID - Name - ID - Name - Phone number
as it just replaces the last column with a new table within the last column with the updated data.
I'm getting the correct data as output, but in the wrong place in the row.
Please help! :)
Here is the Javascript code:
$(function () {
$("#edit-event-dialog").dialog({
resizable: false,
height: 300,
modal: true,
autoOpen: false,
open: function (event, ui) {
var objectid = $(this).data('id');
$('#edit-event-dialog').load("/Events/CreateEditPartial", { id: objectid });
},
buttons: {
"Save": function () {
var ai = {
EventID: $(this).data('id'),
Name: $("#Name").val(),
Phone: $("#Phone").val()
};
var json = $.toJSON(ai);
var row = $(this).data('row');
$.ajax({
url: $(this).data('url'),
type: 'POST',
dataType: 'json',
data: json,
contentType: 'application/json; charset=utf-8',
success: function (data) {
var grid = $(".pretty-table");
row.replaceWith('<tr><td>' + data.ev.EventID + '</td><td>' +
data.ev.Name + '</td><td>' + data.ev.Phone + '</td></tr>');
},
error: function (data) {
var data = data;
alert("Error");
}
});
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$("#event-edit-btn").live("click", function () {
var url = $(this).attr('controller');
var row = $(this);
var id = $(this).attr('objectid');
$("#edit-event-dialog")
.data('id', id)
.data('url', url)
.data('row', row)
.dialog('open');
event.stopPropagation();
return true;
});
You have set row to $(this) which is your case represents $("#event-edit-btn") ( btw i suggest using classes as identifiers, but it's not a problem ). Later on you replace your actual button with the new <tr> set but what you actually need to do is traverse to the tr parent of that button and replace it.
Change your live handler to:
$("#event-edit-btn").live("click", function () {
var url = $(this).attr('controller');
var row = $(this).closest('tr'); //or use some #id or .class assigned to that element
var id = $(this).attr('objectid');
$("#edit-event-dialog")
.data('id', id)
.data('url', url)
.data('row', row )
.dialog('open');
event.stopPropagation();
return true;
});