Change variable value in Ajax

Navigation
2

The Problem

I have the flagExistenciaArquivo variable, and need to be updated if the file exists or not. I call the verificaExistenciaArquivo function inside another function by setting the folder of that file and filename . If the file is found, it returns true , otherwise, false . I need to be able to change the value of the flag variable when I enter success or error of Ajax.

My Code 

var flagExistenciaArquivo = true;

function verificaExistenciaArquivo(pasta, nomeArquivo) {
    var baseUrl = 'http://' + $(location).attr('hostname') + '/monitoramento-mobile/assets/fotos/';

    if(pasta == 'assinaturas_entrevista') {
        arquivo = baseUrl + 'assinaturas_entrevista/' + nomeArquivo;
    }else if (pasta == null) {
        arquivo = baseUrl + nomeArquivo;
    }

    $.ajax({
        url: arquivo,
        type:'HEAD',
        success: function()
        {
            //mudar valor da variável para true
        },
        error: function()
        {
            //mudar valor da variável para false
        }
    });
}
    
asked by anonymous 28.08.2015 / 15:59

2 answers

4

As the AJAX method is asicronous, the return of the verificaExistenciaArquivo function will occur before AJAX returns.

You can even set the async: false property of $.ajax , but this is not recommended, ideally to pass a function from callback to verificaExistenciaArquivo . 

function verificaExistenciaArquivo(pasta, nomeArquivo, callback) {
    var baseUrl = 'http://' + $(location).attr('hostname') + '/monitoramento-mobile/assets/fotos/';

    if(pasta == 'assinaturas_entrevista') {
        arquivo = baseUrl + 'assinaturas_entrevista/' + nomeArquivo;
    }else if (pasta == null) {
        arquivo = baseUrl + nomeArquivo;
    }

    $.ajax({
        url: arquivo,
        type:'HEAD',
        success: function()
        {
            callback(true);
        },
        error: function()
        {
            callback(false);
        }
    });
}

verificaExistenciaArquivo("nomeDaPasta", "nomeDoArquivo", function (existe) {
    console.log(existe ? "Arquivo Existe" : "Arquivo não existe");
});

In this case it is also not interesting to have a global variable to inform the existence of the file, or you delete it as in the example above, or declare it within a closure.

A second problem is that you are downloading the entire file just to see if it exists, ideally it would abort the request as soon as the server responds with readyState: 2 (request recebido) 

var uploadFile = document.getElementById("uploadFile");
var linkURL = document.getElementById("linkURL");

var createLink = document.getElementById("createLink");
var destroyLink = document.getElementById("destroyLink");
var linkExists = document.getElementById("linkExists");

// criar um link em memoria para o arquivo selecionado.
createLink.addEventListener("click", function (event) {
  if (uploadFile.files.length > 0) {
    linkURL.value = URL.createObjectURL(uploadFile.files[0]);
  }
});

// destruir o link em memoria para o arquivo selecionado
destroyLink.addEventListener("click", function (event) {
  if (linkURL.value) {
    URL.revokeObjectURL(linkURL.value);
  }
});

// verificar se o link em memoria existe
linkExists.addEventListener("click", function (event) {
  if (linkURL.value) {
    verificaExistenciaArquivo(linkURL.value, function (exists) {
      // exists pode assumir 3 valores:
      // true: arquivo encontrado
      // false: arquivo não encontrado
      // undefined: erro na requisição
      console.log(exists);
    });
  }
});

// verificar se existe algum arquivo no link em memoria.
var verificaExistenciaArquivo = function (url, callback) {
  var done = false;
  var xmlHttp = new XMLHttpRequest ();  
  xmlHttp.onreadystatechange = function () {
    //readyState 0 a 4: 
    //0: request não enviado
    //1: conexão estabelecida
    //2: request recebido
    //3: processando request
    //4: resposta pronta     
    var response = { readyState: xmlHttp.readyState, status: xmlHttp.status };
    if (!done) {     
      switch (response.readyState)
      {
        // 0 antes do 2 - caso o request seja abortado antes da resposta do servidor (timeout).
        case 0: 
          callback(undefined); 
          break;
        //conexão com o servidor bem sucessida, e o mesmo já respondeu com um status.
        case 2:
          done = true;
          xmlHttp.abort();
          switch (response.status)
          {
            case 200: callback(true); break;
            case 404: callback(false); break;
            default: callback(undefined); break;
          }
          break;
        // 4 antes do 1 - Conexão recusada (possivelmente CORS bloqueado)
        case 4: 
          callback(undefined); 
          break;
      }
    }    
  }

  xmlHttp.open("GET", url);
  xmlHttp.send();
}
#linkURL {
    width: 500px;
}
<div>
    <input id="uploadFile" type="file" />
<div>
    <input id="createLink" type="button" value="Criar Link" />
    <input id="destroyLink" type="button" value="Destruir Link" />
</div>
<div>
    <label>
        Link Criado:
        <input id="linkURL" type="text" disabled />
    </label>
</div>
<div>
    <input id="linkExists" type="button" value="Verificar Link" />
</div>
    
28.08.2015 / 16:29
2

It was easier for you to verify the existence of the file on a server-side page. Probably PHP you are using.

PHP 

<?php
    $file = $_POST['file'];
    $caminho = 'dir/';
    if(file_exists($caminho.$file))
       $boo = "true";
    else
       $boo = "false";

    return $boo;
?>

And in JS you get the PHP page return and only deal in callback of function success .

JS 

var flagExistenciaArquivo = true;

function verificaExistenciaArquivo(pasta, nomeArquivo) {
    $.ajax({
        url: 'pagina.php',
        data: { file: nomeArquivo },
        type:'POST',
        async: false,
        success: function(result){
            if(!result)
               flagExistenciaArquivo = false;
        },
    });
    return flagExistenciaArquivo;
}
    
28.08.2015 / 16:28
Log table using MySQL Pass generic model to controller