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.
<%@ 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>

Open in new window

zhshqzycAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RouchieCommented:
Can you provide the rendered code to make it easier for us to debug?

Also, move the JQuery code to the <head> content area, after the references to the JS files.
0
zhshqzycAuthor Commented:
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>

Open in new window

0
BuggyCoderCommented:
$(document).ready(function () {

        $("#Button1").click(function () {
        alert('hi')
            $("#divPopUp").dialog({ width: 600, height: 500 });
        });

    });

Open in new window

0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

zhshqzycAuthor Commented:
But it is not working as well, did I reference the correct css and jquery library?
0
BuggyCoderCommented:
use firebug to debug the script and see if alert works or not
0
RouchieCommented:
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
0
RouchieCommented:
Full working code:

<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>
  <script type="text/javascript">

    $(document).ready(function () {

        $(".someButton").click(function (event) {
		
	    event.preventDefault();
            $("#divPopUp").dialog({ width: 600, height: 500 });
        });

    });
 
    </script>
</head>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
zhshqzycAuthor Commented:
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?
<%@ 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>

Open in new window

0
RouchieCommented:
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.
0
zhshqzycAuthor Commented:
Great.
0
BuggyCoderCommented:
$(document).ready(function () {
                    $(".someButton").click(function () {
                       
                       var $dialog = $("#divPopUp").width(600).height(500).dialog({autoOpen=false;title='Dialog'});
                       $dialog.dialog('open');
                    });
                });
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.