What JS Control Library Is Used?

With Chronoforms what JS control library is used? Been trying to get the value from a date/time box (what is it called?) but have not been able to get anything. Does Chronoforms use JQuery as its JS library?

Heard a number of reports that JQuery does not work well with other JS libraries no matter which method is used. Why was the decision made for Chronoforms to use JQuery instead of the JS library used by Joomla (Mootools)?

Hi digiPixel,

Errr . . .not sure what the question is. I agree that JQuery (whict a very nice library) causes problems in Joomla!.

. . . but . . . ChronoForms doesn't use JQuery at all. It uses the standard Joomla! MooTools library.

Bob

Does Chronoforms use the standard HTML controls or a set of controls supplied by a 3rd party JS library? If I knew what controls are used then I can populate a combo box that was created using the form wizard.

Hi digiPixel,

ChronoForms can use just about anything. If you use the Wizard then it builds standard HTML - look at the page source to see. I'm afraid that I just don't understand the question.

Bob

Actually some JS controls are used like the Date Picker for instance. Even though the Date Picker appears as a HTML control it is actually a JS control.

Been looking through the generated page source and couldn't determine what JS control library is used (maybe YUI?). Someone who does have JS experience, and has used Chronoforms might be able to shed some light on this. Without knowing what JS control library is used I will be unable to get the proper value from the Date Picker for instance.

What is concerning is that the JS is loaded before the HTML is displayed. I placed a "Load JS" after the "Show HTML" action, and expected the JS to be loaded after the HTML is displayed. Unfortunately the direct opposite has occurred. Is there any way to fix this?

Hi digiPixel,

Why is that concerning?

Bob

Hi digiPixel,
The Date/Time pickers are plain old text inputs, which are extended by the DatePicker Mootools class (check the js/datepicker/datepicker.js for details). The extension is done once the whole page has been loaded, using the MooTools onLoad event-handler.

As for the "Load JS" action, is merely adds script/scriptfile declarations to the current document object (using the JDocument->addScript() and JDocument->addScriptDeclaration() php methods), leaving the actual inclusion of the scripts to the site template. It will not write any custom <script> tags into the document body. Thus, the order (and placement) of any <script> elements is entirely up to Joomla and your site's Template.

If you need to delay your own javascript code until the page has completed loading, I suggest you use the Mootools onLoad event handler:

document.addEvent("load", function() {
//code to be executed here...
});

As for reading the value of a datetime input, the code below works just fine for me (input is named input_datetime_3):

alert(document.getElementsByName('input_datetime_3')[0].value);

/Fredrik

Tried using the Mootools addEvent function to run the code after the page is loaded but to no avail. Does not seem to work in the Chronoforms "Load JS" action. Is there a way to get custom JS code/script to be executed for each article (once it is loaded)?

Hi digiPixel,
It seems I made a mistake in my previous post; the event should be bound to the window, not to the document. Thus, the code should be as follows:

window.addEvent('load', function(e) {
  //do something here... alert() for test purpose
  alert("Document has been loaded");
});

/Fredrik

Assigning an event handler to the window load event did the trick. Which event do I hook into in order to get the selected date for the Date Picker? Tried to use the following code to do it but nothing happens:

datePicker.addEvent('select', datePickerSelect);

// .......
function datePickerSelect(date){
    alert('Selected Month: ' + date.getMonth() + 1);
}

Hi digiPixel,
Perhaps I should ask you this instead;
Are you trying to access the Form input, which holds the value being sent when the form is submitted?
Or, are you trying to access the JavaScript object used to extend the form input?
Or, are you trying to access some of the HTML-entities used to render the date-picker?

The Form input is a simple text input, it does not have a method named "getMonth()". It does have a property named "value", which will return a string representating the value of the Form input. You could, of course, use this value to create a new Date object, though this object is in no sense linked to the form input nor the datepicker.

Further, the event-mechanism does not pass a source-object to the callback function, but an event-object. The event object can be used to retrieve the source, but you cannot use the getMonth() method directly on hte event-object either.

Actually, what I think you are trying to do, is to access the onSubmit property of the created JS-object. As such, what you really want to do, is to use the "Custom Datepicker" action (make sure it's loaded before the "Show HTML" action, and configure a custom class for the picker) and add an option similar to this in the "extra options extension" entry:

onSubmit: function(date) {
  alert('Selected Month: ' + date.getMonth() + 1);
}

/Fredrik