Guriddo » Topic: jgGrid JS trying to show custom alert

jgGrid JS trying to show custom alert

Guriddo
jgGrid JS trying to show custom alert

This topic has 11 replies, 2 voices, and was last updated 3 years ago by guriddo.support.

Creator

Topic

January 8, 2022 at 6:01 pm #127809

Luigino

Participant

Hello everyone!

following this stackoverflow’s solution suggest:

https://stackoverflow.com/questions/24676643/how-to-display-custom-alert-boxes-in-custom-func-of-jqgrid

I was trying to make the same when opening form editor but using jqgrid js 5.6.0 and trying to implement a test sample it doesn’t even get inside the custom_func part if a field is empty since those console.log doesn’t fire in chrome:


jQuery(document).ready(function($){

var useCustomDialog = false, oldInfoDialog = $.jgrid.info_dialog;

$.extend($.jgrid,{
info_dialog: function (caption, content, c_b, modalopt) {
console.log('checking useCustomDialog: ' + useCustomDialog);
if (useCustomDialog) {
// display custom dialog
console.log('getting custom dialog...');
useCustomDialog = false;
alert(content);
} else {
console.log('getting old dialog...');
return oldInfoDialog.apply (this, arguments);
}
}
});

$("#test").jqGrid({
shrinkToFit: false,
forceFit: true,
datatype: "json",
url: '../myphp.php?op=1',
editurl: '../myphp.php?op=2',
colModel: [
{
label: 'ID',
name: 'ID',
width: 10,
jsonmap: 'ID',
key: true,
editable: false,
editrules : {
required: true,
edithidden: true
},
hidden: true,
editoptions:{
dataInit: function(element) {
$(element).attr("readonly", "readonly");
}
}
},
{
label: 'Field1',
name: 'Field1',
width: 300,
jsonmap: 'Field1',
editable: true,
editrules : {
required: true,
custom: true,
custom_func: function (val, nm, valref) {
console.log('tryig to get Field1 custom dialog here.... ' + val);
if ( isBlank(val) ) {
console.log('Field1 is empty');
useCustomDialog = true; // use custom info_dialog!
return [false, "Field1 is mandatory!"];
}
else {
console.log('Field1 is not empty');
return [true];
}
}
},
editoptions:{size:50}
},
{
label : 'Field2',
name: 'Field2',
width: 300,
jsonmap: 'Field2',
editable: true,
editrules : {
required: true,
custom: true,
custom_func: function (val, nm, valref) {
console.log('tryig to get Field2 custom dialog here.... ' + val);
if ( isBlank(val) ) {
console.log('Field2 is empty');
useCustomDialog = true; // use custom info_dialog!
return [false, "Field2 is mandatory!"];
}
//else {
// console.log('Field2 is not empty');
// return [true];
//}
}
},
editoptions:{size:50}
},
],
ondblClickRow: function(rowid) {
jQuery(this).jqGrid('editGridRow',
rowid,
{
editCaption: "Modify",
recreateForm:true,
dataheight: 500,
height: 600,
width: 680,
top: 40,
left: 170,
closeOnEscape: true,
onclickSubmit : function (options, postdata) {
if( confirm('Save this record (Y/N)?') ) {
console.log( JSON.stringify(postdata) );
return {
returndata : JSON.stringify( postdata )
};
}
},
closeAfterEdit: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
}
);
},
sortname: 'Field1',
sortorder : 'asc',
loadonce: true,
viewrecords: true,
height: 200,
rowNum: 10,
caption: "Test table",
pager: "#testPager"
});

function isBlank(str) { return (!!!str || /^\s*$/.test(str)); }

});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

jQuery(document).ready(function($){

var useCustomDialog = false, oldInfoDialog = $.jgrid.info_dialog;

$.extend($.jgrid,{

info_dialog: function (caption, content, c_b, modalopt) {

console.log('checking useCustomDialog: ' + useCustomDialog);

if (useCustomDialog) {

// display custom dialog

console.log('getting custom dialog...');

useCustomDialog = false;

alert(content);

} else {

console.log('getting old dialog...');

return oldInfoDialog.apply (this, arguments);

}

});

$("#test").jqGrid({

shrinkToFit: false,

forceFit: true,

datatype: "json",

url: '../myphp.php?op=1',

editurl: '../myphp.php?op=2',

colModel: [

{

label: 'ID',

width: 10,

jsonmap: 'ID',

key: true,

editable: false,

editrules : {

required: true,

edithidden: true

hidden: true,

editoptions:{

dataInit: function(element) {

$(element).attr("readonly", "readonly");

}

{

label: 'Field1',

width: 300,

jsonmap: 'Field1',

editable: true,

editrules : {

required: true,

custom: true,

custom_func: function (val, nm, valref) {

console.log('tryig to get Field1 custom dialog here.... ' + val);

if ( isBlank(val) ) {

console.log('Field1 is empty');

useCustomDialog = true; // use custom info_dialog!

return [false, "Field1 is mandatory!"];

}

else {

console.log('Field1 is not empty');

return [true];

}

editoptions:{size:50}

{

label : 'Field2',

width: 300,

jsonmap: 'Field2',

editable: true,

editrules : {

required: true,

custom: true,

custom_func: function (val, nm, valref) {

console.log('tryig to get Field2 custom dialog here.... ' + val);

if ( isBlank(val) ) {

console.log('Field2 is empty');

useCustomDialog = true; // use custom info_dialog!

return [false, "Field2 is mandatory!"];

}

//else {

// console.log('Field2 is not empty');

// return [true];

//}

}

editoptions:{size:50}

ondblClickRow: function(rowid) {

jQuery(this).jqGrid('editGridRow',

rowid,

{

editCaption: "Modify",

recreateForm:true,

dataheight: 500,

height: 600,

width: 680,

top: 40,

left: 170,

closeOnEscape: true,

onclickSubmit : function (options, postdata) {

if( confirm('Save this record (Y/N)?') ) {

console.log( JSON.stringify(postdata) );

return {

returndata : JSON.stringify( postdata )

};

}

closeAfterEdit: true,

errorTextFormat: function (data) {

return 'Error: ' + data.responseText

}

);

sortname: 'Field1',

sortorder : 'asc',

loadonce: true,

viewrecords: true,

height: 200,

rowNum: 10,

caption: "Test table",

pager: "#testPager"

});

function isBlank(str) { return (!!!str || /^\s*$/.test(str)); }

});

maybe I forgot something to consider or even on jqGrid 5.0+ changed something about custom_func and firing custom alerts?

Thanks in advance to all! Cheers! 🙂

This topic was modified 3 years ago by Luigino.
This topic was modified 3 years ago by Luigino.
This topic was modified 3 years ago by admin. Reason: code formating

Creator

Topic

Viewing 11 replies - 1 through 11 (of 11 total)

Author

Replies

January 10, 2022 at 1:35 pm #127817

guriddo.support

Participant

Hello Luigino,

Thank you for be back to us.

The problem you posted is different from the Stack-overflow thread of late 2014. The difference is that the Oleg’s example uses inline edit, while your code uses form edit, which is not the same.

If in your code you use inline edit instead of form edit – this code will work.

Moreover in the latest version of Guriddo is possible to define your own validation error dialog, which can replace info_dialog function. The grid parameter that do this is validationCell event. See the parameters in the docs. This event replaces the info_dialog in cell and inline editing.

The reason not to use info_dialog in form editing is that we have here a lot of pop up windows and we found this very inconvenient. We just set the error text on top of the form in red color (as can be seen). If you really want to display your dialog in formedit, you can call your own function before return [false,”message”] . It will run again with the displaying the text.

Kind Regards,

Will

Guriddo Support Team

January 11, 2022 at 2:12 pm #127824

Luigino

Participant

Hello Will!

Thank you for your answer… In fact I saw there’s that red box at the top but if the edit form has lot of fields where I have to scroll the form down then I wont see the red notice… I tried to find a solution like to scroll the form up if the red notice appears but I haven’t seen any docs about it so I was thinking about the dialog message at least I can see the alert immediately…. hope I was clear about explanation of my scenario…. 🙂

Is there maybe a way to scroll the form up if the red alert notice appear?…

Thanks!

Cheers!

Luigino

January 12, 2022 at 12:48 pm #127826

guriddo.support

Participant

Hello Luigino,

I will try to reproduce your problem and will replay ASAP I find a solution.

By the way, if you have a example it will be good to send it to us at: support at guriddo dot net.

Thank you

Kind Regards,

Will

Guriddo Support Team

January 12, 2022 at 2:50 pm #127828

guriddo.support

Participant

Hello Luigino,

We have fixed this problem and it will be available in our next release.

Until you wait for the fix you can change your code, so that the user can see the error in case there is scroll.

The idea is simple – before to return the error return [false, “Error”] use scrollTop(0) to scroll to the top of form. The id of every edit form if th grid is a combination of :

FrmGrid_ + the id of the grid.

In your demo this should look like:

custom_func: function (val, nm, valref) {
console.log('tryig to get Field1 custom dialog here.... ' + val);
if ( isBlank(val) ) {
console.log('Field1 is empty');

useCustomDialog = true; // use custom info_dialog!
$("#FrmGrid_test").scrollTop(0);
return [false, "Field1 is mandatory!"];
} else {
console.log('Field1 is not empty');
return [true];
}
}

custom_func: function (val, nm, valref) {

console.log('tryig to get Field1 custom dialog here.... ' + val);

if ( isBlank(val) ) {

console.log('Field1 is empty');

useCustomDialog = true; // use custom info_dialog!

$("#FrmGrid_test").scrollTop(0);

return [false, "Field1 is mandatory!"];

} else {

console.log('Field1 is not empty');

return [true];

}

Kind Regards,

Will

Guriddo Support Team

January 17, 2022 at 9:54 am #127842

Luigino

Participant

Hello Will!

Thank you for the suggest code about scrollTop(0)…. I was trying to do something like that but it didn’t worked till I figured I had to remove “required: true” out because only after a lot of search it would exclude custom_func thing… So now it scrolls up at the top! 🙂

And since I am here I would ask you a little thing:

Using “url: ” would call for loading data, “editurl: ” would call for edit on update.
Since I have also add button in pager I tried to use afterSubmit: function(response, postdata) to call an ajax passing postdata but checking on debug I see it calls first the editurl and I suspect it passes postdata to that editurl so in ajax call it’s empty…. I tried also to comment the editurl thing to fire only the afterSubmit but it returned an error “no url settled” in the form…. maybe is there a way to distinguish edit and add using the same editurl option?…

Thank you !
Cheers!

January 17, 2022 at 10:50 am #127843

Luigino

Participant

Already found…. jqgrid passes $_POST[‘oper’] which distinguish between add , edit and delete so I can play with it! Thanks anyway! 🙂

Cheers!

January 17, 2022 at 3:58 pm #127847

guriddo.support

Participant

Hello,

Glad to hear that you have found the solution.

You may refer our documentation here See the options and descriptions – especially chapter – What is posted to the server.

Kind Regards,

Will

Guriddo Support Team

January 17, 2022 at 5:18 pm #127849

Luigino

Participant

Hello again Will !!

Since I found that $_POST[‘oper’] to know which operation I am doing…. how’s called when passing the data?…

I tried with echoing $_POST[‘data’], $_POST[‘posdata’] , $_POST[‘editData’] ,$_POST[‘postdata’] but seems no one of them is the object with data passed to the php server because it returns “Notice: Undefined index: posdata in ….”

Thanks!

Cheers!

Luigino

This reply was modified 3 years ago by Luigino.

January 18, 2022 at 11:53 am #127852

Luigino

Participant

Hi again Will and all!

I think I encountered probably a bug on jqGrid but I am not sure…I wrote this code to refresh grid after submit the formedit:

ondblClickRow: function(rowid) {
jQuery(this).jqGrid(‘editGridRow’,
rowid,
{
editCaption: “Update”,
recreateForm:true,
dataheight: 180,
height: 270,
width: 350,
top: 40,
left: 170,
onclickSubmit : function (options, postdata) {
if( confirm(‘Update this record (Y/N)?’) ) {
//var rowid = postdata[this.id];
console.log( JSON.stringify(postdata) );
return {
// myParam: $(this).jqGrid(“getCell”, rowid, “URL”)
// test : “bla bla”
returndata : JSON.stringify( postdata )
//returndata : postdata
};
}
},
errorTextFormat: function (data) {
return ‘Error: ‘ + data.responseText
},
closeOnEscape: true,
closeAfterEdit: true,
afterSubmit : function() { $(“#grd-points_registry”).jqGrid(‘setGridParam’,{datatype:’json’}).trigger(‘reloadGrid’); }
//reloadAfterSubmit: false,
//aftersavefunc : function() { setTimeout( function() { $(“#grd-points_registry”).trigger(“reloadGrid”); }, 10); }
}
);
}

since I found searching on the web about .trigger(‘reloadGrid’) to force reloading after edit/add but the editform won’t close after triggered the reloadGrid thing and in debug on Chrome I see this:

jquery.jqGrid.min.js?ver=5.8.3:652 Uncaught TypeError: Cannot read properties of undefined (reading ‘0’)
at Object.complete (jquery.jqGrid.min.js?ver=5.8.3:652:172)
at fire (jquery.js?ver=3.6.0:3500:31)
at Object.fireWith (jquery.js?ver=3.6.0:3630:7)
at done (jquery.js?ver=3.6.0:9811:21)
at XMLHttpRequest.<anonymous> (jquery.js?ver=3.6.0:10057:9)

but all fields are numbers in this case …. same thing occurs also on edit and add inside navgrid pager…. any idea?

Thanks! Cheers!

Luigino

This reply was modified 3 years ago by Luigino.
This reply was modified 3 years ago by Luigino.

January 18, 2022 at 1:53 pm #127855

guriddo.support

Participant

Hello Luigino,

Can you please post in separate threads the above questions?

We recommend this since it is better for all of us.

In this thread we have three different problems, which is really annoying if someone search for certain solution.

Thank you.

Kind Regards,

Will

Guriddo Support Team

January 19, 2022 at 12:51 pm #127857

guriddo.support

Participant

When we speak of object we mean object set in the jQuery ajax JavScript function.

As docs say we post a name:value pair in the server. Suppose you have a field defined in colModel and named my_field and this field is editable, then you can get the posted value of that field in PHP like

..

$_POST['my_field']

..

$_POST['my_field']

Do this for the rest of editable fields.

Again, please post any new problem to a new thread

Regards,

Will

Guriddo Support Team

Author

Replies

Viewing 11 replies - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

Registered Users: 12,254
Forums: 7
Topics: 10,948
Replies: 23,148
Topic Tags: 324
Empty Topic Tags: 9

17 Users Online

Users: 2 Guests, 15 Bots

Stay connected with us in your favorite flavor!

jgGrid JS trying to show custom alert

Search Forum

Recent Replies

Forum Statistics

UserOnline