CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net
user3379116
user3379116

Reputation: 67

Adding Rows using Javascript but it shows and then becomes invisible

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UserPermisson.aspx.cs"
    Inherits="TestProjects.UserPermisson" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        function AddUsers() {
        debugger;
        var table = document.getElementById('tblUserList');

            var i = $('#tblUserList').length;

            var row = table.insertRow(i);
            var cellUsers = row.insertCell(0);
            var select = document.createElement("select");
            select.setAttribute("name", "ddlUsers" + i);
            select.setAttribute("id", "ddlUsers" + i);
            //   select.onchange = bindUsers;

            option = document.createElement("option");
            option.setAttribute("value", 0);
            option.innerHTML = "John";
            select.appendChild(option);

            option = document.createElement("option");
            option.setAttribute("value", 1);
            option.innerHTML = "Peter";
            select.appendChild(option);

            option = document.createElement("option");
            option.setAttribute("value", 2);
            option.innerHTML = "Roger";
            select.appendChild(option);
            cellUsers.appendChild(select);


        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table id="tblUserList">
            <tr>
                <td>
                    User
                </td>
                <td>
                    Permission Type
                </td>
                <td>
                    Allow View
                </td>
            </tr>
            <tr>
                <td>
                    <select id="ddlUsers0">
                        <option value="" disabled="disabled" selected="selected">John</option>
                        <option value="1">Peter</option>
                        <option value="2">Roger</option>
                    </select>
                </td>
                <td>
                    <input type="checkbox" name="Grant" value="Grant" id="Grant0" />Grant
                    <input type="checkbox" name="Revoke" value="Revoke0" id="Revoke0"/>Revoke
                </td>
                <td>
                    <input type='radio' name='choices' value='0' id="ViewYes0" />Yes 
                    <input type='radio' name='choices' value='ViewNo0' />No
                </td>
            </tr>
            <tr></tr>
        </table>
        <table>
        <tr>
         <td colspan="4" >
         <asp:Button ID="btnAddUsers" runat="server" Text="Add More Users" OnClientClick="AddUsers()" />
         </td>
        </tr>
        </table>
    </div>
    </form>
</body>
</html>

In the above code I am adding a row to a table using javascript,but when i click on Add More Users button,rows displaying for a moment and then disappears.Can somebody please guide me what i am doing wrong?

Upvotes: 0

Views: 54

Answers (1)

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

Because your button has the attribute runat=server

<asp:Button ID="btnAddUsers" runat="server" Text="Add More Users" OnClientClick="AddUsers()" />

When you click on it, it creates a postback, Wo the entire script will be reloaded again.

If you dont have any server side events for that button, just replace the asp button with input type="button"

<input type="button" id="btnAddUSers" value="Add More USers" onclick="AddUsers()"/>

Upvotes: 2

Related Questions