Popup window opens once after close unless refresh

Question

I have a problem that I'm stuck with. I have MVC 3 application and in this application I have the concepts of Survey and Training. Each Training having 1 Survey. To let the users take Survey I open a pop-up page when the HTML actionlink clicked. Below is the code for this in DetailsSurvey.cshtml:

  <tr>  <td class="view_detail_label">
                Eğitim Adı
            </td>
            <td>                    
               @Html.ActionLink(
               training.Name.Name, 
               "AddSurvey", 
               new { 
                   employeeId = Model.Id, 
                   trainingId = training.Id 
               },
               new {
                   @class = "addSurvey"
               }
           )
             <div class="result" style="display:none;"></div>
            </td>               
        </tr> 

Then in javascript side I have following functions to open popup:

$(document).ready(function () {
    $('.addSurvey').click(function () {
        $.ajax({
            url: this.href,
            type: 'GET',
            cache: false,
            context: this,
            success: function (result) {
                $(this).next('.result').html(result).dialog({
                    autoOpen: true,
                    title: 'Anket',
                    width: 500,
                    height: 'auto',
                    modal: true
                }); //end of dialog
            } //enf of success function
        }); //end of ajax call
        return false;
    });

});

$(document).delegate('.addSurvey', 'click', function () {
    $.ajax({
        url: this.href,
        type: 'GET',
        cache: false,
        context: this,
        success: function (result) {
            $(this).next('.result').html(result).dialog({
                autoOpen: false,
                title: 'Anket',
                width: 500,
                height: 'auto',
                modal: true
            }); //end of dialog
        } //enf of success function
    }); //end of ajax call
});

There can be 1 or more Survey links. What happens is when I click the button, pop up windows opens for the first time but when I close the popup window and try to reopen it, it does not open at all. If i open it in new tab or window it opens respectively. I used delegate subscribe the event but it does not work. Is this caused by the action taken by close button, it somehow loses the functionality after closing. Are there are any fixes?

Answer 1

<tr>  <td class="view_detail_label">
            Eğitim Adı
        </td>
        <td>                    
           @Html.ActionLink(
           training.Name.Name, 
           "AddSurvey", 
           new { 
               employeeId = Model.Id, 
               trainingId = training.Id 
           },
           new {
               @class = "addSurvey"
               @onclick="javascript:OpenSurveyPopup();"
           }
       )
         <div class="result" style="display:none;"></div>
        </td>               
    </tr> 
<script type="text/javascript">
    function OpenSurveyPopup()
 {
    $.ajax({
        url: this.href,
        type: 'GET',
        cache: false,
        context: this,
        success: function (result) {
            $(this).next('.result').html(result).dialog({
                autoOpen: true,
                title: 'Anket',
                width: 500,
                height: 'auto',
                modal: true
            }); //end of dialog
        } //enf of success function
    }); //end of ajax call
    return false;
});
 }
</script>

Also remove $(document).ready() and $(document).delegate(). This will work. Thanks.

Answer 2

I solved problem using the following live function, what i did is: In close action of popup I called my controller and re render the page now it works like a charm.

$('a.addSurvey').live('click', function (e) {
        var $this = $(this);
        e.preventDefault();
        $.ajax({
            url: this.href,
            type: 'GET',
            cache: false,
            context: this,
            success: function (result) {
                $(this).next('.result').html(result).dialog({
                    autoOpen: true,
                    title: 'Anket',
                    width: 500,
                    height: 'auto',
                    modal: true,
                    close: function () { console.log("onClose"); $('.surveyTable').load('Home/DetailsSurvey', {id:@Model.Id}); }
                }); //end of dialog
                console.log($(this).next('.result'));
            }, //enf of success function
            complete: function () {
                console.log("Complete");
            },
            error: function () {
                console.log("Error");
            }
        }); //end of ajax call
    });   //end of live