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.