How to include jQuery inside a content page of a master page in asp.net?

Question

0.00/5 (No votes)

See more:

I have tried all the possibilities (not the ones involving adding js from codebehind)..

I have a script which I want to include in a content page.. There is a ref of .js also. I want to include both!

HTML

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

and

XML

<script> <!--Script to add scrollbar to the category boxes-->
$(function () {
    $('.catcontent').slimscroll({
        height: '180px',
        width: '100%',
        opacity: '.08',
        distance: '0px'
    }).parent().css({
        'float': 'left',
        'margin-right': '1px'
    });
});
</script>

I have tried all the possibilities, added both in the master page, added both in the content page adding ref in the master page and script in the content page! Since I have a very weak logic base of how a browser checks the script so unable to achieve what I want to!

This script is working fine if I make a separate aspx page. Adds a scrollbar neatly to the

HTML

<div>

. But it is not working when I'm trying to add it inside a content page!

Also when you answer this! Please try and explain me what is the best practice and how to actually add it!! I remember of adding css and js to content pages in the past! But I was a little out of touch and I tried searching in the internet! Nothing worked for me today! Please help me! Thanks

Master page:

XML

<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <!--CSS Stylesheets-->
    <link rel="stylesheet" type="text/css" href="~/Content/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/css/bootstrap.min.css" />
    <link rel="stylesheet" media="screen" href="~/Content//font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/css/style.css" />
    <!-- Javascript -->
    <script src="~/Scripts/js/jquery-2.0.3.min.js" type="text/javascript"></script>
    <script src="~/Scripts/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="Scripts/js/jquery.slimscroll.min.js" type="text/javascript"></script>


</head>
<body>
    <form id="form1" runat="server">
        <div>
<div class="container">
<p>ldlajdlkdjljda</p>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>

Content Page:

XML

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

    <header>
        <div class="container">
        </div>
    </header>
    <section class="category">
        <div class="container">
            <h2>Some text goes here</h2>
            <p>
                Some text goes here...Some text goes here...Some text goes here...
                Some text goes here...Some text goes here...Some text goes here...
                Some text goes here...Some text goes here...Some text goes here...
                Some text goes here...Some text goes here...Some text goes here...
                Some text goes here...Some text goes here...Some text goes here...
            </p>
            <span class="row" />
        </div>
        <div class="container content">
            <asp:DataList ID="DataListCategory" runat="server" DataKeyField="Pk_Category_Id" DataSourceID="SqlDataSourceCategory" RepeatDirection="Horizontal" RepeatColumns="4" Width="100%" CssClass="row" AlternatingItemStyle-HorizontalAlign="NotSet" RepeatLayout="Flow">
                <ItemTemplate>
                    <div class="col-sm-12 col-md-3 item">
                        <asp:Label runat="server" ID="CatID" Text='<%# Eval("Pk_Category_Id") %>' Visible="False" />
                        <h4><%# Eval("Category_Title") %></h4>
                        <div class="catcontent">
                            <ul>
                                <asp:DataList ID="DataListObjectivesList" runat="server" DataKeyField="Pk_Objective_Id" DataSourceID="SqlDataSourceObjectives">
                                    <ItemTemplate>

                                        <li>
                                            <asp:HyperLink ID="linkObjective" runat="server" Target="_blank"
                                                Text='<%# Eval("Title") %>'
                                                NavigateUrl='<%# "Objective.aspx?oid=" + Eval("Pk_Objective_Id")%>' />
                                        </li>
                                    </ItemTemplate>
                                </asp:DataList>
                            </ul>
                        </div>
                    </div>
                    <div>
                        <asp:SqlDataSource ID="SqlDataSourceObjectives" runat="server" ConnectionString="<%$ ConnectionStrings:ConString %>" SelectCommand="SELECT O.Pk_Objective_Id, O.Title, M.fk_Category_Id FROM dml_np_Objective AS O INNER JOIN dml_np_Objective_Category_Mapping AS M ON O.Pk_Objective_Id = M.fk_Objective_Id WHERE (M.fk_Category_Id = @CID) ORDER BY O.Pk_Objective_Id DESC">
                            <SelectParameters>
                                <asp:ControlParameter ControlID="CatID" Name="CID" PropertyName="Text" />
                            </SelectParameters>
                        </asp:SqlDataSource>
                    </div>
                </ItemTemplate>
            </asp:DataList>
        </div>
    </section>
    <div>
        <asp:SqlDataSource ID="SqlDataSourceCategory" runat="server" ConnectionString="<%$ ConnectionStrings:ConString %>" SelectCommand="SELECT [Pk_Category_Id], [Category_Title] FROM [dml_np_Category] WHERE ([Is_Active] = @Is_Active) ORDER BY [Pk_Category_Id] DESC">
            <SelectParameters>
                <asp:Parameter DefaultValue="true" Name="Is_Active" Type="Boolean" />
            </SelectParameters>
        </asp:SqlDataSource>
    </div>

    <script> <!--Script to add scrollbar to the category boxes-->
    $(function () {
        $('.catcontent').slimscroll({
            height: '180px',
            width: '100%',
            opacity: '.08',
            distance: '0px'
        }).parent().css({
            'float': 'left',
            'margin-right': '1px'
        });
    });
    </script>
</asp:Content>

Posted 14-Feb-14 7:28am

Rahul Vohra

Updated 14-Feb-14 9:58am

v4

Add a Solution

Comments

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

Do you see any error on Developer Tool Console window?
Do you see all the js files listed in Script tab and CSS files in Styles tab?

Rahul Vohra 15-Feb-14 11:53am

Thanks for replying! It was not detecting! I copied and pasted the scripts ref from another project and I realized I forgot to remove "~" from the source path! It is working fine now!

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

Most welcome buddy. :)
I have added one answer. Please accept and up-vote.

Thanks,
Tadit

2 solutions

Solution 1

Post the markup for your master page and form. It is hard to give an answer from the small snippets that you have.

The first thing would be, have you included a reference to the jQuery scripts?

Posted 14-Feb-14 8:02am

AnvilRanger

Comments

Rahul Vohra 14-Feb-14 15:59pm

Updated my question with the markup!! Please have a look at it and tell me where the problem is!! :(

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)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2014-02-15T05:55:00