zhshqzyc
asked on
The form doesn't show up by using Jquery.
I am testing a pop up form by clicking an asp.net button. However it is not working.
Thanks for help.
Thanks for help.
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="WebTest._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:Button ID="Button1" runat="server" Text="Button" Class="someButton" />
<div id="divPopUp" style="display:none;">
<p>test</p>
</div> <script type="text/javascript">
$(document).ready(function () {
$("someButton").click(function () {
alert('hi')
$("#divPopUp").dialog({ width: 600, height: 500 });
});
});
</script>
</asp:Content>
ASKER
Did you mean?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>
Home Page
</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body>
<form method="post" action="Default.aspx" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTYwODIwNTg5MWRkQwiVen3YNjdrvbC8uDMr4NwFCsYKTDAz1FBJ38DLehk=" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgLh9MX2DALT8MqYCEqLBIC7BJJfRxqIFlKYcSwj0UtLo3soMoLztB1JVMb0" />
</div>
<div class="page">
<div class="header">
<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
<div class="loginDisplay">
</div>
<div class="clear hideSkiplink">
</div>
</div>
<div class="main">
<input type="submit" name="ctl00$MainContent$Button1" value="Button" id="MainContent_Button1" Class="someButton" />
<div id="divPopUp" style="display:none;">
<p>test</p>
</div> <script type="text/javascript">
$(document).ready(function () {
$("someButton").click(function () {
alert('hi')
$("#divPopUp").dialog({ width: 600, height: 500 });
});
});
</script>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
$(document).ready(function () {
$("#Button1").click(function () {
alert('hi')
$("#divPopUp").dialog({ width: 600, height: 500 });
});
});
ASKER
But it is not working as well, did I reference the correct css and jquery library?
use firebug to debug the script and see if alert works or not
somebutton is a class name, so it should be reference in JQuery as $(".someButton")
Alert should have a semi colon after it ---> alert('hi');
Then, you need to prevent the click function actually submitting. Just checking the doc's to find out about this
Alert should have a semi colon after it ---> alert('hi');
Then, you need to prevent the click function actually submitting. Just checking the doc's to find out about this
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
It looks making progress.
I created a table. After I clicked the button, the form did pop out then vanished. How can it be stuck there?
I created a table. After I clicked the button, the form did pop out then vanished. How can it be stuck there?
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="WebTest._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:Button ID="Button1" runat="server" Text="Button" Class="someButton" />
<div id="divPopUp" style="display:none">
<table><tr><td>col1</td><td>col2</td></tr>
<tr><td>ty</td><td>jkl</td></tr>
</table>
</div> <script type="text/javascript">
$(document).ready(function () {
$(".someButton").click(function () {
$("#divPopUp").dialog({ width: 600, height: 500 });
});
});
</script>
</asp:Content>
You have not included my new JQuery. Please refer to my working code - move the working code into the <head> section. This prevents the button submitting the page after it has been clicked.
ASKER
Great.
$(document).ready(function () {
$(".someButton").click(fun ction () {
var $dialog = $("#divPopUp").width(600). height(500 ).dialog({ autoOpen=f alse;title ='Dialog'} );
$dialog.dialog('open');
});
});
$(".someButton").click(fun
var $dialog = $("#divPopUp").width(600).
$dialog.dialog('open');
});
});
Also, move the JQuery code to the <head> content area, after the references to the JS files.