CODEWITHSUNDEEP
jqueryhtmlajax
user1574598
user1574598

Reputation: 3881

Can't get HTML from Ajax or Append response to DIV - JQuery

I'm trying to get a simple response from a controller and append it to a div so I can see the output on the front end. Here is my JQuery:

 $('.js-mapsearch').keyup(function (e) {

            var characters = $(this);
            var $output = $('.js-output');

            console.log(characters.val() + ' was pressed');

            $.ajax({
                type: "POST",
                url: '/umbraco/surface/MapSearchSurface/GetPlaces?Characters=' + characters,
                datatype: 'html',
                contentType: 'application/text',
                success: function (data) {

                    if (data) {
                        $output.append($(data).html());
                        console.log($(data).html());
                        console.log(data);
                    }

                },
                error: function (ex) {
                    console.log(ex);
                }
            });

            e.preventDefault();



});

Here are the console.log:

console.log($(data).html());  // [object Object]
console.log(data);            // <div class="js-places-container">[object Object]</div>

Here is the razor code:

@model Prodo.umbraco.Web.Models.GetPlacesModel

<div class="js-places-container">@Model.Places</div>

Here is my controller code:

public ActionResult GetPlaces(string Characters)
        {
            var Model = new GetPlacesModel();

            Model.Places = Characters;

            return PartialView("~/Views/Partials/_MapSearchResults.cshtml", Model);
        }

And model code:

public class GetPlacesModel
    {
        public string Places { get; set; }
    }

In theory, I should for now be able to see which characters are being typed in on the front end via the $('.js-output') div. Can someone please help.

Upvotes: 0

Views: 301

Answers (2)

asanders
asanders

Reputation: 31

you can try this:

$.get('your/url/template.html').done(function (data) {
       $('#your_div').append(data);
});

Upvotes: 1

Matti Price
Matti Price

Reputation: 3551

Well, your code is working exactly how you are telling it to, you are just passing in the string [object Object] in your javascript.

this sets it to an object

var characters = $(this);

and when you use it

url: '/umbraco/surface/MapSearchSurface/GetPlaces?Characters=' + characters

it calls the default .toString() method of the characters object.

What you want to actually do is set it like this:

var characters = $(this).val();

Or something similar for whatever is appropriate to get the string value you want to pass on.

Upvotes: 1

Related Questions