Solved

JTable custom field not displaying datapicker

Posted on 2014-10-23
17
1,186 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
 

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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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 how to dynamically set the form action using jQuery.
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)

912 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now