MVC Partial Page reload after jquery ajax get

Question

I am quite a newbie in MVC and I have got a question I just can't seem to work out.

I've got a page, let's call it index, that contains a partial page inside it:

// Some html + razor
<input type="button" value="Filter:" 
onclick="FilterByUserRequestedValues()" />
<div id="filteredResultsDiv">
    @Html.Partial("_filteredResultsPartial", Model)
</div>

The partial page is showing the data I want it to show filtered by certain parameters the user have selected at the index page.

This is the javascript function that executes once the user clicks on the button:

function FilterByUserRequestedValues() {
// Some code here
$.get("/PersonalArea/FilterPurchases", { 'dateFilter': dateFilter, 'selectedCategories': selectedCategories, 'selectedProducts': selectedProducts }, function (data) {
        $('#filteredResultsDiv').html = data;
    }, 'html');

My goal here is to call the FilterPurchases method that looks like this:

public ActionResult FilterPurchases(DateTime? dateFilter, string selectedCategories, string selectedProducts)
    {
        SetViewModel(dateFilter, selectedCategories, selectedProducts);

        return PartialView("_filteredResultsPartial", viewModel);
    }

When the jquery-get executes, the FilterPurchase is being called and as expected, I can see the call to the partial cshtml with the data filtered, however the index page view isn't being reloaded nor the filteredResultsDiv.

When I try debug it in Google Chrome, I think it does not get into the callback function at all. Nevertheless, even if it does, will it work?

Because you are using AJAX to obtain your partial view the index page should not reload. However, your filteredResultDiv should be replaced with the get() callback handler. Also, you are making a GET request so check that the browser is really making new requests to your server-side code and not reusing a cached result. — Jasen
– Jasen, Commented Jan 3, 2014 at 21:07

Darin Dimitrov · Accepted Answer · 2014-01-03 21:17:26Z

.html is a function in jQuery, not a property that you can be assigning some values.

So instead of:

$('#filteredResultsDiv').html = data;

you should use this in your callback:

$('#filteredResultsDiv').html(data);

Also since you are making a GET request to the same resource, the browser might have cached the result and you might not see any request being actually made. To workaround this, you could use the $.ajax function which has a special setting for this case:

$.ajax({
    url: '',
    type: 'GET',
    cache: false,
    data: { 
        dateFilter: dateFilter, 
        selectedCategories: selectedCategories, 
        selectedProducts: selectedProducts 
    },
    success: function(data) {
        $('#filteredResultsDiv').html(data);
    }
});

This will append an unique query string parameter to each AJAX request to ensure that it doesn't get cached by the browser and your controller action will always be hit and you will get fresh data from the server.

Collectives™ on Stack Overflow

MVC Partial Page reload after jquery ajax get

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related