How do I use a jQuery function inside content page of the master page?
Question
I'm using a master page for my login. The login form inside the child page requires the following method in order to be activated:
<script type="text/javascript">
$(document).ready(function () {
$('#signinform').validate();
});
</script>
but since signinform is inside the child page how can I call it from the master page? Do I actually have other possibilities to call it directly from the child page?
Info
My web application specification:
- ASP.Net Web Forms
- .Net Framework 4.6
Login.Master
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Login.master.cs" Inherits="Web_WebApp.Login" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<title>Web - <%: Page.Title %></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="assets/global/css/style.css" rel="stylesheet">
<link href="assets/global/css/ui.css" rel="stylesheet">
<link href="assets/global/plugins/bootstrap-loading/lada.min.css" rel="stylesheet">
<%-- <asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>--%>
</head>
<body class="account separate-inputs" data-page="login">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<script src="assets/global/plugins/jquery/jquery-1.11.1.min.js"></script>
<script src="assets/global/plugins/jquery/jquery-migrate-1.2.1.min.js"></script>
<script src="assets/global/plugins/gsap/main-gsap.min.js"></script>
<script src="assets/global/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/global/plugins/backstretch/backstretch.min.js"></script>
<script src="assets/global/plugins/bootstrap-loading/lada.min.js"></script>
<script src="assets/global/js/pages/login-v1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#signinform').validate();
});
</script>
</body>
</html>
Login.aspx (Content Page)
<%@ Page Title="Log In" Language="C#" MasterPageFile="~/Login.Master" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Web_WebApp.Account.Login" Async="true" %>
<%@ Register Src="~/Account/OpenAuthProviders.ascx" TagPrefix="uc" TagName="OpenAuthProviders" %>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<!-- BEGIN LOGIN BOX -->
<div class="container" id="login-block">
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<div class="account-wall">
<i class="user-img icons-faces-users-03"></i>
<form id="signinform" runat="server" class="form-validation animated fadeIn">
<div class="form-signin">
<div class="append-icon">
<input type="text" name="name" id="name" class="form-control form-white username" placeholder="Username" required>
<i class="icon-user"></i>
</div>
<div class="append-icon m-b-20">
<input type="password" name="password" class="form-control form-white password" placeholder="Password" required>
<i class="icon-lock"></i>
</div>
<button type="submit" id="submit-form" class="btn btn-lg btn-danger btn-block ladda-button" data-style="expand-left">Sign In</button>
<div class="clearfix">
<p class="pull-left m-t-20"><a id="password" href="#">Forgot password?</a></p>
</div>
</div>
<div class="form-password">
<div class="append-icon m-b-20">
<input type="password" name="password" class="form-control form-white password" placeholder="Password" required>
<i class="icon-lock"></i>
</div>
<button type="submit" id="submit-password" class="btn btn-lg btn-danger btn-block ladda-button" data-style="expand-left">Send Password Reset Link</button>
<div class="clearfix">
<p class="pull-left m-t-20"><a id="login" href="#">Already got an account? Sign In</a></p>
<p class="pull-right m-t-20"><a href="user-signup-v1.html">New here? Sign up</a></p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</asp:Content>
I appreciate your efforts in reaching a solution for my question.
3 answers
solution1
1 2015-08-02 17:14:13
First off, if you're seeing an error $ is not defined , then you apparently do not have jQuery included in your page before you are trying to use it. Including jQuery at the appropriate spot in your page could be your entire problem.
If your "child page" is really just a template within the main HTML page (no iframe, no popup page, just one actual HTML page), then it's all one HTML page (the content is all combined before being sent to the browser as one piece of HTML) and if jQuery has already been loaded into the page then you can just use:
$(document).ready(function () {
$('#signinform').validate();
});
Anywhere you want in the page as long as jQuery has already been loaded before you insert this. When the page is done being loaded and parsed by the browser, the $(document).ready() call will trigger and $('#signinform') should be reachable in the form at that time.
If your page structure is more complicated than that (like using embedded documents such as iframes) or dynamically loading some of the content via client-side JS, then you will have to describe more about how that works before we can advise on how to know when it is loaded.
Also, if you see JS errors in your page, please describe exactly what you see in the error console.
solution2
1 ACCPTED 2015-08-02 17:16:40
You can register a section or ContentPlaceholder in your master page, perhaps in the footer underneath your jQuery <script... tag, and then use that section name in the content page to inject the content into the master. Basically, you create another placeholder exactly as you have for MainContent
Master page:
...
<script type="text/javascript" src="BLAH/BLAH/jquery.js"/>
<asp:ContentPlaceHolder id="MyScripts" runat="server">
</asp:ContentPlaceHolder>
Content page:
<asp:Content ContentPlaceHolderId="MyScripts" runat="server">
<script type="text/javascript">
$(document).ready(function () {
$('#signinform').validate();
});
</script>
</asp:Content>
However, your jQuery script include does not appear to be working, most likely you are working within a subfolder, and should change all of your scripts to start with a / so that they are relative to the web root, not your current folder.
solution3
0 2015-08-02 17:23:09
//runtime error: '$' is undefined
you need to include jQuery: http://learn.jquery.com/about-jquery/how-jquery-works/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
or maybe run jQuery.noConflict(); on somewhere . try this
jQuery(document).ready(function ($){
$('#signinform').validate();
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.