CODEWITHSUNDEEP
jqueryasp.net-mvc
arame3333
arame3333

Reputation: 10223

I want to render a Partial View after an Ajax call

I am returning a partial view from an AJAX call but it is not being rendered. It looks like the showOtherTrade function is not being called, see the code below;

My view is;

@model SCD.ViewModels.OtherTradesViewModel

@{
    ViewBag.Title = "Edit Other Trades";
}
<fieldset>
    <legend>Edit Other Trades for the subcontractor @Model.Subcontractor.CompanyName</legend>
    <p class="highlight">@ViewBag.Message</p>
    <p>The Primary Trade is set to @Model.PrimaryTradeName</p>

    <form method="get" action="@Url.Action("EditOtherTrades")" 
          data-scd-ajax="true" data-scd-target="#otherTradeList">
        <p>Select a trade: <input type="search" name="searchOtherTrade" id="searchOtherTrade" data-scd-autocomplete="@Url.Action("AutocompleteOtherTrade", "DataService")" style = "width: 300px;" class="submitSelection"/>
        </p>
    </form>  

    @Html.Partial("_OtherTrades", Model.OtherTrades.ToList())
</fieldset>

My PartialView is @model IList

<div id="otherTradeList">
    <table>
        @Html.DisplayForModel()
    </table>
</div>

And the DisplayTemplate is;

@model SubcontractorTrade
<tr>
    <td>@Model.Trade.TradeName </td>
    <td><input type="button" value="Remove"/>@Html.HiddenFor(model => model.TradeId)</td>
</tr>

I am using Autocomplete to connect to a dataitem to be added to a grid.

So my javascript looks like;

var showOtherTrade = function (data) {
        var $form = $(this);
        var $target = $($form.attr("data-scd-target"));
        var $newHtml = $(data);
        $target.replaceWith($newHtml);
        $newHtml.effect("highlight");
    };

    var updateAutocompleteForm = function (event, ui) {
        var $input = $(this);

        if ($input.hasClass("submitSelection")) {
            $input.val("");
            var searchId = ui.item.id;
            url = AddOtherTradeUrl;
            dataService.addOtherTrade(searchId, showOtherTrade, url);
        } 
    };

    var createAutocomplete = function () {
        var $input = $(this);

        var options = {
            source: $input.attr("data-scd-autocomplete"),
            select: updateAutocompleteForm
        };

        $input.autocomplete(options);
    };

And it appears that the showOtherTrade function is not being called. This is probably what I need to fix.

My dataservice, if you are interested, looks like; 

var dataService = new function () {
    $.ajaxSetup({
        cache: false
    });
    addOtherTrade = function(searchId, callback, url) {
        $.getJSON(url,
            { searchId: searchId },
            function(data) {
                callback(data);
            });
        };

        return {
            addOtherTrade: addOtherTrade
        };
} ();

Upvotes: 2

Views: 4134

Answers (1)

user1968030
user1968030

Reputation:

You can call this code in success or failure ajax call

$.get(action, null, function(data){
  $('#someDiv').html(data);
}, 'html');

and your controller could return:

return PartialView("SomePartial", Model)

Upvotes: 4

Related Questions