CODEWITHSUNDEEP
jqueryasp.net-mvc
Greg Gum
Greg Gum

Reputation: 37895

How to use Ajax to post and then replace div

I have this existing code which works to do what I want - it calls the server, and the server returns a view which replaces a div called "Content"

@using (Ajax.BeginForm("EditLineItem", "Order", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "content" }))
        {
            <input type="submit" value="Add Report to Order" />
        }

This results in the following:

form action="/Order/EditLineItem" method="post" data-ajax-update="#content" data-ajax-mode="replace" data-ajax="true">

I now need to do this same action, but call it from JavaScript and not inside a form. In other words, I want to call a controller action, get HTML back and replace "content".

The JavaScript looks like this:

$.ajax({
        url: "Order/EditLineItem",
        data: { id: dataItem }
        //How do I replace div?


    });

Upvotes: 2

Views: 2365

Answers (2)

Sparticles
Sparticles

Reputation: 608

By the looks of things your using JQuery library, so i am guessing you have the script element pointing to the library in your header. If not just include this one.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

next the correct syntax to submit the request including the div content replacment will look like this

$.ajax({
        url: "Order/EditLineItem",
        data: { id: dataItem},
        success: function (dataToPutInDiv) {
            $("#divID").text(dataToPutInDiv);
        }
    });

Upvotes: 0

geedubb
geedubb

Reputation: 4057

You should be able to do something like this:

$.ajax({
    url: "Order/EditLineItem",
    data: { id: dataItem },
    dataType: 'html',
    //How do I replace div?
    success: function (data) {
            $('#content').html(data); // assuming the div has id="content"
    },
    error: function(xhr, error){
        alert('Error! ' + error);
    }
});

Upvotes: 2

Related Questions