new to Jquery...making noob mistakes (noconflict)

[Kaos]

I'm very new to jquery and javascript in general. I'm trying to add functionality to a page I'm working on. I've got standard jquery UI elements, a "nyroModal" box and a customer date/time picker. I can usually get one item to work, but not all three.

I did some research and have been trying to wrap my head around how to include them proper with noconflict so they'll all live happily. I may be "over" including some things.

any advice?

<link type="text/css" href="css/redmond/jquery-ui-1.8.16.custom.css" rel="Stylesheet" />
<link rel="stylesheet" href="css/nyroModal.css" type="text/css" media="screen" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="javascript/jquery.nyroModal.custom.js"></script>
<script type="text/javascript">
var $j = $.noConflict(true);
$j(function() {
  $j('.nyroModal').nyroModal({
	callbacks: {
			afterClose: function() {
				parent.window.location.reload();
			}
		}
 });
 });
</script>

<script type="text/javascript" src="javascript/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
var $tpick = $.noConflict(true);
</script>
<script>
	<!-- For the Target Run Time Box -->
	$tpick(function() {
		$tpick('#example1').datetimepicker({
		dateFormat: 'yy-mm-dd',
		timeFormat: 'hh:mm:ss'
		});	
		});
</script>

<script>
<!-- For the run duration slider -->
	$tpick(function() {
		$tpick('#length-slider').slider({
			range: "min",
			value:1,
			min:1,
			max:120,
			slide: function(event, ui) {
				$tpick("#duration").val(ui.value);
				}
			});
			$tpick("#duration").val($tpick("#length-slider").slider("value"));
		});
</script>

 

[wonderfield]

If both plugins are properly function-guarded (and in my experience, most are, even otherwise poorly-written ones), you shouldn't need to deal with calling noConflict or re-namespacing jQuery to avoid conflicts. As plugins attach methods to the jQuery object, conflicts will only arise in rare circumstances due to naming collisions and other such issues. From what I can tell, based on your calling code, it looks like you should be fine without.

I don't have enough experience (or any, really) with working around such collisions, so I can't comment on whether your approach is correct or not. My suggestion is to simply implement both plugins without worrying about conflicts and only then concern yourself with addressing any should they arise (if you haven't already done so).

It may help, though, if you posted links to both of the plugins so we can determine whether there are potential issues that would probably just be better solved by modifying those plugins.

 

[Sgraffite]

You don't need a different variable for jQuery for each "script" you are placing on the page in a script tag. They can all share the same jQuery object. No conflict mode is so you have use jQuery alongside other javascript libraries that also make use of the dollar sign.

 

[Kaos]

I'll give those suggestions a shot and if I have problems I'll post some links to the addons I'm using.

Thanks!

 

[cnick79]

Try this (not tested):

// JavaScript Document
<link type="text/css" href="css/redmond/jquery-ui-1.8.16.custom.css" rel="Stylesheet" />
<link rel="stylesheet" href="css/nyroModal.css" type="text/css" media="screen" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="javascript/jquery.nyroModal.custom.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-timepicker-addon.js"></script>


<script type="text/javascript">
<!--
  $(document).ready(function() {
    $('.nyroModal').nyroModal({
      callbacks: {
          afterClose: function() {
            parent.window.location.reload();
          }
        }
    });

    <!-- For the Target Run Time Box -->
    $('#example1').datetimepicker({
      dateFormat: 'yy-mm-dd',
      timeFormat: 'hh:mm:ss'
    });  
  
    <!-- For the run duration slider -->
    $('#length-slider').slider({
        range: "min",
        value:1,
        min:1,
        max:120,
        slide: function(event, ui) {
          $("#duration").val(ui.value);
        }
    });
    $("#duration").val($("#length-slider").slider("value"));
  });
-->
</script>

 

[unhappy_mage]

Debugging JQuery with both Firefox and Chrome can be frustrating; both of them re-define $ to mean something other than "the jQuery object". I use "jQuery('...')" rather than "$('...')", and this avoids the problem.

 

[Kaos]

I pulled the no-conflict out of each of them...and made them all use $ instead of naming a variable and they all work now.

I must have missed something when I thought I tried that before.

Thanks everyone for the help and explanations!