我想刷新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”）刷新整个页面;它不工作

回答

相关问题