Solved

JTable custom field not displaying datapicker

Posted on 2014-10-23
17
1,163 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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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…

757 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

19 Experts available now in Live!

Get 1:1 Help Now