Solved

jquery date picker conflict with prototype and scriptilicioius

Posted on 2010-08-23
8
1,521 Views
Last Modified: 2012-05-10
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
Comment
Question by:lithocolor
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
8 Comments
 
LVL 2

Expert Comment

by:Adr13n
ID: 33501134
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
 

Author Comment

by:lithocolor
ID: 33501665
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
 
LVL 15

Expert Comment

by:SRigney
ID: 33502304
Have you tried updating to the newest versions.  jQuery 1.4.2 and jQuery UI 1.8.4?
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:lithocolor
ID: 33502878
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
 
LVL 15

Expert Comment

by:SRigney
ID: 33503821
Oh, in that case you probably need to use the noConflict method in jQuery.

http://api.jquery.com/jQuery.noConflict/
0
 

Author Comment

by:lithocolor
ID: 33503908
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
 
LVL 15

Expert Comment

by:SRigney
ID: 33504010
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
 
LVL 4

Accepted Solution

by:
LAMASE earned 500 total points
ID: 35037433
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 Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question