EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: joe on February 06, 2018, 01:12:24 AM



Title: Clone Objects slow in Internet Explorer
Post by: joe on February 06, 2018, 01:12:24 AM
I have to clone a group of objects inside a div tag. After they are cloned, then all of the objects inside the div tag are initialized using jEasy calls. The process works but extremely slow in IE and only bearable using chrome.   Is there a faster way to clone or initialize a group of JEasy objects? 
 
HTML code:
Code:
<div id=cloneMe0>
<div>
<label id="CurrentProductNumberLabel0" class="textbox-label">Current Product Number</label>
<input name="CurrentProductNumber0" id="CurrentProductNumber0" class="textbox etextbox" type="text" maxlength="50" />
</div>
<div>
<label id="ProductDescriptionLabel0" class="textbox-label">Product Name<a href="javascript:niente();" name="helpText" data-helpid="4"><i class="fa fa-info-circle" aria-hidden="true"></i></a></label>
<textarea id="ProductDescription0" name="ProductDescription0" style="height: 118px" data-options="multiline:true" class="textarea etextbox"></textarea>
</div>
<div>
<label id="QuantityPerCaseLabel0" class="textbox-label">Quantity Per Case</label>
<input id="QuantityPerCase0" name="QuantityPerCase0" class="textbox enumberbox" />
</div>
<div>
<label id="EstimatedProductionDateLabel0" class="textbox-label">Estimated Production Date</label>
<input id="EstimatedProductionDate0" name="EstimatedProductionDate0" class="textbox edatebox" />
</div>
<div>
<table id="dg-Components0" title="" class="edatagrid" style="height: 240px"
    toolbar="#toolbar"
    rownumbers="false" singleselect="true" striped="true" remotesort="false">
    <thead>
<th field="ComponentBuyer_Name" width="200" sortable="true">Buyer</th>                                       
<th field="ComponentEngineer_Name" width="200" sortable="true">Engineer</th>
<th field="OldComponentNumber" width="200" sortable="true">Old Component Number</th>
<th field="ComponentDescription" width="334" sortable="true">Component Description</th>
<th field="Niente" width="500">&nbsp;</th>
    </thead>
</table>
</div>
</div>

JQuery with JEasy code:
Code:
       var cloneIndex = 1;

       $("#cloneMe0").clone()
            .appendTo("#someParents")
            .attr("id", "cloneMe" + cloneIndex)
            .addClass("cloneProductComponent")
            .find("*")
            .each(function () {
                var id = this.id || "";
                var match = id.match(regex) || [];
                if (match.length == 3) {
                    var strid = match[1];
                    var strname;
                    strid = strid.replace(/^0+|0+$/g, "") + (cloneIndex);

                    if (this.name == undefined) {
                        strname = strid;
                    } else {
                        strname = this.name;
                    }

                    strname = strname.replace(/^0+|0+$/g, "") + (cloneIndex);

                    this.id = strid;
                    this.name = strname;

                    if ($(this).hasClass("etextbox")) {
                        $(this).textbox();
                    }

                    if ($(this).hasClass("enumberbox")) {
                        $(this).numberbox({ groupSeparator: ',' });
                    }
                   
                    if ($(this).hasClass("enumarictextbox")) {
                        $(this).textbox();
                    }

                    if ($(this).hasClass("ecurrencybox")) {
                        $(this).numberbox({ precision: 2, groupSeparator: ',', decimalSeparator: '.', prefix: '$' });
                    }

                    if ($(this).hasClass("ecomboboxProductType")) {
                        $(this).combobox({
                            data: FormMeta['FormMeta14'],
                            panelHeight: 'auto',
                            valueField: 'id',
                            textField: 'text'
                        });
                    }

                    if ($(this).hasClass("ecomboboxProductBuyer")) {
                        $(this).combobox({
                            data: FormMeta['FormMeta12'],
                            panelHeight: 'auto',
                            valueField: 'id',
                            textField: 'text'
                        });
                    }

                    if ($(this).hasClass("ecomboboxComponentBuyer")) {
                        $(this).combobox({
                            data: FormMeta['FormMeta12'],
                            panelHeight: 'auto',
                            valueField: 'id',
                            textField: 'text'
                        });
                    }

                    if ($(this).hasClass("ecomboboxComponentEngineer")) {
                        $(this).combobox({
                            data: FormMeta['FormMeta13'],
                            panelHeight: 'auto',
                            valueField: 'id',
                            textField: 'text'
                        });
                    }

                    if ($(this).hasClass("edatebox")) {
                        if ($(this).hasClass("eArtWorkReqDate")) {
                            $(this).datebox({
                                onChange: function (newDate, oldDate) {
                                    if (newDate != null) {
                                        if (newDate.length > 0 && oldDate != newDate) {
                                            if (Date.parse(newDate) && clickSelected) {
                                                addNewNote(newDate, oldDate, 'ArtRequireDate', strname);
                                            }
                                        }
                                    }
                                },
                                editable: false,
                                validateOnCreate: false
                            });
                        } else {
                            $(this).datebox({ editable: false });
                        }
                    }

                    if ($(this).find('a').attr("name") == "helpText") {
                        buildFieldHelp($(this).find('a[name=helpText]'));
                    }

                    if ($(this).hasClass("edatagrid")) {
                        $(this).datagrid({
                            onSelect: function (index, row) {
                                populateComponentForm(index, row, cloneIndex);
                            },
                            rowStyler: function (index, row) {
                                if (row.isvalid == false) {
                                    return 'background-color:#ffa8a8;color:#4a4a4a;';
                                }
                            }
                        });
                    }                }
            });




Title: Re: Clone Objects slow in Internet Explorer
Post by: jarry on February 08, 2018, 06:29:13 PM
You should call 'cloneFrom' method to create a new component from the existing component. Please refer to this example:

http://code.reloado.com/ehacim4/edit#preview