How to solve conflict with JQuery

Question

0.00/5 (No votes)

See more:

This is my code in the MasterPage:

HTML

<script src="Script/jquery-1.8.2.js" type="text/javascript"></script>
<script src="Script/jquery.calendars.js" type="text/javascript"></script>
<script src="Script/jquery.calendars.plus.js" type="text/javascript"></script>
<script src="Script/jquery.calendars.picker.js" type="text/javascript"></script>
<script src="Script/jquery.calendars.picker-ar.js" type="text/javascript"></script>
<script src="Script/jquery.calendars.islamic.js" type="text/javascript"></script>
<script src="Script/jquery.calendars.islamic-ar.js" type="text/javascript"></script>
<script src="Script/jquery.calendars.validation.js" type="text/javascript"></script>
<script src="Script/jquery.calendars.validation.min.js" type="text/javascript"></script>
<script src="Script/jquery.calendars.validation.pack.js" type="text/javascript"></script>
<script type="text/javascript">      
        $(function () {
            $('.txtDate').calendarsPicker($.extend({ showTrigger: '#calImg', calendar: $.calendars.instance('islamic', 'ar'),constrainInput: true
            }));
        });
</script>

And I have another jQuery in the webform page when i but this below code i can't show the calender in the textbox:

XML

<script src="Script/jquery-1.3.2.min.js" type="text/javascript"> </script>
<script src="Script/tableSorter.js" type="text/javascript"> </script>
<script src="Script/jquery.tablesorter.js" type="text/javascript"> </script>
<link rel="stylesheet" type="text/css" href="themes/blue/style.css" />
<script src="Script/jquery.metadata.js" type="text/javascript"> </script>
<script src="Script/jquery-latest.js" type="text/javascript"> </script>
<script type="text/javascript" src="Script/jquery.tablesorter.js"> </script>
<script language="javascript" type="text/javascript">

    $(document).ready(function () {

        $("table").tablesorter({

            headers: {

                0: {

                    sorter: false
                },
                6: {

                    sorter: false
                }

            }
        });

        $("table").bind("sortStart", function () {

            // remove the row with the class foo
            pageRow = $(this).children("tbody").children("tr:.foo");
            $(this).children("tbody").children("tr:.foo").remove();

        });

        $("table").bind("sortEnd", function () {

            // add the removed row
            $(this).children("tbody").append(pageRow);

        });
    });
</script>

Posted 11-Feb-13 3:28am

Member 8194711

Updated 11-Feb-13 4:11am

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

v4

Add a Solution

4 solutions

Solution 2

Use the latest stable version of jQuery.Don't need to use both the lower and higher version. You can download the latest version from here
http://jquery.com/[^]

Hope this helps

Posted 11-Feb-13 4:11am

Jameel VM

Add a Solution

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

vinodkumarnie · Accepted Answer · 2013-02-11T17:43:00

Jquery conflicts happens for the below reasons...

1. Calling same script more than one time in page
2. Assigning non-existing path
3. Improper reference to the contols

Solution-

1. Use

JavaScript

jQuery.noConflict();

2. Order your script in proper manner
I) jquery(latest or higher versions)
II) jquery-ui
III) newsticker etc...
3. Avoid calling same script more than one time
4. Only one script can do many functionality. So verify yourself and avoid using more scripts.
Ex:

JavaScript

<script src="Script/jquery.calendars.validation.js" type="text/javascript"></script>

is enough for calander. So u can remove

JavaScript

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

Hope these suggestions helps you...

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2013-02-11T04:16:00

You have used some js file twice.
And the jQuery file is already added in Master Page, so no need to again link it in content page.

So, the Script files to be used in webform page/content page will be like below.

XML

<link rel="stylesheet" type="text/css" href="themes/blue/style.css" />
<script src="Script/tableSorter.js" type="text/javascript"> </script>
<script src="Script/jquery.tablesorter.js" type="text/javascript"> </script>
<script src="Script/jquery.metadata.js" type="text/javascript"> </script>

And there are two table sorters used jquery.tablesorter.js and tableSorter.js. Make sure you need both. Otherwise just delete the unnecessary one.

Thanks...

arnavs · Accepted Answer · 2013-02-11T04:09:00

Solution 1

HI,

Your problem is you are confused where to include the scripts. Go for the master page on those scripts that are required in all the pages that inherits the master page.

Add only those script code which is required in your page level specifically.
Avoid adding the scripts again and again. That will create conflict in choosing the script.min files.

Thanks

Posted 11-Feb-13 4:09am

arnavs

Comments

Member 8194711 11-Feb-13 13:51pm

i dont have much experience with dealing with scripts thats why i put the question here can you please tell me what is wrong in my script

How to solve conflict with JQuery

4 solutions

Solution 4

Solution 3

Solution 2

Solution 1

Add your solution here

Preview 0

How to solve conflict with JQuery

4 solutions

Solution 4

Solution 3

Solution 2

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us