search

ahsanjr / jquery-datatables-editable

Automatically exported from code.google.com/p/jquery-datatables-editable
0 stars 0 forks source link

Add form shows up on main page and add record pop up modal window does not open #76

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
What steps will reproduce the problem?
1. When user visits home page URL, a java servlet is invoked and the 
application fetches the sample user data and only displays first name last name 
and age. If nothing is found, it displays no rows.
2. The add and delete button are displayed in any case.
3. The add form gets displayed on this page where as it should be hidden and 
only visible as pop up when user hits Add button.
4. When user hits add button, the modal window does not open. Nothing happens - 
no error message in browser.

Here is my record display page with add form embedded in it.

<html>
<head>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

<link rel="stylesheet"
    href="/ConfigManager/resources/media/dataTables/demo_table.css"
    type="text/css" media="all">

<script type="text/javascript"
    src="/ConfigManager/resources/scripts/jquery-1.6.4.min.js "></script>
<script type="text/javascript"
    src="/ConfigManager/resources/scripts/jquery.dataTables.min.js "></script>
<script type="text/javascript"
    src="/ConfigManager/resources/scripts/jquery.jeditable.mini.js "></script>
<script type="text/javascript"
    src="/ConfigManager/resources/scripts/jquery-ui-1.8.16.custom.min.js "></script>

<script type="text/javascript"
    src="/ConfigManager/resources/scripts/jquery.validate-1.9.min.js "></script>
<script type="text/javascript"
    src="/ConfigManager/resources/scripts/jquery.dataTables.editable-1.3.js "></script>

<script type="text/javascript">
            $(document).ready(function() {
                $('#recordTable').dataTable( {
                    "bPaginate": true,
                    "bLengthChange": true,
                    "bFilter": true,
                    "bSort": true,
                    "bInfo": true,
                    "bAutoWidth": true,
                    "sPaginationType": "full_numbers"

                } ).makeEditable()({
                    sAddURL: "/editServlet",
                    sUpdateURL: "/editServlet",
                    sDeleteURL: "/editServlet",
                    oAddNewRowFormOptions: {
                        title: "Add Record",
                        show: "blind",                     
                        hide: "explode",
                        modal: "true"
                        },
                    sAddDeleteToolbarSelector: ".dataTables_length"

                    });
            } );

</script>
</head>

<body id="dt_example">
    <div class="container">

<form id="formAddNewRow" action="#" title="Add new record">
    <label for="firstName">First Name</label><br /> 
    <input type="text" name="firstName" id="firstName" class="required" rel="0" /> <br /> 
    <label for="lastName">Last Name</label><br /> 
    <input type="text" name="lastName" id="lastName" rel="1" /> <br /> 
    <label for="age">Age</label><br />
    <input type="text" name="age" id="age"  rel="2"/> <br />

</form>

        <div id="css_spacing"></div>

                    <h3>Records</h3>                
                    <p>
                    <table id="recordTable" align="center">
                        <thead>
                            <tr>
                                <th>First Name</th>
                                <th>last Name</th>
                                <th>Age</th>
                            </tr>
                        </thead>
                        <tbody>

                                    <tr>
                                        <td colspan="7">No Records found.</td>
                                    </tr>

                        </tbody>

                    </table>
                    </p>

            <div id="css_clear"></div>
            <div>
            <button id="btnAddNewRow">Add</button>
            <button id="btnDeleteRow">Delete</button>

            </div>

    </div>  
</body>
</html>

Original issue reported on code.google.com by kshar...@gmail.com on 23 Nov 2011 at 8:13

GoogleCodeExporter commented 9 years ago 
This happens is you have some error  in JavaScript - please check error console.
As example why you have 
/ConfigManager/resources/scripts/jquery.jeditable.mini.js instead of 
/ConfigManager/resources/scripts/jquery.jeditable.min.js

Original comment by joc...@gmail.com on 9 Feb 2012 at 10:01

GoogleCodeExporter commented 9 years ago 
I will assume that this is JavaScript error. Please raise different issue if 
still happens.

Thanks,
Jovan

Original comment by joc...@gmail.com on 10 Feb 2012 at 11:45