I am opening a dialog after clicking a button and filling some info into it. When I open the dialog once again it displays the error:
Error: adding element with duplicate id '__xmlview1--__item0'
Below is the code : (Edited : saving the create dialog instance everytime the dialog is created)
onAddMovie: function() {
var view = this.getView();
var createDialog = view.byId("CreateDialog");
var oDummyController = {
// This is when I clicked the Submit button in dialog
submitDialog: function() {
view.byId("panel").setVisible(true);
user = view.byId("movie_name").getValue();
var label = view.byId("movieName");
label.setText(user);
screenDate=view.byId("screeningDate").getValue();
var date = view.byId("__date");
var dateObject = new Date(screenDate);
var dateFormat = sap.ui.core.format.DateFormat.getDateInstance({pattern : "MMM dd,YYYY" });
var dateFormatted = dateFormat.format(dateObject);
date.setText(dateFormatted);
rating=view.byId("langRating");
var radioRating= view.byId("movieRating").getSelectedButton().getText();
if(radioRating == "Universal")
{ radioRating='(U)'; }
else if(radioRating == "Adult")
{
radioRating='(A)';
}
else
{
radioRating='(U/A)';
}
rating=view.byId("langRating");
rating.setText(radioRating);
MessageToast.show(user);
createDialog.close();
},
closeDialog: function() {
createDialog.close();
}
};
// This is when the dialog event is fired, things are fine here
if (!createDialog) {
createDialog = sap.ui.xmlfragment(view.getId(), "Admin.view.Dialog", oDummyController);
}
if (this._createDialog) {
this._createDialog = sap.ui.xmlfragment(view.getId(),
"Admin.view.Dialog", oDummyController);
}
view.addDependent(createDialog);
createDialog.open();
if (!createDialog.isOpen()) {
//do sth
}
}
fragment :
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core"
xmlns:l="sap.ui.layout">
<Dialog title="Input Movie Details" width="100%"
class="sapuiMediumMargin" confirm="handleClose"
close="handleClose">
<l:VerticalLayout class="sapUiContentPadding" width="100%">
<l:content>
<Input width="100%" placeholder="Movie Name" id="movie_name"/>
<HBox alignItems="Center" renderType="Bare">
<Label text="Year of Release" width="50%"/>
<ActionSelect selectedItem="Element sap.ui.core.ListItem#__item0" selectedKey="item1" class="sapUiLargeMarginBegin" selectedItemId="__item0" id="yearOfRelease" width="50%">
<items>
<core:ListItem text="2017" key="item1" id="__item0"/>
<core:ListItem text="2016" key="item2" id="__item1"/>
<core:ListItem text="2015" key="item3" id="__item2"/></items>
</ActionSelect>
</HBox>
<HBox alignItems="Center" renderType="Bare">
<Label text="Date of Screening" width="50%"/>
<DatePicker class="sapUiLargeMarginBegin" width="50%" id="screeningDate"/>
</HBox>
<HBox alignItems="Center">
<Label text="Movie Rating"/>
<RadioButtonGroup width="100%" columns="3" selectedIndex="-1" id="movieRating">
<buttons>
<RadioButton groupName="__group0" text="Universal" id="__button0"/>
<RadioButton groupName="__group0" text="Adult" id="__button1"/>
<RadioButton groupName="__group0" text="U/A" id="__button2"/></buttons>
</RadioButtonGroup>
</HBox>
<HBox alignItems="Center" width="100%" renderType="Bare">
<Label text="Enable Booking" width="70%"/>
<CheckBox id="enableBooking" width="30%" textDirection="LTR"/>
</HBox>
<FlexBox alignItems="End" alignContent="Center" justifyContent="End" class="sapUiTinyMarginTop">
<SegmentedButton selectedButton="__button3" id="__button21">
<buttons>
<Button text="Submit" id="__submit" press="submitDialog"/>
<Button text="Cancel" id="__button41" press="closeDialog"/></buttons>
</SegmentedButton>
</FlexBox>
</l:content>
</l:VerticalLayout>
</Dialog>
</core:FragmentDefinition>
Please help as I am new to Javascript and SAPUI5