I want to get a data value from the clicked td, which opens a modal with the informations of the user.
When I select all users, everything works fine..
But when I want to search a specific user (table is not displayed until you search for a user), the modal shows not the right data..
I created a JS array with the usernames and put it in my data value. The innerHTML from the column is the first- and last name of the user.
The problem is that when I click on the name the modal shows the information from the FIRST user in my array (grouped by lastname ASC)
I'm using the DataTables plugin. Here's a short example of my drawCallback function:
"drawCallback": function(settings) {
var api = this.api();
var rows = api.rows({
page: 'current'
}).nodes();
var last = null;
api.column(0, {
page: 'current'
}).data().each(function(group, i) {
if (last !== group) {
var groupName = api.row(i).data();
$(rows).eq(i).before(
'<tr class="group"><td style="font-weight: bold;" data-value="'+groupName[0]+'" data-toggle="modal" data-target="#profileModal" class="tdPerson" colspan="1">'+group+'</td><td colspan="5"></td></tr>'
);
last = group;
}
});
}
Here's my AJAX request:
$('.table').on('click', '.tdPerson', function(event) {
id = $(this).attr('data-value');
$.ajax({
url: "getData.php",
data: {
type: "getPersonModal",
data: id
},
type: "POST",
success: function(data) {
$('#profileModalContent').html(data);
}
});
});
Related
i have a modal form where user enters details like for an item,the modal has a select option where user can select the item category there are savings,i have no problem here.the issue is when the user want to edit some details of the item.u will require to retrieve the item.here is my issue i cant get the category saved transferred back to the select option then set is as selected.
how can i do this.//id of selected category is the one that is inserted to db.
$.get(
'../Inventory/PopulateCategory',
{},
function (data) {
$('#Category').empty();
$.each(data,
function (key, value) {
$('#Category')
.append($("<option />")
.val(value.StockCategoryId)
.html(value.StockCategory));
});
},
'json'
);
this is how i retrieve the value,am able to load input but cant get to load the correct saved item to select.
function EditCompanyRecord(_id) {
var url = "/Inventory/itemEdit?_id=" + _id;
$.ajax({
type: "GET",
url: url,
dataType: "json",
success: function (data) {
var obj = JSON.parse(data);
var currcat = obj.StockCategory;
var _vat = obj.taxcode;
$("#StockId").val(_id);
$("#Description").val(obj.description);
$('#Category').val(obj.StockCategory)
//i need to reverse and get save id as the selected category
}
});
}
The value persisted as category for the stock is the category name/title.
While the options input uses the category id for the value.
In order to have persisted category for the stock selected in the category options, you need to find the id for the persisted category for the stock in the category options. e.g.
const $objStockCategoryId = $('#Category').children().filter((i, e) =>
e.text === obj.StockCategory);
Then select the category option
$('#Category').val($objStockCategoryId.val());
However, I suggest to set a data attribute in the category options for a succinct DOM query. e.g.
$.each(data,
function (key, value) {
$('#Category')
.append(
$("<option />")
.attr('data-name', value.StockCategory)
.val(value.StockCategoryId)
.html(value.StockCategory)
);
});
const $objStockCategoryId = $('#Category')
.find(`[data-name="${obj.StockCategory}"]`);
$('#Category').val($objStockCategoryId.val());
Here is my issue that I'm facing on Ajax autocomplete search. When I'm typing something on textbox its showing list of result perfectly. But when I reload the page and type for first time on textbox the list of result is not showing. Again if I backspace the text and retype, the result is showing on result list. This issue is not specific to any browser. I am not getting the cause of issue.
var locationSearchListData = [];
var termTemplate = "<span class='ui-autocomplete-term'>%s</span>";
var postData = '{cultureId : "DE"}';
// Ajax call to run webservice's methods.
$.ajax({
url: "/asmx/SearchLocations.asmx/GetAutoCompleteSearchLocations",
type: "POST",
data: postData,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (responseData) {
if (responseData != undefined && responseData != null && responseData.d.length > 0) {
for (i = 0; i < responseData.d.length; i++) {
// Add resopnse data in location search lis, this list is used as a source for autocomplete textbox.
locationSearchListData.push({
label: responseData.d[i].locationData,
latitude: responseData.d[i].latitude,
longitude: responseData.d[i].longitude
});
}
}
$(".autosearch").autocomplete({
// Set source for textbox, this source is used in autocomplete search.
source: locationSearchListData,
// Set required minimum length to display autocomplete list.
minLength: 3,
// Set required delay time to display autocomplete list.
delay: 500,
// Define selection method displaying results for the location selected.
select: function (event, ui) {
// Get the current selected item from the autocomplete list.
$(this).val(ui.item);
// Call display selected item for currently selected element.
displaySelectedItem(ui.item);
},
// Handle the autocomplete search suggestions menu opening.
open: function () {
// This method is used to highlight the searched text in the search items.
$('ul: li: a[class=ui-corner-all]').each(function () {
// Get each text value.
var text1 = $(this).text();
// Get user input from the search box.
var val = $("#<%= txtOrtOderPlz.ClientID %>").val();
// Get the regular expression to match.
re = new RegExp(val, "i");
// Match with the regular expression value.
matchNew = text1.match(re);
// Find the reg expression, replace it with bold font.
text = text1.replace(matchNew, ("<span style='font-weight:bold;color:#4D4D4D;'>") + matchNew + ("</span>"));
// Add the cutomised html in autocomplete searchlist.
$(this).html(text);
});
},
// On every search clear the data.
search: function (event, ui) {
// Clear results when no location found.
$("#<%= hdnSearchResultLatitude.ClientID %>").val('');
$("#<%= hdnSearchResultLongitude.ClientID %>").val('');
}
})
}
});
I put my AJAX here and it is working fine in Firefox but not working in Google Chrome. I try but it fails to work in Google Chrome.
<script type="text/javascript">
function action()
{
jQuery('#dyntable').on('click','.quickview',(function()
{
//show all hidden row and remove all showed data
jQuery(this).parents('table').find('tr').each(function()
{
jQuery(this).removeClass('hiderow');
if(jQuery(this).hasClass('togglerow'))
jQuery(this).remove();
});
var parentRow = jQuery(this).parents('tr');
var numcols = parentRow.find('td').length + 1; //get the number of columns in a table. Added 1 for new row to be inserted
//this will insert a new row next to this element's row parent
parentRow.after('<tr class="togglerow"><td colspan="'+numcols+'"><div class="toggledata"></div></td></tr>');
var toggleData = parentRow.next().find('.toggledata');
parentRow.next().hide();
var qty = jQuery(this).val();
jQuery.ajax({
async: false,
type: 'GET',
url: "ajax/tabledata.php?id="+jQuery(this).val(),
success:function(data){
toggleData.append(data);
parentRow.next().fadeIn();
}
});
/*var qty = jQuery(this).val();
var url = "ajax/tabledata.php?id="+qty;
//get data from server
jQuery.post(url,function(data){
toggleData.append(data); //inject data read from server
parentRow.next().fadeIn(); //show inserted new row
//hide this row to look like replacing the newly inserted row
});*/
return false;
}));
//for map view of dropdown
jQuery('#dyntable').on('click','.showmap',(function()
{
//show all hidden row and remove all showed data
jQuery(this).parents('table').find('tr').each(function()
{
jQuery(this).removeClass('hiderow');
if(jQuery(this).hasClass('togglerow'))
jQuery(this).remove();
});
var parentRow = jQuery(this).parents('tr');
var numcols = parentRow.find('td').length + 1; //get the number of columns in a table. Added 1 for new row to be inserted
var qty = jQuery(this).val();
var url = "Mapdashboard.php?id="+qty;
//this will insert a new row next to this element's row parent
parentRow.after('<tr class="togglerow"><td colspan="'+numcols+'"><div class="toggledata"></div></td></tr>');
var toggleData = parentRow.next().find('.toggledata');
parentRow.next().hide();
//get data from server
jQuery.post(url,function(data){
toggleData.append(data); //inject data read from server
parentRow.next().fadeIn(); //show inserted new row
//hide this row to look like replacing the newly inserted row
});
return false;
}));
}
</script>
Try to add to ajax parameters the dataType too:
dataType: "html"
I have a sendData.JSON.aspx page that sends data to the textfile called Print.txt.
but i want to Print only data that is selected on my web-browser page/HTML PAGE ,NOTE on that web-browser page
the DATA is selected on a TABLE . and i have a checkbox column so i want to print all selected ROWS accordingly.
Here is my code to print:
function printSelected()
{
var selecteditems = hesto.ui.getselecteditems('#scannedlabeltable');
$.each(selecteditems, function (i, item) {
$.ajax({
url: SEND_TO_TEXTFILE_PAGE
, data: "serial=" + item.id
, datatype: 'json'
, success: function (status) {
if (status.error) {
alert(status.error);
}
}
, error: hesto.ajax.errorhandler
});
});
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;
});