0

I have two sets of field for adding time for the users. I have static field for selecting type and I can see the dropdown was working fine. I have another set of field that will be created dynamically based on the user input.Here the drop down is not working fine .I can feed the input data ,but the drop down is not working fine. What I have tried is

<form class="form-inline">
            <div class="form-group bfh-timepicker" data-mode="12h">
                <label class="col-md-4 control-label" for="starttime">Starttime</label>
                <div class="col-md-4">
                    <input type="time" class="form-control input-md" id="starttime0" placeholder="starttime"
                        required="">
                </div>
            </div>
            <div class="form-group bfh-timepicker">
                <label class="col-md-4 control-label" for="endtime">Endtime</label>
                <div class="col-md-4">
                    <input type="time" class="form-control input-md" id="endtime0" placeholder="endtime" id="time"
                        required="">
                </div>
            </div>
        </form>

The script code is

<script>
        $(document).ready(function () {
            $('#starttime0').timepicker({
                timeFormat: 'HH:mm',
                interval: 30,
                use24hours: true,
                scrollbar: true,
            });
        });
    </script>

    <script>
        $(document).ready(function () {
            $('#endtime0').timepicker({
                timeFormat: 'HH:mm',
                interval: 30,
                use24hours: true,
                scrollbar: true,
            });
        });
    </script>

The above code is for selecting the time filed and which is static one. The below code what I am creating is the dynamic filed for both start time and endtime But the drop down is not working fine Here my code is

<script>
        var count = 0;
        function addtextbox() {
            count++;
            var newTextBoxDiv = document.createElement('div');
            newTextBoxDiv.id = 'Tools';
            document.getElementById("ToolsGroup").appendChild(newTextBoxDiv);

            newTextBoxDiv.innerHTML = '<form class="form-inline"><div class="form-group bfh-timepicker"><label class="col-md-4 control-label" for="starttime">Starttime</label><div class="col-md-4"><input type="time" class="form-control input-md" id="starttime' + count + '" placeholder="starttime" required=""> </div></div>' +
                '<div class="form-group bfh-timepicker"><label class="col-md-4 control-label" for="endtime">Endtime</label><div class="col-md-4"><input type="time" class="form-control input-md" id="endtime' + count + '" placeholder="endtime" required=""></div></div></form>' +
                '&nbsp;&nbsp;<input type="button" value="Remove" class="removeTools" onclick="removeTextArea(this);">'
            console.log("Iam count", count);
        };

        function removeTextArea(inputElement) {
            var el = inputElement;
            while (el.tagName != 'DIV') el = el.parentElement;
            el.parentElement.removeChild(el);
            count--;
        }

    </script>

The script code is

<script>
        function timePicker() 
        {
            timeFormat: 'HH:mm',
            interval: 30,
            use24hours: true,
            scrollbar: true,

        }
    </script>

What I am getting is ,the dynamic time picker function is not showing the drop down What I need is when I add the dynamic field,the drop down should be shown for that also.

  • Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – devlin carnate Dec 03 '19 at 17:28
  • I have tried this ``` –  Dec 03 '19 at 17:32
  • Or this? https://stackoverflow.com/questions/10433154/putting-datepicker-on-dynamically-created-elements-jquery-jqueryui – devlin carnate Dec 03 '19 at 17:32
  • In the above link they are using body and document in the script.But I am creating the dynamic time picker inside the script.I have changed the dynamic time picker drop down code –  Dec 04 '19 at 11:17
  • You need to "anchor" your Jquery event to an element that does exist (a non-dynamic element), such as body or document, and then identify the class on the dynamic element, as shown in that last link I posted – devlin carnate Dec 04 '19 at 18:09

2 Answers2

1

@Guru Krishna

Please try this code it works properly :

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.js"></script>
<title>TimePicker</title>
</head>
<body>
<div class="container">
  <h2>Time Picker</h2>
  <p>This example of time picker using bootstrap and jquery.</p>
  <form>
    <div class="form-group">
      <label for="starttime">Start Time:</label>
      <input type="text" class="form-control" id="starttime" readonly>
    </div>
    <div class="form-group">
      <label for="endtime">End Time:</label>
      <input type="text" class="form-control" id="endtitme" readonly>
    </div>
  </form>
</div>
<script>
$("#starttime").clockpicker({
   autoclose: true,
});
$("#endtitme").clockpicker({
   autoclose: true,
});
</script>
</body>
</html>

I hope above code will be useful for you. Thank you.

Makwana Prahlad
  • 1,025
  • 5
  • 20
0

The element doesn't exist when you're initializing the time picker on endtime

in your function where you create the fields add 

$('#endtime0').timepicker({
    timeFormat: 'HH:mm',
    interval: 30,
    use24hours: true,
    scrollbar: true,
});

after you've created the element.

EDIT:

function addtextbox() {
        count++;
        var newTextBoxDiv = document.createElement('div');
        newTextBoxDiv.id = 'Tools';
        document.getElementById("ToolsGroup").appendChild(newTextBoxDiv);

        newTextBoxDiv.innerHTML = '<form class="form-inline"><div class="form-group bfh-timepicker"><label class="col-md-4 control-label" for="starttime">Starttime</label><div class="col-md-4"><input type="time" class="form-control input-md" id="starttime' + count + '" placeholder="starttime" required=""> </div></div>' +
            '<div class="form-group bfh-timepicker"><label class="col-md-4 control-label" for="endtime">Endtime</label><div class="col-md-4"><input type="time" class="form-control input-md" id="endtime' + count + '" placeholder="endtime" required=""></div></div></form>' +
            '&nbsp;&nbsp;<input type="button" value="Remove" class="removeTools" onclick="removeTextArea(this);">'
        console.log("Iam count", count);
       $('#Tools input').timepicker({
           timeFormat: 'HH:mm',
           interval: 30,
           use24hours: true,
           scrollbar: true,
       });

    };

This is initializing the timepicker on any input inside your newly created #Tools div. It's called after the creation so that the element exists when you go to initialize it.

Kevin Kulla
  • 39
  • 6
  • I am not sure how it helps my proble.I facing an inssue with dynaic one not a static one –  Dec 04 '19 at 11:19
  • Yes. You initialize your function on an object that doesn't exist. You need to call the `.timepicker` function after your dynamic form is added. – Kevin Kulla Dec 04 '19 at 13:42
  • I am doing that one only. Its not working. you can check in my question –  Dec 04 '19 at 17:23
  • @GuruKrishna I've updated my answer. Let me know if it works. – Kevin Kulla Dec 04 '19 at 17:37