Double jQuery in a single wep page

Question

Since i can not create two forms in a single page then i am trying to use two different jQuery:

$(document).ready(function () {

to open same form with different buttons as function provides a feature to customize new title and buttons.

This is my code:

 <p><button id="newuserbutton" >Create New User</button></p>
 <p><button id="edituser" >Update User</button></p>

 <script "text/javascript">

    $(document).ready(function () {

        $('#div1').dialog({

            modal: true,
            autoOpen: false,
            title: 'Create new user',
            buttons: {
                "Create User": function () {
                    $(this).dialog("");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });



        $('#newuserbutton').click(function () {
            $('#div1').dialog('open');
            $("#div1").css("color", "grey");
            $("#div1").dialog({ minHeight: 300, minWidth: 550 });
            //   $("*").css('color', 'red');
        });



    });

</script>


<script>

     $(document).ready(function () {

        $('#div1').dialog({

            modal: true,
            autoOpen: false,
            title: 'Edit user',

            buttons: {
                "Save Changes": function () {
                    $(this).dialog("");
                },
                "Delete": function () {
                    $(this).dialog("alert");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }


        });

        $('#edituser').click(function () {
            $('#div1').dialog('open');
            $("span.ui-dialog-title").text('Edit User');
            $("#div1").css("color", "grey");
            $("#div1").dialog({ minHeight: 300, minWidth: 500 });
        });

    });


</script>

I click different buttons but all the way form opens with three buttons which is second jquery.

How can i use these multiple jQuery together? Or if is there any way i can create a new form inside jQuery function? Thank you for suggestions.

Answer 1

The problem is that you are initializing the jquery ui widget modal twice on the same div with id #div1. To summarize, this is what you are doing:

$(#div1)
    .dialog({...})
    .dialog({...});

Of course when you then call $(#div1).dialog('open'), the modal will open according to the 2nd initialization, that is to say a modal with the 3 buttons "Save Changes", "Delete" and "Cancel".

You must either use 2 differents divs (simpliest way) or use only one div and manage the modal content on modal open (cleanest way).

I wrote this jsFiddle to illusrate the 2nd way ;)