How to pass variable as parameter in ajax call

Question

I have a click function which call jQuery dialogue modal poup. I want URL.Action to be call inside the dialog's open function which needs to pass parameters. But I need to pass the data parameter (variable) dynamically. How do I pass this dynamically? How do I store it in a variable and pass it to the "data:" field? I couldn't get it to work with following code.

Note: Also from the syntax, -- url = '@(Html.Raw(Url.Action("ShowPopUp", "Home", new { serviceID = svc, serviceMasterId = masterId, serviceStatusId = statusId }))) > showing the following warning messages 1. The name 'svc' does not exist in the current context 2. The name 'masterId' does not exist in the current context 3. The name 'statusId' does not exist in the current context

    $('.lnkRequest').click(function () {
        serviceId = $(this).attr('serviceID');
        $('#dialog').css("display", "block");
        $('#dialog').data('svcId', $(this).attr('serviceID'));
        $('#dialog').data('svcMasterId', $(this).attr('serviceMasterID'));
        $('#dialog').data('svcStatusId', $(this).attr('serviceStatusID'));
        $('#dialog').dialog('open');
        return false;
    });

    $('#dialog').dialog({
        autoOpen: false,
        modal: true,
        height: 'auto',
        width: 'auto',
        draggable: false,
        open: function (event, ui) {
            var svc = $(this).data('svcId');
            var masterId = $(this).data('svcMasterId');
            var statusId = $(this).data('svcStatusId');
            url = '@(Html.Raw(Url.Action("ShowPopUp", "Home", new { serviceID = svc, serviceMasterId = masterId, serviceStatusId = statusId })))',                                  
            $(this).load(url);
        }
    });

Answer 1

jQuery's load method accepts a data parameter.

$('#dialog').dialog({
        autoOpen: false,
        modal: true,
        height: 'auto',
        width: 'auto',
        draggable: false,
        open: function (event, ui) {
            var svc = $(this).data('svcId');
            var masterId = $(this).data('svcMasterId');
            var statusId = $(this).data('svcStatusId');
            url = '@(Html.Raw(Url.Action("ShowPopUp", "Home")))';                                 
            $(this).load(url, 
                {
                    serviceId: svc,
                    serviceMasterId: masterId,
                    serviceStatusId: statusId
                });
        }
    });

Source: http://api.jquery.com/load/

See the very last example on the page.

Answer 2

get the dialog id using jquery and then load

pls follow links:

MVC 2 - Display a jquery dialog that contains a partial view

also this