我想刷新div而不使用$（「#div」）.load（window.location.href +「#div」）刷新整個頁面;它不工作

我想刷新這個div，但我一直收到這個錯誤XMLHttpRequest無法加載。協議方案僅支持跨源請求：http，data，chrome，chrome-extension，https。

我研究過firefox已經允許交叉http請求，但是當我重新加載頁面的div消失。

我想知道如果我的代碼有問題。

我正在檢索的數據來自firebase。

function updateDiv(){ 
    $("#data-container").load(window.location.href + " #data-container"); 
}

<div data-role="page" id="pageone"> 
    <div data-role="header"> 
    <button onclick="goBack()">Back</button> 
    <h1>Transaction History</h1> 
    </div> 
    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Name.."> 
    <button onclick="updateDiv()"></button> 
    <div id="data-container"></div>

來源

2017-07-27 Javier Yong

這將更有意義創建一個只返回HTML端點你需要。也就是說，你在本地文件系統上運行HTML嗎？ IE瀏覽器。 URL是否啓動'file：// ...'？ –

是的，我在本地主機上運行 –

-1

你調用實際的頁面（window.location.href）爲＃數據容器的內容上的負載，並且希望把內容轉換成數據＃集裝箱。在你的代碼中，＃data-container的內容是空的，所以你用空來替換「empty」。我不知道你真的想做什麼？

對於你的Cross Origin問題，你應該嘗試調用例如，如果你在http://localhost/test.php上，你應該寫.load（'test.php＃data-container'）。

你能解釋一下你正在嘗試的嗎？做什麼？你叫什麼「刷新div」？你想用原始內容恢復它的內容，因爲它可以在頁面加載後修改（例如用JS）？如果是，你應該存儲div的初始內容JS緩存：

jQuery(document).ready(function(){ 
    jQuery('#data-container').data('cache',jQuery('#data-container').html)) ; 
}) ;

然後，當你想恢復它原來的內容，你不必做一個Ajax調用，你只需要得到存儲的內容：

function updateDiv(){ 
    $("#data-container").html(jQuery('#data-container').data('cache'))

; }

但是，tbh，我認爲這不是你想要做的，對嗎？你試圖搜索包含jQuery的數據（'input＃myInput'）。val（）？

來源

2017-07-27 13:22:19

實際上我從firebase檢索數據，這樣一旦用戶點擊按鈕，div中的數據將被更新並替換爲舊的數據集。 –

您可以添加一組示例嗎？你有什麼init，按鈕之前你有什麼，按鈕點擊後你想要什麼。 –

我已在下面添加了一組示例 –

-1

這是我在頁面加載時會從firebase中檢索所有事務，並相應地更新到列表中。

firebase.auth().onAuthStateChanged(function(user) { 

       // [START_EXCLUDE silent] 

       // [END_EXCLUDE] 
       if (user) { 
        uid = user.displayName; 
        console.log(uid); 
        var rootRef = firebase.database().ref(); 
        var ref = rootRef.child(uid + "/Transaction History"); 
        var query = ref.orderByKey().limitToLast(100); 
        query.on("child_added", function(messageSnapshot) { 
         // This will only be called for the last 100 messages 
         var keys = Object.keys(messageSnapshot); 
         var messageData = messageSnapshot.val(); 
         var key = messageSnapshot.getKey(); 
         console.log("key is " + messageSnapshot.getKey()); 
         console.log("messagesnapshot is " + messageSnapshot); 

         var obj = { 
          key: key, 
          firstName: messageData.firstName, 
          lastName: messageData.lastName, 
          icNo: messageData.icNo, 
          passportNo: messageData.passportNo 
         }; 
         arr.push(obj); 
         ref.child(key + "/User Information").once('value').then(function(snapshot) { 

          var name = snapshot.val().firstName; 
          console.log(name); 

          s = "<li><a href='#'>" + no + '. '+ name + ' ' + key +"</a></li>"; 
    no++ 
          sources.push(s) 
           // for (property in messageSnapshot) { 
           // console.log(property); // Outputs: foo, fiz or fiz, foo 
           //} 

          //$("#mylist").html(s); 
          //$("#mylist").listview("refresh"); 

          console.log("arr.length is " + arr.length); 
          console.log(sources[9]); 

         }).then(function(pagination) { 
          Pagination(); 
         })

按下按鈕後，它會刷新與從火力點在數據容器中獲取的新更新的交易股利

function updateDiv(){ 
    $("#data-container").load(window.location.href + " #data-container"); 
} 

    </script> 
</head> 

<body> 

    <div data-role="page" id="pageone"> 
     <div data-role="header"> 
      <button onclick="goBack()">Back</button> 

      <h1>Transaction History</h1> 
     </div> 
     <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Name.."> 
     <button onclick="updateDiv()"></button> 


     <div id="data-container"></div> 
     <div id="mylist"></div>

來源

2017-07-28 15:28:38

我想刷新div而不使用$（「#div」）.load（window.location.href +「#div」）刷新整個頁面;它不工作

回答

相關問題