Javascript и Ajax Calls

У меня есть пара вопросов по загрузке javascript после вызова ajax.Javascript и Ajax Calls

Так что я использую рубины на рельсах, и у меня разные страницы, загруженные через ajax-вызовы (я делаю это, потому что у меня есть аудиоплеер, который я хочу продолжать играть с перезагрузкой страниц).

Проблема в том, что при смене страниц с помощью ajax javascript не перезагружает (или работает) на новой странице.

Например, у меня есть сетка, которая устанавливает высоту изображения сетки в зависимости от ширины с помощью javascript. Сценарий не работает, если я не перезагрузите страницу, или я поместил скрипт в тег скрипта в нижней части html-файла.

Есть ли способ перезагрузить javascript? Я пробовал location.reload(), но это просто обновляет страницу и поражает всю цель. Спасибо!

Вот пример:

show.js.erb

$('#results').html("<%= escape_javascript(render partial: 'songs/showcard', locals: { song: @song }) %>");

songs_controller

def show 
    respond_to do |format| 
     format.js 
     format.html 
    end 
    end

ссылка показать страницу

<%= link_to song, remote: true do %><%= song.title %><% end %>

Вот функция I cardSize Загрузка в файле под названием cardSize.js

$(document).ready(function cardSize() { 
    var cardWidth = $('.card-image').width(); 
    $('.card-image').css({ 
    'height': cardWidth + 'px' 
    }); 
});

источник

2016-03-20 Matt Thomas

В UJS файл show.js.erb необходимо вызвать глобальные функции, которые контролируют вид/сетки.

Например, если глобальный метод для контроля высоты и т.д. является implement_grid(), то файл должен выглядеть следующим образом:

$('#results').html("<%= escape_javascript(render partial: 'songs/showcard', locals: { song: @song }) %>"); 
implement_grid();

Элементы, добавленные в DOM динамически не обязательно запускать какие-либо действия, если не указано их. Вы можете посмотреть на привязку прослушивателей к html-модификации в div/table (grid), которые затем будут вызывать изменения высоты, которые вы ищете, если вы предпочитаете сохранить этот код из файлов UJS.

Кроме того, что $('#results') может быть значительно сокращен:

$('#results').html("<%= j render 'songs/showcard', song: @song %>");

источник

2016-03-20 00:53:33

Awesome d_ethier. Я должен был подумать об этом. Спасибо, что указали это! И спасибо за укороченный код. Теперь мои файлы выглядят намного чище! –

Проблема вы испытываете, кажется, связаны с turbolinks. Turbolinks обновит/изменяет содержимое в тегах <body> вашего документа, а не сценарии и таблицы стилей в тегах <head> вашего документа, в котором Rails загружает все ваши собственные написанные javascript.

Так почему это работает, когда вы вставляете javascript в тег <script> в нижней части файла? Потому что, когда вы это делаете, тег <script>теперь в тегах <body> вашего документа. Поэтому, когда вы меняете страницы, сценарий загружается и загружается в соответствующие элементы DOM на странице.

Так как же оно работает, только когда вы полностью перезагружаете страницу? Потому что у вас есть ваш jquery, завернутый в $(document).ready(...).Когда вы вручную обновляете всю страницу, turbolinks также полностью обновляется и перезагружается обратно в DOM, поэтому, когда вы находитесь на , что определенная страница, ваш обработчик $(document).ready(...) будет правильно связываться. Но когда вы меняете страницы и изменения контента, документ по-прежнему технически готов и не привязывается к этой новой странице, поэтому он не будет выполнять код сам по себе. Зачем? Из-за того, что работает turbolinks, вся страница не перезагружается технически, а только содержимое в тегах <body>, которое для кода в вашем вызове $(document).ready(...) выглядит как динамически сгенерированный контент, с которым он не может привязываться.

Так в чем же проблема?

Это может или не может потребовать использования jquery turbolinks gem. Это позволит вам сохранять turbolinks и каждый раз, когда вы меняете страницы, звоните $(document).ready(...).

источник

2016-03-20 04:17:25

Javascript и Ajax Calls

ответ

Смежные вопросы