Forums

Joomla 1.5.23
Mootools 1.2 enabled
RocketTheme template
K2 2.4.1
ChronoForms v.4rc1.9
JoomFish 2.1.7

Link to form:

http://www.hoteloriente.com.br/index.php?option=com_chronoforms&chronoform=Feedback

Already tested it without the template and the datepicker still do not show. So I am sure I am doing something wrong somewhere. But I am not able to figure it out.

I tried some of the tricks here, among others, making a text field (at the bottom of the form) with a class like this:

date::{timePicker: true, inputOutputFormat: 'd/m/Y', allowEmpty:false }

Oh, btw - php on the server is 5.3 - don't think that should cause this, though...

Hi Oceanwatcher,

Your template (or some other component) is loading the jQuery JavaScript library. Out of the box jQuery isn't compatible with the MooTools library used by Joomla! and ChronoForms. You can use jQuery with MooTools in no-conflict mode. There are various ways of doing this. The simplest is to add a line of script in the ChronoForms Form JavaScript box:

jQuery.noConflict();

This will free the $ operator which is used by MooTools, so you may need to update your own javascripts to use the longer jQuery operator.

There is also a neat Joomla! 1.5 system plugin named SC jQuery that allows you to control on which pages jQuery is loaded, and will always load it in no-conflict mode.

Bob

First I tried to go to events for this form, add a "Load JS" and use the code you told me to use. No difference.

Then I found the plugin you mentioned and installed it. After enabling it, I tried again, and still no luck. I thought it might help to add an actual menu choice to see if it made a difference, so it is now in the menu, look for the hyphen on the right on http://www.hoteloriente.com.br/

I have removed the extra text field at the bottom and the JS event in the form. Still, no datepicker.

I also tried adding the new menu item to the exlude list in the plugin, but no effect.

I have tried to make sure everything is updated, and I have now disabled the Gantry cache and gzipper. So everything should show.

I have also tried moving the plugin up the list so it loads earlier. Still no datepicker. And I really need that datepicker!

Hi Oceanwatcher,

The page now has a JavaScript error "91Uncaught SyntaxError: Unexpected token {" in this code (is that Google Analytics?):

var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-18479966-1']);
  _gaq.push(['_trackPageview']);

and another in the K2.js file . . . (that may go away if the first one is fixed)

I'm afraid that as long as you have JavsScript bugs from other components you won't get to see your datapicker :-(

Bob

I have been trying to find out how to look for JavaScript errors and conflicts. Do you have any tricks that you could share?

Where do you see these errors? When I load the page, I do not see any errors, I just see that the picker do not show. Eager to learn something new :-)

I have already tried to turn off the K2 plugin, but it did not make any difference. I will try to turn off both that one and the Analytics (it is loaded by the template - a function in the RT templates).

Hi Oceanwatcher,

I mostly use the Web Developer tools in Chrome (Click Shift+ctrl+I); there is also FireBug for FireFox; or the Web Developer tools in IE 8 or 9 (click F12). In any of these the Console tab will usually show you any JavaScript errors on the page.

Chrome still show me the same errors as yesterday - see below.

Bob

Hi,
I encountered the same issue today and found your topic searching for an answer.
I finnaly found my problem, maybe you have the same, my datepicker was behind my page

So open datepicker css (com_chronoforms/css/datepicker/datepicker_dashboard.css)

add this line :

.datepicker_dashboard {
...
...
z-index: 100;
}

I hope it will work for you

Something is a bit odd here... I have tried disabling different plugins, but nothing helps.

When this started, I had RC1.8. When adding a textfield to the form and using a class to add the picker there, it actually showed a picker, but it was partly hidden under the main body of the site. So the picker actually worked. The z trick might have worked then. But after upgrading to RC1.9, this trick does not work anymore.

Still, I am going to do some more work to try to find any problems before checking back here.

Chrome still show me the same errors as yesterday - see below.

Thank you for the tip!

I disabled the K2 plugin and updated the template. The only error I can see now is directly related to the date picker:

missing : after property id
[Break On This Error] new DatePicker('.cf_date_picke...ormat: 'd/m/Y', allowEmpty:false }});

I guess this can have something to do with the string I have in the Date Time Picker Config:

date::{timePicker: true, inputOutputFormat: 'd/m/Y', allowEmpty:false }

Basically, I want to have a time picker with the correct date format.

I just removed the whole string and of course, the error is gone. And no date picker.

You have commented in a post about the date picker format here:

http://www.chronoengine.com/forums.html?cont=posts&f=26&t=22057

But it does not help much as long as I can not get it to display...

After trying to clean up everything as well as possible, I am now getting this error:

this.form.getProperty is not a function
[Break On This Error] var FormCheck=new Class({Implements:[O...t("validateFailure");return false}}});

This is a chronoform problem and only shows if the plugin you suggested is active (SC jQuery).

I am going to leave this plugin off and everything else as clean as possible.

I am using the Master htaccess to secure the site, but switched to the regular Joomla htaccess and got these errors:

this.form.getProperty is not a function
[Break On This Error] var FormCheck=new Class({Implements:[O...t("validateFailure");return false}}});
formcheck-yui.js (line 1)
this.picker is null
[Break On This Error] var clickOutside = ($chk(e) && e.tar....target) && e.target != this.visual);
datepicker.js (line 594)
this.picker is null
[Break On This Error] var clickOutside = ($chk(e) && e.tar....target) && e.target != this.visual);
datepicker.js (line 594)
this.picker is null
[Break On This Error] var clickOutside = ($chk(e) && e.tar....target) && e.target != this.visual);

Any idea?

Went back and turned off the SC jQuery plugin. Error disappeared (with the Master htaccess enabled). Enabled the K2 plugin and still no error.

Tried swapping back to the standard Joomla htaccess and got no errors. So there should be no errors now. Seems like the SC jQuery plugin added more problems... Sorry for going all these rounds to find this out.

But this also means there are no errors, and I still do not have any date picker. So my guess is that this could be something I have not done correct, or there is a bug somewhere. Either way, I am not any closer to where I was. Well - at least I can say I have found a lot of things that do not work :-)

Hi Oceanwatcher,

Take out any configuration strings for the DatePicker. In CFv4 RC1.9 there is a new Custom Datepicker action (in the Utilities group) that can do the configuration for you. But first get a plain vanilla date-picker working and visible.

To do that you need to add the z-index CSS to bring it to the front. Please put this into a Load CSS action:

.datepicker_dashboard {
  z-index: 100;
}

Bob

Ah -finally! The datepicker shows up as soon as I click inside the date field. It would have been nice to have a button next to the field, but I will just add a text under that says "Click to enter a date".

Now - what was that about configuring?

BTW - THANK YOU FOR THE HELP SO FAR!!! I learnt something very important about conflicts. Been looking for this kind of information for some time :-)

Hi Bob

My form Datepicker is not working. Please do needful. I very thankful of you.

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Name</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="Please enter your name" id="text_1" name="name" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Email address:</label>
    <input class="cf_inputbox required validate-email" maxlength="150" size="30" title="Please enter your email address" id="text_2" name="email" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Subject</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="Please enter a subject for your message" id="text_3" name="subject" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>
<div  class="form_item">
  <div class="form_element cf_datetimepicker">
    <label class="cf_label">Click Me to Edit</label>
    <input onclick="new Calendar(this);" class="cf_datetime" size="20" id="date_0" name="date_0" type="text">
  </div>
  <div class="clear"> </div>
</div>
<div class="form_item">
  <div class="form_element cf_textarea">
    <label class="cf_label" style="width: 150px;">Message</label>
    <textarea class="cf_inputbox required" rows="5" id="text_4" title="Please enter your message" cols="40" name="message"></textarea>
    
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Submit" name="button_5" type="submit" />
  </div>
  <div class="cfclear"> </div>
</div>

Thanks
Shahzad

Hi Shahzad,

Please post a link to the form so I can take a quick look.

Bob

Hi Bob

My form Datepicker is not working in ie9. Please do needful. I very thankful of you. This my form url http://174.122.19.162/~holzfuss/index.php?option=com_chronocontact&chronoformname=basicDemo Plz have look.

Thanks
Shahzad