Forum

November 2nd, 2014
A A A
Avatar

Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





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

The forums are currently locked and only available for read only access
sp_Feed Topic RSS sp_TopicIcon
Problem with datepicker on navigator
08/02/2010
10:44
Avatar
Felix
Member
Members
Forum Posts: 8
Member Since:
22/10/2009
sp_UserOfflineSmall Offline

Hi, i need to display an editable date on jqgrid, but firebug throw me this error: "uncaught exception: Missing instance data for this datepicker" I read that it's an id problem, but i don't know how to solve :S The problem is when the user clicks on the day, with the keyboard works fine. This is the code, if it helps:

<style>
    .ui-datepicker {z-index:1200;}
  </style>
   
<script type="text/javascript">
    jQuery(document).ready(function()
    {
        jQuery("#list_convicts").jqGrid(
        {
            url:'../cgi-bin/jqgrid/jqgrid.cgi?t=4',
            datatype: 'json',
            width: 800,
            imgpath: 'css/images/jqgrid/ui-darkness',
            colNames: ['Name', 'Surname', 'Id', 'Cell', 'Entry Date', 'Exit Date', 'Birth Date', 'Notes', 'Taken Photo'],
            colModel: [
              {name: 'Name', index: 'Name', width: 250, align: 'center', sortable: false, editable: true},
              {name: 'Surname', index: 'Surname', width: 250, hidden: true, align: 'center', sortable: false, editable: true},
              {name: 'ID', index: 'Id_Convicts', width: 250, align: 'center', sortable: false, editable: true},
              {name: 'Cell', index: 'Cell', width: 250, align: 'center', sortable: false, editable: true},
              {name: 'Entry Date', index: 'Entry_Date', width: 250, editable:true,
                    editoptions:{size:12, dataInit:function(el){
                        $(el).datepicker({dateFormat:'yy-mm-dd'});
                        },
                    },
                },
              {name: 'Exit Date', index: 'Exit_Date', width: 250, editable:true,
                    editoptions:{size:12, dataInit:function(el1){
                        $(el1).datepicker({dateFormat:'yy-mm-dd'});
                        },
                    },
                },
              {name: 'Birth Date', index: 'Birth_Date', width: 250, editable:true,
                    editoptions:{size:12, dataInit:function(el2){
                        $(el2).datepicker({dateFormat:'yy-mm-dd'});
                        },
                    },
                },
              {name: 'Notes', index: 'Notes', width: 250, align: 'center', sortable: false, editable: true},
              {name: 'Taken Photo', index: 'Taken_Photo', width: 250, align: 'center', sortable: false, editable: false, formatter: 'showlink', formatoptions: {baseLinkUrl: '/cgi-bin/take_photo.cgi'}}
            ],
            jsonReader: {
                root: "rows",
                page: "page",
                total: "total",
                records: "records",  
                repeatitems: true,
                cell: "cell",
                id: "id"
                },
            savekey: true,
            pager: jQuery('#pager_convicts'),
            rowNum: 10,
            rowList: [10, 20, 30],
            viewrecords: true,
            editurl: '../cgi-bin/jqgrid/jqgrid_edit_convicts.cgi',
            caption: 'SISP-UCE Configurator'
            }
        ).navGrid("#pager_convicts",{view:false, search:false, refresh:false},
        {recreateForm: true, closeAfterEdit: true, savekey: [true, 13], mtype: 'GET'},
        {recreateForm: true, closeAfterAdd: true, savekey: [true, 13], mtype: 'GET'},
        {recreateForm: true, closeAfterDel: true, savekey: [true, 13], mtype: 'GET'}
        );
    }
    );
</script>

10/02/2010
15:54
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

Not sure but the problem is discussed. The problem is that on dataInit function the element is not in the DOM, but before some days I found elegant solution to call the datapicker in editing modules.

Construct your dataInit the following way

dataInit: function (el)

{

  setTimeout(function()

  {

     $(el).datepicker();

  },

  10);

}

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

11/02/2010
18:34
Avatar
Felix
Member
Members
Forum Posts: 8
Member Since:
22/10/2009
sp_UserOfflineSmall Offline

Sorry Tony, thanks for your help, but not work to me :S Gives me the same error 🙁

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
83 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