javascript - passing the value on textbox

Question

I'm using javascript function that when onclick it will display on the modal, and i have another function to make an random reference number. My problem is , it is not displaying on the textbox, It displays null.

//My Table

<table id="ticketTable" class="display table table-hover table-striped">
    <thead>
        <tr>
            <th>Ticket Number</th>
            <th>Created By</th>
            <th>Date & Time Created</th>
            <th>Date & Time Occured</th>
            <th>Error Type</th>
            <th>Details</th>      
        </tr>
    </thead>
</table>

//My Working Javascript, here where i display my content if on click, my input textbox "ConvoRef" is null.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
<script src="~/Scripts/jquery.dataTables.min.js"></script>
<script src="~/Scripts/dataTables.bootstrap4.min.js"></script>
<script>
    $(document).ready(function () {   
            loadData();

        function loadData(is_category) {
            var dataTable = $('#ticketTable').DataTable({
                "language": {
                    "emptyTable": "No Transaction"
                },
                ajax: {
                    url: "/Ticket/GetTicket/" + is_category,
                    dataType: "json",
                    retrieve: "true",
                    processing: "true",
                    serverSide: "true",
                    type: "POST",
                    dataSrc: "",
                    data: { is_category: is_category },

                },
                columnDefs: [
                    {
                        targets: [1],
                        orderable: false,
                    },
                ],

                columns: [
                    {
                        data: "TicketNumber",

                    },

                    {
                        data: "UserTicket"
                    },

                    {
                        data: "DateCreated",

                    },
                    {
                        data: "DateOccurence",

                    },
                    {
                        data: "ErrorType"
                    },
                    {
                        data: "TicketNumber",
                                      render: function (data, type, row, meta) {
                    return '<button type="button" class="btn btn-info viewdetails" id="' + data + '">View</button>';
                },

                    },

                ]

            });

            $(document).on('change', '#category', function () {
                var category = $(this).val();
                $('#ticketTable').DataTable().destroy();
                if (category != '') {
                    loadData(category);
                }
                else {
                    loadData();
                }
            });


            $(document).on('click', '.viewdetails', function () {
                var details_id = $(this).attr("id");
                var valueID = $(this).attr("id");

                console.log(details_id);
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "/Ticket/ConvoId/" + details_id,
                    contentType: "application/json;charset=utf-8",

                    success: function (data) {
                        dataTable.ajax.reload();
                        var jsonData = JSON.parse(data.data);

                        var html = '';     
                        html += '<hr>';
                        html += '<div class="card mb-2"><div class="card-body mb-2"><div class="row"><div class="col-md-12">';
                        html += '<h3><i class="far fa-envelope"></i>Message</h3>';
                        html += '<div style = "height: auto !important; max-height: 250px !important;; overflow: auto !important;" > ';
                        html += '</div></div>';
                        html += '</div></div></div><hr>';

                        html += '@using (Html.BeginForm("AddConvo", "Ticket", FormMethod.Post, new { enctype = "multipart/form-data" }))
                        {<form><div><div class="mb-2" style="background-color:#EEEEEE; padding:15px;">**My Text where i want to display my function makeid <input type="text" id="ConvoRef" name="ConvoRef">**<strong>Send Message:</strong> <textarea cols="100" rows="3" class="form-control mt-1 mb-1" name="ConvoDetails" id="ConvoDetails" placeholder="Add Response"></textarea></div><strong><text class="mt-5">Upload File:</text></strong><p class="text-danger font-italic"><strong>Note: Check the file before submit</strong></p><input type="file" name="FilePath" id="FilePath"  multiple class="form-control" /><div><input type="submit" class="btn btn-primary btn-sm mt-2 sendButton" type="submit" id="addMessage" value="Send"></div></div></form>}';


                        html += '</div></div></div>';
                        html += ' ';
                        $('#details_info').html(html);
                        $('#detailsModal').modal('show');

                    },

                    error: function () {
                        alert("content load failed.");
                    }
                });

            });
            document.getElementById("ConvoRef").value = makeid(7);

            function makeid(length) {
                var result = '';

                var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
                var charactersLength = characters.length;
                for (var i = 0; i < length; i++) {
                    result += characters.charAt(Math.floor(Math.random() * charactersLength));
                }
                var TicketDate = new Date();
                var Tnumber = "T" + TicketDate.getFullYear() + TicketDate.getSeconds() + "-" + result;
                return Tnumber;
            }
        }

        });
</script>

Answer 1

You are trying to set the value before input is created. Moving document.getElementById("ConvoRef").value = makeid(7); just after $('#details_info').html(html); should work.