jquery ui button not resetting after ajax call

Question

I have a form that allows a user to change his first and last name. the way the form works is that an edit button is clicked and a dialog appears on the screen.

<div id="nameChange">
<table width="695">
<tr>        
        <td style="padding: 5px;"><strong>First Name</strong></td>
        <td style="padding: 5px;" align="right"><?=$firstName?></td>
    </tr>
    <tr>
        <td style="padding: 5px;"><strong>Last Name</strong></td>
        <td style="padding: 5px;" align="right"><?=$lastName?></td>
    </tr>
    <tr>
        <td style="padding: 5px;"></td>
        <td style="padding: 5px;" align="right" ><button name="editName" id="editName">Edit</button></td>
    </tr>
</table>

Here is the jQuery that works when the button is clicked

$("#editName").button().click(function(){
            $("#editUserInfoForm").dialog({
                height: 200,
                width: 300,
                modal: true,
                buttons: {
                    "Apply": function(){
                        var firstName = $("#newFirstName").val();
                        var lastName = $("#newLastName").val();
                        var userID = $("#userID").val();
                        var email = $("#email").val();
                        var str = "first="+firstName+"&last="+lastName+"&userID="+userID+"&email="+email;

                        $.ajax({
                            url : "ajax/editName.php",
                            type : "post",
                            data : str,
                            success : function(result){
                                $("#nameChange").html(result);
                            }
                        });
                        $( this ) .dialog( "close" );
                    },
                    Cancel: function(){
                        $( this ) .dialog( "close" );
                    }
                },
            });
        });

As you can see, there is an AJAX call to a file that is named editName.php... The code works well....... the first time, but when the div is reloaded the button changes back to normal without the jQuery button design and then ceases to function at all (when I click it nothing happens). Ideally I would like the user to continue making additional changes in case they make a mistake.

Here are the contents of editName.php

<?php

$firstName = $_POST['first'];
$lastName = $_POST['last'];
$userID = $_POST['userID'];
$email = $_POST['email'];



?>

<div id="nameChange">
    <table width="695">
    <tr>        
            <td style="padding: 5px;"><strong>First Name</strong></td>
            <td style="padding: 5px;" align="right"><?=$firstName?></td>
        </tr>
        <tr>
            <td style="padding: 5px;"><strong>Last Name</strong></td>
            <td style="padding: 5px;" align="right"><?=$lastName?></td>
        </tr>
        <tr>
            <td style="padding: 5px;"></td>
            <td style="padding: 5px;" align="right" ><button name="editName" id="editName">Edit</button></td>
        </tr>
    </table>
</div>

thanks for your help folks!

Basti · Accepted Answer · 2013-10-19 13:03:59Z

1

I hope you are using by now jquery > 1.7

In that case instead of your code, use this. That should help you being able to click the button again after html has been appended through ajax. Also put the button() call design before the click, not sure out of the head if that would keep it styled, but first get the click to work properly

$("#editName").button();
$("#nameChange").on('click', "#editName" ,function(){
        $("#editUserInfoForm").dialog({
            height: 200,
            width: 300,
            modal: true,
            buttons: {
                "Apply": function(){
                    var firstName = $("#newFirstName").val();
                    var lastName = $("#newLastName").val();
                    var userID = $("#userID").val();
                    var email = $("#email").val();
                    var str = "first="+firstName+"&last="+lastName+"&userID="+userID+"&email="+email;

                    $.ajax({
                        url : "ajax/editName.php",
                        type : "post",
                        data : str,
                        success : function(result){
                            $("#nameChange").html(result);
                        }
                    });
                    $( this ) .dialog( "close" );
                },
                Cancel: function(){
                    $( this ) .dialog( "close" );
                }
            },
        });
    });

answered Oct 19, 2013 at 13:03

Basti

2352 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Frank Castle Over a year ago

thank you very much - I am half way there. the buttom element is still not formatted to the jQuery button style after div element is reloaded.

Frank Castle Over a year ago

I added a line to your code which seemed to solve the issue I stated in my above comment. Thank you very much for your help and have a nice day.

Collectives™ on Stack Overflow

jquery ui button not resetting after ajax call

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related