How to avoid jquery version conflicts ?

Question

0.00/5 (No votes)

See more:

Hi ,

I am working on asp.net application.

In masterpage i have used slideout winndow like survey window,

and in content page , i have used jquery timecontrol.

But both jquery no working at a same time.Both jqueries are compulsory.

Please help me.

My master page code is :

XML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

    <script src="js/jquery.tabSlideOut.v1.3.js"></script>

         <script>
             $(function () {

                 jQuery('.slide-out-div').tabSlideOut({
                     tabHandle: '.handle',                              //class of the element that will be your tab
                     pathToTabImage: 'images/benefits.jpg',          //path to the image for the tab (optionaly can be set using css)
                     imageHeight: '590px',                               //height of tab image
                     imageWidth: '14px',                               //width of tab image
                     tabLocation: 'right',                               //side of screen where tab lives, top, right, bottom, or left
                     speed: 300,                                        //speed of animation
                     action: 'click',                                   //options: 'click' or 'hover', action to trigger animation
                     topPos: '110px',                                   //position from the top
                     fixedPosition: true                               //options: true makes it stick(fixed position) on scroll
                 });
             });

         </script>

And Content page code is :

JavaScript

  <script type="text/javascript" src="js/jquery.min.js"></script>
   <link href="bstrap/bootstrap-combined.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" media="screen"
     href="bstrap/bootstrap-datetimepicker.min.css"/>
       
    <script type="text/javascript" src="bstrap/bootstrap-datetimepicker.min.js">
    </script>


<body>
<script type="text/javascript">
    function pageLoad() {
        $('#datetimepicker1').datetimepicker({
            format: 'hh:mm:ss',
            language: 'pt-BR', pickDate: false
        });
        $('#datetimepicker2').datetimepicker({
            format: 'hh:mm:ss',
            language: 'pt-BR', pickDate: false
        });
        $('#datetimepicker3').datetimepicker({
            format: 'hh:mm:ss',
            language: 'pt-BR', pickDate: false
        });
        $('#datetimepicker4').datetimepicker({
            format: 'hh:mm:ss',
            language: 'pt-BR', pickDate: false
        });
        $('#datetimepicker5').datetimepicker({
            format: 'hh:mm:ss',
            language: 'pt-BR', pickDate: false
        });

        $('#adatetimepicker1').datetimepicker({
            format: 'hh:mm:ss',
            language: 'pt-BR', pickDate: false
        });
        $('#adatetimepicker2').datetimepicker({
            format: 'hh:mm:ss',
            language: 'pt-BR', pickDate: false
        });
        $('#adatetimepicker3').datetimepicker({
            format: 'hh:mm:ss',
            language: 'pt-BR', pickDate: false
        });
        $('#adatetimepicker4').datetimepicker({
            format: 'hh:mm:ss',
            language: 'pt-BR', pickDate: false
        });
        $('#adatetimepicker5').datetimepicker({
            format: 'hh:mm:ss',
            language: 'pt-BR', pickDate: false
        });
    }
    </script>
</body>

Please help me to sort out this problem and sorry for poor english

Posted 13-Feb-14 18:13pm

udusat13

Updated 13-Feb-14 18:16pm

Snehasish_Nandy

v2

Add a Solution

4 solutions

Solution 2

You can use jQuery.noConflict()[^].

But let me explain one thing here. When you use Master Pages and include any js or CSS files to that, then it would automatically reflect them in Content Pages. No need to add those files again.

Posted 13-Feb-14 18:21pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Comments

udusat13 14-Feb-14 0:30am

Thanks for reply,

js File in master page is used for Slideout window which , i have to show on every page , while
js file in content page is for datetime control, & its only for single page.

& please expln me how to to use noconflict().

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 14-Feb-14 1:42am

Do one thing...

Just delete the following line from Content Page.

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

As you have already added one jQuery file in master Page, so it should work. You can see the file in Script Tab of Developer Tool.

Solution 3

Refer

jquery-conflict-checking[^]

conflict-between-jquery-on-masterpage-and-jquery-in-webpart[^]

Posted 13-Feb-14 19:05pm

JoCodes

Comments

udusat13 14-Feb-14 1:30am

Hi, all

Ples help me to solve this problem , I am new to jquery & unable to solve this problem

I tried noconflicts but problem is unsolved.

Please give me hint with my example.

JoCodes 14-Feb-14 1:35am

Have you tried to set the Jquery reference into an anonymous funtion ? like $jq13 = jQuery.noConflict(true);?

udusat13 14-Feb-14 1:53am

Yes i tried.but result was same

JoCodes 14-Feb-14 3:35am

Can you just tell how have you referenced the Jquery in master as well as content page?

Solution 4

I have added latest jquery & problem is solved.Application is working fine now..

Posted 4-Mar-14 19:08pm

udusat13

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)

Snehasish_Nandy · Accepted Answer · 2014-02-13T18:20:00

Solution 1

Refer

avoiding-conflicts-in-jquery-and-jquery-extensions[^]

how-to-avoid-conflict-between-two-version-of-jquery-library[^]

can-i-use-multiple-versions-of-jquery-on-the-same-page[^]

Posted 13-Feb-14 18:20pm

Snehasish_Nandy