1. You continue to include onclickSubmit event in the grid parameters. This is wrong. This event is a part of add/edit/del actions of the form methods. You need to include this in the methods parameters.

2. If you use only datepicker, does this work? If you use only timepicker does this work? Is the problem when you use both?

Regards

Tony

Is there no solution to the above problem?

tony said:

Hello,

1. onclickSubmit is not a part from jqGrid parameters, but of the particular add/edit/del parameters. Refer to docs how to use this.

2. Do not see what pickdatetime3 function do.

Regards

Tony

Dear Tony

In my last post, pickdatetime3 function below (also shown above):
function pickdatetime3(id){
jQuery(”#”+id+”_amount3″,”#list3″).timepickr({convention:12});
jQuery(”#”+id+”_invdate3″,”#list3″).datepicker({dateFormat:”yy-mm-dd”});
}

It simply set cell 1 to display jquery datepicker, and cell 2 to display jquery timpicker.

1. onclickSubmit is not a part from jqGrid parameters, but of the particular add/edit/del parameters. Refer to docs how to use this.

2. Do not see what pickdatetime3 function do.

Regards

Tony

I await your kind response.

Thank you for your time.

However, there is a new related-issue now. IE 8.0 works properly, but FF 3.10 and Safari 3.1.2 doesn't. IE 7.0 & Opera 9.6.4 crashed on load.

I need to call different functions for 2 different cell? What I did was to set one cell to popup the jquery-datepicker, while another to popup the jquery-timepickr (In future, I may also want to yet another cell to pop up colorpicker too).

I have included my full script here, excluding the unnecessary html tag.

<link rel="stylesheet" type="text/css" media="screen" href="jscripts/jqGrid/themes/modern/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jscripts/jqGrid/themes/jqModal.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/excite-bike/ui.datepicker.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/timepickr/ui.core.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/timepickr/ui.timepickr.css" />

<script src="jscripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="jscripts/jquery.jqGrid.js" type="text/javascript"></script>
<script src="jscripts/jqGrid/js/jqModal.js" type="text/javascript"></script>
<script src="jscripts/jqGrid/js/jqDnR.js" type="text/javascript"></script>
<script src="jscripts/ui.datepicker.js" type="text/javascript"></script>
<script src="jscripts/jquery.utils.js" type="text/javascript"></script>
<script src="jscripts/jquery.strings.js" type="text/javascript"></script>
<script src="jscripts/jquery.anchorHandler.js" type="text/javascript"></script>
<script src="jscripts/jquery.ui.all.js" type="text/javascript"></script>
<script src="jscripts/ui.dropslide.js" type="text/javascript"></script>
<script src="jscripts/ui.timepickr.js" type="text/javascript"></script>

<script type="text/javascript">
    function pickdates2(id){
        jQuery("#"+id+"_post_date2","#list2").datepicker({dateFormat:"yy-mm-dd"});
    }
    function pickdatetime3(id){
        jQuery("#"+id+"_amount3","#list3").timepickr({convention:12});
        jQuery("#"+id+"_invdate3","#list3").datepicker({dateFormat:"yy-mm-dd"});
    }
    $(document).ready(function(){
        $("#list2").jqGrid({
                url:'index-controller2.php',
                datatype: "json",
                colNames:['SN','Title', 'Date', 'Type','Notes'],
                colModel:[
                        {name:'ID2', index:'ID', width:20, editable:false, sortable:true, editoptions:{readonly:true,size:10}},
                        {name:'post_title2', index:'post_title', width:90, sortable:true, editable:true, editoptions:{size:25}},
                        {name:'post_date2', index:'post_date', width:90, sortable:true, editable:true, editoptions:{size:25}},
                        {name:'post_type2', index:'post_type', width:80, sortable:true, editable: true, edittype:"select", editoptions:{value:"pg:Page;attach:attachment;rev:revision"}},
                        {name:'guid2', index:'guid', width:250, sortable:false, editable: true, edittype:"textarea", editoptions:{rows:"5",cols:"40"}}
                ],
                onSelectRow: function(id){
                    if(id && id !== lastsel2){
                        $('#list2').restoreRow(lastsel2);
                        $('#list2').editRow(id,true,pickdates2);
                        lastsel2 = id;
                    }
                },
                onclickSubmit: function(id){
                    jQuery("#list2").editGridRow("new", {afterSubmit: function(xhr, postdata){return [true]}, url: 'edit2.php?p=1'});
                },
                rowNum:20,
                rowList:[20,40,60],
                imgpath: "jscripts/jqGrid/themes/modern/images",
                pager: $('#pagernav2'),
                sortname: 'ID',
            viewrecords: true,
            sortorder: "desc",
            caption:"My Post",
            editurl:"edit2.php",
            height:400,
            width:780
        }).navGrid('#pagernav2', {edit:false,del:false,search:false});
        jQuery("#saveme2").click( function() {
            //jQuery("#list2").saveRow(lastsel2, false, 'clientArray');
            jQuery("#list2").saveRow(lastsel2);
        });
        jQuery("#delme2").click( function() {
            jQuery("#list2").delGridRow(lastsel2, {afterSubmit: function(xhr, postdata){return [true]}, url: 'edit2.php?p=0'});
        });

       
        $("#list3").jqGrid({
                url:'index-controller3.php',
                datatype: "json",
                colNames:['ID','Date', 'Name', 'Amount','Notes'],
                colModel:[
                        {name:'id3', index:'id', width:20, editable:false, sortable:true, editoptions:{readonly:true, size:10}},
                        {name:'invdate3', index:'invdate', width:90, sortable:true, editable:true, editoptions:{size:25}},
                        {name:'name3', index:'name', width:90, sortable:true, editable:true, editoptions:{size:25}},
                        {name:'amount3', index:'amount', width:80, sortable:true, editable: true, editoptions:{size:25}},
                        {name:'note3', index:'note', width:250, sortable:false, editable: true, edittype:"textarea", editoptions:{rows:"5", cols:"40"}}
                ],
                onSelectRow: function(id){
                    if(id && id !== lastsel3){
                        $('#list3').restoreRow(lastsel3);
                        $('#list3').editRow(id,true,pickdatetime3);
                        lastsel3 = id;
                    }
                },
                onclickSubmit: function(id){
                    jQuery("#list3").editGridRow("new", {afterSubmit: function(xhr, postdata){return [true]}, url: 'edit3.php?p=1'});
                },
                rowNum:5,
                rowList:[5,15,45],
                imgpath: "jscripts/jqGrid/themes/modern/images",
                pager: $('#pagernav3'),
                sortname: 'id',
            viewrecords: true,
            sortorder: "desc",
            caption:"My Post 3",
            editurl:"edit3.php",
            height:200,
            width:780
        }).navGrid('#pagernav3', {edit:false,del:false,search:false});
        jQuery("#saveme3").click( function() {
            jQuery("#list3").saveRow(lastsel3);
        });
        jQuery("#delme3").click( function() {
            jQuery("#list3").delGridRow(lastsel3, {afterSubmit: function(xhr, postdata){return [true]}, url: 'edit3.php?p=0'});
        });
    });
</script>
In my body, I have ~
    <table id="list3" class="scroll" cellpadding="0" cellspacing="0"></table>
    <div id="pagernav3" class="scroll" style="text-align:center;"></div>
    <input type="button" id="saveme3" value="Save Row" /> <input type="button" id="delme3" value="Delete Row" />

What happened was, IE 8.0 pop up the datepicker and timepickr of #list3 correctly, but FF will popup the datepicker only  after I have clicked timepickr field to had it popped up. This wierd issue also occurs in Safari 3.1.2. Strangely both IE 7.0 and Opera 9.6.4 crashed on load (I have to do CTRL+ALT+DEL to terminate the windows).

You make two calls to editRow with diffrent edit functions

            onSelectRow: function(id){
                if(id && id !== lastsel3){
                    $('#list3').restoreRow(lastsel3);
                    $('#list3').editRow(id,true,pickdates3);
                    $('#list3').editRow(id,true,picktime3);
                    lastsel3 = id;
                }

Regards

Tony

tony said:

Hello,

What do you use. - inline edit, form edit, cell edit.

Howe do you attach a datepicker. If possible publish the code.

Regards

Tony

var lastsel2;
var lastsel3;

function picktime3(){
    jQuery("#"+id+"_amount3","#list3").timepickr({convention:12});
}
function pickdates2(id){
    jQuery("#"+id+"_post_date2","#list2").datepicker({dateFormat:"yy-mm-dd"});
}
function pickdates3(id){
    jQuery("#"+id+"_invdate3","#list3").datepicker({dateFormat:"yy-mm-dd"});
}

$(document).ready(function(){
    $("#list2").jqGrid({
            url:'index-controller2.php',
            datatype: "json",
            colNames:['SN','Title', 'Date', 'Type','Notes'],
            colModel:[
                    {name:'ID2', index:'ID', width:20, editable:false, sortable:true, editoptions:{readonly:true,size:10}},
                    {name:'post_title2', index:'post_title', width:90, sortable:true, editable:true, editoptions:{size:25}},
                    {name:'post_date2', index:'post_date', width:90, sortable:true, editable:true, editoptions:{size:25}},
                    {name:'post_type2', index:'post_type', width:80, sortable:true, editable: true, edittype:"select", editoptions:{value:"pg:Page;attach:attachment;rev:revision"}},
                    {name:'guid2', index:'guid', width:250, sortable:false, editable: true, edittype:"textarea", editoptions:{rows:"5",cols:"40"}}
            ],
            onSelectRow: function(id){
                if(id && id !== lastsel2){
                    $('#list2').restoreRow(lastsel2);
                    $('#list2').editRow(id,true,pickdates2);
                    lastsel2 = id;
                }
            },
            onclickSubmit: function(id){
                jQuery("#list2").editGridRow("new", {afterSubmit: function(xhr, postdata){return [true]}, url: 'edit2.php?p=1'});
            },
            rowNum:20,
            rowList:[20,40,60],
            imgpath: "jscripts/jqGrid/themes/modern/images",
            pager: $('#pagernav2'),
            sortname: 'ID',
        viewrecords: true,
        sortorder: "desc",
        caption:"My Post",
        editurl:"edit2.php",
        height:400,
        width:780
    }).navGrid('#pagernav2', {edit:false,del:false,search:false});
    jQuery("#saveme2").click( function() {
        //jQuery("#list2").saveRow(lastsel2, false, 'clientArray');
        jQuery("#list2").saveRow(lastsel2);
    });
    jQuery("#delme2").click( function() {
        jQuery("#list2").delGridRow(lastsel2, {afterSubmit: function(xhr, postdata){return [true]}, url: 'edit2.php?p=0'});
    });

   
    $("#list3").jqGrid({
            url:'index-controller3.php',
            datatype: "json",
            colNames:['ID','Date', 'Name', 'Amount','Notes'],
            colModel:[
                    {name:'id3', index:'id', width:20, editable:false, sortable:true, editoptions:{readonly:true, size:10}},
                    {name:'invdate3', index:'invdate', width:90, sortable:true, editable:true, editoptions:{size:25}},
                    {name:'name3', index:'name', width:90, sortable:true, editable:true, editoptions:{size:25}},
                    {name:'amount3', index:'amount', width:80, sortable:true, editable: true, editoptions:{size:25}},
                    {name:'note3', index:'note', width:250, sortable:false, editable: true, edittype:"textarea", editoptions:{rows:"5", cols:"40"}}
            ],
            onSelectRow: function(id){
                if(id && id !== lastsel3){
                    $('#list3').restoreRow(lastsel3);
                    $('#list3').editRow(id,true,pickdates3);
                    $('#list3').editRow(id,true,picktime3);
                    lastsel3 = id;
                }
            },
            onclickSubmit: function(id){
                jQuery("#list3").editGridRow("new", {afterSubmit: function(xhr, postdata){return [true]}, url: 'edit3.php?p=1'});
            },
            rowNum:5,
            rowList:[5,15,45],
            imgpath: "jscripts/jqGrid/themes/modern/images",
            pager: $('#pagernav3'),
            sortname: 'id',
        viewrecords: true,
        sortorder: "desc",
        caption:"My Post 3",
        editurl:"edit3.php",
        height:200,
        width:780
    }).navGrid('#pagernav3', {edit:false,del:false,search:false});
    jQuery("#saveme3").click( function() {
        //jQuery("#list3").saveRow(lastsel3, false, 'clientArray');
        jQuery("#list3").saveRow(lastsel3);
    });
    jQuery("#delme3").click( function() {
        jQuery("#list3").delGridRow(lastsel3, {afterSubmit: function(xhr, postdata){return [true]}, url: 'edit3.php?p=0'});
    });
});

The above is the code used, IE7 allows me to select on both grids, but FF will allow on the 1st grid, while the 2nd one will show after I have unfocus FF window and refocus back. Kinda wierd.

I apologise for my late reply as I was away to a foreign land with no internet for a few days.

What do you use. - inline edit, form edit, cell edit.

Howe do you attach a datepicker. If possible publish the code.

Regards

Tony

I have setup my page to display 3 grids, with datepicker on all 3 of them.

IE 7.0 renders them well, but firefox 3.0.8 doesn't.

FF is able to display them on date-textbox onfocus in the 1st grid, but it does not do so on the 2nd & 3rd grid - I have to unfocus my entire firefox window and refocus back and then click on the date-textbox of 2nd & 3rd grid in order to render the datepicker.

This issue occurs in Firefox (Windows) only.
Does anyone face such wierd issue?

I thank any of you who are reading this topic and trying to help too.

Regards
Christopher