user3099423 user3099423 - 3 months ago 21
ASP.NET (C#) Question

Dynamically created JavaScript code from Code behind not working on javascript

I searched a lot for my issue but can not find any suitable solution. I have a JavaScript code which have html select statement i would like to add option from code behind

JavaScript function

function addMoreRows()
{
rowCount++;
var recRow = "";
recRow += '<tr id="rowCount' + rowCount + '">';
recRow += '<td style="margin: 0px; padding: 0px;">';
recRow += '<select style="height: 25px; border:0; width:250px; margin: 0px; padding: 0px;" id="ddl_grid_productList" onchange="addrowswithselect()" data-placeholder="Choose a State...">';

<%=options%>

recRow += '</select>';
recRow += '</td><td style="height: 25px; margin: 0px; padding: 0px">';
recRow += '<input type="text" style="height: 25px; border:0px; margin: 0px; padding: 0px" id="field_one" class="col-xs-10 col-sm-12" />';
recRow += '</td><td style="height: 25px; margin: 0px; padding: 0px">';
recRow += '<input type="text" style="height: 25px; border:0px; margin: 0px; padding: 0px" id="Qty' + rowCount + '" onchange="add(' + rowCount + ')" class="col-xs-10 col-sm-12" />';
recRow += '</td><td style="height: 25px; margin: 0px; padding: 0px">';
recRow += '<input type="text" id="Rate' + rowCount + '" onchange="add(' + rowCount + ')" style="height: 25px;border:0px; margin: 0px; padding: 0px" class="col-xs-10 col-sm-12" />';
recRow += '</td><td class="hidden-480" style="height: 25px; margin: 0px; padding: 0px">';
recRow += '<input id="total' + rowCount + '" type="text" onblur="totalamout(),addrows(this.value);" style="height: 25px;border:0px; padding: 0px; margin: 0px;" class="col-xs-10 col-sm-12" readonly />';
recRow += '</td></tr>';
jQuery('#<%=tbdy_addedRows.ClientID%>').append(recRow);
}


Aspx CodeBehind

public string options;
var pro = (from m in db.products select m).ToList();
foreach (var item in pro)
{
ListItem list = new ListItem();
list.Value = item.code.Trim();
list.Text = item.name.Trim();
options += "recRow += '<option value=\"" + item.code.Trim() + "\">" + item.name.Trim() + "</option>';\n";
}


is there any standard way to do that because source view shows that options fetch correctly but JavaScript not working then.

Answer

Create a [WebMethod] in the code behind file which builds up a list of select options and call it from javascript using $.ajax.

Code behind:

[System.Web.Services.WebMethod]
public static string GetOptions()
{
    string options = "<option value='Option1'>Option 1</option><option value='Option2'>Option 2</option>"; 
    return options;
}

.ASPX:

<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script type="text/javascript">
        $(function () {
            var rowCount = 0;

            $("#btnAddRow").click(function () {
                $.ajax({
                    type: "POST",
                    url: "AddRowsInJquery.aspx/GetOptions",
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        var options = data.d;
                        addMoreRows(options);
                    },
                    error: function (errordata) {
                        alert(errordata);
                    }
                });
            });

            function addMoreRows(options) {
                rowCount++;
                var recRow = "";
                recRow += '<tr id="rowCount' + rowCount + '">';
                recRow += '<td style="margin: 0px; padding: 0px;">';
                recRow += '<select style="height: 25px; border:0; width:250px; margin: 0px; padding: 0px;" id="ddl_grid_productList" onchange="addrowswithselect()" data-placeholder="Choose a State...">';
                recRow += options;
                recRow += '</select>';
                recRow += '</td><td style="height: 25px; margin: 0px; padding: 0px">';
                recRow += '<input type="text" style="height: 25px; border:0px; margin: 0px; padding: 0px" id="field_one" class="col-xs-10 col-sm-12" />';
                recRow += '</td><td style="height: 25px; margin: 0px; padding: 0px">';
                recRow += '<input type="text" style="height: 25px; border:0px; margin: 0px; padding: 0px" id="Qty' + rowCount + '" onchange="add(' + rowCount + ')" class="col-xs-10 col-sm-12" />';
                recRow += '</td><td style="height: 25px; margin: 0px; padding: 0px">';
                recRow += '<input type="text" id="Rate' + rowCount + '" onchange="add(' + rowCount + ')" style="height: 25px;border:0px; margin: 0px; padding: 0px" class="col-xs-10 col-sm-12" />';
                recRow += '</td><td class="hidden-480" style="height: 25px; margin: 0px; padding: 0px">';
                recRow += '<input id="total' + rowCount + '" type="text" onblur="totalamout(),addrows(this.value);" style="height: 25px;border:0px; padding: 0px; margin: 0px;" class="col-xs-10 col-sm-12" readonly />';
                recRow += '</td></tr>';
                jQuery('#<%: Table1.ClientID%>').append(recRow);
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <input type="button" value="Add Row" id="btnAddRow" />
        <asp:Table ID="Table1" runat="server">
            <asp:TableHeaderRow>
                <asp:TableCell>Column 1</asp:TableCell>
                <asp:TableCell>Column 2</asp:TableCell>
                <asp:TableCell>Column 3</asp:TableCell>
                <asp:TableCell>Column 4</asp:TableCell>
                <asp:TableCell>Column 5</asp:TableCell>
            </asp:TableHeaderRow>
        </asp:Table>
    </form>
</body>