• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1584
  • Last Modified:

jquery date picker conflict with prototype and scriptilicioius

I am using jquery datepicker for some time and now have added some prototype based stuff and there is a conflict because of the $ shortcut in datepicker.
I have tried so many variations of adding " jQuery.noConflict();" into the code but can't get it to work. I am not a programmer and assume that someone could make short work of this problem for me.

below is the javascript in an html literal.
It loads the date into an existing form field "Date" (var varName = "Date";)

******code*******
<script type="text/javascript" src="Custom/jQueryDatePicker/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="Custom/jQueryDatePicker/jquery-ui-1.7.2.custom.min.js"></script>

<script type="text/javascript" src="Custom/jQueryDatePicker/jquery.datePicker-2.1.2.js></script>

<link type="text/css" href="Custom/jQueryDatePicker/jquery-ui-1.7.2.custom.css" rel="stylesheet" />

<p class='fieldSpacer'>Click calendar to select event date</p>
<input type="text" id="datepicker" style="width:190px;" readonly="true">

<script type="text/javascript">



$(document).ready(function() {

      var varName = "Date";

      var today = new Date();

      $("#datepicker").datepicker({
      showOn: 'button',
      buttonImageOnly: true,
      showOn: "both",

      <!-- onClose: function(dateText, inst) { FormSetFieldValue(varName, dateText); },-->
 


onClose: function(dateText, inst) { FormSetFieldValue(varName, dateText); FormUpdatePreview(); },

      buttonImage: 'Custom/jQueryDatePicker/cal.jpg',
      dateFormat: " DD, MM d, yy",
      buttonText: "Pick a date"
      });

      $(".ui-datepicker-trigger").mouseover(function() {
                  $(this).css('cursor','pointer');
      });

      $(".ui-datepicker-trigger").css("margin", "0px 0px -10px 0px");

      $("#datepicker").val(FormGetFieldValue(varName));

});

function FormGetFieldValue (fieldName)
{
      return PFSF_GetFieldValueByName("FIELD_" + FieldIDs[fieldName]);
}

function FormSetFieldValue (fieldName, fieldValue)
{
      PFSF_SetControlValue(PFSF_Find('FIELD_' + FieldIDs[fieldName]), fieldValue);
}
function FormUpdatePreview () {  PFSF_AjaxUpdateForm();  return true; }


</script>



0
lithocolor
Asked:
lithocolor
1 Solution
 
Adr13nCommented:
Browsing the jQuery UI support forums finds this: http://forum.jquery.com/topic/solved-jquery-plugins-and-scriptaculous

The problem was: a conflict between jQuery 1.2.6 and Scriptaculous 1.7.0

Solved by: downgrading to jQuery 1.2.3.

Further reference: http://groups.google.com/group/jquery-en/browse_thread/thread/5527c88446bb6a22
0
 
lithocolorAuthor Commented:
Tried that, didn't fix the problem. Perhaps because jquery-ui-1.7.2.custom.min.js is also required to have the datepicker function.
0
 
SRigneyCommented:
Have you tried updating to the newest versions.  jQuery 1.4.2 and jQuery UI 1.8.4?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
lithocolorAuthor Commented:
I updated jquery to these latest versions and again, the prototype and scriptaculous scripts fail.
I upgraded both of these (prototype and scriptaculous) to the latest version and it still fails.
The developer of the widget that I have in place (to crop images inline via prototype.js, scriptaculous.js, json2.js and cropper.js has been of little help saying only that I need to resolve the $ shortcut in jquery.
As soon as I comment out jquery the widget works fine.
0
 
SRigneyCommented:
Oh, in that case you probably need to use the noConflict method in jQuery.

http://api.jquery.com/jQuery.noConflict/
0
 
lithocolorAuthor Commented:
back to square one, I have made various attempts at adding the no-conflict method but to no avail. I am unfortunately not a programmer and need some help to resolve this based on the code I supplied above.
0
 
SRigneyCommented:
Here's the change to enable jQuery no conflict.


******code*******
<script type="text/javascript" src="Custom/jQueryDatePicker/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
</script>
<script type="text/javascript" src="Custom/jQueryDatePicker/jquery-ui-1.7.2.custom.min.js"></script>

<script type="text/javascript" src="Custom/jQueryDatePicker/jquery.datePicker-2.1.2.js></script>

<link type="text/css" href="Custom/jQueryDatePicker/jquery-ui-1.7.2.custom.css" rel="stylesheet" />

<p class='fieldSpacer'>Click calendar to select event date</p>
<input type="text" id="datepicker" style="width:190px;" readonly="true">

<script type="text/javascript">



jQuery(document).ready(function() {

      var varName = "Date";

      var today = new Date();

      jQuery("#datepicker").datepicker({
      showOn: 'button', 
      buttonImageOnly: true, 
      showOn: "both",

      <!-- onClose: function(dateText, inst) { FormSetFieldValue(varName, dateText); },-->
  


onClose: function(dateText, inst) { FormSetFieldValue(varName, dateText); FormUpdatePreview(); }, 

      buttonImage: 'Custom/jQueryDatePicker/cal.jpg',
      dateFormat: " DD, MM d, yy",
      buttonText: "Pick a date"
      });

      jQuery(".ui-datepicker-trigger").mouseover(function() {
                  $(this).css('cursor','pointer');
      });

      jQuery(".ui-datepicker-trigger").css("margin", "0px 0px -10px 0px");

      jQuery("#datepicker").val(FormGetFieldValue(varName));

});

function FormGetFieldValue (fieldName)
{
      return PFSF_GetFieldValueByName("FIELD_" + FieldIDs[fieldName]);
}

function FormSetFieldValue (fieldName, fieldValue)
{
      PFSF_SetControlValue(PFSF_Find('FIELD_' + FieldIDs[fieldName]), fieldValue);
}
function FormUpdatePreview () {  PFSF_AjaxUpdateForm();  return true; } 


</script>

Open in new window

0
 
LAMASECommented:
jQuery has its own method "jQuery.noConflict(true)" that restores the situation (i.e. usage of $) before you last jquery include. The method returns a the running instance of jquery.

Steps:
include first library
include jquery
var new_jQuery = jQuery.noConflict(true);

now $ and jQuery vars belong to the first library and new_jQuery to the second (your jquery)

So after this you can call the first library with
$....

Open in new window

and the second with
new_jQuery("#selector").someThing();

Open in new window

0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now