dynamically add controls througha button using javascript in ruby on rail

Question

I want to dynamically add two textboxes and two dropdownlist through a button using jquery. i.e below

<tr>
   <td align="center">
   <table id="controls">
   </table>
   <%= button_tag "btnAdd"%> 
   </td>
</tr>

You can see above that i make a table where i want to add textboxes and dropdown and also I add button because when i click on button, then textboxes and dropdown will be added and below is jquery code:

<script type="text/javascript">
    var k = 0, j = 0;
    var year = new Date().getFullYear();

    $(document).ready(function() {
        $("#btnAdd").click(function() {
            var field = $("#field").val();
            var year = new Date().getFullYear();
            var DDL_fromProfession = "<select name='ParametersFromProf' id='DDL_FromProYear'>";
            for (var i = year; i >= 1950; --i) {
                DDL_fromProfession += "<option text='" + i + "' value='" + i + "'>" + i + "</option>";
            }
            DDL_fromProfession += "</select>";
            var DDL_ToProfession = "<select name='ParametersToProf'  id='DDL_ToProYear'>";
            for (var j = year; j >= 1950; --j) {
                if (j != year) {
                    DDL_ToProfession += "<option text='" + j + "' value='" + j + "'>" + j + "</option>";
                }
                else {
                    DDL_ToProfession += "<option text='Present' value='Present'>Present</option>";

                }
            }
            DDL_ToProfession += "</select>";

            var newRow1 = "<tr><td align='center' style='font-size: large; color: #212121;' height='35px'>from"
            + DDL_fromProfession + " to " + DDL_ToProfession;
            newRow1 += "<br/><button type='button' class='btn_rmv'>Remove</button></td></tr>";


            var input = "<input name='parameters' id='field' type='text' value='Designation' style='text-align:center;' onblur='WaterMarkDesignation(this, event);' onfocus='WaterMarkDesignation(this, event);'/>";
            var input1 = "<input name='parametersCompany' id='field' type='text' value='Company' style='text-align:center;' onblur='WaterMarkCompany(this, event);' onfocus='WaterMarkCompany(this, event);'/>"



            var newRow = "<tr><td align='center' style='font-size: x-large; color: #212121;' height='35px'>"
            + input + " at " + input1 + "</td></tr>";
            $('#controls').append(newRow);
            $('#controls').append(newRow1);
            return false;
        });
    });
</script>

But when I click on button, It would not show me textboxes and dropdowns, Why. Kindly suggest me, I am waiting for your reply. Thanks

score 0 · Answer 1 · answered Feb 25 '14 at 05:52

try this

<script type="text/javascript">
$("#btnAdd").click(function()
 {
    var field = $("#field").val();
    var year = new Date().getFullYear();
    var DDL_fromProfession=document.createElement("select");
    DDL_fromProfession.setAttribute("name","ParametersFromProf");
    DDL_fromProfession.setAttribute("id","DDL_FromProYear");
    for (var i = year; i >= 1950; --i) 
    {
       var option=document.createElement("option");
       option.setAttribute("value",i);
       option.text=i;
       DDL_fromProfession.appendChild(option);
    }

    var DDL_ToProfession=document.createElement("select");
    DDL_ToProfession.setAttribute("name","ParametersToProf");
    DDL_ToProfession.setAttribute("id","DDL_ToProYear");
    for (var i = year; i >= 1950; --i) 
    {
        if (j != year) 
       {
         var option=document.createElement("option");
         option.setAttribute("value",i);
         option.text=i;
         DDL_ToProfession.appendChild(option);
       }
       else
       {
          var option=document.createElement("option");
         option.setAttribute("value","parent");
         option.text="parent";
         DDL_ToProfession.appendChild(option);
       }
    }

    var table=document.getElementById("Controls");
    var tr = document.createElement("tr");
    var td = document.createElement("td");
    var button=document.createElement("button");
    button.setAttribute("class","btn_rmv");
    button.setAttribute("type","button");
    var br=createElementById("br");
    td.appandChild("From "+DDL_FromProfession + " To "+DDL_ToProfession);
    td.appandChild(br);
    td.appandChild(button);
    tr.appendChild(td);
    table.appandChild(tr);

 });
</script>

like the same you can create and append the text boxes into your table. Hopefully it will help you.Good Luck.

Thanks. But i am using the ruby on rails button i.e <%= button_to "btnAdd"%> And when I click on this button, its not going into the "btnAdd" function. — , Feb 25 '14 at 06:14
wait wait..what is your problem.whether you are not able to call the JavaScript function or not able to display the dynamically added controls..? — user3217843, Feb 27 '14 at 07:53
have a look at this link http://stackoverflow.com/questions/9446640/button-onclick-calls-javascript-which-calls-a-php-file-which-adds-to-a-mysql-dat for calling the javascript function.Good Luck. — user3217843, Feb 27 '14 at 11:07

dynamically add controls througha button using javascript in ruby on rail

1 Answers1