Jquery and Ajax not working

I have 3 buttons in my page. they are new buttons, delete, and edit. if I click the new button will display a add_new form , and if I click to change the edit_form will appear.

My question is why the new_form does not appear after I click submit in my edit_form or click delete button to delete data.

My code is like this

        <div  id="list_address">
        <table>
            <tr valign="top">
                <th>Name</th>
                <th>Address</th>
                <th>Action</th>
            </tr>
            <tr valign="top">
                    <td>Name 1</td>
                    <td>Adress 1</td>
                    <td>
                        <span><a href="#" onclick="javascript:show_editform(<?php echo $id_address;?>);">
                        Edit|</a></span><span><a href="#" 
                        onclick="javascript:deleteAddress(<?php echo $id_address;?>);">Delete</a></span>
                    </td>
            </tr>
            <tr>
                <td colspan="3"><span>
                    <button id="btn_add">Add New</button></span>
                </td>
            </tr>
        </table>
        <div>

        <div id="boxform">
             <div id="edit" style="display:none">
                    <form id="fm_edit" class="fm_address">
                        <input type="hidden"  value="1" name="submitted" id="submitted"/>
                        <input type="hidden"  id="id_address" name="id_address"/>
                        <fieldset>
                            <h3>Edit</h3>
                            <p>
                                <label>Address</label>
                                <input type="text" name="address1" id="address1" >
                                <sup>*</sup>
                            </p>
                            <p>
                                <label>Address (2)</label>
                                <input type="text" name="address2" id="address2" >
                            </p>
                            <p><input type="submit" value="Save"/></p>
                        </fieldset>
                    </form>
                </div>
            </div>
             <div id="add" style="display:none">
                    <form id="fm_add" class="fm_address">
                        <input type="hidden"  value="2" name="submitted" id="submitted"/>
                        <fieldset>
                            <h3>Edit</h3>
                            <p>
                                <label>Address</label>
                                <input type="text" name="address1" id="address1" >
                                <sup>*</sup>
                            </p>
                            <p>
                                <label>Address (2)</label>
                                <input type="text" name="address2" id="address2" >
                                <sup>*</sup>
                            </p>
                            <p><input type="submit" value="Save"/></p>
                        </fieldset>

                    </form>
                </div>
            </div>
        </div>

        <script>
        function getAddress(){
            $.ajax({
                type: "POST",
                url: "getAddress.php",
                success: function(response){
                $("#list_address").html(response);              
                }
            }); 
        }

        function clear_form() {
            $(".fm_address").find(':input').each(function() {
                switch(this.type) {
                    case 'password':
                    case 'select-multiple':
                    case 'select-one':
                    case 'text':
                    case 'textarea':
                    $(this).val('');
                    break;
                    case 'checkbox':
                    case 'radio':
                        this.checked = false;
                    }
            });
        }

        function show_editform(id){
            $("#add").hide();
            $("#edit").show();
            $("#id_address").val(id);
        }

        function show_insertform(){
            $("#edit").hide();
            $("#add").show();
        }

        $(document).ready(function() {  
            $("#btn_add").bind('click',function(){
                clear_form();
                show_insertform();
            });

        $("form#fm_edit").submit(function() {   
            var data = $("form#fm_edit").serialize();
                $.ajax({
                    type: "POST",
                    url: "address.php",
                    data: data,
                    success: function(response){
                        alert(response);
                        getAddress();
                    }   
                });
        return false;
        }); 

        $("form#fm_add").submit(function() {    
            var data = $("form#fm_add").serialize();
            alert(data);
            $.ajax({
                type: "POST",
                url: "address.php",
                data: data,
                success: function(response){
                    alert(response);
                    getAddress();
                }   
            });
        return false;
        }); 
    }); 

    </script>

Please help me.. Thanks.

Answers


You add below script in your both ajax pages like getAddress.php and address.php after the try it. i am sure it will be working.

one more thing you have over write list_address div. after ajax response all list_address div data replace on ajax response data.

$("#list_address").html(response);

 <script>
        function getAddress(){
            $.ajax({
                type: "POST",
                url: "getAddress.php",
                success: function(response){
                $("#list_address").html(response);              
                }
            }); 
        }

        function clear_form() {
            $(".fm_address").find(':input').each(function() {
                switch(this.type) {
                    case 'password':
                    case 'select-multiple':
                    case 'select-one':
                    case 'text':
                    case 'textarea':
                    $(this).val('');
                    break;
                    case 'checkbox':
                    case 'radio':
                        this.checked = false;
                    }
            });
        }

        function show_editform(id){
            $("#add").hide();
            $("#edit").show();
            $("#id_address").val(id);
        }

        function show_insertform(){
            $("#edit").hide();
            $("#add").show();
        }

        $(document).ready(function() {  
            $("#btn_add").bind('click',function(){
                clear_form();
                show_insertform();
            });

        $("form#fm_edit").submit(function() {   
            var data = $("form#fm_edit").serialize();
                $.ajax({
                    type: "POST",
                    url: "address.php",
                    data: data,
                    success: function(response){
                        alert(response);
                        getAddress();
                    }   
                });
        return false;
        }); 

        $("form#fm_add").submit(function() {    
            var data = $("form#fm_add").serialize();
            alert(data);
            $.ajax({
                type: "POST",
                url: "address.php",
                data: data,
                success: function(response){
                    alert(response);
                    getAddress();
                }   
            });
        return false;
        }); 
    }); 

    </script>

Need Your Help

How to convert System.IO.Stream into an Image?

c# image windows-phone-7 windows-phone-8 stream

How can I convert a Stream of an image (which I retrieved using the Album.GetArt method from the MediaLibrary) into a usable Image in my application?

Ruby DevKit not working for RedCloth and other gems on WindowsXP

ruby-on-rails rubygems windows-xp redcloth

I'm a completely new to RoR and don't have much web development experience. I usually give up at this point, but I need a RoR dev environment for a job and I can't pick the brain of the site's crea...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.