Asp.net Mvc jquery ajax?

Question

I have links like following.

<a href="/Customer/_EditCustomer?CustomerId=2" class="customer_details">Deneme Müşteri 2</a>
<a href="/Customer/_EditCustomer?CustomerId=3" class="customer_details">Deneme Müşteri 2</a>

I want to use jquery ajax post like this:

$(".customer_details").click(function () {
    $.ajax({
        url: $(this).attr("href"),
        type: 'POST',
        beforeSend: function () {

        },
        complete: function () {

        },
        success: function (result) {
            $("#customer_operations_container").html(result);
        },
        error: function (result) {
            alert("Hata!");
        }
    });   //end ajax
});

Or this:

$(".customer_details").click(function () {
    $("#customer_operations_container").load($(this).attr("href"));
});

And Action Method

public ActionResult _EditCustomer(int CustomerId)
{
    // get customer from db by customer id.
    return PartialView(customer);
}

But I cant do what I wanted. When I click to link, PartialView does not load. It is opening as a new page without its parent. I tried prevent.Default but result is the same.

How can I load the partialView to into a div?

Note: If I use link like this <a href="#"> it works.

Thanks.

you may want to try this: $(".customer_details").click(function (e) { e.preventDefault(); [rest of your code] — user1047100
– user1047100, Commented Nov 27, 2012 at 8:07

BjarkeCK · Accepted Answer · 2012-11-27 08:25:55Z

1

Maybe the problem is with the actionresult, try with Content to see if that changes anything.

public ActionResult _EditCustomer(int CustomerId)
{
    // get customer from db by customer id.
    return Content(customer.ToString());
}

Try one of these...

$(".customer_details").click(function (e) {
    e.preventDefault()
    $.ajax({
        url: $(this).attr("href"),
        //I think you want a GET here? Right?
        type: 'GET',
        beforeSend: function () {

        },
        complete: function () {

        },
        success: function (result) {
            $("#customer_operations_container").html(result);
        },
        error: function (result) {
            alert("Hata!");
        }
    });   //end ajax
});

Or

$(".customer_details").click(function (e) {
    e.preventDefault();
    $("#customer_operations_container").load($(this).attr("href"));
});

Or

 $(".customer_details").click(function (e) {
    e.preventDefault();
    $.get($(this).attr("href"), function(data) {
          $("#customer_operations_container").html(data);
    });
});

If none of this works, check if there's any js errors

edited Nov 27, 2012 at 8:25

answered Nov 27, 2012 at 8:19

BjarkeCK

5,7295 gold badges44 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

AliRıza Adıyahşi Over a year ago

I tried all of them. But it does not work. I cant understand why.

BjarkeCK Over a year ago

Is there a successful connection to Jquery ?

BjarkeCK Over a year ago

try changing the a tag to a span/div :p

AliRıza Adıyahşi Over a year ago

click function is not trigerred.

AliRıza Adıyahşi Over a year ago

problem is jqgrid. Links are in jqgrid. I write "prevent.Default" in jqgrid loadComplete event and its work. Thanks a lot everybody.

Zabavsky · Accepted Answer · 2012-11-27 08:09:57Z

1

The problem is when you click on the link you already start navigation to it. So just use e.preventDefault() or return false from the click method to prevent the default behavior

$(".customer_details").click(function (e) {
    e.preventDefault();
    ...
}

answered Nov 27, 2012 at 8:09

Zabavsky

13.7k8 gold badges57 silver badges81 bronze badges

1 Comment

AliRıza Adıyahşi Over a year ago

It must work, I know. I debugged but no error or warning. It open partialView as a new page

Abdel Raoof Olakara · Accepted Answer · 2012-11-27 08:22:55Z

1

This should help you out:

            $.ajax({
                url: $(this).attr("href"),
                type: 'POST',
                beforeSend: function () {

                },
                complete: function () {

                },
                success: function (result) {
                    $("#customer_operations_container").html(result);
                },
                error: function (result) {
                    alert("Hata!");
                }
            });   //end ajax
            return false;

The only thing you where missing is the prevention of A tag working. By returning false your custom event is called and the default event is not executed.

answered Nov 27, 2012 at 8:22

Abdel Raoof Olakara

19.4k11 gold badges92 silver badges134 bronze badges

Comments

webdeveloper · Accepted Answer · 2012-11-27 08:33:06Z

1

Try this

$(function(){
    $(".customer_details").click(function (e) {
        e.preventDefault();
    });
});

Using ready event

Demo: http://jsfiddle.net/hdqDZ/

answered Nov 27, 2012 at 8:33

webdeveloper

17.3k3 gold badges51 silver badges47 bronze badges

Collectives™ on Stack Overflow

Asp.net Mvc jquery ajax?

4 Answers 4

5 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related