Jquery Modalbox closing: is it possible to keep default value of inputs in a modalbox when close it without reload parent page?

Question

at first sorry about my poor English. Now Im having a problem in closing and passing params to a modalbox, hope you guys can help me. Im working with Zend Framework. I have an index page (action) and a hyperlink within it to call a modal box (using ajax).

    <a class="button white"  href="javascript:void(0)" 
onclick="openPopup(<?php echo $group->getId() ?>,'<?php echo $this->baseUrl('admin/group/edit-box')?>')">
        Open Popup
    </a>

I have a div tag for display result from openPopup function above in Index page too

<form id="newEditForm" name="newEditForm" method="post" action="<?php echo $this->baseUrl('admin/group/edit-box')?>" enctype="multipart/form-data">
<div id="editBoxDiv"></div>
</form>

This is the openPopup function :

 function openPopup(id, url){
        $.ajax({
            type: "POST",
            url: url,
            data: "id="+id,
            success: function(result) {
                    $("#editBoxDiv").html(result);
                    $( "#dialog-modal-edit" ).dialog({
                      bgiframe: true,
                      autoOpen: false,
                      width: 990,
                      hide: 'blind',
                      height: 620,
                      modal: true,
                      draggable: true,
                      resizable: true,
                      close : function(){

                      }

                });

                    $("#dialog-modal-edit" ).dialog('open');
            }
          });
    }

This is edit-box.phtml

<script type="text/javascript">
setRoleText = function(name){

    $('#editTextboxes :input[id=role]').val(name.value);
}
</script>
    <div id="dialog-modal-edit" title="Edit group" style="display: none;">
    <div id="editTextboxes">
                            <label class="form-label required">Group name</label>
                            <input id="name" class="form-field width60" name="name" type="text" value="<?php echo $group->getName() ?>" maxlength="100" onkeyup="setRoleText(this)"/>

                            <label class="form-label required">Group Role</label>
                            <input id="role" class="form-field width60" name="role" type="text" value="<?php echo $group->getRole() ?>" maxlength="100"/>
                        </div>
    </div>

The problem is, the first time I open the modalbox, every letter i typed in [input : name] will be set for [input : role] through setRoleText function, it works so far so good. But when I close the modalbox and open it again, the textboxes value(s) dont correct as they should be (I mean the value passed from the edit-box action) but they are the values that i've typed at the first time I open the modalbox.

I've tried to destroy the modalbox before re-init it while calling ajax

$("#dialog-modal-edit" ).dialog('destroy');
$("#dialog-modal-edit" ).dialog({
    //init code here
});

but nothing works.

So I decided change the autoOpen of the modal box to true, and here is the openPopup function after changed :

function openPopup(id, url){

    $.ajax({
        type: "POST",
        url: url,
        data: "id="+id,
        success: function(result) {
                $("#editBoxDiv").html(result);
                $( "#dialog-modal-edit" ).dialog({
                  bgiframe: true,
                  autoOpen: true,
                  width: 990,
                  hide: 'blind',
                  height: 620,
                  modal: true,
                  draggable: true,
                  resizable: true,
                  close : function(){

                  }

            });

        }
      });
}

Then the textboxes' values now are correct as they should be. But the setRoleText function just only works at the first time i open the modal box. At the second time, the setRoleText function doesnt work and go on at the 3rd, 4th ... Any idea with this ??? Thanks so much for reading. Regards.

UPDATE :

I've just found one way to solve this problem, but there is still issue.

function openPopup(id, url, name, role){
        $.ajax({
            type: "POST",
            url: url,
            data: "id="+id,
            success: function(result) {
                    $("#editBoxDiv").html(result);
                    $( "#dialog-modal-edit" ).dialog({
                      bgiframe: true,
                      autoOpen: false,
                      width: 990,
                      hide: 'blind',
                      height: 620,
                      modal: true,
                      draggable: true,
                      resizable: true,
                      close : function(){

                      }

                });
$('#editTextboxes :input[name=name]').val(name);
            $('#editTextboxes :input[name=role]').val(role);
                    $("#dialog-modal-edit" ).dialog('open');
            }
          });
    }

As you can see, I passed two more params into openPopup function and it worked. But how about if there is more than 2 params (ex : 10 params) ? I dont think passing all params to function is the good idea. So, still need your helps. Thanks.

Answer 1

Yup, finally I found the way to solve my problem. Hope this will be useful for someone need.

Just so simple :

function openPopup(id, url){

    $.ajax({
        type: "POST",
        url: url,
        data: "id="+id,
        success: function(result) {
            $("#editBoxDiv").html(result);

                $( "#dialog-modal-edit" ).dialog({
                  bgiframe: true,
                  autoOpen: true,
                  width: 990,
                  hide: 'blind',
                  show: 'blind',
                  height: 620,
                  modal: true,
                  draggable: true,
                  resizable: true,
                  ***close : function(){
                    $(this).remove();
                  }***
                });


        }
      });
}

When close the modalbox, just remove it and everything is fine.