How to apply javascript functionality to ajax inserted html

Question

I have a page that requests the user to input a time via selecting the time from a pop-up.

php:

<div class="form-group">
    <label class="col-sm-4 control-label">Coaching Start Time</label>
    <div class="col-sm-5">
        <input class="form-control" type="text" id="timepicker" name="timepicker[]" placeholder="Enter Time" />
    </div>
</div>

javascript:

<script type="text/javascript">
$(document).ready(function() {

    /* setting time */
    $("#timepicker").datetimepicker({
        format : "HH:mm"
    });
});
</script>

I want the possibility to select and submit multiple time values, so via ajax, I'm inserting copies of the php code into the page.

Ajax Call from main page:

//Once add button is clicked
$(addButton).click(function() {
    //Check maximum number of input fields
    if (x < maxField) {
        x++; //Increment field counter
        var sd = document.getElementById("hired_date").value;
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
                $(wrapper).append(this.responseText);
            }
          }
        }
        xmlhttp.open("GET", "get_schedule_options.php?sd=" + sd, true);
        xmlhttp.send();
        return false;
    }
});

Relevant ajax php code:

echo '<div class="form-group">
    <label class="col-sm-4 control-label" for="Old">Coaching Start Time</label>
    <div class="col-sm-5">
        <input class="form-control" type="text" id="timepicker" name="timepicker[]" placeholder="Enter Time" />
    </div>
</div>';

However, the functionality is lost because the javascript code is applied at a timing before the ajax inserts the extra html code. How can I go about applying javascript functionality to ajax inserted code?

"via ajax, I'm inserting copies of the php code into the page." You can't insert php code frontend. What does your response look like? — Cid
– Cid, Commented Sep 21, 2022 at 7:40
One of the ways : Trigger the related JavaScript action in the success block of the ajax return — Ken Lee
– Ken Lee, Commented Sep 21, 2022 at 7:44
it seems that a delegated event listener would be the way to proceed if I understood the requirements correctly but ID attributes must be unique so if you are adding content that duplicates ID attributes you need to redesign that first — Professor Abronsius
– Professor Abronsius, Commented Sep 21, 2022 at 7:53

Sachin · Accepted Answer · 2022-09-21 07:41:25Z

1

Add the same code after you append the response in your HTML. And make sure you use class selector instead of id. After this -

$(wrapper).append(this.responseText);

Add this -

 $(".timepicker").datetimepicker({
        format : "HH:mm"
    });

And input tag must contain class with timepicker i.e.

<input class="form-control timepicker" type="text"  id="timepicker" name="timepicker[]" placeholder="Enter Time" />

answered Sep 21, 2022 at 7:41

Sachin

3875 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to apply javascript functionality to ajax inserted html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related