Я использую 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 идентификаторами изображений. Не уверен, почему это не так.