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?
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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 ConnectWise

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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.