I have a form to fill out fields and select files

<form method="post" id="addNewAdvert" action="/advert/editAdvert/<?=$AdvertData['id']?>" enctype="multipart/form-data"> <label for="title"><?=$text_title?></label> <input type="text" id="title" value="<?=$AdvertData['title']?>" name="title" /> <label for="keywords"><?=$text_keywords?></label> <input type="text" id="keywords" value="<?=$AdvertData['keywords']?>" name="keywords" /> <input type="hidden" name="category_id" id="categoryIdInput" value="<?=$id?>" /> <input type="hidden" name="adv_id" id="advertIdInput" value="<?=$AdvertData['id']?>" /> <div class="clearfix"></div> <label for="description"><?=$text_description?></label> <input type="text" value="<?=$AdvertData['description']?>" id="description" name="description" /> <div class="col-sm-12" style="margin: 10px 0px;"> <label for="images"><?=$text_images_advert?></label> <input type="file" name="images_advert[]" id="images" multiple="true" /> </div> <?php if(!empty($AdvertData['imgs'])): ?> <div class="col-sm-12 "> <section class="awSlider"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <?php foreach ($AdvertData['imgs'] as $k => $v): ?> <div class="item <?=($k == 0)?'active':''?>" id="<?=$v['name_img_file']?>"> <a href="/advert/deleteimg/<?=$AdvertData['id']?>/<?=$v['name_img_file']?>/<?=$AdvertData['seo']?>" data="<?=$v['name_img_file']?>" class="btnDeleteImg" title="<?=$text_delete?>"><i class="fa fa-trash-o"></i></a> <img src="http://napt.it/<?=$v['src']?>" alt="<?=$AdvertData['seo']?>" class="image img-responsive" title="<?=$AdvertData['title']?>" /> </div> <?php endforeach ?> </div> <a class="left carousel-control" href=".carousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> </a> <a class="right carousel-control" href=".carousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> </a> </div> </section> </div> <?php endif ?> <button type="submit" id="addPost" name="editPost"><?=$text_save?></button> <p class="addedSuccess"></p> <div id="loader"></div> </form>

This is part of the code from the ad editing page, so I’m unable to do the insertion of php to download and delete images via ajax and then click on the save button:

 $(function() { $('button#addPost').bind('click', function (e) { e.preventDefault(); $('#fullTextAdvert').html($('#fullTextAdvert_ifr').contents().find("body#tinymce").html()); var id_adv = $('#advertIdInput').val(); $.ajax({ url: $('form#addNewAdvert').attr('action'), type:'post', contentType: false, processData: false, data: new FormData($('#addNewAdvert').get(0)), dataType: 'json', cache: false, beforeSend: function () { $('#loader').css('display', 'block'); $('#loader').html("<i class='fa fa-spinner fa-spin fa-3x fa-fw'></i>"); }, success: function (result) { $('.errorList li').remove(); $('#loader').css('display', 'none'); if(result.errors.length > 0) { $.map(result.errors, function(item) { $('.errorList').append('<li>' + item + '</li>'); }); } else { $('.addedSuccess').css('display','block'); $('.addedSuccess').html(result.success); if($('.item').length == 0) { loadImages(id_adv); } } } }); }); });

here by this passage

 if($('.item').length == 0) { loadImages(id_adv); }

I check if there are no images in the carousel, then I send another ajax to take the downloaded images from the database and bring them to this carousel

 function loadImages (id_adv) { $.ajax({ url:'index.php?route=ajax/GetImgsList', type: 'post', data: {id: id_adv}, dataType:'json', success: function(data) { var active = ''; $('section.awSlider').css('display','block'); $.each(data, function(k, v) { if (k == 0) active = 'active'; $('.carousel-inner').append('<div class="item '+ active + '" id=' + v['name_img_file'] + '><a href="/advert/deleteimg/' + id_adv + '/' + v['name_img_file'] + '/<?=$AdvertData["seo"]?>" data = "' + v['name_img_file'] + '" class="btnDeleteImg" title="<?=$text_delete?>"><i class="fa fa-trash-o"></i></a><img src="http://napt.it/' + v['src'] + '" alt="<?=$AdvertData["seo"]?>" class="image img-responsive" title="<?=$AdvertData["title"]?>" /></div>') }); } }); }

the problem is that when I load 2 images they don’t appear in the block but are in the database and after updating they appear when I load 1 image it appears but when I click on the delete button, the deletion with page reload works, how to properly implement the appearance of images on page without reloading after clicking the save button

    0