EasyUI Forum

General Category => General Discussion => Topic started by: baxter on June 21, 2012, 06:06:28 PM



Title: Tabs, json and dialog
Post by: baxter on June 21, 2012, 06:06:28 PM
Hello,

i working with dialog in tabs. The tabs are loaded with follow function:

Code:
        function getContent(url) {
       
return $.ajax({
            type: "GET",
            url: url,
            cache: false,
            async: false
}).responseText
    }

    function addTab(url, title, icon) {
   
        if ($('#systabs').tabs('exists', title)) {
            $('#systabs').tabs('select', title)
            } else {
            index++;
       
            $('#systabs').tabs('add', {
title: title,
content: getContent("/window.php" + url),
iconCls: icon,
closable: true,
border: 0,
fit: true,
tools: [{
    iconCls: 'icon-mini-refresh',
    handler: function () {
updatecontent(icon);
    }
}],
    })
}
    }

so, i had a freaky problem with open dialogs inside the tabs. When i open a dialog, i fill the form values with json data:

Code:
            ....
            onOpen:function(){
           
                $.post("/jclient.php",{methode:'getHandle',handle:$('#handle').val()},function(result){
       
    $('#firstname').val(result.FIRSTNAME);
    $('#firstname').attr("disabled", true);
   
    $('#lastname').val(result.NAME);
    $('#lastname').attr("disabled", true);
   
    ...
                },'json');
            },
            ...

i open the dialog in the new open tab, its works, an the values are filled correctly. But when i close the tab, open the this tab again and then open the dialog the values are empty?
The data is loaded correct via json client but its not filled. I search for this failure the last 2 weeks but i dont find it;-)

Maybe somebody here has an idea what's the failure.

Thanks,
Baxter


Title: Re: Tabs, json and dialog
Post by: stworthy on June 22, 2012, 02:55:06 AM
Where is the dialog defined? How do you open the dialog? Please using the firebug to see if some errors occur when open the dialog.


Title: Re: Tabs, json and dialog
Post by: baxter on June 25, 2012, 06:55:41 AM
Where is the dialog defined? How do you open the dialog? Please using the firebug to see if some errors occur when open the dialog.

Thanks for your replay...

i open the dialog from toolbar:
Code:
<div id="tb_handles" style="padding:5px;height:auto">
  <a href="#" id="hdl_update" class="easyui-linkbutton" plain="true" iconCls="icon-edit">Handle ändern</a>
  ...
</div>

if i click the link, get the js function:
Code:
$('#hdl_update').click(function(){
var update = 1;
openHandleDialog(update);
    });

openHandleDialog ist the dialog function:

Code:
function openHandleDialog(update)
{
    if(update){
var row = $('#handles').datagrid('getSelected');
$('#handle').val(row.handle);
$('#action').val('update');
    }else{
$('#action').val('create');
    }
   
    $('#HandleDialog').show();
       
    $('#HandleDialog').dialog({
        width:700, 
        height:680,
modal: true,
buttons:[{
    text: LG799,
    iconCls:'icon-ok',
    handler:function(){
               .....
            }
},{
    text: LG1279,
    handler:function(){

$('#handledata').form('clear');

$('#HandleDialog').dialog('close', true);
$('#firstname').attr("disabled", false);
$('#lastname').attr("disabled", false);
$("#jobs_hrmember").prop("checked", false);
$("#xxx_blocking").prop("checked", false);
$('#HandleDialog').hide();
    }
}],
onOpen:function(){
   
    $('#handledata').form('clear');
   
    var row = $('#handles').datagrid('getSelected');
    $('#handle').val(row.handle);
    $('#action').val('update');
   
    $("#handletab").tabs("select", 0);
   
    load_progress();
       
    if($('#handle').val()){

$.post("/jclient.php",{methode:'getHandle',handle:$('#handle').val()},function(result){
   
    $('#action').val('update');
   
    $('#phone').removeClass("defaultTextActive");
    $('#phone').val('');
   
    $('#firstname').val(result.FIRSTNAME);
    $('#firstname').attr("disabled", true);
   
    $('#lastname').val(result.NAME);
    $('#lastname').attr("disabled", true);
   
    $('#company').val(result.COMPANY);
    $('#street').val(result.STREET);
    $('#pcode').val(result.PCODE);
    $('#city').val(result.CITY);
    $("#country").empty().append(result.COUNTRY);
    $('#phone').val(result.PHONE);
    $('#fax').val(result.FAX);
    $('#mail').val(result.EMAIL);
   
    $('#hr_number').val(result.HRNUMBER);
    $('#str_number').val(result.STRNUMBER);
    $('#personal_id').val(result.PERSONALID);
    $('#personal_city').val(result.PERSONALCITY);
    $('#personal_date').val(result.PERSONALDATE);
    $('#personal_enddate').val(result.PERSONALEND);
    $('#brand_name').val(result.BRANDNAME);
    $('#brand_number').val(result.BRANDNUM);
    $('#aero_id').val(result.AEROID);
    $('#aero_password').val(result.AEROPASS);
    $('#cat_ens').val(result.CATENS);
    $('#cat_id').val(result.CATID);
    $('#cat_key').val(result.CATKEY);
    $('#cat_sponsor1').val(result.CATSP1);
    $('#cat_sponsor2').val(result.CATSP2);
    $('#cat_sponsor3').val(result.CATSP3);
    $('#cat_url').val(result.CATURL);
    $('#cat_use').val(result.CATUSE);
    $('#it_person').val(result.ITPERSON);
    $('#jobs_position').val(result.JOBSPOS);
    $('#jobs_site').val(result.JOBSSITE);
    $('#ca_categorie').val(result.CACAT);
    $('#jobs_admin').val(result.JOBSADM);
    $('#travel_uin').val(result.TRAVELUIN);
    $('#xxx_id').val(result.XXXID);
    $('#xxx_password').val(result.XXXPASS);
   
    $("#type").empty().append(result.TYPE);
    $('#uk_type').empty().append(result.UKTYP);
    $('#ca_categorie').empty().append(result.CACAT);
    $('#jobs_business').empty().append(result.JOBSBUSI);
    $('#it_person').empty().append(result.ITPERSON);
   
    if(result.JOBSHRM == '1'){ $("#jobs_hrmember").prop("checked", true); }
    if(result.XXXBLOCK == '1'){ $("#xxx_blocking").prop("checked", true); }

    $.messager.progress('close');
   
},'json');

$.messager.progress('close');
      }
      else{

$.post("/jclient.php",{methode:'getDefaultValue'},function(result){
   
    $('#action').val('create');

    $("#type").empty().append(result.TYPE);
    $('#uk_type').empty().append(result.UKTYP);
    $('#ca_categorie').empty().append(result.CACAT);
    $('#jobs_business').empty().append(result.JOBSBUSI);
    $('#it_person').empty().append(result.ITPERSON);
    $("#country").empty().append(result.COUNTRY);

},'json');

$.messager.progress('close');
    }
},
onClose:function()
{
    $('#handledata').form('clear');
   
    $('#firstname').attr("disabled", false);
    $('#lastname').attr("disabled", false);
    $("#jobs_hrmember").prop("checked", false);
    $("#xxx_blocking").prop("checked", false);
}
    }); 
}

firebug get no errors. thats makes me confussed;-)


Title: Re: Tabs, json and dialog
Post by: stworthy on June 25, 2012, 06:14:11 PM
I suggest that you load your dialog(#HandleDialog) while adding a new tab panel. If so, that is the reason of your issue. When adding a new tab panel, the tab panel contain the '<div id="HandleDialog"></div>' content which will create the dialog you point out above. When closing the tab panel, the dialog is not destroy yet.

There are two ways to solve this issue.
1. Do not place the dialog on your tab panel, move it to page <body>.
2. If you really want to place the dialog on you tab panel, write some code to destroy the dialog while closing the tab panel:
Code:
$('#systabs').tabs({
onClose:function(){
$('#HandleDialog').dialog('destroy');
}
});


Title: Re: Tabs, json and dialog
Post by: baxter on June 26, 2012, 05:37:06 AM
Thanks stworthy,

i´ve try both methods, only the method to put the dialog content without the tab and into a body of main window works.

Thank you!