Support Forum Softcomplex logo
About Us  | Services  | Download  | Order  | Support  | |
| Search | Today's Posts | Stats | Board Rules | Not logged in [ Login | Register ]
go to bottom
Last active: Never

Printable Version | Subscribe | Add to Favourites   Post new thread
Author: Subject: Force onChange()
adrianh
Newbie

Posts: 1
Registered: 3/22/2010
Member Is Offline
posted on 3/22/2010 at 09:13 PM Reply With Quote
Force onChange()


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 ...
}
View User's Profile View All Posts By User U2U Member
Eran
Newbie

Posts: 1
Registered: 5/24/2010
Member Is Offline
posted on 5/24/2010 at 08:53 PM Reply With Quote
make sure to add this to the original script!


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!
View User's Profile View All Posts By User U2U Member
danwguy
Junior Member

Posts: 2
Registered: 7/26/2011
Location: Portland
Member Is Offline
posted on 7/26/2011 at 04:25 AM Reply With Quote

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.
View User's Profile View All Posts By User U2U Member
danwguy
Junior Member

Posts: 2
Registered: 7/26/2011
Location: Portland
Member Is Offline
posted on 7/26/2011 at 04:54 AM Reply With Quote

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.
View User's Profile View All Posts By User U2U Member
web4pdg
Junior Member

Posts: 3
Registered: 9/21/2011
Location: Georgia
Member Is Offline
posted on 9/21/2011 at 05:06 PM Reply With Quote
V5 Solution for onChange()


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
View User's Profile View All Posts By User U2U Member
pzh20
Junior Member

Posts: 3
Registered: 11/25/2011
Member Is Offline
posted on 11/25/2011 at 03:15 PM Reply With Quote
Where is function f_tcalHide


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
View User's Profile View All Posts By User U2U Member
web4pdg
Junior Member

Posts: 3
Registered: 9/21/2011
Location: Georgia
Member Is Offline
posted on 11/29/2011 at 05:43 PM Reply With Quote
f_tcalCancel - start on line 129


@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();
}
}
}
View User's Profile View All Posts By User U2U Member
pzh20
Junior Member

Posts: 3
Registered: 11/25/2011
Member Is Offline
posted on 12/1/2011 at 09:52 AM Reply With Quote

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
View User's Profile View All Posts By User U2U Member
web4pdg
Junior Member

Posts: 3
Registered: 9/21/2011
Location: Georgia
Member Is Offline
posted on 12/1/2011 at 01:07 PM Reply With Quote
Run your stack


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
View User's Profile View All Posts By User U2U Member
pzh20
Junior Member

Posts: 3
Registered: 11/25/2011
Member Is Offline
posted on 12/1/2011 at 01:10 PM Reply With Quote

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
View User's Profile View All Posts By User U2U Member
c1642363
Junior Member

Posts: 2
Registered: 5/31/2012
Member Is Offline
posted on 5/31/2012 at 11:41 AM Reply With Quote

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.
View User's Profile View All Posts By User U2U Member
Post new thread

Related Links:
Tigra Calendar
Product Demonstrations Live Demos
Free Download Free Download
Product Documentation Documentation
Support Forum Support Forum
 
Tigra Calendar PRO
Product Demonstrations Live Demos
Popup Calendar
Onpage Calendar
Modal Calendar
Product Documentation Documentation
Documenation Page
Change Log
Support Forum Technical Support
Support Forum
Customer Care System
Order Now ORDER NOW!
Add to Cart
View Cart
 

Go To Top


Powered by XMB 1.9.1 Nexus
Developed By Aventure Media & The XMB Group © 2002-2004