Board Logo

Force onChange()
adrianh - 3/22/2010 at 09:13 PM

Thanks Tigra folks for a sweet date picker. Here's a mod.

Often you have two date fields on a form, say arrival and departure. You want to auto-enter a later value in the departure field when the user enters an arrival date. You do this with an onChange handler in the arrival field, but Tigra cal doesn't fire the onChange event when it enters a value. To make your onChange() code run either when the user manually tabs out of the field, or when Trigra cal enters the value, modify Tigra cal like this:

function f_tcalHide (n_date) {
if (n_date) {
this.e_input.value = this.f_generDate(new Date(n_date));
//Make the element run the onChange code, if any.
if(this.e_input.onchange!=null){
this.e_input.onchange();
}
}
... more tigra code ...
}


Eran - 5/24/2010 at 08:53 PM

Quote:
Originally posted by adrianh
Thanks Tigra folks for a sweet date picker. Here's a mod.

Often you have two date fields on a form, say arrival and departure. You want to auto-enter a later value in the departure field when the user enters an arrival date. You do this with an onChange handler in the arrival field, but Tigra cal doesn't fire the onChange event when it enters a value. To make your onChange() code run either when the user manually tabs out of the field, or when Trigra cal enters the value, modify Tigra cal like this:

function f_tcalHide (n_date) {
if (n_date) {
this.e_input.value = this.f_generDate(new Date(n_date));
//Make the element run the onChange code, if any.
if(this.e_input.onchange!=null){
this.e_input.onchange();
}
}
... more tigra code ...
}

adrianh thank you, you save me a lot, but still left me some effort to do.
I tried to submit onchange so when i clicked the calender icon i was submited before the date changed and before i could even see the calder it self.


so i add some alerts to check out how it works.

this specific function is being executed twice
first, when you click the icon.
second when you close the calender.
so this is why your function went wrong.

just under your code there was the visuality thing.
which can distinguish between the first and them.


this is my fixed code -

calendar_eu.js (line 140):
Code:

function f_tcalHide (n_date) {
var old_var = this.e_input.value;
if (n_date)
this.e_input.value = this.f_generDate(new Date(n_date));

// no action if not visible
if (!this.b_visible){
return;
} else {
//declare onchange occur
if(this.e_input.onchange!=null && this.e_input.value!=old_var)
this.e_input.onchange();
}

.. more tigra code ...


the old_var is to disable the onchange if a user clicked the same date or closed the calender, which is clearly no change.


with this, the code works like onchange.
enjoy!


danwguy - 7/26/2011 at 04:25 AM

When I use the first code the onchange event fires as soon as I click on the calendar icon, but when I use the second code, the calendar doesn't show up. I click the calendar icon, it doesn't change to the "x" icon and I get an extra scroll down bar on the side of my page. Is there a way to make an onchange event run after you click on the date in the calendar? Please help out if you can, I really need to get this Advanced Find script done. Thank you.


danwguy - 7/26/2011 at 04:54 AM

Figured it out, runs perfectly as soon as you select a date from the calendar. here's the code...
function f_tcalHide (n_date) {
if (n_date) {
this.e_input.value = this.f_generDate(new Date(n_date));
this.e_input.onchange();
}


// no action if not visible
if (!this.b_visible)
return;

that fires it off right after you click the date.


web4pdg - 9/21/2011 at 05:06 PM

Using tcal.js for 1-simple-calendar in version 5.0 released 09/09/2011:

Locate: function f_tcalCancel ()

add this snip to the loop after f_tcalRemoveClass(a_inputs[n], s_pfx + 'Active');

if(a_inputs[n].onchange)
{
a_inputs[n].onchange();
}

Tested:
WIN XP SP 3 IE 8
WIN XP SP 3 Firefox 6.0.2


pzh20 - 11/25/2011 at 03:15 PM

I cannot see this function f_tcalHide in TCal

The closest is
function f_tcalCancel () {

var s_pfx = A_TCALCONF.cssprefix;
var e_cal = document.getElementById(s_pfx);
if (e_cal)
e_cal.style.visibility = '';
var a_inputs = f_tcalGetInputs();
for (var n = 0; n < a_inputs.length; n++)
{
f_tcalRemoveClass(a_inputs[n], s_pfx + 'Active');

but following the final solution didn't work for me, just called the onchange as soon as I clicked the calendar.
Can you help?

Regards
Pete


web4pdg - 11/29/2011 at 05:43 PM

@pzh20:

Be certain you're looking at the correct file for the correct version. The zip file "tigra_calendar.zip" version 5.0 released 09/09/2011 you download contains 3 different styles:

1-simple-calendar
2-customized-calendar
3-dynamically-created

Locate the javascript file "tcal.js" in the folder "1-simple-calendar"

Press the CTRL+F keyboard keys at the same time and in the "Find what:" field enter "function f_tcalCancel ()" (without quotes)

Line 129: // closes calendar and returns all inputs to default state
line 130: function f_tcalCancel () {

var s_pfx = A_TCALCONF.cssprefix;
var e_cal = document.getElementById(s_pfx);
if (e_cal)
e_cal.style.visibility = '';
var a_inputs = f_tcalGetInputs();
for (var n = 0; n < a_inputs.length; n++)
{
f_tcalRemoveClass(a_inputs[n], s_pfx + 'Active');

// added by Jim Bauer 2:37 PM 9/21/2011
// to trigger the onchange event on the filter tables

if(a_inputs[n].onchange)
{
a_inputs[n].onchange();
}
}
}


pzh20 - 12/1/2011 at 09:52 AM

I am definitely in the right place (see code below).
When I click on the calendar icon, the stack shows;

validateField(oEvent=undefined)ajaxformval.js (line 52)
f_tcalCancel ()tcal.js (line 142)
f_tcalOnClick ()tcal.js (line 173)

Seems like the onclick calls cancel which calls the onchange event.

This happens before the calendar is shown.

Here's the code;

function f_tcalCancel () {

var s_pfx = A_TCALCONF.cssprefix;
var e_cal = document.getElementById(s_pfx);
if (e_cal)
e_cal.style.visibility = '';
var a_inputs = f_tcalGetInputs();
for (var n = 0; n < a_inputs.length; n++)
{
f_tcalRemoveClass(a_inputs[n], s_pfx + 'Active');
if (a_inputs[n].onchange)
{
a_inputs[n].onchange();
}
}
}

Regards
Pete


web4pdg - 12/1/2011 at 01:07 PM

Just like fixing a car that has multiple error codes, fix the first one then try again.

Your stack trace shows you have an error in ajaxformval.js on line 52; oEvent is undefined. Sort that issues and try again.

I 've had no problems with the code as written, and since my unitial post have moved to Windows 7 IE 8


pzh20 - 12/1/2011 at 01:10 PM

The stack is in reverse order, TCal onclick then tcal cancel etc

TCAL is causing that problem calling the onchange before filling the field. If you call cancel before showing the calendar, then it will always call the onchange in the wrong order.

Regards
Pete


c1642363 - 5/31/2012 at 11:41 AM

Did anyone figure out how to get the onchange="this.form.submit();" working with the latest version of Tigra Calendar (tcal.js)?

Any help would be much appreciated.


Softcomplex: http://www.softcomplex.com/
Back to forum: http://www.softcomplex.com/forum/