CODEWITHSUNDEEP
jqueryasp.net.netajaxpopup
Tiber
Tiber

Reputation: 116

ajax popup not showing when button clicked

I am using the code below to try to create a popup that displays text and a few buttons. The problem is that when the button is clicked the popup does not show up and the page reloads. 

<script type="text/javascript"             src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#button1").live("click", function () {
        $("#popup").dialog({
            title: "Display",
            width: 600,
        })
        return false;
    });
</script>

<asp:Button ID="button1" ClientId="button1" runat="server" Text="testpopuo" />
<div>
<div id="popup" style="display:none">
    <asp:Literal Text="Are you sure you want to delete the blog?"  runat="server"/>
    <asp:Button Text="Yes" runat="server" />
</div>
    </div>

Upvotes: 1

Views: 1523

Answers (2)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

  1. You need to include jQuery js too (you only show the jQuery UI script). Put that before the jQueryUI include
  2. You can set the ClientIDMode="Static" ASP.net property so that ID is left unchanged. There are a few options available: http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode(v=vs.110).aspx
  3. You need to wrap your jQuery code in a DOM ready handler as it precedes the elements on the page. $(function(){YOUR CODE HERE}); is a short-cut for $(document).ready(function(){YOUR CODE HERE});

Code: 

<script src="your jQuery.js path here" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(function(){
        $("#button1").live("click", function () {
            $("#popup").dialog({
                title: "Display",
                width: 600,
            })
            return false;
        });
    });
</script>

<asp:Button ID="button1" ClientIDMode="Static" runat="server" Text="testpopuo" />
<div>
<div id="popup" style="display:none">
    <asp:Literal Text="Are you sure you want to delete the blog?"  runat="server"/>
    <asp:Button Text="Yes" runat="server" />
</div>
</div>

Looks like this when clicked:

enter image description here

Upvotes: 2

vusan
vusan

Reputation: 5331

You are using query selector before button loaded. So write your code under jquery ready function.

$( document ).ready(function() {
    $("#button1").live("click", function () {
        $("#popup").dialog({
            title: "Display",
            width: 600,
        })
        return false;
    });
});

Upvotes: 1

Related Questions