Skip to Content
0
Jul 19, 2019 at 09:49 PM

Multiple clicks on the button press - UI5

691 Views Last edit Jul 19, 2019 at 09:50 PM 2 rev

I have almost tried everything to prevent multiple clicks on a button press which leads to multiple order creation/ service calls - Made the button disable immediately on press, gave it a busy state, wrote addEventDelegate for dblClick, set/reset flag upon order creation, etc. Nothing works!

Below is my code:

Inside the fragment -

<HBox alignItems="Center">
<Button id="1"/>
<Button id="2"/>
<Button id="save" text="{i18n>SaveOrder}" press="onSubmit" fieldGroupIds="saveSubmitButtons"					visible="{order>/Other/SaveVisible}" enabled ="{order>/Other/SaveEnabled}"/>
<Button id="submit" text="{i18n>SubmitOrder}" fieldGroupIds="saveSubmitButtons" press="onSubmit" visible="{order>/Other/SubmitVisible}" enabled ="{order>/Other/SubmitEnabled}"/>
</HBox>

Inside Controller: Save / Submit use the same function depending upon the source further action is taken. But both have the issue of multiple clicks. Currently commented the double click event capture functionality.

_initializeData: function(){
// jQuery.sap.delayedCall(500, this, "attachDblClick");
}
attachDblClick: function (oEvent) {
// var that = this;
// this.getView().getControlsByFieldGroupId("saveSubmitButtons").forEach(function (element) {
// element.addEventDelegate({
//       ondblclick: function (that) {
// 	 element.setBusy(true);
// 	 element.setBusyIndicatorDelay(0);
// 	this.onSubmit.bind(this);  
//***********Note: This above call does not work - It never redirects to the function
//              }			
// 	}, this);
// 	});
// 	},

onSubmit: function (oEvent) {
     var flag = this.getModel("order").getProperty("/Other/SaveEnabled");
     if(flag){
     this.getModel("order").setProperty("/Other/SaveEnabled", false);
     this.getModel("order").setProperty("/Other/SubmitEnabled", false);
     this.source = oEvent.getSource().getText();
     var that = this;
     setTimeout(function()
        {
	 POUtils.onSubmit(that, that.source);
         }, 3000);
       }

POUtils.js

onSubmit: function (oContext, mode) {
....
// oContext.OdataModel.create("/POSet", oContext.Data, null, oContext.success.bind(oContext), oContext.error.bind(oContext));
      var token = null;
      $.ajax({
      url: sServiceURl,
      type: "GET",
      async: true,
      beforeSend: function (xhr) {
      sap.ui.core.BusyIndicator.show(0);
      xhr.setRequestHeader("X-CSRF-Token", "Fetch");
      },
      complete: function (xhr) {
      token = xhr.getResponseHeader("X-CSRF-Token");
      oContext.OdataModel.create("/OrdersSet", oContext.Data, null, oContext.successs.bind(oContext), oContext.error.bind(oContext));
        }
       });<br><br><br>error: function(){
<br>.......
<br>...
<br>oContext.getModel("order").setProperty("/Other/SaveEnabled", true); <br>
	oContext.getModel("order").setProperty("/Other/SubmitEnabled", true); <br>
}