CODEWITHSUNDEEP
javascriptjqueryasp.netwebforms
Learning
Learning

Reputation: 20001

Not able to acces js or jquery files from asp.net content page

For some reason i am not able to access the js or jquery files from the content page of asp.net webform

js defined in MasterPage if used in same page working fine but when i want to use the jquery functionaly from Content Page it doesnt work for some reason

even the small function such as $("h1").css("font-size", "200px"); give error in chrome Uncaught ReferenceError: $ is not defined

Issue is only with the js files not being accessible in Content/Child page.

I have no issue with css file only js.

Not sure what i am doing wrong.

MASTER PAGE

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html>

<html>
<head runat="server">
    <title></title>
<!-- Meta -->
<!-- Meta end-->

<!-- Web Fonts -->
     <link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i|Ubuntu:300,300i,400,400i,500,500i,700,700i!Open Sans:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">

<!-- css -->
     <link rel="stylesheet" href="../assets/en/css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../assets/en/css/jquery.mCustomScrollbar.css" />
     <!-- Owl Carousel css -->
     <link rel="stylesheet" type="text/css" href="../assets/en/owl-carousel/owl.carousel.css" />
     <link rel="stylesheet" type="text/css" href="../assets/en/owl-carousel/owl.theme.css" />
     <link rel="stylesheet" type="text/css" href="../assets/en/owl-carousel/owl.transitions.css" />

     <!-- jquery-ui css -->
     <link rel="stylesheet" href="../assets/en/css/jquery-ui.css">
     <!-- animate -->
     <link rel="stylesheet" href="../assets/en/css/animate.min.css">
     <!-- fonts css -->

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
     <link rel="stylesheet" type="text/css" href="../assets/en/css/Pe-icon-7-stroke.css" />
     <link rel="stylesheet" type="text/css" href="../assets/en/css/flaticon.css" />
     <link rel="stylesheet" href="../assets/nivo-lightbox/css/nivo-lightbox.css" /> 
     <link rel="stylesheet" href="../assets/nivo-lightbox/themes/default/default.css"/>
     <!-- custom css -->
     <link rel="stylesheet" href="../assets/en/css/style.css">
<!-- css end-->

    <!-- **** -->
      <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
     <!-- **** -->
</head>
<body>
    <form id="form2" runat="server">
    <asp:ScriptManager runat="server" EnablePageMethods="true">
        <Scripts>
            <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" />
            <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" />
        </Scripts>
    </asp:ScriptManager>

 <header>  
  <!-- Some Controls -->

<!-- Some Controls -->


    </form>

    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
   <script type="text/javascript" src='<%= ResolveUrl ("~/assets/en/js/bootstrap.min.js") %>'></script>


    <script type="text/javascript" src='<%= ResolveUrl ("~/assets/nivo-lightbox/js/nivo-lightbox.js") %>'></script>
    <!-- Metis Menu Plugin JavaScript -->
    <script type="text/javascript" src='<%= ResolveUrl ("~/assets/en/js/metisMenu.min.js") %>'></script>
    <script type="text/javascript" src='<%= ResolveUrl ("~/assets/en/js/jquery.mCustomScrollbar.concat.min.js") %>'></script>
    <!-- animate js -->
    <script type="text/javascript" src='<%= ResolveUrl ("~/assets/en/js/wow.min.js") %>'></script>

    <!--  classify JavaScript -->
    <script type="text/javascript" src='<%= ResolveUrl ("~/assets/en/js/classie.js") %>'></script>
    <!-- owl carousel js -->
    <script type="text/javascript" src='<%= ResolveUrl ("~/assets/en/owl-carousel/owl.carousel1-3-3.js") %>'></script>

    <!-- jquery ui js -->

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>



    <!-- custom js -->
    <script type="text/javascript" src='<%= ResolveUrl ("~/assets/en/js/custom.js") %>'></script>
</body>

    <script>
        $(document).ready(function () {

            $('a').nivoLightbox({
                effect: 'fade',
                clickOverlayToClose: false,
                onInit: function () { },
                beforeShowLightbox: function () { },
                afterShowLightbox: function (lightbox) {},
            });



    </script>
</html>

CONTENT PAGE

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Articles.aspx.cs" Inherits="ArticleList" %>
<%@ Register Src="~/en/UserControls/PagerControl.ascx" TagName="PagerControl" TagPrefix="uc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    <!-- Article list-->

    <!-- Article  list-->

    <div class="pagination">
        <uc1:PagerControl ID="PagerControl1" runat="server" CssClass="gold-pager" PageMode="LinkButton" />
    </div>

    <script>
        $("h1").css("font-size", "200px");
    </script>
</asp:Content>

When i check network using debug tools it show file are downlaoded properly enter image description here

Ignore last two error for jquery-1.10.2.js as i am using higher version

Upvotes: 0

Views: 763

Answers (1)

Pedro Martins
Pedro Martins

Reputation: 874

Hi problem is that the ContentPlaceHolder1 will be writen in your html page before the jQuery script is loaded, so you're trying to use jQuery

$("h1").css("font-size", "200px");

before the tag

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

It could be useful if you have another cph called footer (or footerscripts, whatever name you like), just like you have the head cph.

Then, add the script you need into that cph.

Hope it helps

Upvotes: 1

Related Questions