Multiple versions of JQuery on the same page not working

Question

Actually I am looking for clientside checkbox control + scrollable gridview for my asp.net project. I got a good article from http://gridviewscroll.aspcity.idv.tw/Demo/Form.aspx#CheckBoxClient. I have posted the code as given below which, I have taken from the above website. Here only the fixed header with scrollable function is working perfectly but CheckBox Client-Side not working. Can any one help me?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="../Scripts/gridviewScroll.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
gridviewScroll();
});

function gridviewScroll() {
$('#<%=GridView1.ClientID%>').gridviewScroll({
width: 660,
height: 200,
freezesize: 3
});

var cbSelecteds1 = "cbSelecteds1_freezeheader";
var cbSelected1 = "<%=GridView1.ClientID%>_cbSelected1";

CheckBoxCheckAll(cbSelecteds1, cbSelected1);

var cbSelecteds2 = "cbSelecteds2_Copy";
var cbSelected2 = "<%=GridView1.ClientID%>_cbSelected2";

CheckBoxCheckAll(cbSelecteds2, cbSelected2);
}

function CheckBoxCheckAll(checkboxs, checkbox)
{
$('#' + checkboxs).change(function () {
var checked = $(this).is(':checked');
$('input[id*="' + checkbox + '"]').attr('checked', checked);
});

$('input[id*="' + checkbox + '"]').change(function () {
var checked = $(this).is(':checked');
if (!checked) {
$('#' + checkboxs).attr('checked', false);
}
else {
var allchecked = true;
$('input[id*="' + checkbox + '"]').each(function () {
var checked = $(this).is(':checked');
if (!checked) {
allchecked = false;
}
});
$('#' + checkboxs).attr('checked', allchecked);
}
});
}
</script>

Answer 1

You are using live() method and linking the library version greater than 1.7 which is deprecated. Use on method instead.

Or, to make live() method work, you need to link the jquery library version below 1.7.

---

Recommendation:

Just use only one version of jquery.

Answer 2

Why do you include multiple jquerys? You should only have one. It will be loaded into the global namespace.

Answer 3

Normally, you should use only one jQuery version. I'd suggest the later version.

However, if you've no choice then you'll need to look at jQuery.noConflict()

So in your case, you can keep $ sign for the code which are using version 1.8.3.

For version 1.8.2, you can use no conflict mode like this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="Scripts/gridviewScroll.min.js" ></script>

<script type="text/javascript"> 
var jQuery_1_8_2 = $.noConflict(true);
jQuery_1_8_2(document).ready(function () { 
gridviewScroll();                     
}); 

function gridviewScroll() { 
jQuery_1_8_2('#<%=GridView1.ClientID%>').gridviewScroll({ 
width: 960, 
height: 200, 
railcolor: "#F0F0F0",
barcolor: "#CDCDCD",
barhovercolor: "#606060",
bgcolor: "#F0F0F0",
freezesize: 3,
arrowsize: 30,
varrowtopimg: "Images/arrowvt.png",
varrowbottomimg: "Images/arrowvb.png",
harrowleftimg: "Images/arrowhl.png",
harrowrightimg: "Images/arrowhr.png",
railsize: 16,
barsize: 8 
});    
}                
</script>