Using JQuery in a asp.net web application based on master pages to open a popup window

Question

I have an asp.net 4 web application that is based on a master page. Within the master page I referenced the script and css files required. However when the page loads I’m getting a JavaScript error 'Microsoft JScript runtime error: Object expected'. I know this is something to do with the master page because if I build a test application without master page the code works fine.

Master Page Code

   <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication2.Site1" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <script src="Popup.js" type="text/javascript"></script>
    <link rel="stylesheet" href="StyleSheet1.css" type="text/css" media="screen" />
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <title>Test</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
    </body>
    </html>

Popup Code

function Popup() {
        window.showModalDialog("webForm3.aspx", "");
    }

$(document).ready(function () {
    $("#button").click(function () {
        var isChecked = $('#checkbox1').is(':checked');
        if (isChecked) {
            Popup();
        }
    });
});

Main Page code

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true"
CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
Check box
    <div id="button">
        <asp:CheckBox ID="checkbox1" runat="server" /></div>
</asp:Content>

Popup Page code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs"     Inherits="WebApplication2.WebForm3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0     Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Popup</title>
</head>
<body>
<form id="form1" runat="server">
<div>
Hellow World
</div>
</form>
</body>
</html>

score 0 · Answer 1 · answered Apr 26 '12 at 08:28

//================  site1.master  =======================//

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="site1.master.cs" Inherits="NewJqueryPlugins.site1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Popup.js" type="text/javascript"></script>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

//================  popup.js  =======================//


$(document).ready(function () {
    $('#button').click(function (e) {
        //var isChecked = $(this).find('#ContentPlaceHolder1_checkbox1').is(':checked');

        //Or

        var isChecked = $(this).find(':checkbox').is(':checked');

        if (isChecked) {
            Popup();
        }
    });
});

function Popup() {
    window.showModalDialog("webForm3.aspx", "");
};


//================  webfrom2.aspx  =======================//


<%@ Page Title="" Language="C#" MasterPageFile="~/site1.Master" AutoEventWireup="true"
    CodeBehind="WebForm2.aspx.cs" Inherits="NewJqueryPlugins.WebForm2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="button" style="border: 2px solid green;">
        Check box
        <asp:CheckBox ID="checkbox1" runat="server" />
    </div>
</asp:Content>


//================  webfrom3.aspx  =======================//


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="NewJqueryPlugins.WebForm3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Popup</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Hellow World
    </div>
    </form>
</body>
</html>

if you are using master page all the input flied id will be converted to asp:ContentPlaceHolder id value +'_'+ checkbox id value . now u r checkbox id value is ContentPlaceHolder1_checkbox1. so while using master page be careful all the id will be changed in asp.net . — Thulasiram, Apr 26 '12 at 08:32
in browser right click and view page source you can see your original id for checkbox. i also faced same problem when working with asp.net c# web application for implementing jquery for webform using masterpage. — Thulasiram, Apr 26 '12 at 08:37

Using JQuery in a asp.net web application based on master pages to open a popup window

1 Answers1