CODEWITHSUNDEEP
asp.net-mvc-2jquery
Alex
Alex

Reputation: 833

How to Ajaxify a hyperlink (JQuery & Ajax)

I have to dynamically populate content into a DIV on clicking a hyperlink which should pass a value (code) to retrieve the content from server.

How can I achieve this using JQuery, Ajax and Hyperlink? I know how to retrieve content from server using JQuery & Ajax but I am struggling on how to Ajaxify an hyperlink and pass a value?

Upvotes: 1

Views: 1868

Answers (1)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038830

Well, you could start by giving this link an unique id so that you could reference it from client scripts:

<%= Html.ActionLink(
    "link text", 
    "action", 
    "controller", 
    null, 
    new { id = "myLink" }
) %>

and then you could unobtrusively AJAXify it in a separate file javascript file:

$(function() {
    $('#myLink').click(function() {
        $.ajax({
            url: this.href,
            success: function(result) {
                // TODO: handle the results here
            }
        });
        return false;
    });
});

Of course if the result of this action is a partial view HTML that you would like to inject on some placeholder in the DOM you could use the .load() method:

$(function() {
    $('#myLink').click(function() {
        $('#result').load(this.href);
        return false;
    });
});

YAnd if you want to pass some additional values with the AJAX request:

$.ajax({
    url: this.href,
    data: { someParam: 'some value', someOtherParam: 'some other value' },
    success: function(result) {
        // TODO: handle the results here
    }
});

Upvotes: 2

Related Questions