Div content load using Ajax and MVC 4

Question

I have several buttons which should change content of region on the page. I've read numerous tutorials how can lazy load can be implemented using ajax, but unfortunately with no success. Here is my html:

<div>
    <div>
        <button id="btn_goals">Goals</button>
        <button id="btn_achievements">Achievements</button>
    </div>

    <div id="region_content"></div>

</div>

and here is my js:

$(document).ready(function () {

$('#btn_goals').on('click', function () {
    $.ajax({
        url: '@Url.Action("Index", "Goals")',
        success: function (data) {
            $('#region_content').html(data);
        }
    });
});

$("#btn_achievements").on("click", function () {
    ......
});

});

what is the problem?

********** EDIT ************

Well, I changed url in ajax parameters from url: '@Url.Action("Index", "Goals")' to url: '/Goals/Index' and it starts work fine. What is the reason?

Answer 1

Try following the following steps:

1. Use console.log("Inside Success function"+ data); to test whether the required data is being returned from the controller method.

Use Ctrl+Shift+I in your browser to view the console. If Successful:

2. Use:

var div = document.getElementById("region_content");
div.innerHTML = div.innerHTML + data;

3. Make sure your type conversions are done right.

4. Also specify type: POST in your ajax function.

If you do not see 'Inside Success function' on your console, there might be something wrong with your controller function.