Question

I am using asp.net 4.0. i am creating the Url with the help of “routes.MapPageRoute”.

so i noticed that jquery file was not gettin loaded due to url not being static. so i used
“ResolveClientUrl”. I could load the js files but in jquery code i get error.

I did ask this same question on
http://forums.asp.net/t/1680184.aspx/1?Jquery+Error+Object+Doesn+t+support+this+method+or+property+

I have given the image for the error also..
please anyone can guide me where am i going wrong.

I somehow feel that i have issue due to the pattern i am writting url in global file.

Code:

<asp:Content ID="content1" runat="server" ContentPlaceHolderID="HeadContent">
    <link href="../js/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
     <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js" type="text/javascript"></script>
     <script src='<%=ResolveClientUrl("~/js/fancybox/jquery.fancybox-1.3.4.js")%>' type="text/javascript"></script>
     <script src='<%=ResolveClientUrl("~/js/fancybox/jquery.easing-1.3.pack.js")%>' type="text/javascript"></script>
     <script src='<%=ResolveClientUrl("~/js/fancybox/jquery.mousewheel-3.0.4.pack.js")%>' type="text/javascript"></script>
    <script type="text/javascript">
        $.noConflict();
        $(document).ready(function () {
            $(".fancyYoutube").fancybox({
                'transitionIn': 'elastic',
                'transitionOut': 'fade',
                'width': 680,
                'height': 495,
                'type': 'swf'
            });
        });
    </script>
</asp:Content>

Error:

Answer 1

You need to remove $.noConflict(); from the beginning of code; or if you want to keep it, you should not use $ in the lines following it:

Solution 1:

// $.noConflict(); <-- comment or remove this line
$(document).ready(function () {
  $(".fancyYoutube").fancybox({
    'transitionIn': 'elastic',
    'transitionOut': 'fade',
    'width': 680,
    'height': 495,
    'type': 'swf'
  });
});

Solution 2:

$.noConflict();
jQuery(document).ready(function () {
  jQuery(".fancyYoutube").fancybox({
    'transitionIn': 'elastic',
    'transitionOut': 'fade',
    'width': 680,
    'height': 495,
    'type': 'swf'
  });
});

Explanation:
As the docs say, you use $.noConflict() to tell jQuery do not use $ and let other libraries use it. Here you have no other library, so you don’t need to relinquish jQuery’s control of the $ variable, so both solutions should work for you.