JotForm conflict with JQuery

Question

I am trying to use JQuery datepicker along with Jotform in my html page. but it seems that jquery and jotform dont get along after all .

<script type="text/javascript" src="js/jquery.min.1.8.3.js"></script> 
<script src="js/jotform.js" type="text/javascript"></script>

If i eliminate first line of above code the jotform works fine and if i eliminate the second line and keep first line the datepicker will work fine. (Jotform is an online form builder)

There is a conflict record since 2011 but i cant find if that is solved or not.

  $(function() {

  //-----------------------------------
  // Show Picker
  $('#startDate').datepicker({
      showButtonPanel: true
  });
  //-----------------------------------
  // Show Picker
  $('#dueDate').datepicker({
      showButtonPanel: true
  });

 });

The following is part of the section of my code

<link rel="stylesheet" type="text/css" href="css/jNotify.jquery.css" media="screen" />
<script type="text/javascript" src="js/jNotify.jquery.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script src="js/jotform.js" type="text/javascript"></script>
<script type="text/javascript" src="js/ajax_load.js"></script>
<script type="text/javascript" src="js/validator.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.datepicker-cc.js"></script>
<script type="text/javascript" src="scripts/calendar.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.datepicker-cc-ar.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.datepicker-cc-fa.js"></script>
<link type="text/css" href="styles/jquery-ui-1.8.14.css" rel="stylesheet" />

Any tip and help will be highly appreciated

Answer 1

Just use self calling anonymous function and pass jQuery and catch it as $ in your code such as :

 (function($){

  $(function() {

  //-----------------------------------
  // Show Picker
  $('#startDate').datepicker({
      showButtonPanel: true
  });
  //-----------------------------------
  // Show Picker
  $('#dueDate').datepicker({
      showButtonPanel: true
  });

});

})(jQuery);

and modify jquery script inclusion as such(same as TheBronx suggested):

<!-- this is where you are loading jQuery -->
<script type="text/javascript" src="here/you/are/loading/jquery.js"></script>
<!-- and now lets enter in noConflict mode -->
<script type="text/javascript">
$.noConflict();
</script>

This is the only way that uses minimal code change. Thanks.

Answer 2

Ok, this is too large to explain in a comment:

Using jQuery noConflict mode

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

First, add the noConflict script after loading jQuery:

<!-- this is where you are loading jQuery -->
<script type="text/javascript" src="here/you/are/loading/jquery.js"></script>
<!-- and now lets enter in noConflict mode -->
<script type="text/javascript">
$.noConflict();
</script>

This way the $ function is "free" again so other lib can use it (the same name can't be used by two libraries, it's a global var so shit is going to happen).

Well, now on we won't be using $ for jQuery. If you want to use jquery, the new magic word is jQuery (yeah, very original), for example:

jQuery("#menu").show();

So, if you have to use datepicker, just replace $ with jQuery. For example:

jQuery('#startDate').datepicker({
    showButtonPanel: true
});

Remember, the keyword $ is no longer attached to jQuery. So you have to use jQuery everywhere. Or you can also use a new alias, for example if you think jQuery is too large:

var j = jQuery.noConflict();
//and now we are going to use it:
j("#menu").show();

There are more examples here: http://api.jquery.com/jQuery.noConflict/