Как исправить проблему с циклом jquery для $ ("ul.nav li"). Each (function () с Dropzone.js и Laravel - PullRequest
0 голосов
/ 06 июля 2019

Я использую Dropzone.js, AJAX и Laravel. В моем блейде настроена дропзона, и она работает нормально. Я сделал загружаемые изображения сортируемыми, и для их сохранения есть вызов ajax. Проблема в том, что я называю элементы ul li с помощью идентификатора изображения из базы данных, и это отлично работает; однако, когда я пытаюсь создать массив и выдать идентификаторы элементов, которые были восстановлены, я получаю Uncaught TypeError: Невозможно прочитать свойство 'substr' из неопределенного

Я проверил консоль и выполнил некоторые запуски console.log, но я не вижу, что здесь не так и / или почему массив не заполняется.

<div class="row">
    <div class="dropzone dz-clickable" id="myDrop">
        <div class="dz-default dz-message" data-dz-message="">
            <span>Drop files here to upload</span>
        </div>
    </div>
    <input type="button" id="add_file" value="Add" class="btn btn-primary mt-3">
</div>
<hr class="my-5">
<div class="row">
    <a href="javascript:void(0);" class="btn btn-outline-primary reorder" id="updateReorder">Reorder Imgaes</a>
    <div id="reorder-msg" class="alert alert-warning mt-3" style="display:none;">
        <i class="fa fa-3x fa-exclamation-triangle float-right"></i> 1. Drag photos to reorder.<br>2. Click 'Save Reordering' when finished.
    </div>
    <div class="gallery">
        <ul class="nav nav-pills">
            @if($ad->media_img->count() > 0)
                @foreach($ad->media_img as $img)
                <div class="creating-ads-img-wrap">
            <li id="image_li_{{ $img->id }}" class="ui-sortable-handle mr-2 mt-2">
                <div><a href="javascript:void(0);" class="img-link"><img src="{{ media_url($img, false) }}"  alt="" class="img-thumbnail" width="200"></a>
                    <div class="img-action-wrap" id="{{ $img->id }}">
                        <a href="javascript:;" class="imgDeleteBtn"><i class="fa fa-trash-o"></i> </a>
                        <a href="javascript:;" class="imgFeatureBtn"><i class="fa fa-star{{ $img->is_feature ==1 ? '':'-o' }}"></i> </a>
                    </div>
                </div>
            </li>
                </div>
                @endforeach
            @endif
        </ul>
    </div>
</div>

$('.reorder').on('click',function(){
        $("ul.nav").sortable({ tolerance: 'pointer' });
        $('.reorder').html('Save Reordering');
        $('.reorder').attr("id","updateReorder");
        $('#reorder-msg').slideDown('');
        $('.img-link').attr("href","javascript:;");
        $('.img-link').css("cursor","move");
        $("#updateReorder").click(function( e ){
            if(!$("#updateReorder i").length){
                $(this).html('').prepend('<i class="fa fa-spin fa-spinner"></i>');
                $("ul.nav").sortable('destroy');
                $("#reorder-msg").html( "Reordering Photos - This could take a moment. Please don't navigate away from this page." ).removeClass('light_box').addClass('notice notice_error');

                var h = [];
                $("ul.nav li").each(function() {  h.push($(this).attr('id').substr(9));  });

                $.ajax({
                    type: "POST",
                    url: "(app_path().'/includes/update.php')",
                    data: {ids: " " + h + ""},
                    success: function(data){
                        if(data==1 || parseInt(data)==1){
                            //window.location.reload();
                        }
                    }
                }); 
                return false;
            }       enter code here
            e.preventDefault();     
        });
    });

Просто пытаюсь заполнить массив h идентификаторами изображений. Не уверен, почему это не так.

...