Задать вопрос
@digna
Программист
javascript

Html и javascript получение ответа до загрузки страницы?

Здрасте! Ситуация. Я делаю подгрузку лайков для поста через AJAX методом POST. Есть на странице спан
<div class="pull-right"><i class="fa fa-heart" id="like" onclick="addlike(@Html.Raw(item.ID))"></i> <span id="like_@Html.Raw(item.ID)" onload="getlike(@Html.Raw(item.ID))"></span></div>

Как видите он при onload вызывает функцию getlike(2) например, да? Так вот, скрипты у меня находятся в подвале страницы, дабы повысить скорость загрузки контента на странице. В этом то и косяк, при загрузке спана мои скрипты еще даже не создались и получается что спан вызывает не готовый еще getlike(2).
В подвале страницы находится следующее api:
<script>
    document.addEventListener('DOMContentLoaded', function () {
        function getlike(id) {
            var like = $('#like_' + id);
            var count = 0;
            $.ajax({
                type: 'POST',
                url: '/api/values/Getlike/' + id,
                success: function (data) {
                    $('#like_' + id).text(data);
                    console.log('id: ' + id + 'data: ' + data);
                }
            });
        }
    });
</script>

И если запихнуть скрипты в шапку сайта, то все сработает на ура, но мне так не нужно потому что упадет скорость загрузки контента и вообще хранить скрипты в шапке сайта это тупо, темболее такие огромные как jQuery в моем случае. Подскажите как можно решить эту проблему?
  • Вопрос задан
  • 1068 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
AlexanderYudakov
@AlexanderYudakov
C#, 1С, Android, TypeScript
Я бы убрал "onload", а в скрипте внизу вместо:
document.addEventListener('DOMContentLoaded', function () {
    function getlike(id) {
        var like = $('#like_' + id);
        // ...
    }
});

вставил что-то типа:
$('span[id^="like_"]').each(function(index, like) {
    var id = like.id;
    // ...
});


P.S. А по-хорошему, это все надо получать с сервера одним запросом.
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 1
bubandos
@bubandos
bash'у, javascript'ую, php'лю, css'аю, html'каю
У вас в любом случае не будут показываться лайки, пока вы не загрузите jquery.
Поэтому, на момент выдачи html в браузер, у вас уже должны быть в вашем span данные с количеством лайков.
Как вариант, можете попробовать написать небольшой скрипт отправки и получения запроса без jquery на чистом javascript (https://learn.javascript.ru/ajax-xmlhttprequest в помощь) и загрузить его вверху страницы.
Кроме того, зачем вам в атрибутах вешать обработчики событий?
Повесьте лучше обработчики с помощью конструкции $('#myid').on('click', listener).

В текущей реализации, должно было бы быть как-то так:
$(document).ready(function() {
/** начнёт работу тогда, когда будет готов DOM, за исключением картинок **/
var id = item.ID, // уж не знаю откуда вы берете этот item.ID
$.ajax({
type: 'POST',
url: '/api/values/Getlike/' + id,
success: function (data) {
$('#like_' + id).text(data);
console.log('id: ' + id + 'data: ' + data);
}
});
});
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сканер коэффициентов в букмекерских конторах
20 апр. 2024, в 08:39
100000 руб./за проект
Доработать бота
20 апр. 2024, в 08:24
1500 руб./за проект
Разработать интранет сайт (корпоративный портал)
20 апр. 2024, в 07:24
100000 руб./за проект
Ещё заказы