Skip to main content
8 de 8
Commonmark migration

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);
});
Sergio
  • 135,1mil
  • 16
  • 201
  • 294