I have a datatable that on row click takes the value of a column of that row and should redirect to a page which takes that value as parameter.
This is the code :
var selected=[];
$('#example tbody').on('click', 'tr', function (){
var id = this.id;
var index = $.inArray(id, selected);
if (index === -1)
{
selected.push(id);
} else
{
selected.splice(index, 1);
}
$(this).toggleClass('selected');
});
$('#example').click(function (){
var dataArr = [];
var rows = $('tr.selected');
var rowData = table.rows( rows ).data();
$.each($(rowData),function(key,value){
dataArr.push(value["id"]);
});
window.location ='users.html?-HERE THE ID SHOULD BE PASSED,which is in the array';
});
And then I have to map accordingly in the Spring controller depending on the id.
But houw should I pass that parameter?
Thank you
Store the position in the array you need in a variable and just concatenate it into the window.location call
var getArrayItem = dataArr[the_position_you_require]
window.location("users.html?" + getArrayItem);
Related
i have coded jQuery widget, which list all the record title in table which user can select of multiple records but with each record user to need to put value in text box.
now i want to built jQuery or JavaScript array where i can push record with each user click add and remove data if click remove against each button.
i want to push "recordId" & "ComponentSchemeMarks" to javaScript array selectedComponentList
var selectedComponentList = {
componentIndex: "",
componentMark:""
};
$(document).ready(function () {
//click on Confirm Component Scheme
$("#ComponentSchemeTable").on("click", ".k-grid-confirm", function () {
var recordId = $(this).data("id");
var ComponentSchemeMarks = $("#" + recordId + "_CM").val();
alert("recordId " + recordId + " ComponentSchemeMarks " + ComponentSchemeMarks);
//
$(this).hide();
$(this).siblings(".k-grid-input").hide();
$(this).siblings(".k-grid-cancel").hide();
$(this).siblings(".k-grid-Remove").show();
//add data to array//
});
$("#ComponentSchemeTable").on("click", ".k-grid-Remove", function () {
$(this).hide();
$(this).siblings(".k-grid-Add").show();
});
Your selectedComponentList is not an array... I guess you want something like this:
var selectedComponentArray = [];
$(document).ready(function () {
//click on Confirm Component Scheme
$("#ComponentSchemeTable").on("click", ".k-grid-confirm", function () {
var recordId = $(this).data("id");
var ComponentSchemeMarks = $("#" + recordId + "_CM").val();
alert("recordId " + recordId + " ComponentSchemeMarks " + ComponentSchemeMarks);
//
$(this).hide();
$(this).siblings(".k-grid-input").hide();
$(this).siblings(".k-grid-cancel").hide();
$(this).siblings(".k-grid-Remove").show();
//add data to array//
selectedComponentArray.push({ComponentIndex: recordId, ComponentMark: ComponentSchemeMarks});
});
$("#ComponentSchemeTable").on("click", ".k-grid-Remove", function () {
$(this).hide();
$(this).siblings(".k-grid-Add").show();
var recordId = $(this).data("id");
selectedComponentArray = $.grep(selectedComponentArray, function(value) {
return value.ComponentIndex != recordId;
});
});
...
}
Moreover you should give the buttons IDs and use them for binding the click listeners...
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 this HTML list
<ul id='usernameList'>
<li class='username'>John</li>
<li class='username'>Mark</li>
</ul>
and a form to add new names via AJAX, multiple add separated by commas. The response is a list with the names
[{name:David, newUser:yes}, {name:Sara, newUser:yes}, {name:Mark, newUser:no}]
I'm trying to insert this names sorted alphabetically in the list, like this example https://jsfiddle.net/VQu3S/7/
This is my AJAX submit
var form = $('#formUsername');
form.submit(function () {
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
dataType: "json",
beforeSend: function () {
//
},
success: function (data) {
var listUsernames = $('#usernameList');
var numUsernames = listUsernames.children().length;
$.each(data, function(i, user) {
if(user.newUser == "yes"){
var htmlUser = "<li class='username'>" + user.name + "</li>";
var added = false;
$(".username", listUsernames).each(function(){
if ($(this).text() > user.name) {
$(htmlUser).insertBefore($(this));
added = true;
}
});
if(!added)
$(htmlUser).appendTo($(listUsernames));
}
// HERE I DO alert('numUsernames')
// I get the same number of users before sending form
// How can I update here the value of listUsernames and numUsernames?
});
}
});
return false;
});
My question is, how I can update the value of listUsernames and numUsernames after adding an item?
You just need to update numUsernames at that point.
Add this where your comments are:
numUsernames = listUsernames.children().length;
listUsernames already has the updated children, as it's a reference to the parent element.
Edit: Re: your comment below:
This should probably work:
$(".username", listUsernames).each(function(){
if ($(this).text() > user.name) {
$(htmlUser).insertBefore($(this));
added = true;
return false; // stop `.each` loop.
}
});
First you don't need a double jQuery wrapping:
$(htmlUser).appendTo($(listUsernames));
listUsernames is already a jQuery object, so try:
$(htmlUser).appendTo(listUsernames);
And after every adding, you can update the numUsernames variable with:
numUsernames = listUsernames.children().length;
but this is not necessary because you can always access listUsernames.children().length in the success handler.
I update your JSFiddle
var listUsernames = $('#usernameList');
var numUsernames = listUsernames.children().length;
var data = [{name:'David', newUser:'yes'}, {name:'Sara', newUser:'yes'}, {name:'Mark', newUser:'no'}]
$.each(data, function(i, user) {
if(user.newUser == "yes"){
var htmlUser = "<li class='username'>" + user.name + "</li>";
var added = false;
$(".ingredient", listUsernames).each(function(){
if ($(this).text() > user.name) {
$(htmlUser).insertBefore($(this));
added = true;
}
});
if(!added)
$(htmlUser).appendTo($(listUsernames));
}
// HERE I DO alert('numUsernames')
// I get the same number of users before sending form
// How can I update here the value of listUsernames and numUsernames?
});
In Js
$(document).ready(function() {
var trxID=0;
var oHoldTable=$('#posHold').dataTable();
$('#posHold tbody tr').die();
$('#posHold tbody tr').live('dblclick', function () {
var oHData = oHoldTable.fnGetData( this );
trxID=oHData[0];
if (oHData[0] > 0) {
$.post("VoidTransaction",{
trxID:oHData[0]
},function(data){
if (data.rst==1) {
parent.tb_remove();
$('.btnPrint').trigger('click');
}
});
}else{
alert("No Transaction is Available for Void");
}
});
$(".btnPrint").printPage({
url: "receipts/void.jsp?trxID="+trxID,
attr: "href",
message:"Your document is being created"
})
});
I have declared a variable trxID and initialized with 0. Then assign a value in .live even handler such as:
trxID=oHData[0];
but query string still sending value = 0, not new assigned value.
url: "receipts/void.jsp?trxID="+trxID
how get updated value of trxID?
I have made a little change, hope it will work fine and I think no need to explain. You can guess easily!
$(document).ready(function() {
var trxID=0;
var oHoldTable=$('#posHold').dataTable();
$('#posHold tbody tr').off();
$('#posHold tbody tr').on('dblclick', function () {
var oHData = oHoldTable.fnGetData( this );
trxID=oHData[0];
if (oHData[0] > 0) {
$.post("VoidTransaction",{
trxID:oHData[0]
},function(data){
if (data.rst==1) {
parent.tb_remove();
$('.btnPrint').trigger('click');
}
});
}else{
alert("No Transaction is Available for Void");
}
$(".btnPrint").printPage({
url: "receipts/void.jsp?trxID="+trxID,
attr: "href",
message:"Your document is being created"
})
});
});
I have search field in my project, which uses $.post for getting the results for the search query.
My problem: When a user click on the search button it works correctly, however when a user click on the search button again, and then click on my thead columns jquery sorter duplicates it with the previous search shows in the table.
How can I solve this so my sorter function does not duplicate?
this is the Jquery code for the search button click.
$(function () {
$('#submitfloat').click(function () {
$('#loading').show();
setTimeout(function () { $("#loading").hide(); }, 800);
var SubjectTypes = $('#SubjectTypes').val();
var Teams = $('#Teams').val();
var Companies = $('#Companies').val();
var Consultants = $('#Consultants').val();
var PlannedDates = $('#PlannedDates').val();
var CompletedDates = $('#CompletedDates').val();
var DateTypes = $('#DateTypes').val();
var data = {
Subjectypes: SubjectTypes,
Companies: Companies,
Teams: Teams,
Consultants: Consultants,
PlannedDates: PlannedDates,
CompletedDates: CompletedDates,
DateTypes: DateTypes
};
var fromDate = $('#PlannedDates').val();
var endDate = $('#CompletedDates').val();
if (Date.parse(fromDate) > Date.parse(endDate)) {
jAlert("End date must be later than start date", "Warning");
return false;
} else {
$('#GoalcardSearchResult tbody').hide();
setTimeout(function () { $("#GoalcardSearchResult tbody").show(); }, 800);
$.post('#Url.Action("Search", "SearchNKI")', data, function (result) {
$("#GoalcardSearchResult tbody").empty();
result.forEach(function (goalcard) {
$("#GoalcardSearchResult tbody").append(
$('<tr/>', {
click: function () {
id = goalcard.Id;
var url = '#Url.Action("AnswerForm", "AnswerNKI", new { id = "__id__"})';
window.location.href = url.replace('__id__', id);
},
html: "<td>" + goalcard.Name + "</td><td>" + goalcard.Customer + "</td><td>" + goalcard.PlannedDate + "</td><td>" + goalcard.CompletedDate + "</td>"
}));
});
$("#GoalcardSearchResult").tablesorter();
});
return false;
}
});
});
Your help is appreciated, thanks in advance!
I'm guessing tablesorter has already been initialized before the user clicks on the sort button. In that case, replace this code:
$("#GoalcardSearchResult").tablesorter();
with this:
$("#GoalcardSearchResult").trigger('update');