Solved

JTable custom field not displaying datapicker

Posted on 2014-10-23
17
1,321 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 

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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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)
Suggested Courses

626 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