jQuery with noConflict and Assignment of noConflict Variables

时间:2016-07-11 22:34:27

标签: javascript jquery html forms dynamic

I've been working with 2 different versions of jQuery on one page and am trying to utilitze the 'noConflict.'
If I establish a variable for each of the jQuery versions, (examples: $a and $b), would I replace all of the $'s with '$a' and '$b?'

for example (a snippet of the full code [which appears at the bottom]).. wasn't sure where to put the $b's.

<script>
$b(document).ready(function() {
function clone(){
  var $cloned = $('table tr:last').clone();
  var oldIndex = $cloned.find('input').attr('name').match(/\d+/);
  var newIndex = parseInt(oldIndex,10)+1;
  $cloned.find('input').each(function(){
     var newName = $(this).attr('name').replace(oldIndex, newIndex);
     $(this).attr('name', newName);
  });
  $cloned.insertAfter('table tr:last');
}
$('p.add-btn').click(clone)

;
</script>

Below, is the HTML form code, along with the jQuery clone function, along with the date picker functions. Currently, when I enable one, the other function does not work. Thanks for any leads.

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>var $a = jQuery.noConflict(true);  //sets up 1st version of jquery to run for Zebra datepicker</script>

<script type="text/javascript" src="zebra_datepicker/js/zebra_datepicker.js"></script>
<link rel="stylesheet" href="zebra_datepicker/css/default.css" type="text/css">
<script>
$a(document).ready(function() {

    $a('#SubmissionDate').Zebra_DatePicker({
        view: 'years',
        readonly_element: true
        });

    $a('#ClassYear').Zebra_DatePicker({
        view: 'years',
        format: 'Y',
        readonly_element: true
        });


 });
</script>


<script>
$b(document).ready(function() {
function clone(){
  var $cloned = $('table tr:last').clone();
  var oldIndex = $cloned.find('input').attr('name').match(/\d+/);
  var newIndex = parseInt(oldIndex,10)+1;
  $cloned.find('input').each(function(){
     var newName = $(this).attr('name').replace(oldIndex, newIndex);
     $(this).attr('name', newName);
  });
  $cloned.insertAfter('table tr:last');
}
$('p.add-btn').click(clone)

;
</script>



<table id="FormLayout" cellspacing="3" cellpadding="3">
<tr>
<td class="FormLabel" width="100px"><strong>Class Year*</strong></td>
<td width="100px"><input type="text" id="ClassYear" name="ClassYear_1" class="required" value="<%= Request.form("ClassYear") %>" tabindex="4" /></td>
 </tr>
 <tr><td>
 <button type="button" id="add-btn">Add Class Year</button>
 </td></tr>              
 <tr>
 <td colspan="4" align="center"><input type="hidden" name="FormSubmit" value="True" />
 <input type="submit" value="Submit" tabindex="8" />
 </td>
 </tr>
 </table>

2 个答案:

答案 0 :(得分:1)

Please try this:

  1. Include the original version.

  2. Then include the version required by Zebra datepicker.

Just after, you don't need any conflict handling, just call your plugin by using $. To make sure console.log('$.fn.jquery');

After using your plugin you need to call oldV = jQuery.noConflict( true ); to restore globally scoped jQuery variables to the first version loaded. In the next code just use $ normally.

答案 1 :(得分:1)

如果我为每个jQuery版本建立一个变量(例如:$ a和$ b),我会用&#39; $ a&#39;替换所有$&#39;和&#39; $ b?&#39;

是的,你必须,从你声明一个指向前的变量的行开始,你只能使用该变量声明来调用jQuery函数/方法。

//Assume that by this time there is 'noConflict' declared variable you can still invoke a method of jquery using this.
$().

//But as you declared a 'noConflict' variable
var $a = jQuery.noConflict();
//$() would return undefined.