6

Não estou conseguindo chamar a minha variável pt1 fora do function(data) e dentro da function getImageItem.
Sendo que a function(data) está dentro da function getImageItem.

function getImageItem() {
    var item = "";
    jQuery.ajax({

        url: "pegaPortifolio.php/?id=1", //?id="+idUltimo,
        dataType: "json", //Tipo de Retorno
        success: function(data) {
            var pt1 = "";
            var i = 1;
            var ultimo_id = 0;
            var size = 0,
                key;
            for (key in data) {
                if (data.hasOwnProperty(key)) size++; //cod para contar o tamanho do array multidimensional

            } //size , variavel com o tamamho do array

            for (i = 0; i < size; i++) { //monta o html para exibir os dados
                pt1 += '<div class="element-item ' + data[i].menu + '" data-category="transition"><div style="padding:2.5px;"><div style="border: 1px solid #AAAAAA;"><a href="#portfolioModal54" class="portfolio-link" data-toggle="modal"><img src="' + data[i].imageM + '" alt="project 2"><div class="fundo-port"><h1>"' + data[i].tipo + '"</h1><h2>"' + data[i].nome + '"</h2></div></a></div></div></div>';
            }
        }
    });
    //alert(pt1);
    item = pt1; //NÂO PEGA A VARIAVEL
    return item;
}

Parte que quero que a variável seja chamada é na item = pt1; //NÂO PEGA A VARIAVEL.

3
  • 1
    Declare a variável no escopo do método getImageItem
    – Vinícius
    Commented 7/01/2016 às 16:17
  • 1
    javascript.. Vou tentar vinicius
    – kaiquemix
    Commented 7/01/2016 às 16:22
  • 1
    @Vinícius não da certo, ae o pt1 fica como não existente na function(data)
    – kaiquemix
    Commented 7/01/2016 às 16:23

2 Respostas 2

14

Tens dois problemas aqui:

#1: estás a definir a variável dentro de uma função, e por isso ela não é acessível no escopo fora dessa função.

#2: o ajax é assíncrono e return item vai ser corrido (e a função encerrada) antes de o ajax retornar o seu valor.

Acerca de #1:

Repara neste exemplo com o teu problema:

function bar() {
  var foo = 10;
}
bar();
console.log(foo); // dá erro porque "foo" não existe nesse escopo

Como podes resolver:

var foo;

function bar() {
  foo = 10;
}
console.log(foo); // undefined
bar();
console.log(foo); // 10

Acerca de #2:

O segundo problema é que o ajax é assincrono. Isso quer dizer que o código depois deste pedaço jQuery.ajax() é corrido ante do código que está defenido dentro da callback, que só vai correr quando houver resposta do servidor. (exemplo de outra pergunta com o mesmo problema)

No caso do segundo problema tens de colocar o código que precisa dos dados do ajax, dentro dessa callback, ou chamar uma outra função de dentro do callback, passado a variável nos argumentos.

Então como resolvo?

Sugestão:

function getImageItem(callback) {
    var item = "";
    jQuery.ajax({
        url: "pegaPortifolio.php/?id=1", //?id="+idUltimo,
        dataType: "json", //Tipo de Retorno
        success: function(data) {
            var pt1 = '';
            var ultimo_id = 0,
                size = 0,
                key;
            for (key in data) {
                if (data.hasOwnProperty(key)) size++; //cod para contar o tamanho do array multidimensional
            } //size , variavel com o tamamho do array
            for (var i = 0; i < size; i++) { //monta o html para exibir os dados
                pt1 += '<div class="element-item ' + data[i].menu + '" data-category="transition"><div style="padding:2.5px;"><div style="border: 1px solid #AAAAAA;"><a href="#portfolioModal54" class="portfolio-link" data-toggle="modal"><img src="' + data[i].imageM + '" alt="project 2"><div class="fundo-port"><h1>"' + data[i].tipo + '"</h1><h2>"' + data[i].nome + '"</h2></div></a></div></div></div>';
            }
            callback(pt1); // <- aqui envias de volta para a callback da chamada da função
        }
    });
}

E desse modo podes chamar assim:

getImageItem(function(dados){
    alert(dados);
});
1
  • 1
    excelente resposta.
    – Dorath
    Commented 19/01/2017 às 11:50
1

O que acontece, @kaiquemix, é que a execução do ajax por padrão é assincrona, ou seja, ele vai executar o alert(pt1) antes da requisição ajax terminar.

Uma possível solução seria:

function getImageItem() {
    var item = "";
    jQuery.ajax({

        url: "pegaPortifolio.php/?id=1", //?id="+idUltimo,
        dataType: "json", //Tipo de Retorno
        async : false,
        success: function(data) {

            var i = 1;
            var ultimo_id = 0;
            var size = 0,
                key;
            for (key in data) {
                if (data.hasOwnProperty(key)) size++; //cod para contar o tamanho do array multidimensional

            } //size , variavel com o tamamho do array

            for (i = 0; i < size; i++) { //monta o html para exibir os dados
                item += '<div class="element-item ' + data[i].menu + '" data-category="transition"><div style="padding:2.5px;"><div style="border: 1px solid #AAAAAA;"><a href="#portfolioModal54" class="portfolio-link" data-toggle="modal"><img src="' + data[i].imageM + '" alt="project 2"><div class="fundo-port"><h1>"' + data[i].tipo + '"</h1><h2>"' + data[i].nome + '"</h2></div></a></div></div></div>';
            }
        }
    });

    return item;
}

Note que a variável item continua sendo criada antes da execução ajax, porém, dentro da function success, ao invés de atribuir valor à variável pt1, atribuo diretamente à variável item.

Também foi incluído o parâmetro 'async:false', tornando essa requisição ajax sincrona, ou seja, todo o código que está após a requisição ajax só será executado após o término da requisição.

2
  • 1
    async : false, é uma péssima ideia. Não dou -1 porque algures no tempo o jQuery criou essa opção mas as versões modernas do jQuery já não têm isso.
    – Sergio
    Commented 7/01/2016 às 16:45
  • Olá thiago... bom isso deu certo na parte de copiar, porem ele quebra o plugim do isotope para trocar com os menus e só repeti o ulimo bloco do banco de dados mas quero que apareça os outros que não estão aparecendo sem aperta carrega mais.
    – kaiquemix
    Commented 7/01/2016 às 17:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .