使用ajax刷新div,我的div没有刷新

时间:2017-09-18 03:28:27

标签: javascript jquery ajax partial-page-refresh

使用ajax删除一些数据后,我想刷新我的div。我正在使用Laravel 5.4。我是laravel的初学者。请帮帮我。

这是我刷新div的代码:

var url = window.location.href;
function RefreshDiv() {
    $(".uploaded-images").fadeOut();
    $(".uploaded-images").load(url+" .uploaded-images", function() {
      $(".uploaded-images").fadeIn();
    });
}

当我执行RefreshDiv函数时,它只会使我的div空,但当我按f5刷新我的页面时,它成功删除了我的数据。我唯一的问题是我的RefreshDiv,我不想刷新我的div,但它给了我空的div。

这是我执行得很好的删除功能:

function deleteImage(product_img_id) {
  $.ajax({
    url: "{{ url('admin/del-img') }}/" +product_img_id,
    type: "GET",
    dataType: "JSON",
    success: function(data) {
      RefreshDiv();
    }
  });
}

这是我要刷新的div:

<div class="row" style="margin-top: 20px;">
          <h5>Uploaded Images</h5>
          <div class="uploaded-images">
          </div>
</div>

在我上传的图像div中,是来自我的其他ajax的委托函数。

这是我的委托功能:

function getProductDetails(product_id) {
    $( ".uploaded-images" ).empty();
    $.ajax({         
        url: "{{ url('admin/get-product') }}/" +product_id,        
        type: "GET",
        dataType: "JSON",
        success: function(data) {
for(var i=1;i<data.product_images.length;i++) {
                 $(".uploaded-images").append('<div class="img-wrap">'+'<span class="close">&times;</span>'+'<img src="'+"{{ asset('image_files') }}/"+data.product_images[i].product_image+'" data-id="'+data.product_images[i].product_img_id+'" style="max-height:50px; max-width:90px;">'+'</div>');
            };   
        }
    }); 
}

2 个答案:

答案 0 :(得分:1)

为什么要刷新div ...如果要移除图像,为什么不从DOM中删除成功元素?

试试这个:

function RefreshDiv(product_img_id) {
   $("img[data-id="+product_img_id+"]").closest('.img-wrap').remove();
}

答案 1 :(得分:-1)

试试这个:

function deleteImage(product_img_id) {
  $.ajax({
   url: "{{ url('admin/del-img') }}/" +product_img_id,
   type: "GET",
   dataType: "JSON",
   success: function(data) {
    RefreshDiv(product_img_id);
   }
 });
}

var url = window.location.href;
function RefreshDiv(product_img_id) {
   $(".uploaded-images img[data-id="+product_img_id+"]").parent().remove();
   $(".uploaded-images").load(url+" .uploaded-images", function() {
   $(".uploaded-images").fadeIn();
 });
}
相关问题