How do I close the popup without reloading the parent window using jQuery

See more:

jQuery

popup

Hi,

My requirement is like below:
1. A link will open a popup window.
2. In the popup window there will be a search option and search result will be displayed in a table.
3. One column of the table will be hyperlinked and clicking on the hyperlink will close the popup window and retrieve the value related to the hyperlink and display it to the text field of parent window.

I have written following code to open the popup:

<script type="text/javascript">
    $(document).ready(function () {
        $("#lnkSupplier").live("click", function (e) {
            e.preventDefault(); //use this or return false
            var url = $(this).attr('href');
            $("#ListDialog").dialog({
                title: 'Find Supplier',
                autoOpen: false,
                resizable: false,
                height: 650,
                width: 700,
                show: { effect: 'drop', direction: "up" },
                modal: true,
                draggable: true,`enter code here`
                open: function (event, ui) {
                    $(this).load(url);

                },
                close: function (event, ui) {
                    $(this).dialog('close');
                }
            });

            $("#ListDialog").dialog('open');
            return false;
        });
    });
<script/>

I have written following code to get Json data and place them inside a table of the popup.

<script type="text/javascript">
    $(document).ready(function () {
        $('#btnSubmit').click(function () {
            $.getJSON('/Supplier/SupplierList/' + $('#CompanyName').val(), function (data) {
                var items = "<table class='gridtable'><tr><th class='CompanyName'>Company Name</th><th class='ContactName'>Contact Name</th><th class='ContactTitle'>Contact Title</th><th class='Country'>Country</th></tr>";
                $.each(data, function (i, supplier) {
                    items += "<tr><td>" + "<a id='" + supplier.SupplierID + "' href='Create/'" + supplier.SupplierID + " class='link' >" + supplier.CompanyName + "</a></td><td>"
                        + supplier.ContactName + "</td><td>"
                        + supplier.ContactTitle + "</td><td>"
                        + supplier.Country + "</td></tr>";
                });
                items += "</table>";
                $('#Suppliers').html(items);
            });
        })

When I click on a hyper link in the table column that is 'CompanyName' the popup will close automatically. I have written following code to close the popup and retrieve the the value for parent window.

var val = '';
        $("a.link").live('click', function (e) {
            e.preventDefault();
            val = this.id;
            $('#ListDialog').dialog('close');

        });

But the popup is not closing. If I remove "e.preventDefault()" statement the parent window will get refreshed and data already available in it is disappeared. which is not right! How can I close the popup without reloading the parent window after retrieving value from the popup.

Thanks in advance.
Partha