Forum

November 2nd, 2014
A A A
Avatar
sp_LogInOut Log In

Lost password?
sp_Search Search
Advanced Search
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

sp_Search Search
Go to Bottom
The forums are currently locked and only available for read only access
This topic is locked No permission to create posts
sp_Feed Topic RSS sp_TopicIcon
How to make server side validation in inline nav jqgrid
18/01/2012
07:59
Avatar
zenixgrace
Jakarta
Member
Members
Forum Posts: 41
Member Since:
10/05/2010
sp_UserOfflineSmall Offline
Go to Top
1sp_EditHistory sp_Permalink sp_Print

Hi All,

Please Help me….

i want to add some server side validation in inline nav jqgrid

i want to make some validation that user cannot insert or edit NIK that already exists in database

how to configure the grid?

Grid Code like that :

        /***** Grid *****/
        var myGrid =  $('#listEmployee').jqGrid({
            url: '<?php echo site_url('employee/listing'); ?>',
            datatype: 'json',
            mtype: 'post',
            colNames: ['NIK','Name','Gender','Religion','Citizenship','Date of Birth','Place of Birth','Address','City','Jamsostek No.','Jamsostek Date','Permanent Employee Date','Position','NPWP','NPWP Date','Join Date','Resign Date','Resign Reason'],
            colModel: [
                {name:'emp_nik',index:'emp_nik',width:130,editable:true,editoptions:{size:8,maxlength:'20'}},
                {name:'emp_name',index:'emp_name',width:200,editable:true,editoptions:{maxlength:'40'},editrules:{required:true}},
                {name:'emp_gender',index:'emp_gender',width:110,editable:true,edittype:'select',editoptions:{value:'M:Male;F:Female;T:Transgendered'}},
                {name:'emp_religion',index:'emp_religion',width:77,editable:true,edittype:'select',editoptions:{value:'IS:Islam;CH:Christian;CA:Catholic;BU:Buddha;HI:Hindhu'}},
                {name:'emp_citizens',index:'emp_citizens',width:87,editable:true,edittype:'select',editoptions:{value:'ID:Indonesian;FO:Foreign'}},
                {name:'emp_birthdate',index:'emp_birthdate',width:90,editable:true,editoptions:{                    
                    size:4,readonly:true,
                    dataInit: function(element) {
                        $(element).datepicker({
                            dateFormat: 'mm/dd/yy',
                            maxDate: '-15Y',
                            changeMonth: true,
                            changeYear: true
                        });
                    }
                },editrules:{required:true}},
                {name:'emp_birthplace',index:'emp_birthplace',width:100,editable:true,editoptions:{maxlength:'40'},editrules:{required:true}},
                {name:'emp_address',index:'emp_address',width:200,editable:true,editoptions:{maxlength:'80'},editrules:{required:true}},
                {name:'emp_city',index:'emp_city',width:100,editable:true,editoptions:{maxlength:'40'},editrules:{required:true}},
                {name:'emp_jamsos',index:'emp_jamsos',width:100,editable:true,editoptions:{size:8,maxlength:'11'}},
                {name:'emp_jamsosdate',index:'emp_jamsosdate',width:90,editable:true,editoptions:{
                    size:4,readonly:true,
                    dataInit: function(element) {
                        $(element).datepicker({
                            dateFormat: 'mm/dd/yy',
                            maxDate: 'now',
                            changeMonth: true,
                            changeYear: true
                        });
                    }
                }},
                {name:'emp_fixeddate',index:'emp_fixeddate',width:90,editable:true,editoptions:{
                    size:4,readonly:true,
                    dataInit: function(element) {
                        $(element).datepicker({
                            dateFormat: 'mm/dd/yy',
                            maxDate: 'now',
                            changeMonth: true,
                            changeYear: true
                        });
                    }
                },editrules:{required:true}},
                {name:'emp_position',index:'emp_position',width:100,editable:true,editoptions:{maxlength:'40'},editrules:{required:true}},
                {name:'emp_npwp',index:'emp_npwp',width:100,editable:true,editoptions:{maxlength:'20'},editrules:{required:true}},
                {name:'emp_npwpdate',index:'emp_npwpdate',width:90,editable:true,editoptions:{
                    size:4,readonly:true,
                    dataInit: function(element) {
                        $(element).datepicker({
                            dateFormat: 'mm/dd/yy',
                            maxDate: 'now',
                            changeMonth: true,
                            changeYear: true
                        });
                    }
                },editrules:{required:true}},
                {name:'emp_joindate',index:'emp_joindate',width:90,editable:true,editoptions:{
                    size:4,readonly:true,
                    dataInit: function(element) {
                        $(element).datepicker({
                            dateFormat: 'mm/dd/yy',
                            maxDate: 'now',
                            changeMonth: true,
                            changeYear: true
                        });
                    }
                },editrules:{required:true}},
                {name:'emp_resigndate',index:'emp_resigndate',width:90,editable:true,editoptions:{
                    size:4,readonly:true,
                    dataInit: function(element) {
                        $(element).datepicker({
                            dateFormat: 'mm/dd/yy',
                            maxDate: 'now',
                            changeMonth: true,
                            changeYear: true
                        });
                    }
                }},
                {name:'emp_resignreason',index:'emp_resignreason',width:150,editable:true,editoptions:{maxlength:'70'}}
            ],
            autowidth: true,
            shrinkToFit: false,
            rowNum: 10,            
            rowList: [10,20,30],
            pager: jQuery('#pListEmployee'),
            sortname: 'emp_nik',
            height: '100%',            
            viewrecords: true,
            sortorder: 'asc',
            editurl: '<?php echo site_url('employee/update'); ?>',
            caption: 'Employees Listing'
        });
        $('#listEmployee').jqGrid('navGrid','#pListEmployee',{edit:false,add:false,del:true,search:false});
        $('#listEmployee').jqGrid('inlineNav','#pListEmployee',{add:false});
        $('#listEmployee').jqGrid('navButtonAdd','#pListEmployee',{caption:'Toggle',title:'Toggle Search Toolbar',buttonicon :'ui-icon-pin-s',
                onClickButton:function(){
                    myGrid[0].toggleToolbar()
                }
        });
        $('#listEmployee').jqGrid('navButtonAdd','#pListEmployee',{caption:'Clear',title:'Clear Search',buttonicon :'ui-icon-radio-off',
                onClickButton:function(){
                    myGrid[0].clearToolbar()
                }
        });
        $("#listEmployee").jqGrid('filterToolbar');

18/01/2012
11:23
Avatar
zenixgrace
Jakarta
Member
Members
Forum Posts: 41
Member Since:
10/05/2010
sp_UserOfflineSmall Offline
Go to Top
2sp_Permalink sp_Print

Hi All,

i use custom function to make validation but i have some problem at here..

error message it always show "custome function should return array"

seem like it's show before ajax request success..

can someone help me to fix this out or have any way to make a server side validation?

my grid configuration is like that :

<script type="text/javascript">
    var lastSelectedId;
    
    $(function() {
        /***** Grid *****/
        var myGrid =  $('#listEmployee').jqGrid({
            url: '<?php echo site_url('employee/listing'); ?>',
            datatype: 'json',
            mtype: 'POST',
            colNames: ['NIK','Name','Gender','Religion','Citizenship','Date of Birth','Place of Birth','Address','City','Jamsostek No.','Jamsostek Date','Permanent Employee Date','Position','NPWP','NPWP Date','Join Date','Resign Date','Resign Reason'],
            colModel: [
                {name:'emp_nik',index:'emp_nik',width:130,editable:true,editoptions:{size:8,maxlength:'20'},editrules:{required:true,custom:true,custom_func:NIKCheck}},
                {name:'emp_name',index:'emp_name',width:200,editable:true,editoptions:{maxlength:'40'},editrules:{required:true}},
                {name:'emp_gender',index:'emp_gender',width:110,editable:true,edittype:'select',editoptions:{value:'M:Male;F:Female;T:Transgendered'}},
                {name:'emp_religion',index:'emp_religion',width:77,editable:true,edittype:'select',editoptions:{value:'IS:Islam;CH:Christian;CA:Catholic;BU:Buddha;HI:Hindhu'}},
                {name:'emp_citizens',index:'emp_citizens',width:87,editable:true,edittype:'select',editoptions:{value:'ID:Indonesian;FO:Foreign'}},
                {name:'emp_birthdate',index:'emp_birthdate',width:90,editable:true,editoptions:{                    
                    size:4,readonly:true,
                    dataInit: function(element) {
                        $(element).datepicker({
                            dateFormat: 'mm/dd/yy',
                            maxDate: '-15Y',
                            changeMonth: true,
                            changeYear: true
                        });
                    }
                },editrules:{required:true}},
                {name:'emp_birthplace',index:'emp_birthplace',width:100,editable:true,editoptions:{maxlength:'40'},editrules:{required:true}},
                {name:'emp_address',index:'emp_address',width:200,editable:true,editoptions:{maxlength:'80'},editrules:{required:true}},
                {name:'emp_city',index:'emp_city',width:100,editable:true,editoptions:{maxlength:'40'},editrules:{required:true}},
                {name:'emp_jamsos',index:'emp_jamsos',width:100,editable:true,editoptions:{size:8,maxlength:'11'}},
                {name:'emp_jamsosdate',index:'emp_jamsosdate',width:90,editable:true,editoptions:{
                    size:4,readonly:true,
                    dataInit: function(element) {
                        $(element).datepicker({
                            dateFormat: 'mm/dd/yy',
                            maxDate: 'now',
                            changeMonth: true,
                            changeYear: true
                        });
                    }
                }},
                {name:'emp_fixeddate',index:'emp_fixeddate',width:90,editable:true,editoptions:{
                    size:4,readonly:true,
                    dataInit: function(element) {
                        $(element).datepicker({
                            dateFormat: 'mm/dd/yy',
                            maxDate: 'now',
                            changeMonth: true,
                            changeYear: true
                        });
                    }
                },editrules:{required:true}},
                {name:'emp_position',index:'emp_position',width:100,editable:true,editoptions:{maxlength:'40'},editrules:{required:true}},
                {name:'emp_npwp',index:'emp_npwp',width:100,editable:true,editoptions:{maxlength:'20'},editrules:{required:true}},
                {name:'emp_npwpdate',index:'emp_npwpdate',width:90,editable:true,editoptions:{
                    size:4,readonly:true,
                    dataInit: function(element) {
                        $(element).datepicker({
                            dateFormat: 'mm/dd/yy',
                            maxDate: 'now',
                            changeMonth: true,
                            changeYear: true
                        });
                    }
                },editrules:{required:true}},
                {name:'emp_joindate',index:'emp_joindate',width:90,editable:true,editoptions:{
                    size:4,readonly:true,
                    dataInit: function(element) {
                        $(element).datepicker({
                            dateFormat: 'mm/dd/yy',
                            maxDate: 'now',
                            changeMonth: true,
                            changeYear: true
                        });
                    }
                },editrules:{required:true}},
                {name:'emp_resigndate',index:'emp_resigndate',width:90,editable:true,editoptions:{
                    size:4,readonly:true,
                    dataInit: function(element) {
                        $(element).datepicker({
                            dateFormat: 'mm/dd/yy',
                            maxDate: 'now',
                            changeMonth: true,
                            changeYear: true
                        });
                    }
                }},
                {name:'emp_resignreason',index:'emp_resignreason',width:150,editable:true,editoptions:{maxlength:'70'}}
            ],
            autowidth: true,
            shrinkToFit: false,
            rowNum: 10,            
            rowList: [10,20,30],
            pager: jQuery('#pListEmployee'),
            sortname: 'emp_nik',
            height: '100%',            
            viewrecords: true,
            sortorder: 'asc',
            editurl: '<?php echo site_url('employee/update'); ?>',
            caption: 'Employees Listing'
        });
        $('#listEmployee').jqGrid('navGrid','#pListEmployee',{edit:false,add:false,del:true,search:false});
        $('#listEmployee').jqGrid('inlineNav','#pListEmployee',{add:false});
        $('#listEmployee').jqGrid('navButtonAdd','#pListEmployee',{caption:'Toggle',title:'Toggle Search Toolbar',buttonicon :'ui-icon-pin-s',
                onClickButton:function(){
                    myGrid[0].toggleToolbar()
                }
        });
        $('#listEmployee').jqGrid('navButtonAdd','#pListEmployee',{caption:'Clear',title:'Clear Search',buttonicon :'ui-icon-radio-off',
                onClickButton:function(){
                    myGrid[0].clearToolbar()
                }
        });
        $("#listEmployee").jqGrid('filterToolbar');                 
    });
    
    function NIKCheck(value, colname) {
        var flag;
        $.ajax({
            url: "<?php echo site_url('employee/NIKCheck'); ?>",
            data: {emp_nik: value},
            type: 'POST',
            success: function(response) {
                if (response == 1)
                    return [false,'NIK Already Exists.'];
                else
                    return [true,''];
                flag = response;
            },
            complete: function() {                
                //if (flag == 1)
                    //alert(flag);
                    //return [false,"Testing"];
                //return [false,"Please enter value between 0 and 20"];
            }
        });
    }
</script>
19/01/2012
05:44
Avatar
zenixgrace
Jakarta
Member
Members
Forum Posts: 41
Member Since:
10/05/2010
sp_UserOfflineSmall Offline
Go to Top
3sp_Permalink sp_Print

any body can help me?

Cry

26/01/2012
09:59
Avatar
zenixgrace
Jakarta
Member
Members
Forum Posts: 41
Member Since:
10/05/2010
sp_UserOfflineSmall Offline
Go to Top
4sp_Permalink sp_Print

no body can help me

Cry

26/01/2012
10:48
Avatar
OlegK
Germany
Member
Members
Forum Posts: 1255
Member Since:
10/08/2009
sp_UserOfflineSmall Offline
Go to Top
5sp_Permalink sp_Print

Hello,

you call $.ajax inside of NIKCheck which works anynchronous per default. So if you don't want to reorgonize your current code you can add async: false options of $.ajax.

The better way is to implement server validation by returning error text with some HTTP error code during the saving of data itself. See the answer for example for more details.

Best regards
Oleg 

27/01/2012
11:45
Avatar
zenixgrace
Jakarta
Member
Members
Forum Posts: 41
Member Since:
10/05/2010
sp_UserOfflineSmall Offline
Go to Top
6sp_Permalink sp_Print

hi Oleg,

Yeah you true..

i only add async: false, and it's work

i read ur answer in stack overflow, and it's work but i have a some problem

save and cancel nagivation button is not disable when the dialog is show or close.

am i must disable it manually?

i use inlinenav in this case..

here is my code:

        $('#listEmployee').jqGrid('inlineNav','#pListEmployee',{add:false,editParams:{
            errorfunc: function(rowid, res) {
                $.jgrid.info_dialog($.jgrid.errors.errcap,
                    '<div class="ui-state-error">' + res.statusText + '</div>',
                    $.jgrid.edit.bClose,
                    {buttonalign: 'right'});
            }
        }});

Many thank for ur help and ur suggestion
u are my hero.... LaughLaughLaughLaughLaughLaughLaughLaughLaugh

Best Regards,
zenixgrace

This topic is locked No permission to create posts
sp_Feed All RSS
Go to top
Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
88 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1255

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11373

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10592

Posts: 31289

Newest Members:

, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.com

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information