Opening the corresponding Conversation in a Modal Box

Question

I am using @Darin Dimitrov's method explained in Loading a partial view in jquery.dialog to allow users to click on one of their Private Messages and view it inside a modal box. I am using ASP.NET MVC3 and Razor as my view engine. But I'm having some trouble getting this to work... Below is what I've attempted so far:

The messages are displayed in a table:

<tr id="@item.Id" class="openConversationLink">
    <td class="newMessageStatus">@MessageStatus(item)</td>
    <td class="msgSenderName">@item.Sender</td>
    <td class="msgSubject">@item.Subject</td>
    <td class="msgLastUpdated">@item.LastUpdated</td>
    <td class="modalItemActions"></td>
</tr>

And inside the same partial view, I got the following script block:

<script type="text/javascript">
    $(function () {
        $("#conversationModal").dialog({
            autoOpen: false,
            width: 850,
            height: 600,
            resizable: false,
            draggable: false,
            modal: true,
            open: function (event, ui) {
                var convId = ui.attr('id');
                alert(convId);
                $(this).load('@Url.Action("Conversation", "Message", new { conversationId = convId})');

            }
        });

        $(".openConversationLink").click(function () {
            $("#conversationModal").dialog('open');
        });
    });
</script>

Basically, I'm not sure what the event and ui parameters inside the open handler refer to. So a little explanation on both would be appreciated. But anyway, even the messages do not get displayed now, I keep getting those error:

Compiler Error Message: CS0103: The name "convId" does not exist in the current context. Source: $(this).load('@Url.Action("Conversation", "Message", new { conversationId = convId})');

Basically, I do not want that line to get triggered until I actually click on one of the rows (to open the conversation dialog), but it seems like it's actually getting triggered when the Messages page opens.

UPDATE:

Here's my jQuery code now:

$(function () {
    $("#conversationModal").dialog({
        autoOpen: false,
        width: 850,
        height: 600,
        resizable: false,
        draggable: false,
        modal: true,
        open: function (event, ui) {
            var convId = event.target.attr('id');
            alert(convId);
            $(this).load('Message/Conversation/' + convId);

        }
    });

    $(".openConversationLink").click(function () {
        $("#conversationModal").dialog('open');
    });
});

Anything that can be done about that? :)

neebz · Accepted Answer · 2011-04-25T13:43:31.557

Before you go any further, you need to understand the key thing here >

Url.Action() method is working on the server side. Whatever is passed on to it has to be decided on the server side. Any variables declared in Javascript at the client-side are totally oblivious to the server-side code hence the compiler is trying to find the convId at the server-side code and obviously can't find it. So it gives the error.

Now saying that, we need to find a way to pass the convId to the server. For that you would need to do some manual string concatenation at the client-side. you can do something like this >

'@Url.Action("Conversation", "Message")' + '?conversationId='+convId

You see we used the server side code to generate /Message/Conversation and then concatenated it at client side to make it /Message/Conversation/?conversationId=valueOfconvId

I hope it makes sense :)

EDIT:

<script type="text/javascript">
var clickedId;
   $(function () {
        $("#conversationModal").dialog({
            autoOpen: false,
            width: 850,
            height: 600,
            resizable: false,
            draggable: false,
            modal: true,
            open: function (event, ui) {

                $(this).load('Message/Conversation/' + clickedId);

            }
        });

        $(".openConversationLink").click(function () {
            clickedId = $(this).attr("id");
            $("#conversationModal").dialog('open');
        });
    });
</script>

makes sense now? we are saving the id of the clicked tr in a global variable

Yup totally makes sense. I already figured that out myself (but forgot to update the code here - sorry about that). But I still need to figure out a way to get the value of the `id` of the row (tr) being clicked... Any suggestions? — Kassem, Apr 25 '11 at 13:27
Answer accepted :) Thanks for the help man. Now I need to get my automapper configuration right. I hate bugs... :/ — Kassem, Apr 25 '11 at 14:17
Is there a way to pass the clickedId inside some custom option object to the dialog box? I keep having this requirement over and over again, and I keep trying to find my way around it "hackishly" :) — Kassem, May 07 '11 at 14:40

Opening the corresponding Conversation in a Modal Box

1 Answers1