Unable to load view on jQuery dialog.load()

Question

Hi,

I am using jQuery to load the details on a modal popup. The url is determined by the item clicked on the Html.Grid().

The following is the .aspx code:

<script type="text/javascript">
        $(document).ready(function () {
            //define config object
            var dialogOpts = {
                modal: true,
                bgiframe: true,
                autoOpen: false,
                height: 500,
                width: 500,
                draggable: true,
                resizeable: true,
                open: function () {
                    //display correct dialog content
//                    $("#example").load("HQBalanceList");
                }
            };
            $("#example").dialog(dialogOpts); //end dialog

            $('.modal').click(
        function () {
            debugger;
            var $this = $(this);
            var url = $this.attr("href");
            $("#example").load(url);
            $("#example").dialog("open");
            return false;
        }
    );

        });
    </script>

<div style="display: none; border: 1;" id="example" title="My First Ajax Dialog"></div>

The a tags have a class called modal applied to them. They look like this:

<a class="modal" href="/Account/Balance?sp3=Code&amp;dateID=3">Code</a>

I can see the modal pop up. But it shows no data. I have debugged into the code and can see that the appropriate view is being passed.

I am new to jQuery. Any help is greatly appreciated.

Thanks :)

Answer 1

Perhaps it is showing the content, but since the #example div is hidden with display:none, everything inside it is also hidden. Try inserting

$('#example').css('display', 'block');

before the dialog call, and hiding it again on close.