Làm mới/tải lại nội dung trong Div bằng cách sử dụng jquery/ajax

Question

Tôi muốn tải lại một div khi nhấp vào nút. Tôi không muốn tải lại trang đầy đủ.

Đây là mã của tôi:

HTML:

<div role="button" class="marginTop50 marginBottom"> 
    <input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" /> 
    <input type="button" id="confirmNext" value="Confirm & Proceed" class="disabled marginLeft50" /> 
</div> 

On click <input type="button" id="getCameraSerialNumbers" value="Capture Again"> Nút một <div id="list">....</div> nên tải lại mà không cần tải hoặc làm mới trang đầy đủ.

Dưới đây là Jquery mà tôi đã cố gắng, nhưng không làm việc: -

$("#getCameraSerialNumbers").click(function() { 
    $("#step1Content").load(); 
}); 

Xin gợi ý.

Đây là DIV trên trang của tôi, có chứa Hình ảnh và số sê-ri của một số sản phẩm ... Sẽ đến từ cơ sở dữ liệu lần đầu tiên trên Tải trang. Nhưng là người dùng phải đối mặt với một số vấn đề anh ta sẽ bấm vào nút "Capture Again" "<input type="button" id="getCameraSerialNumbers" value="Capture Again">" sẽ tải lại những thông tin đó.

HTML Mã của Div: -

<div id="step1Content" role="Step1ShowCameraCaptures" class="marginLeft"> 

<form> 
    <h1>Camera Configuration</h1> 
    <!-- Step 1.1 - Image Captures Confirmation--> 
    <div id="list"> 
     <div> 
      <p> 
       <a id="pickheadImageLightBox" data-lightbox="image-1" title="" href=""> 
        <img alt="" id="pickheadImage" src="" width="250" height="200" /> 
       </a> 
      </p> 
      <p> 
       <strong>Pickhead Camera Serial No:</strong><br /> 
       <span id="pickheadImageDetails"></span> 
      </p> 
     </div> 
     <div> 
      <p> 
       <a id="processingStationSideImageLightBox" data-lightbox="image-1" title="" href=""> 
        <img alt="" id="processingStationSideImage" src="" width="250" height="200" /> 
       </a> 
      </p> 
      <p> 
       <strong>Processing Station Top Camera Serial No:</strong><br /> 
       <span id="processingStationSideImageDetails"></span> 
      </p> 
     </div> 
     <div> 
      <p> 
       <a id="processingStationTopImageLightBox" data-lightbox="image-1" title="" href=""> 
        <img alt="" id="processingStationTopImage" src="" width="250" height="200" /> 
       </a> 
      </p> 
      <p> 
       <strong>Processing Station Side Camera Serial No:</strong><br /> 
       <span id="processingStationTopImageDetails"></span> 
      </p> 
     </div> 
     <div> 
      <p> 
       <a id="cardScanImageLightBox" data-lightbox="image-1" title="" href=""> 
        <img alt="" id="cardScanImage" src="" width="250" height="200" /> 
       </a> 
      </p> 
      <p> 
       <strong>Card Scan Camera Serial No:</strong><br /> 
       <span id="cardScanImageDetails"></span> 
      </p> 

     </div> 
    </div> 
    <div class="clearall"></div> 

    <div class="marginTop50"> 
     <p><input type="radio" name="radio1" id="optionYes" />Yes, the infomation captured is correct.</p> 
     <p><input type="radio" name="radio1" id="optionNo" />No, Please capture again.</p> 
    </div> 
    <div role="button" class="marginTop50 marginBottom"> 
     <input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" /> 
     <input type="button" id="confirmNext" value="Confirm & Proceed" class="disabled marginLeft50" /> 
    </div> 
</form> 

Bây giờ trên bấm vào nút <input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" />, thông tin mà là ở <div id="list">... </div> nên được nạp lại.

Vui lòng cho tôi biết nếu bạn cần thêm thông tin.

Answer 1

tôi luôn luôn sử dụng này, hoạt động hoàn hảo.

$(document).ready(function(){ 
     $(function(){ 
     $('#ideal_form').submit(function(e){ 
       e.preventDefault(); 
       var form = $(this); 
       var post_url = form.attr('action'); 
       var post_data = form.serialize(); 
       $('#loader3', form).html('<img src="../../images/ajax-loader.gif" />  Please wait...'); 
       $.ajax({ 
        type: 'POST', 
        url: post_url, 
        data: post_data, 
        success: function(msg) { 
         $(form).fadeOut(800, function(){ 
          form.html(msg).fadeIn().delay(2000); 

         }); 
        } 
       }); 
      }); 
     }); 
     }); 

Answer 2

Điều bạn muốn là tải lại dữ liệu nhưng không tải lại div.

Bạn cần thực hiện truy vấn Ajax để lấy dữ liệu từ máy chủ và điền vào DIV.

http://api.jquery.com/jQuery.ajax/

Answer 3

Trong khi bạn chưa cung cấp đủ thông tin để thực sự chỉ ra nơi bạn nên kéo dữ liệu từ, bạn không cần phải kéo nó từ nơi nào đó. Bạn có thể chỉ định URL đang tải, cũng như xác định tham số dữ liệu hoặc chức năng gọi lại.

$("#getCameraSerialNumbers").click(function() { 
    $("#step1Content").load('YourUrl'); 
}); 

http://api.jquery.com/load/

Answer 4

$("#myDiv").load(location.href+" #myDiv>*",""); 

Answer 5

$("#mydiv").load(location.href + " #mydiv"); 

Answer 6

Hãy thử

mã html này đang

<div id="refresh"> 
    <input type="text" /> 
    <input type="button" id="click" /> 
</div> 

jQuery

<script> 
    $('#click').click(function(){ 
    var div=$('#refresh').html(); 
    $.ajax({ 
     url: '/path/to/file.php', 
     type: 'POST', 
     dataType: 'json', 
     data: {param1: 'value1'}, 
    }) 
    .done(function(data) { 
if(data.success=='ok'){ 
     $('#refresh').html(div); 
}else{ 
// show errors. 
} 
    }) 
    .fail(function() { 
     console.log("error"); 
    }) 
    .always(function() { 
     console.log("complete"); 
    }); 
    }); 

</script> 

con đường mã trang php =/path/t o/tập tin.php

<?php 
    header('Content-Type: application/json'); 
    $done=true; 
    if($done){ 
     echo json_encode(['success'=>'ok']); 
    } 
?> 

Answer 7

Khi phương pháp này thực hiện, nó lấy nội dung của location.href, nhưng sau đó jQuery phân tích các tài liệu trở lại để tìm các phần tử với divId. Phần tử này, cùng với nội dung của nó, được chèn vào phần tử có ID (divId) của kết quả và phần còn lại của tài liệu đã truy xuất bị hủy.

$ ("# divId"). Load (location.href + "#divId> *", "");

hy vọng điều này có thể giúp một người nào đó hiểu

Answer 8

Bạn cần phải thêm nguồn từ nơi bạn đang tải dữ liệu.

Ví dụ:

$("#step1Content").load("yourpage.html"); 

Tôi nghĩ bạn nên ghé thăm trang này trên Auto Load and Refresh Div on Ajax Call Without Reloading Page using jQuery

hy vọng nó sẽ giúp bạn.