Question

我正在尝试刷新此div但我不断收到此错误XMLHttpRequest无法加载。交叉源请求仅支持协议方案：http，数据，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>

Answer 1

您正在为＃data-container的内容调用实际页面（window.location.href）上的加载，并且您希望将内容放入＃data-container。在您的代码中，＃data-container的内容为空，因此您将“empty”替换为空“。我不知道您真正想做什么？

对于Cross Origin问题，您应该尝试调用相对路径而不是window.location.href。例如，如果你在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'))

}

但是，我认为这不是你想要做的，对吧？您正在尝试搜索包含jQuery的数据（'input＃myInput'）。val（）？

Answer 2

这是我在页面加载时所拥有的，它将从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();
                        })

按下按钮后，它将刷新div，其中包含从数据容器中的firebase检索到的新更新的事务

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>

我试图刷新div而不使用$（＆＃34; #div＆＃34;）。load（window.location.href +＆＃34; #div＆＃34;）刷新整个页面;它不起作用

2 个答案: