CODEWITHSUNDEEP
javascriptjqueryjquery-uiasp.net-mvc-2
Dhana
Dhana

Reputation: 1658

Javascript dialog() function is not working in my MVC code

Here my JS code

      $(function () {

               $(".button").live("click", function () {
        alert("Dialog page function is working!");
        $(".dialog").dialog("open");
    });

        $(".dialog").dialog({
            buttons: {
                "Ok": function () {
                    $(this).dialog("close");
                }
            }
        });
});



<td>
    <input type="button" value="Add Value" class="button" />
</td>

I have edit my code.. I have include the alertbox in side the button.. i am able to get the alert box when i click the button but dialog box is not wrking

Upvotes: 3

Views: 4585

Answers (1)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038820

You have nested two document.ready functions. Try like this:

$(function () {
    $(".button").live("click", function () {
        $(".dialog").dialog("open");
    });

    $(".dialog").dialog({ 
        autoOpen: false,
        buttons: { 
            "Ok": function () { 
                $(this).dialog("close"); 
            } 
        } 
    });
});

Demo.

UPDATE:

After the numerous comments it looks like there are still problems with setting this up in an ASP.NET MVC application. So here's a step by step guide to get a working solution:

  1. Create a new ASP.NET MVC 2 application

  2. Replace the contents of Index.aspx view with the following:

    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css"> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script> 
    <script type="text/javascript">
        $(function () {
            $('.button').live('click', function () {
                $('.dialog').dialog('open');
            });

            $('.dialog').dialog({
                autoOpen: false,
                buttons: {
                    'Ok': function () {
                        $(this).dialog('close');
                    }
                }
            });
        });
    </script>
</head>
<body>
    <input type="button" value="Add Value" class="button" /> 
    <div class="dialog"> 
        sadffasdf
    </div> 
</body>
</html>

  3. Run the application

  4. Click on the Add value button

Upvotes: 3

Related Questions