发表新帖
发表新帖

Change content of a div on another page

前端 未结
关注
4 617
温柔的废话
温柔的废话 2021-01-24 06:52

On page 1, I have a div containing information.

And on page 2, I have a form

相关标签:
4条回答
  • 滥情空心
    2021-01-24 06:59

    One way is to do like what the other answers mentioned, to have each tab communicate to a central server that will get/send data to keep both tabs updated using AJAX for example.

    But I'm here to tell you about another way though, it's to use what we already have designed for this kind of task exactly. What so called browser localStorage

    Browser storage works like this pseudo code:

      //set the value, it works as a hash map or assoc array. 
   localStorage .setItem("some_index_key", "some data") ; 
   // get the value by it's index key. 
   localStorage .getItem("some_index_key") ; // will get you "some data"

    Where all the data will be shared among all open tabs for the same domain. And you can add event listener so whenever one value change, it will be reflected on all tabs.

    addEvent(window, 'storage', function (event) {
  if (event.key == 'some_index_key') {
    output.innerHTML = event.newValue;
  }
});

addEvent(myInputField, 'keyup', function () {
  localStorage.setItem('some_index_key', this.value);
});

    Check out this DEMO, you edit one field on page-A, and that value will be reflected on page-B offline without the need to burden the network.

    To learn more, read this.

    Real live example. The background color is controlled from another tab. 

         var screenone = document.getElementById('screenone');

            screenone.addEventListener('keydown', screenOneFunction);
            screenone.addEventListener('change', screenOneFunction);
           
    function screenOneFunction()
            {
                document.body.style.backgroundColor = this.value;
                localStorage.setItem("color1", this.value);
            }
            
            
            
            var screentwo = document.getElementById('screentwo');

            screentwo.addEventListener('keydown', function (evt) {
                localStorage.setItem("color2", this.value);
            });
            screentwo.addEventListener('change', function (evt) {
                localStorage.setItem("color2", this.value);
            });



            var thebutton = document.getElementById('thebutton');

            thebutton.addEventListener('click', function (evt) {
                localStorage.clear();
                screenone.value = "";
                screentwo.value = "";
                document.body.style.backgroundColor = "";
            });



            var storageHandler = function () {
                document.body.style.backgroundColor = localStorage.color2;
                var color1 = localStorage.color1;
                var color2 = localStorage.color2;
                screenone.value = color2;
                screentwo.value = color1;

            };
            window.addEventListener("storage", storageHandler, false);
           .screenone{ border: 1px solid black;}
       input{ margin: 10px; width: 250px; height: 20px; border:round}
      label{margin: 15px;}
    <html>
    <head>     
    </head>
    <body>
        <label> Type a color name e.g. red. Or enter a color hex code e.g. #001122 </label>
        <br>
        <input type="text"   class="screenone" id="screenone" /> 
        <label> This tab </label> 
        <br>
        <input type="text"   class="screentwo" id="screentwo" /> 
        <label> Other opned tabs </label>  
        <br>
        <input type="button"   class=" " id="thebutton" value="clear" /> 
    </body>
</html>

    0 讨论(0)
  • 清歌不尽
    2021-01-24 07:02

    You mean some thing like this ?

    $("#submit-info").click(function() {
   var content = $("#new-info").text();
   $("#information").html(content);
  });

    If you thing about server side, tell more about technology, which you use.

    0 讨论(0)
  • 悲哀的现实
    2021-01-24 07:04

    This is exactly as the following: Page 1:

    <form action="test2.htm" method="get">
<textarea name ='new-info'></textarea>
<input type = 'submit' id='submit-info' value ='pass'  onclick="postData();"/>

    Page 2

       <div id="information"></div>
<script> 
        if (location.search != "")
        {
            var x = location.search.substr(1).split(";")
            for (var i=0; i<x.length; i++)
            {
                var y = x[i].split("=");
                var DataValue = y[1];
                document.getElementById("information").innerHTML  = DataValue;
            }
        }       


</script>
    0 讨论(0)
  • 执笔经年
    2021-01-24 07:20

    Hope this will give you an idea of how you can do it:

    Page 2

    HTML

    <form>
  <textarea id='new-info'></textarea>
  <input type='submit' id='submit-info' value='pass'/>
</form>

    JS

    $("form").submit(function(e){

    e.preventDefault();

    $.post('save_data.php', { new_info:$("#new-info").val() }).done(function(data){
         // Do something if you want to show that form has been sent
    });


});

    save_data.php

    <?php

if (isset($_POST['new-info'])) {

    // Update value in DB

}


?>

    Page 1

    HTML

    <div id='information'>
</div>

    JS

    setInterval(search_after_info, 1000);


function search_after_info() {

    $.get('get_data', function(data) {

        $("#information").html(data);

    });

}
    0 讨论(0)
 看不清?
提交回复
热议问题