Solved

The form doesn't show up by using Jquery.

Posted on 2012-03-28
11
338 Views
Last Modified: 2012-03-28
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

0
Comment
Question by:zhshqzyc
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 3
11 Comments
 
LVL 25

Expert Comment

by:Rouchie
ID: 37776823
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
 

Author Comment

by:zhshqzyc
ID: 37776859
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
 
LVL 20

Expert Comment

by:BuggyCoder
ID: 37777041
$(document).ready(function () {

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

    });

Open in new window

0
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

 

Author Comment

by:zhshqzyc
ID: 37777058
But it is not working as well, did I reference the correct css and jquery library?
0
 
LVL 20

Expert Comment

by:BuggyCoder
ID: 37777086
use firebug to debug the script and see if alert works or not
0
 
LVL 25

Expert Comment

by:Rouchie
ID: 37777095
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
 
LVL 25

Accepted Solution

by:
Rouchie earned 500 total points
ID: 37777108
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
 

Author Comment

by:zhshqzyc
ID: 37777191
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
 
LVL 25

Expert Comment

by:Rouchie
ID: 37777236
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
 

Author Closing Comment

by:zhshqzyc
ID: 37777252
Great.
0
 
LVL 20

Expert Comment

by:BuggyCoder
ID: 37777260
$(document).ready(function () {
                    $(".someButton").click(function () {
                       
                       var $dialog = $("#divPopUp").width(600).height(500).dialog({autoOpen=false;title='Dialog'});
                       $dialog.dialog('open');
                    });
                });
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

751 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question