Script Is not working inside bootstrap template contentplaceholder

Question

This is my master page form code

 <form id="form1" runat="server">
<div>
   <div id="wrapper">

    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">Candidate Page</a>
        </div>
        <!-- /.navbar-header -->

        <ul class="nav navbar-top-links navbar-right">


            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="fa fa-bell fa-fw"></i>  <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-alerts">
                    <li>
                        <a href="#">
                            <div>
                                <i class="fa fa-comment fa-fw"></i> New Comment
                                <span class="pull-right text-muted small">4 minutes ago</span>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <i class="fa fa-twitter fa-fw"></i> 3 New Followers
                                <span class="pull-right text-muted small">12 minutes ago</span>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <i class="fa fa-envelope fa-fw"></i> Message Sent
                                <span class="pull-right text-muted small">4 minutes ago</span>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <i class="fa fa-tasks fa-fw"></i> New Task
                                <span class="pull-right text-muted small">4 minutes ago</span>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <i class="fa fa-upload fa-fw"></i> Server Rebooted
                                <span class="pull-right text-muted small">4 minutes ago</span>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a class="text-center" href="#">
                            <strong>See All Alerts</strong>
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </li>
                </ul>
                <!-- /.dropdown-alerts -->
            </li>
            <!-- /.dropdown -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="fa fa-user fa-fw"></i>  <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
                    </li>
                    <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
                    </li>
                </ul>
                <!-- /.dropdown-user -->
            </li>
            <!-- /.dropdown -->
        </ul>
        <!-- /.navbar-top-links -->

        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">


                    <li>
                        <a href="#"><i class="fa fa-files-o fa-fw"></i> Manage Profile<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="http://localhost:5529/candidate/CandidateProfile.aspx">Personal Profile</a>
                            </li>
                            <li>
                                <a href="http://localhost:5529/candidate/Academic.aspx">Academic</a>
                            </li>
                            <li>
                                <a href="http://localhost:5529/candidate/ProExperience.aspx">Professional Experience</a>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                    <li>
                        <a href="http://localhost:5529/candidate/UploadResume.aspx"><i class="fa fa-edit fa-fw"></i> Upload Resume</a>
                    </li>
                    <li>
                        <a href="http://localhost:5529/candidate/ChangePW.aspx"><i class="fa fa-edit fa-fw"></i> Change Password</a>
                    </li>                                            

                </ul>
            </div>
            <!-- /.sidebar-collapse -->
        </div>
        <!-- /.navbar-static-side -->
    </nav>

    <div id="page-wrapper">

        <div class="row">
            <div class="col-lg-12">
                <br /><br />
            </div>
            <div class="col-lg-12">

             <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4><asp:ContentPlaceHolder ID="cph_title" runat="server">

                        </asp:ContentPlaceHolder></h4>
                    </div>
                    <!-- /.panel-heading -->
                    <div class="panel-body">
                        <asp:ContentPlaceHolder ID="cph_content" runat="server">
                        </asp:ContentPlaceHolder>
                    </div>
                    <!-- /.panel-body -->
                </div>
                 </div>
        </div>

     </div>
     <!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->

<!-- jQuery Version 1.11.0 -->
<script src="/../js/jquery-1.11.0.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="/../js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="/../js/plugins/metisMenu/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="/../js/sb-admin-2.js"></script>
</div>
</form>

this is my content page

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

href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
$(function () { $("#datepicker").datepicker({ changeMonth: true, changeYear: true }); });
Institude/University Graduate Date

    </tr>
        <tr>
        <td class="auto-style3">&nbsp;</td>
        <td class="auto-style1">
            &nbsp;</td>
    </tr>
    <tr>
        <td class="auto-style3">Highest Education level</td>
        <td class="auto-style1">Field of Study</td>
    </tr>
    <tr>
        <td class="auto-style3">
            <asp:DropDownList ID="ddlEducation" runat="server">
            </asp:DropDownList>
        </td>
        <td class="auto-style1">
            <asp:DropDownList ID="ddlFilStudy" runat="server">
            </asp:DropDownList>
        </td>
    </tr>
    <tr>
        <td class="auto-style3">&nbsp;</td>
        <td class="auto-style1">&nbsp;</td>
    </tr>
    <tr>
        <td class="auto-style3">Grade</td>
        <td class="auto-style1"><input id="datepicker" type="text" /></td>
    </tr>
    <tr>
        <td class="auto-style3">
            <asp:DropDownList ID="ddlGrade" runat="server">
            </asp:DropDownList>
        </td>
        <td class="auto-style1">&nbsp;</td>
    </tr>
    <tr>
        <td class="auto-style3">&nbsp;</td>
        <td class="auto-style1">&nbsp;</td>
    </tr>
    <tr>
        <td class="auto-style4"></td>
        <td class="auto-style5"></td>
    </tr>
    <tr>
        <td class="auto-style3" colspan="2" style="text-align: center">
            <asp:Button ID="btnSave" runat="server" Text="Save" />
        </td>
    </tr>
    <tr>
        <td class="auto-style3">&nbsp;</td>
        <td class="auto-style1">&nbsp;</td>
    </tr>
    <tr>
        <td class="auto-style3">&nbsp;</td>
        <td class="auto-style1">&nbsp;</td>
    </tr>
</table>
</asp:Content>

what i want to do is call the 'datepicker' and a calender will pop up. but when do it in new masterpage, these code work fine(so i assume script is no problem), but when i apply to the masterpage frame contentpage 'cph_content', the script no works. — Jelly
Well, you are using head for the ContentPlaceHolderID, but I don't see that anywhere in your Master Page. — Solomon Closson
stackoverflow was not allow me to put whole code in here, so i only put part of it. — Jelly

Jelly Jelly · Accepted Answer · 2014-08-14T06:34:23

I have solved this.Just for other who probably facing same issue to refer.there are few things to check.

check the JQuery version in the master page was compatible with the Link's version.
try to change the panel control's ID (button,input,...) to avoid the reserved key-word duplicated.
vote me if it is helped. =P

Script Is not working inside bootstrap template contentplaceholder

1 Answers