Объединение функции в существующем коде

Question

Объединение функции в существующем коде

0

Я делаю "webapp", где вы можете нажимать на разных исполнителей, и он создает страницу исполнителя. Я показываю изображение, био,.. Я получаю всю эту информацию с радио api. Теперь я также могу получить "facebook_url", который содержит URL-адрес facebook, поэтому мне захотелось отобразить все обложки альбомов со своей страницы на facebook. Здесь я застрял.

У меня есть этот рабочий код: (# albums - базовый div)

    function doFacebookRequest(){
    $.ajax({
        url: oSingle.artist.facebook_url+"/albums",     
        dataType: "jsonp",
        success: function(json){
            console.log(json);
            $("#albums").empty();
            for(index in json.data) {
                var album = json.data[index];
                var img = $("<img/>")
                    .attr("src", "http://graph.facebook.com/" + album.id + "/picture");
                var a = $("<a/>")
                    .attr("href", album.link)
                    .append(img)
                    .appendTo("#albums");
            }   
        }
    });
}

Теперь я хочу поместить его в тег div, который я добавляю к своему основному содержимому (например: :)

                    $("<div/>")
                    .html(doFacebookRequest)
                    .appendTo(contentdiv);

Вышеприведенное, очевидно, неверно, но я не знаю, как правильно сделать функцию в добавляемом фрагменте кода.

Мне нужно сделать это, потому что весь мой код находится в этом добавочном формате, например:

                    $("<img/>")
                    .addClass("artistimg")
                    .attr("src", "http://images.q-music.be/" + oSingle.artist.photo)
                    .appendTo(contentdiv);

                $("<h1/>")
                    .text(oSingle.artist.name)
                    .appendTo(contentdiv);

и т.д..

user3151454 02 янв. 2014, в 14:17

Источник

0

HTML, который вы добавляете в div - это то, что возвращается в этом запросе, да?
PlantTheIdea 02 янв. 2014, в 13:06

Теги:

jquery

facebook

api

1 ответ

Ещё вопросы

HTML, который вы добавляете в div - это то, что возвращается в этом запросе, да?

David Banister · Answer 1 · 2014-01-02T11-14-00.000Z

Функция jQuery html может принимать функцию, как у вас в вашем вопросе, но будет устанавливать html на то, что возвращается функцией. В вашем примере функция ничего не возвращает, поэтому в вашем DIV ничего не будет установлено.

Кроме того, вызов AJAX является асинхронным, поэтому ваш текущий шаблон не будет работать эффективно, потому что ему придется блокировать выполнение и ждать ответа Facebook. Это, как правило, плохая идея, что ваш рисунок усиливается. Что-то, использующее методы обратного вызова, будет намного более эффективным для этого.

Тем не менее, вы сможете получить то, что хотите, заставив запрос AJAX быть синхронным и вернув HTML. Чтобы сделать это, установите async в false в вызове ajax. Это заставит запрос выполнить синхронно. Затем создайте произвольный DIV перед вызовом функции ajax. Добавьте содержимое к произвольному DIV. После завершения вызова функции ajax верните содержимое HTML произвольного DIV.

Что-то вроде следующего должно дать вам то, что вы хотите:

function doFacebookRequest(){
    var content = $('<div/>');
    $.ajax({
        url: oSingle.artist.facebook_url+"/albums",
        dataType: "jsonp",
        async: false,
        success: function(json){
            console.log(json);
            for(index in json.data) {
                var album = json.data[index];
                var img = $("<img/>")
                    .attr("src", "http://graph.facebook.com/" + album.id + "/picture");
                var a = $("<a/>")
                    .attr("href", album.link)
                    .append(img);
                content.append(a);
            }   
        }
    });
    return content.html();
}