Solved

JTable custom field not displaying datapicker

Posted on 2014-10-23
17
1,275 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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 

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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

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…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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…

752 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