Возврат HTML от вызова .ajax
Я становлюсь неопределенным по некоторым причинам, когда я пытаюсь возвратить HTML через функцию обратного вызова:
function getDataFromUrl(urlWithContent)
{
// jQuery async request
$.ajax(
{
url: urlWithContent,
dataType: "html",
success: function(data) {
return $('.result').html(data);
},
error: function(e)
{
alert('Error: ' + e);
}
});
}
Я знаю, что возвращаю данные, я вижу его в поджигателе в ответе и также когда я предупреждаю данные, я вижу, что все содержание страницы подходит в окне предупреждений.
Когда я вызываю свою функцию, я делаю следующее:
var divContent = getDataFromUrl(dialogDiv.attr("href"));
if(divContent)
dialogDiv.innerHTML = divContent;
когда я предупреждаю divContent (перед, если оператор), что я становлюсь неопределенным. Возможно, я просто иду об этой несправедливости о том, как я возвращаю назад данные?
Я также попробовал просто данные возврата; то же самое, я становлюсь неопределенным после вызова к этому методу, когда установлено на мою переменную.
Обновленный на ответы:
Попробованный это, все еще становясь неопределенным:
function getDataFromUrl(urlWithContent, divToUpdate)
{
$.ajax(
{
url: urlWithContent,
aSync: false,
dataType: "html",
success: function(data) {
divToUpdate.innerHTML = data;
},
error: function(e)
{
alert('Error: ' + e);
}
});
}
Я назвал его из другой функции как это:
var divContent = "";
if (dialogDiv.attr("href"))
{
getDataFromUrl(dialogDiv.attr("href"), divContent);
}
3 ответа
Вы не можете вернуть данные из обратного вызова - потому что нет гарантии, что данные будут возвращены из функции в момент выхода из нее (поскольку это асинхронный вызов. )
Что вам нужно сделать, так это обновить содержимое внутри обратного вызова, например:
success: function(data) {
$('#dialogDiv').html(data);
},
где ваш диалог DIV имеет id="dialogDiv", прикрепленный к нему.
Я думаю, вы также можете модифицировать вашу функцию, чтобы она принимала объект для обновления после завершения вызова, например, так:
function getDataFromUrl(urlWithContent, divToUpdate)
{
// jQuery async request
$.ajax(
{
url: urlWithContent,
dataType: "html",
success: function(data) {
divToUpdate.innerHTML = data;
},
error: function(e)
{
alert('Error: ' + e);
}
});
}
Затем вызовите ее следующим образом (где dialogDiv - объект, представляющий DIV для обновления, как в вашем примере)
getDataFromUrl(dialogDiv.attr("href"), dialogDiv);
Почему бы вам не попробовать следующее:
function getDataFromUrl(urlWithContent)
{
// jQuery async request
$.ajax(
{
url: urlWithContent,
dataType: "html",
success: function(data) {
$('#dialogDiv').html(data);
},
error: function(e)
{
alert('Error: ' + e);
}
});
}
И просто вызовите функцию, а не присваивайте ее какой-либо переменной.
HTH
Вызов ajax выполняется асинхронно. Поэтому ваша функция возвращается (выходя из конца блока) до завершения вызова ajax. У вас есть два способа справиться с этим. Добавить опцию aSync: false, чтобы заставить вызов ajax работать синхронно, или использовать обратный вызов вашей функции, который может быть выполнен, когда вызов ajax завершится. Я бы предпочел последнее.
function setDataFromUrl(urlWithContent,callback)
{
// jQuery async request
$.ajax(
{
url: urlWithContent,
dataType: "html",
success: function(data) {
callback(data);
},
error: function(e)
{
alert('Error: ' + e);
}
});
}
setDataFromUrl(dialogAnchor.attr("href"), function(data) {
dialogDiv.html(data);
});
или даже лучше, если вы не собираетесь распространять этот код во многих местах:
var dialogDiv = $('div.dialog');
var dialogAnchor = dialogDiv.find('a');
// jQuery async request
$.ajax(
{
url: dialogAnchor.attr('href'),
dataType: "html",
success: function(data) {
dialogDiv.html(data);
},
error: function(e)
{
alert('Error: ' + e);
}
});