Add input controls to jQuery DataTables dynamically

Let me begin by saying I am not an expert frontend (jQuery/JavaScript) developer. I am using the jQuery DataTables plugin in my current project and rendering a Bootstrap timepicker control in all the cells of table (all rows and columns except headers).

<tr>
<td>

<div id ="abc">
<div class="times-div">
<div class="time-label col-sm-6 ">Time</div>
<div class="time-view col-sm-6 bootstrap-timepicker">


<input id="open" type="text" value="" class="timepicker" style="border: 0px; padding: 0px; margin: 0px; width: 100%;">
</div>
</div>
</td>
</tr>

followed by an action link

add time

The requirement is that when I click on action link , add Time, the new input control should appear in the same cell. i.e. another div with id("abc") should be created in the same cell.

I want to know if that is possible using any plugin of datatable? I tried myself using a dirty way by manipulating html like

var element = document.getElementById("abc");
var parent = element.parentNode;
var newdiv = document.createElement('div');
newdiv.innerHTML = '<div class="times-div"> 

(full html div block then)

parent.appendChild(newdiv);

this is adding control but timepicker events are not working. I know its not a good way but still tried :). I am also using a couple of data attributes that i removed from code to simplify the code.

I am looking forward for a nice and cleaner way to add the input controls while clicking add time link and I am saving the data on change event of timepicker control.


ANSWERS:


I imagine bootstrap only initializes time pickers that are present when the dom is loaded.

You'll proabably need to initialize the ones you added later with

$('.bootstrap-timepicker').timepicker();

You can create new elements using this syntax:

var el = $('<div>', {id: 'abc', text: 'Some text'});

And append it to the element of your choice like this:

parent.append(el);

You can create dynamic checkbox like

$('#containerId').append('<input type="checkbox" name="myCheckbox" />');

where containerId is the id of the DOM element you want to add the checkbox to.

Or alternative syntax...

$('#containerId')
    .append(
       $(document.createElement('input')).attr({
           id:    'myCheckbox'
          ,name:  'myCheckbox'
          ,value: 'myValue'
          ,type:  'checkbox'
       })
);

For more information See the following link: create dynamically radio button in jquery


When I add anything dynamically that I want to use that will call another function at some point in time i usually do a string like:

 var appendString = "<div class=\"FieldSelector\"onclick=\"SomeOtherFunction('" + $(this).text() + "')" + "\">" + $(this).text() + "</div>";

Then append that and create a function that you want to use to do the stuff with. In this case my function is

SomeOtherFunction(valueIamPassingIn)
{
    //Do Something
}


 MORE:


 ? Creating an empty dynamic array in a class, giving values when accessed?
 ? How to use SSIS Visual Studio 2008 to build Dynamic Datapull from multiple SQL servers for multiple tables using foreach loop
 ? How to use SSIS Visual Studio 2008 to build Dynamic Datapull from multiple SQL servers for multiple tables using foreach loop
 ? How to use SSIS Visual Studio 2008 to build Dynamic Datapull from multiple SQL servers for multiple tables using foreach loop
 ? Execute SQL task (SSIS) and then insert the result set into a table on a different server
 ? Build temporary table with dynamic sql in SQL Server 2008
 ? SSIS: How can I manipulate data from one table in a dataflow and then put it into another table?
 ? Copying SSIS packages deployed on SQL Server back to Visual Studio 2008
 ? How to dynamically set connection string at SSIS?
 ? Can i import some custom module after a angular 2 app bootstraped?