Question

I am using Uniform JS plugin for the form inputs. in the below code, i was trying to initialize the uniformjs styles in the dynamically created fields also.

In the below html code, there is a function called ext() which inserts a new row when the add button is clicked. I want the uniformjs style to get applied to those dynamically generated fields too. I tried and tried but its getting worst and its getting collapsed and the select boxes are not at all showing the selected value even after selecting … 🙁

HTML

<table style="width:100%;border:1px solid;" id="table1">
  <tr><td>
  <select>
            <option>Through Google</option>
            <option>Through Twitter</option>
            <option>Other&hellip;</option>
            <option>&lt;Hi&gt;</option>
  </select>
</td>
<td><button onClick="ext();">Add</button></td>

</tr>
</table> 

JS

$(function()
{
    $("input, textarea, select, button").uniform();
});

function ext()
{
    $(function()
    {
        $("input, textarea, select, button").uniform();
    });

    rl = document.getElementById("table1").rows.length;

    var a = document.getElementById("table1").insertRow(rl);
    var b = a.insertCell(0);


    b.innerHTML = '<div style="width:95%;margin-bottom:0px;padding:5px;"><div class="selector" id="uniform-clinic_visit"><span style="-moz-user-select: none;">Monthly</span><select name="clinic_visit[]" id="clinic_visit" onChange=""> <option>-Select-</option><option value="Weekly">Weekly</option>         <option value="Monthly">Monthly</option></select></div></div>';
}

Resource – http://www.uniformjs.com

Answer 1

Try this:

function ext()
        {

        $("#table1").append('<tr><td><div style="width:95%;margin-bottom:0px;padding:5px;"><div class="selector" id="uniform-clinic_visit"><span style="-moz-user-select: none;">Monthly</span><select name="clinic_visit[]" id="clinic_visit" onChange=""> <option>-Select-</option><option value="Weekly">Weekly</option>         <option value="Monthly">Monthly</option></select></div></div></td></tr>');

        $(":input").uniform();
    }