Using Jquery ajax to call ActionResult method in Controller and return data

Question

I'm trying to understand how the Jquery Ajax methods works. Right now, I have some problems calling the ActionResult method in the controller that will return a PartialView.

Have created an button which I will use to get new data in from the server (Ajax call should run)

Code: (ActionResult in Home controller)

public ActionResult All()
    {
        List<Student> model = db.Students.ToList();

        return PartialView("_Student", model);
    }

This method is the one I'm trying to call when I press the button in the main Index view.

Code: (Index view)

<div class="row">
<div class="small-12 column sbw-travel">
    <h2>Travel</h2>

    <div class="row">
        <div class="small-12 columns">
            <button id="button1" class="sbw-travel-button">Search</button>
        </div>
    </div>

    <div class="small-12 sbw-travel-box" id="rooms">

    </div>
</div>
</div>

When the user hit the button, an Ajax call should run, and the list will appear in the section with id=rooms.

Script: (Ajax code)

 $(document).ready(function () {
    $('#button1').click(function () {
        $.ajax({
            type: 'GET',
            url: @Url.Action("All", "Home"),
            datatype: "html",
            success: function () { 
                $('#rooms').html(???);
            }
        });
        return false;
    });
});

Can any of you see if I have forgot something to make this run like I have described?

score 7 · Accepted Answer · answered Oct 18 '15 at 18:28

7

The result is on the succes event. Try:

$(document).ready(function () {
$('#button1').click(function () {
    $.ajax({
        type: 'GET',
        url: @Url.Action("All", "Home"),
        datatype: "html",
        success: function (data) { 
            $('#rooms').html(data);
        }
    });
    return false;
}); });

answered Oct 18 '15 at 18:28

P. Frank

5,691
6
22
50

So far nothing happens.. if i debug, I'm getting an error: Invalid flags supplied to RegExp constructor 'All', but not sure what it means yet. – Mikkel Oct 18 '15 at 18:35
You are invalid character on your response data. You should escape strings and put them to quotes – P. Frank Oct 18 '15 at 18:42

score 0 · Answer 2 · edited May 23 '17 at 12:15

0

I would suggest loading firebug when you click the button (enable the console), make sure the requested URI is responding with valid HTML data on the click event.

I also generally find using something like:

$('#button1').on('click', function () { ...

usually yields better results, see here: Difference between .on('click') vs .click()

edited May 23 '17 at 12:15

Community

1
1

answered Oct 18 '15 at 18:32

hughjidette

136
7

Using Jquery ajax to call ActionResult method in Controller and return data

2 Answers2

Linked