Search code examples
jqueryasp.net-mvcjquery-dialog

How to pass variable as parameter in ajax call


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);
        }
    });

Solution

  • 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.