CODEWITHSUNDEEP
javascriptjqueryhtml
Vad
Vad

Reputation: 75

Script for adding a new table doesn't work

I have script to add a new table to may page dynamically, I took this script from this fiddler.
So, here is my script rebuild with my needs:

<html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Order event page</title>

            <!-- Bootstrap css responsive-->
            <link href="resources/css/bootstrap.css" rel="stylesheet">
            <link href="resources/css/bootstrap-responsive.css" rel="stylesheet">


            <!-- JQuery and Bootstrap file-->
            <script src="resources/js/jquery-1.10.2.min.js"></script>
            <script src="resources/js/bootstrap.min.js"></script>
            <script src="resources/js/jquery.scrollTo.js"></script> 
            <script src="resources/js/jquery.nav.js"></script>


            <script type="text/javascript">         
                $(function() {  
                    var countEventTable = $('#eventDiv');
                    var tableNumber = ('#eventDiv table').size() + 1;

                    $('#addEventBtn').live('click', function() {    
                        $('<table id="eventTable"><tr><td>Event type:</td><td><select name="event_type"><option>Choose event type</option><option>Computer Maintenance Event</option><option>Software Development Event</option></select></td></tr><tr><td>Event date:</td> <td><input type="text" class="span2" name="user_event_date"></td></tr><tr><td>Event description:</td> <td><textarea rows="5" name="description"></textarea></td></tr><tr><td>Additional Info:</td> <td><input type="text" class="span2" name="additional_info"></td></tr></table>').appendTo(countEventTable);  
                        tableNumber++;              
                        return false;
                    }); 
                }); 
            </script>
        </head>
        <body>
            <h1>New user</h1>

            <a href="#" id="addEventBtn"> Add Event Button </a>

            <div id="eventDiv" align="center">          

                <table id="eventTable">

                    <tr><td>Event type:</td><td>
                        <select name="event_type">
                            <option>Choose event type</option>
                            <option>Computer Maintenance Event</option>
                            <option>Software Development Event</option>
                        </select>
                    </td></tr>
                    <tr><td>Event date:</td> <td><input type="text" class="span2" name="user_event_date"></td></tr>
                    <tr><td>Event description:</td> <td><textarea rows="5" name="description"></textarea></td></tr>
                    <tr><td>Additional Info:</td> <td><input type="text" class="span2" name="additional_info"></td></tr>
                </table>
            </div>

            <form action="new-user-event" method="post">
                    <input type="hidden" name="userSessionId" value="${userSessionId}">
                <table align="center">
                    <tr><td>First name:</td> <td><input type="text" class="span2" name="first_name"></td></tr>
                    <tr><td>Last name:</td> <td><input type="text" class="span2" name="last_name"></td></tr> 
                    <tr><td>E-male:</td> <td><input type="text" class="span2" name="e_male"> </td></tr>
                    <tr><td>Address:</td> <td> <input type="text" class="span2" name="address"></td></tr>
                    <tr><td>Phone number:</td> <td> <input type="text" class="span2" name="phone_number"></td></tr>

                    <tr><td><input type="submit" value="Regester user"></td></tr>
                </table>
            </form>
        </body>
    </html>

Sense I new in jQuery and JavaScript, please tell me why I can add the new table, why script doesn't work?

Upvotes: 0

Views: 96

Answers (2)

Manish
Manish

Reputation: 1447

Change size() to length and as Shadow Wizard said use on().

 var tableNumber = ('#eventDiv table').length + 1;
$(document).on('click','#addEventBtn', function() { //code here });

Demo http://jsfiddle.net/V2p7x/

Upvotes: 0

Shadow Wizard
Shadow Wizard

Reputation: 66389

As said in comments, .live() is depracated as of jQuery 1.7 and removed as of version 1.9 hence you get error. Use .on() instead and notice it's bit different:

$(document).on('click', '#addEventBtn', function() {    
    //...
});

The dynamic selector (identifying what will be created on the fly) is passed as the second argument.

Live test case.

Upvotes: 1

Related Questions