Avoid double click of an ajax, angular

1

know how to avoid double click when sending data in an ajax ?, bone click to send the data and while they are sending do not let it come back click again, I put a loading but that is not enough. Thank you very much

.controller('productoGctrl', ['$scope', '$timeout', '$http','$ionicPopup', '$ionicLoading', 'productosDato','urlRoot', controlfproductoG])

function ontrolfproductoG ($scope, $timeout, $http, $ionicPopup, $ionicLoading, productosDato, urlRoot){
  $scope.agregarCanastika = function (id, tipo, nombre, preguntas, restantes) {
    $scope.divSepa = 'active';
    $scope.divAnimar = 'carritoAnimar';
    $scope.diviconoCar = 'active';

    $timeout(function () {
      $scope.divSepa = '';
      $scope.divAnimar = '';
      $scope.diviconoCar = '';
      var cantidadPreguntas = preguntas.length;
      var respondioP = respondioPreguntasProducto(id, tipo, cantidadPreguntas);
      console.log(id + '-' + tipo + '-' + restantes);
      if (id == undefined || id == '') {
       popupN('ooooppppsss', 'Id de proucto no disponible', 'advertencia', $ionicPopup);
      }
      else if (tipo == undefined || tipo == '') {
       popupN('ooooppppsss', 'Tipo de producto no disponible', 'advertencia', $ionicPopup);
      }
      else if (parseInt(restantes) <= 0) {
        popupN('Alerta', 'EL producto se ha agotado', 'advertencia', $ionicPopup);
      }
      else if (respondioP) {
        console.log(respondioP);
        var datoService = {
         actionType: 'get',
         iduser: localStorage.getItem('iduser'),
         idproducto: id
        };
        perguntasBuscarProducto($scope, $http, $ionicPopup, $ionicLoading, urlRoot.urlAjax + respondioP.tipoService,datoService)
         .then(function (date) {
           console.log(date);
           if (!date) {
             ajaxhttp(
               $http,
               $ionicLoading,
               $ionicPopup,
               'POST',
               urlRoot.urlAjax + 'CanastikaService.php',
               {
                actionType: 'agregar',
                iduser: localStorage.getItem('iduser'),
                tipo: tipo,
                idproducto: id
               },
               resAgregarCan($ionicLoading, $ionicPopup, urlRoot, nombre, 3)
            );
           }
           else{
            productosDato.nuevoProducto(id, tipo);
            direcionarGn('#/app/yagans');
           }
         });
      }
      else{
       console.log('noRespondio')
       $scope.show($ionicLoading);
       ajaxhttp(
         $http,
         $ionicLoading,
         $ionicPopup,
         'POST',
         urlRoot.urlAjax + 'CanastikaService.php',
         {
          actionType: 'agregar',
          iduser: localStorage.getItem('iduser'),
          tipo: tipo,
          idproducto: id
         },
         resAgregarCan($ionicLoading,$ionicPopup,urlRoot, nombre, 1)
       );
      }
    }, 500)
  }
}


function ajaxhttp($http,$ionicLoading,$ionicPopup,method,url,data,funrespuesta) {
  $http({
   method: method,
   url: url,
   headers: {'Content-Type': 'application/x-www-form-urlencoded'},
   data:data,
   timeout : 180000
  }).then(function (res) {
    funrespuesta(res.data)
  }, function (res) {
    $ionicLoading.hide();
    console.log(res);
    if (res.status == -1) {
      //popupC('ooooppppsss: '+ res.status, 'Se pasó el tiempo de plazo buscando la información','location', $ionicPopup);
      console.log('ooooppppsss: '+ res.status + 'Se pasó el tiempo de plazo buscando la información');
    }
    else{
     popupN('ooooppppsss: '+ res.status, res.statusText, 'advertencia', $ionicPopup);
    }
  });
}

function perguntasBuscarProducto ($scope, $http, $ionicPopup, $ionicLoading, url, dato) {
 var promise = new Promise();
 var preguntas;

 $scope.show = function() {
   $ionicLoading.show({
    template: '<p>Loading...</p><ion-diseno></ion-diseno>'
   });
 };

 $scope.hide = function(){
   $ionicLoading.hide();
 };

 $scope.show($ionicLoading);

 ajaxhttp(
  $http,
  $ionicLoading,
  $ionicPopup,
  'POST',
  url,
  dato,
  function (res) {
    console.log(res);
    $ionicLoading.hide();
    if (res.code == '0') {
      if (res.preguntas.length > 0) {
        promise.done(res.preguntas)
      }
      else{
        promise.done(false);
      }
    }
    else{
     console.log(res)
    }
  }
 );
 return promise;
}
    
asked by Albert Arias 19.12.2016 в 20:26
source

1 answer

2

I see you use ionic, so this can help you:

I see that you define functions and you pass by parameter all the dependency injections that your controller has. I do not see that very good IF you occupy those functions from other controllers, although I see that you define them within your controller that's why I advise you to declare them as you have them or with some $scope.

Inside your controller you define:

$scope.show = function() {
    $ionicLoading.show({
        template: '<ion-spinner icon="android"/>'
    });
};
$scope.hide = function() {
    $ionicLoading.hide();
};

And when you call your ajax function you can do this:

$scope.ajaxhttp = function(method,url,data,funrespuesta) {
    $scope.show();
    $http({
        method: method,
        url: url,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        data: data,
        timeout: 180000

    }).then(function(response) {
        $scope.hide();
    }, function error(response) {
        /* Error llamada */
        $scope.hide();
    });
}
    
answered by 19.12.2016 / 20:55
source