Pass argument to Javascript metod from Ajax ActionLink MVC3.0

Question

I have a problem sending parameter (Id) to javascript function. Let me tell you about the underlying idea: I have a Training model and every training model has 1 Survey. What i do in below code is to generate a pop-up link for each Training that employee takes and display a pop-up window. For this I used the Ajax ActionLink and in each part to show the popup window I cretead a div with the id of Training. So when onComplete I call a javascript function openPopup to show the popup window but it does not. So in conclusion I have different div's in which I will popup a window and I want to pass the id of div to the javascript function. Can you tell me how to solve this problem?

Thank you.

  <script type="text/javascript">
        $(document).ready(function (id) {
            $(id).dialog({
                autoOpen: false,
                title: 'Anket',
                width: 500,
                height: 'auto',
                modal: true
            });
        });
        function openPopup(id) {
            $(id).dialog("open");
        }
    </script>

   foreach (var training in Model.TrainingList)
   {
      <tr>
        <td class="view_detail_label">
                        Eğitim Adı
         </td>
          <td>

          @Ajax.ActionLink(training.Name.Name,
                           "AddSurvey", 
          new { employeeId = Model.Id, trainingId = training.Id },
           new AjaxOptions
             {
            UpdateTargetId = training.Id.ToString(),
              HttpMethod = "GET",
              InsertionMode = InsertionMode.Replace,
               LoadingElementId = "context",
               OnComplete = "openPopup('"+training.Id.ToString()+"')"
                 })

               <div id="@training.Id" style="display:none;"/>  

                    </td>                        
                </tr>                 
               }           
            }
        </table>

Answer 1

You could use a plain Html.ActionLink that you could unobtrusively AJAXify which gives you far more flexibility. Also you seem to have used some id argument of your document.ready function which doesn't exist and has nowhere to come from. The document.ready callback doesn't take any arguments.

So:

<script type="text/javascript">
    $(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
                    });
                }
            });
            return false;
        });
    });
</script>

<table>
    @foreach (var training in Model.TrainingList)
    {
       <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"></div>
           </td>                        
       </tr>                 
    }
</table>

Also I would very strongly recommend you moving your script out in a separate javascript file and not mix your markup with scripts.

Remark: since you are opening the result of the AJAX call in a modal dialog I don't quite see the point of having a result div in each row. You could simply move it out from the <table> and have a single one.