1

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.

2
  • you may want to try this: $(".customer_details").click(function (e) { e.preventDefault(); [rest of your code]
    – user1047100
    Nov 27, 2012 at 8:07
  • I tried it but it does not work. Nov 27, 2012 at 8:10

4 Answers 4

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

5
  • I tried all of them. But it does not work. I cant understand why. Nov 27, 2012 at 8:25
  • Is there a successful connection to Jquery ?
    – BjarkeCK
    Nov 27, 2012 at 8:26
  • try changing the a tag to a span/div :p
    – BjarkeCK
    Nov 27, 2012 at 8:28
  • click function is not trigerred. Nov 27, 2012 at 8:36
  • problem is jqgrid. Links are in jqgrid. I write "prevent.Default" in jqgrid loadComplete event and its work. Thanks a lot everybody. Nov 27, 2012 at 8:46
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();
    ...
}
1
  • It must work, I know. I debugged but no error or warning. It open partialView as a new page Nov 27, 2012 at 8:23
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.

1

Try this

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

Using ready event

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.