[SOLVED] I have a problem the way jquery is added in the admin backend

[pcwacht]

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)

Code Select Expand

</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:

Code Select Expand


// 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

[Stefek]

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

[pcwacht]

btw, this datepicker is easy with dateformats and locales.

[Stefek]

Great John.

I am glad my instructions where of some worth to solve the issues.

Kind regards,
Stefek

[pcwacht]

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

Code Select Expand


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:

Code Select Expand


Date.firstDayOfWeek = firstDayOfWeek;


Thanks again,
John

[pcwacht]

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.

Code Select Expand


<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

[Stefek]

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:

Code Select Expand


<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

[pcwacht]

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

[pcwacht]

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

Code Select Expand


var MODULE_URL = WB_URL + '/modules/someothercalendar';

$.insert(MODULE_URL + '/js/date.js');       
$.insert(MODULE_URL + '/js/jquery.datePicker.js');



Thanks again.

John

[Stefek]

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:

Code (backend_body.js) Select Expand


<?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

[maschmi]

Hello John

please try this one
http://www.websitebakers.com/pages/admin/backend-themes/release-2.8/argos-jq.php

Hope it helps.

[pcwacht]

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

[Stefek]

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.

[pcwacht]

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

[Stefek]

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

[pcwacht]

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