Loading a Partial View in ASP.Net MVC using JQuery - which method is preferred?

Question

In a very recent questions I was having problems with this. My code was:

$("#SearchResults").load("/Invoice/InvoiceSearchResults/");

And I was advised to use this instead:

$.ajax({
        url: "/Invoice/InvoiceSearchResults/",
        type: 'GET',
        dataType: 'html', // <-- to expect an html response
        success: doSubmitSuccess
    });

with:

function doSubmitSuccess(result) {

$(".SearchResults").html(result);

}

And then someone else kindly tried to help me with:

$.get(postUrl, function(data) {
            $("#posts").append(data);
            $('#ajaxLdMore').addClass('hideElement');
            $('#ldMore').removeClass('hideElement');
        });

It turns out my problem was I'm in idiot abd was using the selector '#' instead of '.'

I'm just wondering should I swap my code for any of these?

Are there real pros and cons of each approach or is it preference?

Is there a better way that nobody has yet posted?

I'm not trying to open up a huge debate (i don't think :) ) - I just want to understand a bit more about it.

Thanks

Answer 1

Both will work, but I personally rely on the jQuery solution since it's more durable long-term than a Microsoft AJAX solution. The shift to jQuery even by MS is very obvious as they've embraced the library heavily themselves.

Answer 2

Using $.ajax gives you more flexibility. I find this particularly useful for error handling.

Also, you can combine that into a single code block if you are not reusing doSubmitSuccess elsewhere

$.ajax({
        url: "/Invoice/InvoiceSearchResults/",
        type: 'GET',
        dataType: 'html', // <-- to expect an html response
        success: function(result){
            $(".SearchResults").html(result);
        },
        error: function(err){
            //handle errors here
        }
    });