DhxForm with combo problem

ikhsan · April 23, 2012, 4:01am

Dear team ,

I have little problem with the form that contain combo inside it, when i load the form data, combo value didn’t select the selected option, it always select the first option

here is my form struct

<items>
    <item type="settings" position="label-left" labelWidth="80" inputWidth="190"></item>
    <item type="fieldset" name="data" label="Add new contact" inputWidth="auto">
       <item type="hidden" name="tags"></item>
       <item type="input" name="person" label="Name"></item>
       <item type="combo" name="country" label="Country" connector="http://localhost/index.php/combo_svc/country" validate="NotEmpty"></item>
       <item type="input" name="number" label="Number" validate="NotEmpty"></item>
       <item type="block" width="280" classname="buttonlist">
           <item type="combo" name="tag" connector="http://localhost/index.php/combo_svc/tag" label="Tags" inputWidth="100"></item>
           <item type="newcolumn"></item>
           <item type="button" name="add_tag" value="Add" id="add_tag" classname="add_button"></item>
       </item>
       <item type="block" width="280" classname="buttonlist">
            <item type="button" name="send" value="Save" id="send"></item>        
       </item>
    </item>
    <item type="newcolumn"></item>
    <item type="fieldset" label="Tags used">
        <item type="template" name="taglist" label=""></item>
    </item>
</items>

and data loaded for the form

<data>
    <person><![CDATA[Lee Smith]]></person>
    <country><![CDATA[1]]></country>
    <number><![CDATA[898756324]]></number>
    <tags><![CDATA[test]]></tags>
</data>

and combo option generated from connector

<complete>
    <option value="61">Australia&lt;img style="float:right;margin-right:8px" src="asset/imgs/flags/au.png" /&gt; </option>
    <option value="62">Indonesia&lt;img style="float:right;margin-right:8px" src="asset/imgs/flags/id.png" /&gt; </option>
    <option value="63">Malaysia&lt;img style="float:right;margin-right:8px" src="asset/imgs/flags/my.png" /&gt; </option>
    <option value="47">Norway&lt;img style="float:right;margin-right:8px" src="asset/imgs/flags/no.png" /&gt; </option>
    <option value="46">Sweden&lt;img style="float:right;margin-right:8px" src="asset/imgs/flags/se.png" /&gt; </option>
    <option value="44">United Kingdom&lt;img style="float:right;margin-right:8px" src="asset/imgs/flags/gb.png" /&gt; </option>
    <option value="1">United States&lt;img style="float:right;margin-right:8px" src="asset/imgs/flags/us.png" /&gt; </option>
</complete>

regards

ikhsan · April 23, 2012, 4:05am

once again, how to add image in combo option via php connector?

regards

Andrei · April 23, 2012, 11:21am

Hi

Please provide completed demo including all corresponding js/css files (sources better if you have them).

ikhsan · April 26, 2012, 8:02am

ah, I see the problem was just i try to access combo befor it’s option was loaded by connector, I include the option in form structure and it’s working

my other problem is i try to open multiple tab with form in it based on list of checked grid, but only last form or sometimes no form that load data successfully, i also try to attach event on form but only last form work correctly

here is my snippet

abBar.attachEvent('onclick',function(id){
            //populate rowId with checked box from the grid
            var chkGridId=new Array();
            abGrid.forEachRow(function(id){
                if(abGrid.cells(id,0).getValue()==1){
                    chkGridId[chkGridId.length]=id;
                }
            });
            selGridId=abGrid.getSelectedRowId();
            conGridId=(chkGridId.length > 0)?chkGridId : new Array();
            //if no checked row found, assign selected row
            if(conGridId.length==0 && selGridId){
                conGridId[0]=selGridId
            }
            //console.log(conGridId.length+' '+conGridId.join(','));
            switch(id){
                //edit and new contact
                case 'edit_contact':
                    if(!conGridId.length){
                        //check if any contact selected, show error if none
                        x.showMessage('<?php echo lang('app_error_label') ?>','<?php echo lang('addr_data_noselect') ?>','error');
                        break;
                    }
                case 'new_contact':
                    //create tab id based on edit or new action
                    if(id=='new_contact') conGridId =new Array('new');
                    for(a in conGridId){
                        var conTabId= (id=='edit_contact')? 'conForm_'+conGridId[a] :new Date().valueOf();
                        //console.log('new tab created with id: '+conTabId);
                        conTabLabel=(id=='edit_contact')?'<?php echo lang('addr_data_edit') ?>':'<?php echo lang('addr_data_new') ?>';
                        if(x.tabExist(conTabId)){
                            x.tabbar.setTabActive(conTabId)
                        }else{
                            conTab=x.createTab(conTabId,conTabLabel);
                            //initializing toolbar
                            conBar[conTabId]=conTab.attachToolbar();
                            //conBar[conTabId].loadXML(x.baseHandler+'toolbar_svc/load/address_book');
                            //initializing form
                            conForm[conTabId]=conTab.attachForm();
                            conForm[conTabId].loadStruct(x.baseHandler+'form_struct/add_contact/'+id);
                            conFormDp[conTabId]=new dataProcessor(x.baseHandler+'form_svc/contact');
                            conFormDp[conTabId].init(conForm[conTabId]);
                            conFormDp[conTabId].defineAction('error',function(){x.showMessage('<?php echo lang('app_error_label') ?>','<?php echo lang('addr_data_error') ?>','error');return true;});
                            conFormDp[conTabId].defineAction('updated',function(){x.showMessage('<?php echo lang('app_status_label') ?>','<?php echo lang('addr_data_update') ?>','notif');return true;});
                            conFormDp[conTabId].defineAction('inserted',function(){x.showMessage('<?php echo lang('app_status_label') ?>','<?php echo lang('addr_data_insert') ?>','notif');return true;});
                            conFormDp[conTabId].defineAction('session_timeout',function(){x.showLogin});
                            conFormListener[conTabId]=function(id){
                                switch(id){
                                    case 'add_tag':
                                        conCmbTag[conTabId]=conForm[conTabId].getCombo('tag');
                                        selTag=conCmbTag[conTabId].getComboText();
                                        if(selTag!=''){
                                            //conCmbTag[conTabId].deleteOption(selTag);
                                            conCmbTag[conTabId].setComboText('');
                                            //get current tag list
                                            curTagList=conForm[conTabId].getItemValue('tags');
                                            curTagArr = (curTagList)? curTagList.split(','):new Array();
                                            //add tag tu current list
                                            curTagArr[curTagArr.length]=selTag;
                                            conForm[conTabId].setItemValue('tags',curTagArr.join(','));
                                            //set item label to show tag list
                                            curLabel=conForm[conTabId].getItemLabel('taglist');
                                            conForm[conTabId].setItemLabel('taglist',curLabel+selTag+' <a href="javascript:removeTag(\''+conTabId+'\',\''+selTag+'\')"><img src="asset/imgs/icons/delete_tag_16.png" /></a>
');
                                        }else{
                                            x.showMessage('<?php echo lang('app_error_label') ?>','<?php echo lang('addr_option_noselect') ?>','error');
                                        }
                                        break;
                                    case 'send':
                                        conForm[conTabId].save();
                                        abGrid.clearAndLoad(x.baseHandler+'grid_svc/address_book?dhx_no_header=1');
                                        break;
                                    case 'sendclose':
                                        conForm[conTabId].save();
                                        if(conForm[conTabId].validate()){
                                            x.tabbar.goToPrevTab();
                                            x.tabbar.removeTab(conTabId);
                                        }
                                        abGrid.clearAndLoad(x.baseHandler+'grid_svc/address_book?dhx_no_header=1');
                                        break;
                                }
                            }
                            
                            //conForm[conTabId].attachEvent('onButtonClick',conFormListener[conTabId]);
                            
                            conFormPreproc[conTabId]=function(id,data){
                                    x.showMessage('<?php echo lang('app_status_label') ?>','<?php echo lang('addr_data_load') ?>','notif');
                                    if(data.tags!=''){
                                        tags=data.tags.split(',');
                                        taglist='';
                                        for(tag in tags){
                                            taglist+=tags[tag]+' <a href="javascript:removeTag(\''+conTabId+'\',\''+tags[tag]+'\')"><img src="asset/imgs/icons/delete_tag_16.png" /></a>
';
                                        }
                                        conForm[conTabId].setItemLabel('taglist',taglist);
                                        //console.log('splitting tags for id: '+id);
                                    }
                                    return true;
                                }
                            
                            /*if(id=='edit_contact'){
                                conForm[conTabId].attachEvent('onBeforeDataLoad',conFormPreproc[conTabId]);
                                conForm[conTabId].load(x.baseHandler+'form_svc/contact?id='+conGridId[a]);
                                //console.log('contact edited, loadin data for contact id: '+conGridId[a]);
                            }*/
                        }
                    }
                    for(formId in conForm){
                        conForm[conTabId].attachEvent('onButtonClick',conFormListener[formId]);
                        if(formId.substr(0,7)=='conForm'){
                            conForm[formId].attachEvent('onBeforeDataLoad',conFormPreproc[formId]);
                            conForm[formId].load(x.baseHandler+'form_svc/contact?id='+formId.substr(8,2));
                        }
                    }
                    break;
            }
        });

Andrei · April 26, 2012, 10:21am

attached source code not give enough info to check your issue.
please provide completed demo.

ikhsan · April 26, 2012, 11:49am

you can see complete demo here prototype.sadhean.com/kenneth/

regards
Ikhsan

ikhsan · April 26, 2012, 12:40pm

open on addressbook menu

edit single form failed to load form data sometimes, but edit multiple form always failed

Andrei · April 27, 2012, 9:50am

Hi

Thanks for demo

well, the problem seems in async loading, for this you need:

address_book line 94:
conForm[conTabId].loadStruct()
replace with:
conForm[conTabId].loadStruct(url, function(){
// here form struct will loaded and now you can load contact data into form
// from line 155
conForm[conTabId].load(x.baseHandler+‘form_svc/contact?id=’+conGridId[a]);
})

Please use attach form.

It contain fix for:
when you have combo which loads data using connector (also async request) - if form values will loaded using form.load() before options will loaded into combo using connector - value will selected correctly
form.rar (63 KB)