WebsiteBaker Community Forum
WebsiteBaker Support (2.8.x) => jQuery => Topic started by: pcwacht on June 24, 2011, 04:48:06 PM
-
I think here lies my problem
I want to use jquery datepicker -> http://www.kelvinluck.com/projects/jquery-date-picker/
I need to add - jquery.min.js
and date.js (for datefunctions)
and datePicker.js
In a cleanhtml all works
In a modify (admin-backend pages) it won't work cause at the bottom another jquery,min.js is included thus breaking the addition of datepicker ( $.fn.extend )
If a rename the include/jquery/jquery.min.js to something else, my page works.
All the 3 standard admin templates has this jquery at the BOTTOM!!!!!!! of the admin page, thus killing the option of using jquery addons.
What do I need to do to make it work?
John
-
Hello John,
which version of WB are you using there?
In 2.8.2 all the jQuery stuff should be loaded in <head> not at the end of <body>.
Regards,
Stefek
-
2.8.1
Did discover the 2.8.2 change of jquery calls from bottom to head.
But still, when I want the module to be 2.8.1 (current stable!!) compatible I'll need to come with something.
And I don't like 2.8.2 over security issues wich make it allmost inusable
So need to patch that!
Question still stands.
Jonh
-
So need to patch that!
Question still stands.
Best patch would be: you move all the jQuery stuff from footer to header
That's where they belong.
-
Yups, but
Am helping Argos on a module, a calendar/event kinda module
I want that datepicker because of its simplicity to use and cause of the ease to localize it in any way
I can't make the datepicker work on wb 2.8.1 without patching the backend templates.
I think there should be a way without patching those, otherwise I should release the module and add instructions on how to patch the backend templates, would bu stupid if I did.
For the meantime I start coding on wb282 with a litle hack to kill the ftan.
Still hoping someone know how to do it within wb281
John
-
Hello John
please try this one
http://www.websitebakers.com/pages/admin/backend-themes/release-2.8/argos-jq.php
Hope it helps.
-
Hello John,
you could also create a backend_body.js file, insert into module directory and than use the jQuery $.insert Method to include further (more) files.
Do it like this:
<?php#gnore this line, Please!
// put it into backend_body.js
var MODULE_URL = WB_URL + '/modules/mymodule'; // replace by module dir name
$(window).load(function(){
if($('textarea').length){ //Use a significant selector (by Element-ID, Element-Class, Element type etc)
$.insert(MODULE_URL+"/date.js"); // date.js (for datefunctions)datePicker.js
$.insert(MODULE_URL+"/datePicker.js"); // datePicker.js
}
});
(ignore the opening <?php, it's there only for colorization of the code)
Regards,
Stefek
-
Thanks Stefek.
Took me some time to get it finally working.
The window - load substituted with document - ready and variations etc didn't work.
This finally did it
var MODULE_URL = WB_URL + '/modules/someothercalendar';
$.insert(MODULE_URL + '/js/date.js');
$.insert(MODULE_URL + '/js/jquery.datePicker.js');
Thanks again.
John
-
hmmm,
The above did work when I load jquery.min.js from modify.php
Wich isn't the good way to do.
When I don't load jquery it won't work.
Back to drawing table.
Shame, since it seems like we can't use added jquery functionality in backend with wb2.8.1
I wanted to include that calendar cause of the easy range selection, localization and the easyness of implementing -> http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerStartEnd.html
and allso wanted to include some formvalidation.
John
-
hmmm,
The above did work when I load jquery.min.js from modify.php
Wich isn't the good way to do.
When I don't load jquery it won't work.
OK, I see the problem.
You will need to pass some php variables as javascript variables and make it available for the plugin, AFTER jQuery is loaded (in foot).
This means, you will need to pass javascript variables from your php file, like so:
<script type="text/javascript">
var VARIABLE_ONE = '<?php echo $the_php_value_for_variable_one; ?>';
var VARIABLE_TWO = '<?php echo $the_php_value_for_variable_two; ?>';
</script>
You can't use jQuery functions before it's loaded, therfore you need to
1) collect the Data in variables
2) load jQuery
3) load the Plugin and hand over the collected variables to the plugin (in "backend_body.js" for example)
It seems to be a little overwhelming, but once you got your way there, it's not to hard to do.
In my script above, I forgot to mention, that you must to adjust the jQuery selector here:
if($('textarea').length){
Use a significant selector (by Element-ID, Element-Class, Element type).
Example:
if($('.calender').length){ //use the right class instead of 'calender'
Read more about jQuery selectors on the web.
Kind regards,
Stefek
-
After spending hours and hours I gave it up.
The datepicker I wanted to use is really a good one, especially when dealing with ranges, the formvalidator is allso jquery wich can't be used either
I think the problem lies in the way stuff is handled by the brwoser, the order things work
First the browser encounters the html output : some variables set from php, but htmlsource is allways ok.
<script type="text/javascript" charset="utf-8">
Date.firstDayOfWeek = 1;
Date.format = 'Y-m-d H:i';
$(function()
{
$('.date-pick').datePicker({
clickInput:false,
autoFocusNextInput: true,
startDate:'01/01/2011'}).val(new Date().asString())
$('#date1').bind(
'dpClosed',
function(e, selectedDates)
{
var d = selectedDates[0];
if (d) {
d = new Date(d);
$('#date2').dpSetStartDate(d.addDays(0).asString());
}
}
).val(new Date(2011,5,5).asString());
$('#date2').bind(
'dpClosed',
function(e, selectedDates)
{
var d = selectedDates[0];
if (d) {
d = new Date(d);
$('#date1').dpSetEndDate(d.addDays(0).asString());
}
}
).val(new Date(2011,6,6).asString());
});
</script>
aftert wich the jquery is loaded (with the correct plugns) at the end of the page (admin template footer.htt)
The $(function() is allways erroring. My guess is because there is nog jquery at that time.
I can try to put the above in backend_body.js, haven't tried that, will give that some playtime (and learning as well, my js knowledge sucks bigtime :| )
I can correct the admin-template ofcourse by changng the jquery stuff from footer to header.htt but then the module can only be used after patching admin-templates or installing another admin-template.
I can allso be an illegal-programmer by inserting same jqeury_min.js from the module thus making it work, but it won't be neat to do so. And I don't know what other troubles may pop-up from there.
Will get back after fiddling the backend_body.js.
John
-
OK, starting to get the grasp on this and finally I am getting this to work. The clean way.
Adding the $function..... to backend_body.js works.
Passing variables, though cumbersom works as well.
Thank you Stefek for your input.
I didn't need the if(...
The code above was moved to backend_body.js
the variables where declared in modify.php with php like
var firstDayOfWeek = <?php echo $jscal_firstday; ?>;
in backend_body.js I took the declared var land put it at the top, right after the $.insert(....) like:
Date.firstDayOfWeek = firstDayOfWeek;
Thanks again,
John
-
Great John.
I am glad my instructions where of some worth to solve the issues.
Kind regards,
Stefek
-
btw, this datepicker is easy with dateformats and locales.
-
Hello John,
I am using this one in some places:
https://forum.WebsiteBaker.org/index.php/topic,21272.msg143359.html#msg143359
It can be used for both: dates/time, only dates and only time.
Kind regards,
Stefek
-
I saw that one too, googled jquery datepicker too, didn't see your post, but with the timepicker addon I can't get range (including time) to work properly
ie: start 2011/05/21 08:00 end 2011/05/21 06:00 wouldn't be watched against
Allso I couldn't get the show three months option with time.
And adding a timepicker to the calendar isn't allways that intuitive to use.
I revert to two calendar fileds, the end minimum value acting upon the picked startdate
and apart timefields
Since the module has the option to choose in settings to show time, use one date or two dates and wich dateformat.
With these choices I just wanted a short and faulty free easy solution.
And found that with:
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/
range solution:
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerStartEnd.html
My solution including localization files:
from php (modify.php)
</php ?> // start php colours, not needed...!!
<script type="text/javascript" charset="utf-8">
// Adding variables for datepicker - sent to backend_body.js:
var MODULE_URL = WB_URL + '/modules/anopthercalendar';
var firstDay = <?php echo $jscal_firstday; ?>; // Firstday, 0=sunday/1=monday
var format = '<?php echo $jscal_format; ?>'; // format of date, mm.dd.yyy etc
var datestart = '<?php echo date($jscal_ifformat,$datetime_start); ?>'; // datestart in input field
var dateend = '<?php echo date($jscal_ifformat,$datetime_end); ?>'; // dateedn in inputfield
var datefrom = '<?php echo date($jscal_ifformat,mktime(0, 0, 0, date("m"), date("d"), date("Y")-1)); ?>'; // How long back?
<?php // Set language file, if it exists
$jscal_lang = defined('LANGUAGE')?strtolower(LANGUAGE):'en';
$jscal_lang = $jscal_lang!=''?$jscal_lang:'en';
if(file_exists(WB_PATH."/modules/".$module_directory."/js/lang/date_".$jscal_lang.".js")) {
echo 'var datelang = "date_'.$jscal_lang.'.js"';
} else {
echo 'var datelang = "none"';
}
?>
</script>
And in backend_body.js:
// Test to see if it needs to do something, called from the correct page
// MODULE_URL is set in modify.php
if (typeof MODULE_URL != 'undefined') {
// Include datepicker files:
$.insert(MODULE_URL + '/js/date.js');
$.insert(MODULE_URL + '/js/jquery.datePicker.js');
// This is only needed for ie 6 and smaller
if ($.browser.msie && $.browser.version.substr(0,1)<7) {
$.insert(MODULE_URL + '/js/jquery.bgiframe.js');
}
// Insert language file if it is not none!
if (datelang !== "none") {
$.insert(MODULE_URL + '/js/lang/'+ datelang);
}
// firstday 0=sunday, 1=monday -- Fomat = datefomat yyyy/mm/dd or dd mm yyy or ...
Date.firstDayOfWeek = firstDay;
Date.format = format;
// set up the calendars and make them work together, date from first will be minimum date for second
$(function()
{
$('.date-pick').datePicker({
clickInput:false,
autoFocusNextInput: true,
startDate:datefrom} // datefrom!
);
$('#date1').bind(
// Update date2 when date changes, set starting date to date1
'dpClosed',
function(e, selectedDates)
{
var d = selectedDates[0];
if (d) {
d = new Date(d);
$('#date2').dpSetStartDate(d.addDays(0).asString());
}
}
).datestart; // datestart!!
$('#date2').datePicker().dpSetStartDate(datestart).dateend; // dateend!!
});
// End of MODULE_URL test
}
This work like a charm. I don't have to fiddle anymore javascript if I am using one datefield or two.
The time is dealt with in a seperate inputfield and checked on save, it allso checks to make sure enddate+time is equal or greater then startdate+time
The needed css for the calendar is added to backend.css
The localization files I foun here: https://github.com/vitch/jquery-methods
Couldn't have done this without some pointers you gave.
John