jqGrid afterclickPgButtons bind? - jqgrid

I use jqGrid 4.9.3-pre - free(Oleg). I do not use navbar panel. How do I get at Ajax after afterclickPgButtons?
I found a lot of similar themes, but almost all the navbar to panel. similar question, but jqGridAddEditAfterClickPgButtons callback I not found
ondblClickRow: function (rowid) {
$(this).jqGrid("viewGridRow", rowid, {
beforeShowForm: function(form) {
$.ajax({
url: 'apt_data.php',
method: 'POST',
dataType: 'json',
data: {id: rowid},
success: function(data) {
$(html_var).insertBefore($('#trv_tm', form));
}
});
},
caption: "Details of the invice"
});
},

If you need to have some close to the code, but with viewGridRow, then you need just change the name of jQuery event to jqGridViewBeforeShowForm and jqGridViewAfterclickPgButtons. You can use jqGridViewClickPgButtons which will be triggered before jqGridViewAfterclickPgButtons, but it will be needed more seldom:
$("#list").jqGrid({
// ...
}).bind ("jqGridViewBeforeShowForm", function (e, $form, oper) {
alert("In jqGridViewAfterShowForm");
}).bind ("jqGridViewClickPgButtons", function (e, whichButton, $form, rowid) {
alert("In jqGridViewClickPgButtons: " + whichButton + ", rowid=" + rowid);
}).bind ("jqGridViewAfterclickPgButtons", function (e, whichButton, $form, rowid) {
alert("In jqGridViewAfterclickPgButtons: " + whichButton + ", rowid=" + rowid);
});
see https://jsfiddle.net/OlegKi/cnyon3tt/2/

Related

passing a parameter in url ajax

I have this code, how can I pass a parameter to data.php (data.php?q=) so when user digits something I can filter
the data and retrieve just a subset of records?
var company;
$(document).ready(function() {
$('.select-ajax').multiselect({
maxHeight: 400,
buttonWidth: '100%',
includeSelectAllOption: true,
enableFiltering: true
});
$.ajax({
type: 'GET',
url: '/data.php',
dataType: 'json',
success: function(data) {
$.each(data, function (i, item) {
company = item.company;
$('.select-ajax').append('<option value="' + item.company + '">' + item.company + '</option>');
console.log(item)
});
$('.select-ajax').multiselect('rebuild');
},
error: function() {
alert('error loading items');
}
});
$('.select-ajax').trigger( 'change' );
});
</script>```

Syntax Error JSON file read with AJAX

I am getting a syntax error for the square bracket '[' from my JSON file. Given below is the JSON.
[
{
"Product Name":"CPE 10281",
"Application":"Tyres",
"Weight":150,
"Cost to Produce":5000,
"Grade":"A",
"Cost to Sell":40000,
"Strength":100
},
{
"Product Name":"CPE 10282",
"Application":"computers",
"Weight":250,
"Cost to Produce":4000,
"Grade":"H",
"Cost to Sell":25000,
"Strength":90
}
]
I am trying to use AJAX to read my JSON file.
$.ajax({
url: "dataProductJSON.json",
dataType: 'json',
mimeType: "application/json",
success: function (data) {
var item = [];
$.each(data, function (key, val) {
item.push('<li id="' + key + '">' + val + '</li>');
});
$('<ul/>', {
'class': 'interest-list',
html: item.join('')
}).appendTo('body');
},
});
I am running my html from Eclipse with Apache Geronimo as the server.
Please Help.
You are missing a { in the below line
success: function (data)
Make it
success: function (data) {
Edit
You are having parsing the data incorrectly , do it as below
$.ajax({
url: "test.html",
dataType: 'json',
mimeType: "application/json",
success: function (data) {
var item = [];
$.each(data, function (key, val){
$.each(val, function (innerKey, innerValue){
item.push('<li id="' + innerKey + '">' + innerValue + '</li>');
});
});
$('<ul/>', {
'class': 'interest-list',
html: item.join('')
}).appendTo('body');
},
});
You need to use 2 loop , one for the array and the other to loop through the object property
I tried things and it is working fine

jquery validation ie8 submitHandler not firing

I have this script:
var pUserName = $('#UserName'), pPassword = $('#Password'), pRememberMe = $('#RememberMe');
$(function () {
Initialize();
$('#logon button').click(function () {
$.event.trigger('AjaxButtonClick', this);
$.event.trigger('AjaxLoader', '#logon .form');
$('form#logon').valid();
});
});
function Initialize() {
returnUrl = getParameterByName('ReturnUrl');
$('form#logon').validate({
submitHandler: function (form) {
logOn(returnUrl);
},
invalidHandler: function (e, validator) {
showAnimatedStatusText($('.message'), 'Please fill in the required fields highlighted below.', 'warning');
$.event.trigger('AjaxButtonError');
$.event.trigger('AjaxLoader');
},
errorPlacement: function (error, element) {
return true;
},
highlight: function (element) {
$(element).parent().addClass("input-validation-error");
},
unhighlight: function (element) {
$(element).parent().removeClass("input-validation-error");
}
});
};
function logOn(returnUrl) {
$.ajax({
url: '/_Account/LogOn',
type: 'POST',
data: '{ "UserName": "' + pUserName.val() + '", "Password": "' + pPassword.val() + '", "RememberMe": ' + pRememberMe.is(':checked') + ', "returnUrl": "' + returnUrl + '" }',
dataType: 'text json',
contentType: 'application/json; charset=utf-8',
success: function (o) {
if (o.success) {
// Success code
$.event.trigger('AjaxButtonSuccess');
} else {
showAnimatedStatusText($('.message'), o.error, 'error');
$.event.trigger('AjaxButtonError');
}
$.event.trigger('AjaxLoader');
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
showAnimatedStatusText($('.message'), 'An uncaught error has occurred, please contact your system administrator (Error code: 150).', 'error');
$.event.trigger('AjaxButtonError');
$.event.trigger('AjaxLoader');
}
});
};
this works fine in all browsers except ie8. For some reason the submitHandler is never called. If I enter incorrect data invalidHandler is called fine, but submitHandler never is.
Does anyone know why?
Cheers,
/r3plica
The problem was that using a element in ie8 does not appear to work the same way as an even if you supply . To get this working I had to change my validation script to look like this:
$('#logon').validate({
submitHandler: function () {
// Do not submit
},
invalidHandler: function (e, validator) {
showAnimatedStatusText($('.message'), 'Please fill in the required fields highlighted below.', 'warning');
$.event.trigger('AjaxButtonError');
$.event.trigger('AjaxLoader');
},
errorPlacement: function (error, element) {
return true;
},
highlight: function (element) {
$(element).parent().addClass("input-validation-error");
},
unhighlight: function (element) {
$(element).parent().removeClass("input-validation-error");
}
});
and the calling button click look like this:
$('#logon button').click(function () {
$.event.trigger('AjaxButtonClick', this);
$.event.trigger('AjaxLoader', '#logon .form');
if ($('#logon').valid()) {
logOn(returnUrl);
};
});
doing it this way fixed the issue.

A grid containing href link links to all the rows instead of a particular row

I have made a grid in which the last column contains a link resend. This link resends the mail to the party mentioned in the row. when I click on that link it resend the mail to all the parties in the grid instead of that particular row.. Below is my code
$(document).ready(
function(){
var lastselsignStatusGrid ;
var signStatusGridurl = $('#signatureStatus_ctxPath').val() + '/rest/retrieveSignStatus';
var maintainsignStatusGridurl = $('#signatureStatus_ctxPath').val() + '/rest/maintainSignStatus';
jQuery('#signStatusGrid').jqGrid({
url: signStatusGridurl,
datatype: "json",
mtype: 'GET',
altRows:true,
loadonce: true,
colNames:['Name','Role','Signature status','Due Date','Signed Date','Email','EmailId','PartyId'],
colModel:[
{name: 'name',index: 'name',sortable:true,search:true,sorttype: 'text', searchoptions:{sopt:['eq','ne','bw','cn']}},
{name: 'role',index: 'role',sortable:true,search:true,sorttype: 'text', searchoptions: {sopt:['eq','ne','bw','cn']}},
{name: 'signed',index: 'signed',sortable:false,search:false,sorttype: 'text'},
{name: 'dueDate',index: 'dueDate',formatter: 'date', formatoptions: {"srcformat":"m/d/Y","newformat":"m/d/Y"}, unformat: unformat, sortable:false,search:false,sorttype: 'date'},
{name: 'signedDate',index: 'signedDate',sortable:false,search:false,sorttype: 'text'},
{name: 'resend',index: 'resend',formatter: customLinksignStatusresend, unformat: unformat, sortable:false,search:false,sorttype: 'text'},
{name: 'emailAddress',index: 'emailAddress',hidden:true },
{name: 'partyId',index: 'partyId',hidden:true}
],
rowNum:10,
rowList:[10,20,30],
multiselect: false,
viewrecords: true,
emptyrecords: "No record present",
imagepath: "js/themes/redmond/images",
autowidth: true,
caption:''
});
function customLinksignStatusresend(cellValue, options, rowObject){
if (rowObject[2] == "Complete") {
return "";
} else{
//return rowObject[5];
//return '' + "Resend";
return '<a href="#Test">' + cellValue + '<a>';
}
}
$(document).delegate('#signStatusGrid .jqgrow td a[href="#Test"]', 'click', function ()
{
var localGridData = $("#signStatusGrid").jqGrid('getGridParam','data');
var postData = JSON.stringify(localGridData);
var rowDetails="";
var selectedRows = $('#signStatusGrid').jqGrid('getGridParam', 'data');
var rowsArray = new Array();
var rowId = '';
for(var i=0;i<localGridData.length;i++)
{
var rowData = localGridData[i];
var emailAddr = rowData.emailAddress;
var partyId = rowData.partyId;
rowDetails += partyId+":" +emailAddr+ ',';
$.ajax({
url: $('#signatureStatus_ctxPath').val()+'/rest/resendEmail?partyId='+ partyId,
datatype : "json",
contentType: "application/json; charset=utf-8",
type:"POST",
error : function(xhr, textStatus, errorThrown) {
alert(errorThrown);
},
success : function(response, textStatus, xhr) {
alert("email resent successfully");
}
});
HideLayer();
}
});
You are looping through all the rows in the grid which is why the mail is being sent to all the recipients.
The easy way to do what you are trying to achieve would be to use the onCellSelect function of jqGrid to send mail to the particular Row emailId. You can add additional conditions so that it gets called only when the link is clicked.
onCellSelect: function (id, iCol, cellContent, e) {
if (iCol == 'resend') {
var emailAddr = $('#signStatusGrid').getCell(id, 'emailAddress');
var partyId = $('#signStatusGrid').getCell(id, 'partyId');
var rowDetails += partyId + ":" + emailAddr + ',';
$.ajax({
url: $('#signatureStatus_ctxPath').val() + '/rest/resendEmail?partyId=' + partyId,
datatype: "json",
contentType: "application/json; charset=utf-8",
type: "POST",
error: function (xhr, textStatus, errorThrown) {
alert(errorThrown);
},
success: function (response, textStatus, xhr) {
alert("email resent successfully");
}
});
}
},
Another alternate solution seems to be to create a function with sending mail and setting a link which will call the same with respective partyId in the gridComplete function of jqGrid :
gridComplete: function () {
var ids = jQuery("#signStatusGrid").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
var partyId = $('#signStatusGrid').getCell(ids[i], 'partyId');
var be = "<a href='#Test' onclick='sendMail(" + partyId + ");' >View Contract</a>";
jQuery("#signStatusGrid").jqGrid('setRowData', ids[i], {
editct: be
});
}
},
var sendMail(partyId) {
$.ajax({
url: $('#signatureStatus_ctxPath').val() + '/rest/resendEmail?partyId=' + partyId,
datatype: "json",
contentType: "application/json; charset=utf-8",
type: "POST",
error: function (xhr, textStatus, errorThrown) {
alert(errorThrown);
},
success: function (response, textStatus, xhr) {
alert("email resent successfully");
}
});
}

JSON, jQueryUI Autocomplete, AJAX - Cannot get data when array is not local

I have searched stackoverflow, as well as the web for some insight into how to get the jQueryUI Autocomplete plugin working with my JSON data, and I'm at a loss. I had it working like a charm with a local data array. I was able to pull values and build html.
I ran into a problem when I had to pull JSON form this source:
/Search/AjaxFindPeopleProperties2
?txtSearch=ca pulls up the test data that I am trying to loop through, when I type in 'ca' to populate the autocomplete list. One of the problems is that ?term=ca is appended to the url instead of ?txtSearch=ca and I'm not sure how to change it.
This is an example of the data:
{
"MatchedProperties": [
{
"Id": 201,
"Name": "Carlyle Center",
"Description": "Comfort, convenience and style are just a few of the features you'll ...",
"ImageUrl": "/Photos/n/225/4989/PU__ThumbnailRS.jpg"
}
]
}
...and here is the ajax call I'm trying to implement:
$(document).ready(function () {
val = $("#txtSearch").val();
$.ajax({
type: "POST",
url: "/Search/AjaxFindPeopleProperties2",
dataType: "json",
data: "{}",
contentType: "application/json; charset=utf-8",
success: function (data) {
$('#txtSearch').autocomplete({
minLength: 0,
source: data.d, //not sure what this is or if it's correct
focus: function (event, ui) {
$('#txtSearch').val(ui.item.MatchedProperties.Name);
$.widget("custom.catcomplete", $.ui.autocomplete, {
//customize menu item html here
_renderItem: function (ul, item) {
return $("<li class='suggested-search-item" + " " + currentCategory + "'></li>")
.data("item.autocomplete", item)
.append($("<a><img src='" + item.MatchedProperties.ImageUrl + "' /><span class='name'>" + item.MatchedProperties.Name + "</span><span class='location'>" + "item.location" + "</span><span class='description'>" + item.MatchedProperties.Description + "</span></a>"))
.appendTo(ul);
},
_renderMenu: function (ul, items) {
var self = this,
currentCategory = "Properties Static Test Category";
$.each(items, function (index, item) {
if (item.category != currentCategory) {
ul.append("<li class='suggested-search-category ui-autocomplete-category'>" + currentCategory + "</li>");
//currentCategory = item.category;
}
self._renderItem(ul, item);
});
}
}//END: widget
//return false;
},
select: function (event, ui) {
$('#txtSearch').val(ui.item.MatchedProperties.Name);
//$('#selectedValue').text("Selected value:" + ui.item.Abbreviation);
return false;
}
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
}); //END ajax
}); //END: doc ready
and I'm initializing here:
<script type="text/javascript">
//initialize autocomplete
$("#txtSearch").autocomplete({ //autocomplete with category support
/*basic settings*/
delay: 0,
source: "/Search/AjaxFindPeopleProperties2",
autoFocus: true,
minLength: 2 //can adjust this to determine how many characters need to be entered before autocomplete will kick in
});
//set auto fucus
$("#txtSearch").autocomplete("option", "autoFocus", true);
</script>
any help would be great...
Thanks!

Resources