missing ) after argument list error when using Ajax.ActionLink mvc2

Question

I've got this actionlink that is generating this error in firefox

<%: Ajax.ActionLink(" ", "SelectEditProduct", new { id = item.Id }, new AjaxOptions { UpdateTargetId = "dialog", InsertionMode = InsertionMode.Replace, OnSuccess = "$(\"#dialog\").dialog(\"open\");"}, new { Class="edit"})%>

It seems to be coming from the little javascript snippet I have. I escaped the quotations though so I'm stumped.

Answer 1

What I see here is that you are using jQuery alongside with Microsoft AJAX. Those two have no reason to be mixed in the same project and if you already have jQuery the other is completely useless. So instead of polluting your markup with javascript and wondering how to escape single and double quotes with slashes and get plenty of errors, do it unobtrusively (the jQuery way):

<%: Html.ActionLink(
    "Some link text", 
    "SelectEditProduct", 
    new { id = item.Id }, 
    new { @class = "edit" }
) %>

And in a separate js file:

$(function() {
    $('a.edit').click(function() {
        // When a link with class="edit" is clicked
        // send an AJAX request to the href and replace the result
        // of a DOM element with id="dialog" with the response
        // returned by the server
        // Also when the request completes show a jQuery dialog.
        $('#dialog').load(this.href, function() {
            $('#dialog').dialog('open');
        });
        return false;
    });
});

Answer 2

You must pass the name of a function to OnSuccess, you can't write your function right in the AjaxOptions. So change your code to:

<%: Ajax.ActionLink(" ", "SelectEditProduct", new { id = item.Id }, new AjaxOptions { UpdateTargetId = "dialog", InsertionMode = InsertionMode.Replace, OnSuccess = "openDialog"}, new { Class="edit"})%>

And then write the corresponding JavaScript function:

openDialog = function() {
    $("#dialog").dialog("open");
}