Multiple javascript and JQuery

Question

3.00/5 (2 votes)

See more:

I have aspx page with jquery and javascript and again on the same webproject in menu master file I have another version of jQuery and javascript. Since this two types of java script present on the same project when i load the the project I get the error "Microsoft JScript runtime error: Object doesn't support this property or method"

I i comment the menu master file java script and jquery it works fine. Can anyone help me how to make it work with out commenting it.

ASP.NET

<%@ Page Title="" Language="C#" MasterPageFile="~/Master/Menu.master" AutoEventWireup="true"
    CodeFile="ObjectRepositoryPages.aspx.cs" Inherits="ObjectRepositoryPages" %>

<%@ MasterType VirtualPath="~/Master/Menu.master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/colResizable-1.3.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.cookie.js" type="text/javascript"></script>
 <script type="text/javascript">
     $(document).ready(function () {
         if ($.cookie('colWidth') != null) {
             var columns = $.cookie('colWidth').split(',');
             var i = 0;
             $('.GridViewStyle th').each(function () {
                 $(this).width(columns[i++]);
             });
         }

         $(".GridViewStyle").colResizable({
             liveDrag: true,
             gripInnerHtml: "<div class='grip'></div>",
             draggingClass: "dragging",
             onResize: onSampleResized
         });

     });

     var onSampleResized = function (e) {
         var columns = $(e.currentTarget).find("th");
         var msg = "";
         columns.each(function () { msg += $(this).width() + ","; })
         $.cookie("colWidth", msg);
     }; 
</script>

ASP.NET

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Menu.master.cs" Inherits="Master_Menu" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Universal Test Automation Framework</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="../Script/MainWindow.css" rel="stylesheet" type="text/css" />
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
   <script type="text/javascript">
 $(document).ready(function () {
            try {

                $("#buttomLeftSide").bind("contextmenu", function (e) {
                    e.preventDefault();
                    $("#custom-menu").css({ top: e.pageY + "px", left: e.pageX + "px" }).show(100);
                });
                $(document).mouseup(function (e) {
                    var container = $("#custom-menu");
                    if (container.has(e.target).length == 0) {
                        container.hide();
                    }
                });
            }
            catch (err) {
                alert(err);
            }
        });
    </script>

Posted 2-Dec-13 18:28pm

ShaHam11

Updated 2-Dec-13 19:32pm

Sampath Lokuge

v3

Add a Solution

2 solutions

Solution 1

Why do you need to use 2 jQuery versions ? Just use the latest one (in your case I hope it's jquery-1.8.2.js).B'cos it's having backward compatibility.So try it and let me know if you have further issues.

Posted 2-Dec-13 19:35pm

Sampath Lokuge

Updated 2-Dec-13 19:46pm

v2

Comments

ShaHam11 3-Dec-13 1:59am

I Used the latest one jquery-1.8.2.js to the above file still its not running

Sampath Lokuge 3-Dec-13 2:02am

Can you just update the latest code snippets with your changes on above your question (Plz update both places (menu and master)) ?After that let me know.

ShaHam11 3-Dec-13 4:17am

ObjectRepositorypage.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Master/Menu.master" AutoEventWireup="true"
CodeFile="ObjectRepositoryPages.aspx.cs" Inherits="ObjectRepositoryPages" %>

<%@ MasterType VirtualPath="~/Master/Menu.master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<%--<script src="Scripts/jquery.js" type="text/javascript"></script>--%>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>

<script src="Scripts/colResizable-1.3.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
if ($.cookie('colWidth') != null) {
var columns = $.cookie('colWidth').split(',');
var i = 0;
$('.GridViewStyle th').each(function () {
$(this).width(columns[i++]);
});
}

$(".GridViewStyle").colResizable({
liveDrag: true,
gripInnerHtml: "<div class='grip'></div>",
draggingClass: "dragging",
onResize: onSampleResized
});

});

var onSampleResized = function (e) {
var columns = $(e.currentTarget).find("th");
var msg = "";
columns.each(function () { msg += $(this).width() + ","; })
$.cookie("colWidth", msg);
};
</script>

Menu page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Universal Test Automation Framework</title>
<asp:ContentPlaceHolder ID="head" runat="server">

<link href="../Script/MainWindow.css" rel="stylesheet" type="text/css" />
<%--<script src="../Scripts/jquery.js" type="text/javascript"></script>--%>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>

<script type='text/javascript' language="javascript">
$(document).ready(function () {
try {

$("#buttomLeftSide").bind("contextmenu", function (e) {
e.preventDefault();
$("#custom-menu").css({ top: e.pageY + "px", left: e.pageX + "px" }).show(100);
});
$(document).mouseup(function (e) {
var container = $("#custom-menu");
if (container.has(e.target).length == 0) {
container.hide();
}
});
}
catch (err) {
alert(err);
}
});

</script>

ShaHam11 3-Dec-13 4:18am

As you can see i have updated the latest jquery <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script> on both the pages and the other one jquery.js i have commented it

ShaHam11 3-Dec-13 4:19am

Thank you so much for your help

Sampath Lokuge 3-Dec-13 4:59am

Why do you need to declare js files again on 'ObjectRepositoryPages' file.Just declare those files on 'Menu.master' only (within 'Head tag').Put 'jquery-1.8.2.js' file as the top file and others after.Check and let me know.

ShaHam11 3-Dec-13 5:20am

You mean to say remove or comment the http://code.jquery.com/jquery-1.8.2.js. If yes i have commented and tried running it now I get the same error but yellow mark is highlighted on Scripts/colResizable-1.3.min.js" I cant remove this jquery plugin or this file as it is required for my gridveiw to work properly this file is responsible for dynamic re-sizing of gridveiw column which i found from http://www.codeproject.com/Articles/366013/Resizable-asp-net-Gridview-columns-using-Jquery?msg=4705744#_comments

Sampath Lokuge 3-Dec-13 5:28am

Yep,That maybe the cause.Why can't you put that js file (colResizable-1.3.min.js) inside the 'Menu' master.

ShaHam11 3-Dec-13 6:40am

Yup I tried that its not working, As you see there are 3
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/colResizable-1.3.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.cookie.js" type="text/javascript"></script>
which is required for gridveiw column resizing .. However as per your suggestion it tried copying the col----.js file to menu master no go.. I feel it does not make any sense the above 2 files i.e cokkies.js and colresizable.js intended specifically for objectrepository page.aspx again thank you so much for your help

Sampath Lokuge 3-Dec-13 6:46am

Why can't you put all js files into 'Menu' master ? B'cos 'ObjectRepositoryPages' is inherited from menu page know ? why you can't ?

ShaHam11 3-Dec-13 6:57am

Yes your right i tried copying all the .js files to menu master and tried not working

here is the updated code

object reposiotry page

<%@ Page Title="" Language="C#" MasterPageFile="~/Master/Menu.master" AutoEventWireup="true"
CodeFile="ObjectRepositoryPages.aspx.cs" Inherits="ObjectRepositoryPages" %>

<%@ MasterType VirtualPath="~/Master/Menu.master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">

<script type="text/javascript">

$(document).ready(function () {
if ($.cookie('colWidth') != null) {
var columns = $.cookie('colWidth').split(',');
var i = 0;
$('.GridViewStyle th').each(function () {
$(this).width(columns[i++]);
});
}

$(".GridViewStyle").colResizable({
liveDrag: true,
gripInnerHtml: "<div class='grip'></div>",
draggingClass: "dragging",
onResize: onSampleResized
});

});

var onSampleResized = function (e) {
var columns = $(e.currentTarget).find("th");
var msg = "";
columns.each(function () { msg += $(this).width() + ","; })
$.cookie("colWidth", msg);
};
</script>

Menu master page code

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Menu.master.cs" Inherits="Master_Menu" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Universal Test Automation Framework</title>
<asp:ContentPlaceHolder ID="head" runat="server">

<link href="../Script/MainWindow.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery.js" type="text/javascript"></script>
<%-- <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>--%>

<script src="../Scripts/colResizable-1.3.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.cookie.js" type="text/javascript"></script>

<script type='text/javascript' language="javascript">

$(document).ready(function () {
try {

$("#buttomLeftSide").bind("contextmenu", function (e) {
e.preventDefault();
$("#custom-menu").css({ top: e.pageY + "px", left: e.pageX + "px" }).show(100);
});
$(document).mouseup(function (e) {
var container = $("#custom-menu");
if (container.has(e.target).length == 0) {
container.hide();
}
});
}
catch (err) {
alert(err);
}
});

</script>

when i run the below piece of script gets highlighted in yello colour in Objectrep page
$(document).ready(function () {
if ($.cookie('colWidth') != null) {
var columns = $.cookie('colWidth').split(',');
var i = 0;
$('.GridViewStyle th').each(function () {
$(this).width(columns[i++]);
});
}

$(".GridViewStyle").colResizable({
liveDrag: true,
gripInnerHtml: "<div class='grip'></div>",
draggingClass: "dragging",
onResize: onSampleResized
});

});

Sampath Lokuge 3-Dec-13 7:09am

I couldn't see the closing tag for the 'head'.What happened to it ?

ShaHam11 3-Dec-13 22:07pm

I have closed the head tag I didnt copy the complete code here anyways i am pasting it below
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Menu.master.cs" Inherits="Master_Menu" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Universal Test Automation Framework</title>
<asp:ContentPlaceHolder ID="head" runat="server">

<link href="../Script/MainWindow.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery.js" type="text/javascript"></script>
<%-- <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>--%>

<script src="../Scripts/colResizable-1.3.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.cookie.js" type="text/javascript"></script>

<script type='text/javascript' language="javascript">

$(document).ready(function () {
try {

$("#buttomLeftSide").bind("contextmenu", function (e) {
e.preventDefault();
$("#custom-menu").css({ top: e.pageY + "px", left: e.pageX + "px" }).show(100);
});
$(document).mouseup(function (e) {
var container = $("#custom-menu");
if (container.has(e.target).length == 0) {
container.hide();
}
});
}
catch (err) {
alert(err);
}
});

</script>
<style type="text/css">
#custom-menu
{
z-index: 1000;
position: absolute;
border: solid 2px black;
background-color: white;
padding: 5px 0;
display: none;
}
#custom-menu ol
{
padding: 0;
margin: 0;
list-style-type: none;
min-width: 130px;
width: auto;
max-width: 200px;
font-family: Verdana;
font-size: 12px;
}
#custom-menu ol li
{
margin: 0;
display: block;
list-style: none;
padding: 5px 5px;
}
#custom-menu ol li:hover
{
background-color: #efefef;
}

#custom-menu ol li:active
{
color: White;
background-color: #000;
}

#custom-menu ol .list-devider
{
padding: 0px;
margin: 0px;
}

#custom-menu ol .list-devider hr
{
margin: 2px 0px;
}

#custom-menu ol li a
{
color: Black;
text-decoration: none;
display: block;
padding: 0px 5px;
}
#custom-menu ol li a:active
{
color: White;
}
</style>
</head>

Sampath Lokuge 4-Dec-13 2:09am

Can you check with the 'Chrome Dev tools,whether is there any js error ?

ShaHam11 4-Dec-13 3:29am

Hey Sampath, I Have a good news. Its working what i did was I used "jQuery.noConflict()" in Master menu page and that resolved all the problem now its working fine. Thanks for your support.

Sampath Lokuge 4-Dec-13 3:33am

Great :)

Sampath Lokuge 4-Dec-13 3:38am

Then plz accept the '@Jain Nishant' Solution.

ShaHam11 4-Dec-13 3:42am

Yes

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Jain Nishant · Accepted Answer · 2013-12-02T23:03:00

Solution 2

U can use jquery.noConflict() method, if you r using two different versions of Jquery.
But i'll suggest you to use the latest only.....

Posted 2-Dec-13 23:03pm

Jain Nishant

Comments

ShaHam11 3-Dec-13 5:21am

I am novice developer can you please tell me where to include the jquery.noConflict() in which file as you can see there 2 files above

ShaHam11 3-Dec-13 5:29am

Hi Jain I placed $.noConflict(); right below the <script type="text/javascript"> on both the pages and tried placing it on single page as well but no luck still its not working...let me tell i Comment the menu.cs file script the code works perfectly but i cant do that

Sampath Lokuge 4-Dec-13 3:35am

+ 5