Author Topic: [SOLVED] I have a problem the way jquery is added in the admin backend (Read 34405 times)

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

Stefek · « **Reply #1 on:** June 24, 2011, 05:39:04 PM »

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 · « **Reply #2 on:** June 24, 2011, 06:44:46 PM »

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 · « **Reply #3 on:** June 24, 2011, 07:01:24 PM »

Quote from: pcwacht on June 24, 2011, 06:44:46 PM

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 · « **Reply #4 on:** June 24, 2011, 07:22:55 PM »

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

maschmi · « **Reply #5 on:** June 24, 2011, 07:48:10 PM »

Hello John

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

Hope it helps.

Stefek · « **Reply #6 on:** June 24, 2011, 09:37:09 PM »

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]

<?php#gnore this line, Please!

// put it into backend_body.js
var MODULE_URL = WB_URL + &#39;/modules/mymodule&#39;; // replace by module dir name
$(window).load(function(){	
	
	if($(&#39;textarea&#39;).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

pcwacht · « **Reply #7 on:** June 25, 2011, 01:25:54 AM »

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]

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

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

Thanks again.

John

pcwacht · « **Reply #8 on:** June 25, 2011, 12:26:33 PM »

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

Stefek · « **Reply #9 on:** June 25, 2011, 02:00:12 PM »

Quote from: pcwacht on June 25, 2011, 12:26:33 PM

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]

<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 · « **Reply #10 on:** June 25, 2011, 06:36:36 PM »

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]

<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

pcwacht · « **Reply #11 on:** June 25, 2011, 06:51:02 PM »

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]

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]

Date.firstDayOfWeek = firstDayOfWeek;

Thanks again,
John

Stefek · « **Reply #12 on:** June 25, 2011, 11:12:40 PM »

Great John.

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

Kind regards,
Stefek

pcwacht · « **Reply #13 on:** June 25, 2011, 11:24:03 PM »

btw, this datepicker is easy with dateformats and locales.

Stefek · « **Reply #14 on:** June 26, 2011, 02:49:41 PM »

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 · « **Reply #15 on:** June 26, 2011, 08:10:21 PM »

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]

</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(&#39;LANGUAGE&#39;)?strtolower(LANGUAGE):&#39;en&#39;;
	$jscal_lang = $jscal_lang!=&#39;&#39;?$jscal_lang:&#39;en&#39;;

    if(file_exists(WB_PATH."/modules/".$module_directory."/js/lang/date_".$jscal_lang.".js")) {
		echo &#39;var datelang 	= "date_&#39;.$jscal_lang.&#39;.js"&#39;;
	} else {
		echo &#39;var datelang 	= "none"&#39;;
	}
?>
</script>

And in backend_body.js:

Code: [Select]

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

News

Support WebsiteBaker

Your donations will help to:

You can donate by clicking on the button below.

Author Topic: [SOLVED] I have a problem the way jquery is added in the admin backend (Read 34405 times)

pcwacht

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

Stefek

Re: I have a problem the way jquery in added in the admin backend

pcwacht

Re: I have a problem the way jquery in added in the admin backend

Stefek

Re: I have a problem the way jquery in added in the admin backend

pcwacht

Re: I have a problem the way jquery in added in the admin backend

maschmi

Re: I have a problem the way jquery in added in the admin backend

Stefek

Re: I have a problem the way jquery in added in the admin backend

pcwacht

Re: I have a problem the way jquery in added in the admin backend

pcwacht

Re: I have a problem the way jquery in added in the admin backend

Stefek

Re: I have a problem the way jquery in added in the admin backend

pcwacht

Re: I have a problem the way jquery in added in the admin backend

pcwacht

Re: I have a problem the way jquery in added in the admin backend

Stefek

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

pcwacht

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

Stefek

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

pcwacht

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