CODEWITHSUNDEEP
jquery
Pete
Pete

Reputation: 113

Append HTML to Jquery response object

I'm having trouble appending html to ajax jQuery get request for some reason.

Here is the portion of html that is being returned from ajax get request that I'm trying to add html to:

<div id="EndDateRange">
    <input class="text-box single-line" data-val="true" data-val-
    date="The field Enter End Date:  must be a date." data-val-
    required="Please enter an End Date." id="EndDate" name="EndDate" 
    type="datetime" value="6/3/2017 1:04:15 PM" />
    <span class="field-validation-valid" data-valmsg-for="EndDate" data-
    valmsg-replace="true"></span>
    <input id="EndDate" name="EndDate" type="hidden" value="6/3/2017 
    1:04:15 PM" />
</div>

and here is the jquery:

$(response).find('#EndDate[type=hidden]').append("<div><span>Add</span</div>");

For some reason this is not working.

Still can't get this to work. Here are more details:

Here is "GET" request:

function showDates() {
var DatesViewRequest = $.ajax({
    type: 'GET',
    url: searchDatesUrl,
    cache: false,
    async: isAsync,
    contentType: 'text/html',
    xhrFields: {
        withCredentials: true
    },
    error: (function (error, variable) {
        alert('There was an error with the request');
    })
});
$.when(DatesViewRequest).done(function (response) {
    var picklist = $('<select>', {
        name: 'ValueNamesWebIds',
        id: 'value_name',
        multiple: 'multiple'
    })
    .attr('size', '15')
    .addClass('form-control')
    .on('change', function () {
        SetHiddenValues('value_name', 'ValueNames', 'true');
        EnableDisableButtons();
    })

    //var element = $(response).find('#EndDate[type=hidden]');

    $(response).find('#EndDate[type=hidden]').after('<div>Add</div>');

    $("#DisplayDateInputFields").append(response);

    $("#VerificationAndValidation").hide();

    InitializeDateFields();
});

}

Here is a portion of html returned from "GET" request:

<form action="SearchDate" id="Form" method="post">    <div 
class="form-group">
    <fieldset>
        <div class="row" id="DateRangeValues">
            <div class="col-sm-6 dateWidth">
                <div id="StartDateLabel">
                    <label class="bold control-label" for="StartDate">Enter Start Date: </label>
                </div>
                <div id="StartDateRange">
                    <input class="text-box single-line" data-val="true" data-val-date="The field Enter Start Date:  must be a date." id="StartDate" name="StartDate" type="datetime" value="" />
                    <span class="field-validation-valid" data-valmsg-for="StartDate" data-valmsg-replace="true"></span>
                    <input id="StartDate" name="StartDate" type="hidden" value="" />
                </div>
            </div>
            <div class="col-sm-6 dateWidth">
                <div id="EndDateLabel">
                    <label class="bold control-label" for="EndDate">Enter End Date: </label>
                </div>
                <div id="EndDateRange">
                    <input class="text-box single-line" data-val="true" data-val-date="The field Enter End Date:  must be a date." data-val-required="Please enter an End Date." id="EndDate" name="EndDate" type="datetime" value="6/3/2017 11:51:48 AM" />
                    <span class="field-validation-valid" data-valmsg-for="EndDate" data-valmsg-replace="true"></span>
                    <input id="EndDate" name="EndDate" type="hidden" value="6/3/2017 11:51:48 AM" />
                </div>
            </div>
        </div>

etc.

Upvotes: 1

Views: 1025

Answers (1)

Marko Mackic
Marko Mackic

Reputation: 2333

You should append it after that element, not inside it.

$(response).find('#EndDate').after("<div><span>Add</span</div>");

and using [type=hidden] is optional, and you may have only single element with id of EndDate.

Upvotes: 1

Related Questions