Блог

Главная - Вопросы по программированию - jQuery-Загрузка файлов rails ajax

jQuery-Загрузка файлов rails ajax

#jquery #ruby-on-rails #ajax #file-upload #turbolinks

#jquery #ruby-on-rails #ajax #загрузка файлов #turbolinks

Вопрос:

Я использую Turbolinks в своем проекте rails. Когда я нажал кнопку загрузки (вызов ajax), произошел сбой, и в разделе ошибок отображается неперехваченный TypeError: не удается прочитать свойство ‘length’ значения undefined. Та же проблема возникает с обычной ссылкой (без ajax), которая, я думаю, вызвана turbolinks, потому что turbolinks использует ajax в фоновом режиме.

javascript моей страницы загрузки:

 <html>
..... html code ...

<%= javascript_include_tag 'js/vendor/jquery.ui.widget.js' %>
<%= javascript_include_tag "js/jquery.iframe-transport" %>
<%= javascript_include_tag "js/jquery.fileupload.js" %>

<script>
$(function () {
    'use strict';
    var filestoupload = 0;
    $('#fileupload').fileupload({
        dataType: 'json',
         add: function(e, data) {
                if(data.files[0]['size'] > 20000000) {
                   $('#errors_append').html('maximum size for file allowed is 20 mb');
                } else {
                    data.submit();
                }
        },
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                filestoupload  ;
                $('').text(file.name   ' '   'uploaded successfully').appendTo('#files_append');

                if (filestoupload > 2) {
                  $('#file_button').attr("disabled","disabled");
                }
            });
            $("#btn_text").html('Add more files');
        },
        start: function (e, data) {
            $('#progress .progress-bar').css(
                'width',
                0   '%'
                );   
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress   '%'
                );
        },
        success: function(xhr){
          $('#progress .progress-bar').attr('class', 'progress-bar progress-bar-success');
          $('#errors_append').empty();      
      },
      error: function(xhr){
          var errors = $.parseJSON(xhr.responseText).error
          $('#errors_append').html(errors);
          $('#progress .progress-bar').attr('class', 'progress-bar progress-bar-danger');        
      }
  }).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>

Комментарии:

1. где находится ваш js/jquery.fileupload.js файл в вашем каталоге? и почему вы используете js в вашем представлении?

2. в / app /assets/javascripts /js /jquery. fileupload.js

3. можете ли вы опубликовать точную ошибку, которую вы получаете в своей консоли разработчика

4. Я добавил скриншоты, но у меня недостаточно репутации: ( ,

5. Нет, но когда я удаляю turbolinks, это работает нормально, или когда я включил js в application.js (требуется) он также отлично работает даже с turbolinks. Но в настоящее время я точно не знаю, почему.

Ответ №1:

Мы jquery-file-upload работаем с ajax здесь (зарегистрируйтесь в учетной записи, затем попробуйте обновить фотографию своего профиля). Модель — Вероника Креспо:

введите описание изображения здесь

—

Turbolinks

Основная проблема с Turbolinks заключается в том, что это не позволит вашему JS на странице загружать требуемые элементы DOM.

Поскольку Turbolinks просто обновляет <body> элемент вашей страницы (не <head> ), JS по-прежнему считает, что он находится в «старом» состоянии, не позволяя ему использовать какие-либо из вновь загруженных элементов.

Это исправлено либо delegating вашим JS из постоянного элемента (обычно document ), либо с помощью Turbolinks event хуков для исправления:

 var load = function() {
   ...
};

$(document).on("page:load ready", load);

—

Исправить

Что касается работы с Turbolinks, вот код, который мы использовали для функциональности аватара в одном из наших демонстрационных приложений:

 #app/assets/javascripts/application.js
$('#avatar').fileupload({

    url: '/profile/'   $(this).attr('data_id'),
    dataType: 'json',
    type: 'post',

    add: function (e, data) {
        //$(".items .avatar .avatar").prepend('<div class="loading" id="avatar_loading"><img src="<%= asset_path("profile/avatar_loading.gif") %>"></div>');
        //$('#avatar_loading').fadeIn('100');
        $(this).avatar_loading('avatar_loading');
        data.submit();
    },
    success: function (data, status) {;
        $("#avatar_img").fadeOut('fast', function() {
            $(this).attr("src", data.avatar_url).fadeIn('fast', function(){
                $(this).avatar_loading('avatar_loading');
            });
        });
    }

});

Это соответствует jquery-fileupload драгоценному камню:

 #Gemfile
gem "jquery-fileupload-rails", "~> 0.4.1"

#app/assets/javascripts/application.js
//= require jquery-fileupload/basic