sapui5 - How to overwrite or change OpenUI5 Panel section id? -
i doing adding/delete of panel section container in openui5. while deleting selected panel container can able it. after deletion of container , again adding new container getting error of "adding element duplicate id txn_1". how fix issue?
i using below code:
var iconadd = new sap.ui.commons.button({ //add container code text : "add", width:"65px", icon : "sap-icon://add", press : function() { var len=$('#panelcontainer .sapuipanel').length; //alert("len"+len); createnewtransaction(len+1); //alert(""+len); //var content=$("#panelcontainer").html(); //$("#panelcontainer").append(content); //var length=$('#panelcontainer').length; // alert(""+length); } }); createnewtransaction(1);//onload defaultly 1 conatiner should show function createnewtransaction(len){ //panel code , delete container code //alert("in"+len); var opanel3 = new sap.ui.commons.panel("txn_"+len,{width: "100%", showcollapseicon: false}); opanel3.setareadesign(sap.ui.commons.enums.areadesign.fill); opanel3.setborderdesign(sap.ui.commons.enums.borderdesign.none); opanel3.settitle(new sap.ui.core.title({text:"transaction details"})); //opanel3.settitle(new sap.ui.core.title({text:"transaction details"})); var omatrix3 = new sap.ui.commons.layout.matrixlayout({ width: '600px', columns: 8,width:"auto"}); //omatrix3.setwidths('150px', '200px','200px','170px','200px'); omatrix3.setwidths('150px','200px','200px','170px','200px','210px'); omatrix3.setlayoutfixed(true); var olabelmaterial = new sap.ui.commons.label({text: 'material:*'}); var ocustomserachmaterial = new sap.ui.commons.textfield({value: '', width: '88%'},{ enabled:true, change:function(){ } }); olabelmaterial.setlabelfor(ocustomserachmaterial); var olabelinvoice = new sap.ui.commons.label({text: 'invoice number:'}); var olabeltext = new sap.ui.commons.textfield({value: '', width: '100%'}); olabelinvoice.setlabelfor(olabeltext); var olabelinvoicedate = new sap.ui.commons.label({text: 'invoice date:*'}); // create simple datepicker var odatepicker1 = new sap.ui.commons.datepicker(''); odatepicker1.setwidth("170px"); // odatepicker1.setyyyymmdd("20100101"); odatepicker1.setlocale("en-us"); // try "de" or "fr" instead! odatepicker1.attachchange( function(oevent){ if(oevent.getparameter("invalidvalue")){ oevent.osource.setvaluestate(sap.ui.core.valuestate.error); }else{ oevent.osource.setvaluestate(sap.ui.core.valuestate.none); } } ); // attach element in page //odatepicker1.placeat("sample1"); //omatrix3.createrow(olabelmaterial,ocustomserachmaterial,olabelinvoice,olabeltext,olabelinvoicedate,odatepicker1,olabelcurrency,ocustomserachcurrency,olabelinvoiceline,olabelinvoicelinetext,olabelshipmentdate,odatepicker2,olabelunits,ocustomserachunits,olabelagreement,ocustomserachagreementnumber); omatrix3.createrow(olabelmaterial,ocustomserachmaterial,olabelinvoice,olabeltext,olabelinvoicedate,odatepicker1); var olabelcurrency = new sap.ui.commons.label({text: 'currency:*'}); var ocustomserachcurrency = new sap.ui.commons.textfield({value: '', width: '88%'}); olabelcurrency.setlabelfor(ocustomserachcurrency); var olabelinvoiceline = new sap.ui.commons.label({text: 'invoice line number:'}); var olabelinvoicelinetext= new sap.ui.commons.textfield({value: '', width: '100%'}); olabelinvoiceline.setlabelfor(olabelinvoicelinetext); var olabelshipmentdate = new sap.ui.commons.label({text: 'shipment date:'}); // create simple datepicker var odatepicker2 = new sap.ui.commons.datepicker(''); odatepicker2.setwidth("170px"); // odatepicker1.setyyyymmdd("20100101"); odatepicker2.setlocale("en-us"); // try "de" or "fr" instead! odatepicker2.attachchange( function(oevent){ if(oevent.getparameter("invalidvalue")){ oevent.osource.setvaluestate(sap.ui.core.valuestate.error); }else{ oevent.osource.setvaluestate(sap.ui.core.valuestate.none); } } ); omatrix3.createrow(olabelcurrency,ocustomserachcurrency,olabelinvoiceline,olabelinvoicelinetext,olabelshipmentdate,odatepicker2); var oimage = new sap.ui.commons.image(); oimage.setsrc("icon:image/required_field_icon.png"); oimage.setalt("alternative image text image"); var olabelunits = new sap.ui.commons.label({text: 'units:*'}); var ocustomserachunits= new sap.ui.commons.textfield({value: '', width: '88%'}); olabelunits.setlabelfor(ocustomserachunits); var olabelagreement = new sap.ui.commons.label({text: 'agreement number:'}); var olabelagreement = new sap.ui.commons.textfield({value: '', width: '100%'}); olabelagreement.setlabelfor(olabelagreement); //create search field custom column search /* var ocustomserachagreementnumber = new sap.ui.commons.searchfield("s9",{ enablelistsuggest:false, placeholder:"search", width:"170px", serach:function(oevent){ } });*/ var olabelnone = new sap.ui.commons.label({text: ''}); var olabelnone1 = new sap.ui.commons.label({text: ''}); var deletebton=new sap.ui.commons.button({ text:"delete", width:"70px", icon:"sap-icon://delete", //lite:true, press:function(oevent){ if(!opanel3.getcollapsed()){ opanel3.setcollapsed(false); }else{ opanel3.setcollapsed(false); } var len=$('#panelcontainer .sapuipanel').length; // var headlen=$('#panelcontainer .sapuipanel .sapuipanelhdr').length; // alert(len); var selected=opanel3.getid(); // $('#panelcontainer .sapuipanel').not( "#txn_1" ).remove(); if(len==1){ $("#"+selected).not("#txn_1").remove(); }else{ $("#"+selected).remove(); } var splitdata=selected.split('_'); var delposition=parseint(splitdata[1]); // alert(delposition); $('#panelcontainer .sapuipanel').each(function(i, obj) { //alert("i22"+i); var i=i+1; if(delposition >= ) { var newid=splitdata[0]+"_"+i; $(this).attr("id", newid); $(this).attr("data-sap-ui", newid); $(this).attr("aria-labelledby",newid+"-title"); $(this).attr("aria-describedby",newid+"-acc"); } }); $('#panelcontainer .sapuipanel .sapuipanelhdr').each(function(i, obj) { //alert("i22"+i); var i=i+1; if(delposition >= ) { var newid=splitdata[0]+"_"+i; $(this).attr("id",newid+"-hdr"); } }); $('#panelcontainer .sapuipanel .sapuipanelhdr .sapuipaneltitle').each(function(i, obj) { //alert("i22"+i); var i=i+1; if(delposition >= ) { var newid=splitdata[0]+"_"+i; $(this).attr("id",newid+"-title"); } }); $('#panelcontainer .sapuipanel .sapuipanelhdr .sapuipaneltb ').each(function(i, obj) { //alert("i22"+i); var i=i+1; if(delposition >= ) { var newid=splitdata[0]+"_"+i; $(this).attr("id",newid+"-tb"); } }); $('#panelcontainer .sapuipanel .sapuipanelcont').each(function(i, obj) { //alert("i22"+i); var i=i+1; if(delposition >= ) { var newid=splitdata[0]+"_"+i; $(this).attr("id",newid+"-cont"); } }); /*for(i;i<len;i++){ var newid=splitdata[0]+"_"+i; var j = i+1; var oldid = splitdata[0]+"_"+j; $("#"+oldid).css({"border-color":"red","border-width":"1px","border-style":"solid"}); $("#"+selected).attr("id",newid); }*/ //$(this).parent().remove(); // dispalert() ; } }).addstyleclass("datacheck"); //deletebton.addstyleclass("deletedata"); //opanel3.addbutton(deletebton); opanel3.onafterrendering = function() { if (sap.ui.commons.panel.prototype.onafterrendering) { sap.ui.commons.panel.prototype.onafterrendering.apply(this, arguments); } var $this = this.$(); var span = $this.find('.sapuipanelico'); span.detach(); $this.find('.sapuipanelhdr').append(span); }; omatrix3.createrow(olabelunits,ocustomserachunits,olabelagreement,olabelagreement,olabelnone,deletebton); opanel3.addcontent(omatrix3); opanel3.placeat("panelcontainer"); }
it's quite clear errors. sapui5 offers controls powerful api on top of jquery, including dom manipulation. if understand source code correctly manipulationg dom yourself, should via api. please check documentation panel, there method safely remove content. , please provide formatted coding examples in future, mess , few people helping through mess.
Comments
Post a Comment