Solved

JTable custom field not displaying datapicker

Posted on 2014-10-23
17
1,236 Views
Last Modified: 2014-10-25
I have just started to use JTable and am getting to grips creating custom fields. I have created a custom input which when a user clicks should display the datepicker. Now I am using datepicker in ordinary html5 fields and that works well.

I thought perhaps that in a custom event, there should be some sort of click event to trigger the field, but still no datepicker. Could someone point out the correct way to call datepicker with custom input. Many thanks.

//function to amend and destroy boxes
$(function() {

  //Prepare jTable
  $('#setDestScheduleShow').jtable({
    title: 'Box Destruction Schedule',
    paging: true,
    pageSize: 5,
    pageSizes: [5, 10, 25, 50, 100, 250, 500],
    messages: {
      pagingInfo: 'Showing {0} to {1} of {2} records',
      editRecord: 'Edit Box Record'
    },
    sorting: true,
    defaultSorting: 'destroy_date ASC',
    actions: {
      listAction: '../users/destroySchedDisp.php?action=list',
      //createAction: '../users/destroySchedDisp.php?action=create',
      //updateAction: '../users/destroySchedDisp.php?action=update',
      //deleteAction: '../users/destroySchedDisp.php?action=delete'
    },
    fields: {
      Id: {
        key: true,
        title: 'Id',
        width: '2%',
        list: false
      },
      customer: {
        title: 'Co Ref',
        width: '10%',
        list: false
      },
      intake_date: {
        title: 'Intake Date',
        width: '14%',
        type: 'date',
        displayFormat: 'dd/mm/yy'
      },
      destroy_date: {
        title: 'Destroy Date',
        width: '14%',
        type: 'date',
        displayFormat: 'dd/mm/yy'

      },
      custref: {
        title: 'Box No',
        width: '14%'
      },
      input: {
        title: 'Amend Date',
        width: '12%',
        sorting: false,
        display: function(data) {
          return '<input id="destDateAmend" name="destDateAmend" type="text" placeholder="Amend Destroy date:" />';
        }
      }
    }
  });
  $('#setDestScheduleShow').jtable('load');
});


//date picker function
$(function() {
    $("#destDateAmend").click(function() {
      $('input[name="destDateAmend"]').datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: '2011:2037',
        dateFormat: 'dd/mm/yy',
        minDate: 0,
        defaultDate: null
      }).on('change', function() {
        $('input[name="destDateAmend"]').valid(); // triggers the validation test on change
      });
    });
});

Open in new window

0
Comment
Question by:peter-cooper
  • 11
  • 6
17 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40399188
did you tried :
 $('input[name="destDateAmend"]').change();
or :
 $('input[name="destDateAmend"]').blur();
0
 

Author Comment

by:peter-cooper
ID: 40399414
Where exactly would I place that code please leakim. Thanks
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40399644
line 76
0
The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

 

Author Comment

by:peter-cooper
ID: 40400061
I tried both ways but still the same. Even if I comments all the code from line 68 and put in an alert, it doesn't even fire that event. What am I missing here? Does jtable need some other form of code to trigger the event?

If it helps, here is a link to jtable of you need to look. Thanks

jtable site
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40400434
try this :
//function to amend and destroy boxes
$(function() {

  $.ajaxSucces(function() {
    alert("tableLoaded!\nstarting generating the jTable NOW");
    setTimeout(function() {
      $('input[name="destDateAmend"]').datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: '2011:2037',
        dateFormat: 'dd/mm/yy',
        minDate: 0,
        defaultDate: null
      });
    },250); // wait 1/4s before attaching event to input
  });

  //Prepare jTable
  $('#setDestScheduleShow').jtable({
    title: 'Box Destruction Schedule',
    paging: true,
    pageSize: 5,
    pageSizes: [5, 10, 25, 50, 100, 250, 500],
    messages: {
      pagingInfo: 'Showing {0} to {1} of {2} records',
      editRecord: 'Edit Box Record'
    },
    sorting: true,
    defaultSorting: 'destroy_date ASC',
    actions: {
      listAction: '../users/destroySchedDisp.php?action=list',
      //createAction: '../users/destroySchedDisp.php?action=create',
      //updateAction: '../users/destroySchedDisp.php?action=update',
      //deleteAction: '../users/destroySchedDisp.php?action=delete'
    },
    fields: {
      Id: {
        key: true,
        title: 'Id',
        width: '2%',
        list: false
      },
      customer: {
        title: 'Co Ref',
        width: '10%',
        list: false
      },
      intake_date: {
        title: 'Intake Date',
        width: '14%',
        type: 'date',
        displayFormat: 'dd/mm/yy'
      },
      destroy_date: {
        title: 'Destroy Date',
        width: '14%',
        type: 'date',
        displayFormat: 'dd/mm/yy'

      },
      custref: {
        title: 'Box No',
        width: '14%'
      },
      input: {
        title: 'Amend Date',
        width: '12%',
        sorting: false,
        display: function(data) {
          return '<input id="destDateAmend" name="destDateAmend" type="text" placeholder="Amend Destroy date:" />';
        }
      }
    }
  });

  $('#setDestScheduleShow').jtable('load');


});

Open in new window

0
 

Author Comment

by:peter-cooper
ID: 40401209
Hi Leakim

Unfortunately, it errosr with: TypeError: $.ajaxSucces is not a function. Thanks
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40402539
sorry, use : $(document).ajaxSuccess
and not : $.ajaxSucces
0
 

Author Comment

by:peter-cooper
ID: 40402592
Still selects just the first input. Totally ignores the second. Thanks
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40402651
where to see that?
could you create a test page with random data?
0
 

Author Comment

by:peter-cooper
ID: 40402661
I shall try. Thanks
0
 

Author Comment

by:peter-cooper
ID: 40402888
I have created a fiddle at: fiddle link but for some reason, it keeps giving comm error. I have disables firewall, so must be something else. Perhaps you can spot it. Thanks
0
 

Author Comment

by:peter-cooper
ID: 40402892
I do have access to json output data if it helps?
0
 

Author Comment

by:peter-cooper
ID: 40402894
If you have email, I am quite happy to supply access via password. Thanks
0
 

Author Comment

by:peter-cooper
ID: 40402943
I have set you up with temp site on my server@ TEMP SERVER Very basic styling but it is fully functional. Thank you for your help.
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40402969
Use this for cp.js :

$(function() {

   $(document).ajaxSuccess(function() { 
          $("input[name=MyName]").datepicker({
 		changeMonth: true,
		changeYear: true,
		yearRange: '2011:2037',
		dateFormat: 'dd/mm/yy',
		minDate: 0,
		defaultDate: null
	  });
   });

  //Prepare jTable
  $('#setDestScheduleShow').jtable({
    title: 'Box Destruction Schedule',
    paging: true,
    pageSize: 5,
    pageSizes: [5, 10, 25, 50, 100, 250, 500],
    messages: {
      pagingInfo: 'Showing {0} to {1} of {2} records',
      editRecord: 'Edit Box Record'
    },
    sorting: true,
    defaultSorting: 'destroy_date ASC',
    actions: {
      listAction: 'destroySchedDisp.php?action=list',
      //createAction: '../users/destroySchedDisp.php?action=create',
      //updateAction: '../users/destroySchedDisp.php?action=update',
      //deleteAction: '../users/destroySchedDisp.php?action=delete'
    },
    fields: {
      Id: {
        key: true,
        title: 'Id',
        width: '2%',
        list: false
      },
      customer: {
        title: 'Co Ref',
        width: '10%',
        list: false
      },
      intake_date: {
        title: 'Intake Date',
        width: '14%',
        type: 'date',
        displayFormat: 'dd/mm/yy'
      },
      destroy_date: {
        title: 'Destroy Date',
        width: '14%',
        type: 'date',
        displayFormat: 'dd/mm/yy'

      },
      custref: {
        title: 'Box No',
        width: '14%'
      },
      amend: {
        title: 'Amend Date',
        width: '12%',
        sorting: false,
        type: 'date',
        display: function(data) {
          return '<input type="text" name="MyName" class="myname" />';
        }
      },
      sendbtn: {
        title: 'Update',
        width: '12%',
        sorting: false,
        display: function(data) {
          var $button = $('<input type="button" class="destBtn" name="destUpdBtn" value="Update" />');

          $button.click(function() {
            var $temper = $('.hasDatepicker').val();
			//var $myname = $('input[name="MyName"]').val();
			
			alert($temper);
          });
          return $button;
        }
      }
    }
  });
  $('#setDestScheduleShow').jtable('load');
});

Open in new window

0
 

Author Comment

by:peter-cooper
ID: 40403670
Thannks leakim works a treat. Did you manage to follow up on my latest post at: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28544083.html, as I  need to get this sorted urgently. Thanks
0
 

Author Closing Comment

by:peter-cooper
ID: 40403671
Many thanks once again
0

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question