CODEWITHSUNDEEP
javascripthtml
RJ10
RJ10

Reputation: 303

auto refresh text box value

I've multiple text field HTML, I'm getting value from other page this value is dynamic it'll keep on change, So I need to auto refresh my text box every one sec, is that possible to refresh only text box value

note: IO.html has var1, var2 etc.. variables values will keep on change.., I need to track this values in Intex.html text box

    <script type="text/javascript">
              setInterval(function () {
                  $.getJSON("IO.html", function (data) {
                      if (data.var1 == true) {
                          $('#C1-Cycle').text(data.trim());
                      }
                  });
              }, 1000);
            </script>
index.html
<html>
  <head>
    </head>
  <body>
    <table>
     <tr >
            <td class="C3-tap-col">
            <div>
            <input type="text" id="C1-Cycle" class="C3-tap-tex" value=''>
            Counter
            </div>
            </td>      
     </tr>
      </table>
    </body>
  </html>

Upvotes: 0

Views: 4251

Answers (1)

Lain
Lain

Reputation: 3726

Alright, with the new information I rebuilt your example one to one.

We have a file with values called IO.html containing variables in non array json format:

{"var1": "30", "var2": "40"}

Then we have the file index.html which is supposed to read the values of IO.html each second and enter the values in their input fields in index.html:

<html>
    <head>
        <script>
            AJAX = {
                getXmlDoc: function(){return ((window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"))},

                //u:= url, f:= callback
                Get: function(u, f){
                    var tDoc = this.getXmlDoc();

                    tDoc.open('GET', u, true);
                    tDoc.onreadystatechange = function(){
                        if (tDoc.readyState === XMLHttpRequest.DONE && tDoc.status === 200) f(tDoc);
                    };

                    tDoc.send();
                }
            };
        </script>

        <script type = 'text/javascript'>
            function startTimer(){
                document.body.QQ = setInterval(function(){
                    AJAX.Get('IO.html', function(r){
                        var tR = eval('[' + r.response + ']')[0]; //This is our json object of IO.html (:= {"var1": "30", "var2": "40"})

                        //Now we loop all values/key in our json and add it to the input with that id (:= var1, var2)
                        for(var k in tR){
                            //We get the input with the same id as the key..
                            //We could also create them on the fly.
                            var tE = document.getElementById(k);
                            if (tE) tE.value = tR[k];
                        }
                    })
                }, 1000)
            }
        </script>
    </head>

    <body onload = 'startTimer()'>
        <input type = 'text' id = 'var1' name = 'C1-Cycle' />
        <input type = 'text' id = 'var2' name = 'C2-Cycle' />
    </body>
</html>

So now you load the index.html and each second it gets the new values from IO.html and updates the values of IO.html in the input fields of index.html.

Why the same code as the fiddle works in fiddle yet not on your server I am not able to tell you. Usually some path is wrong or some includes missing. Be aware that locally you are not able to access "/echo/js/?js={"var1": "30", "var2": "40"}".

Here is a futher example with placeholder and iframe. First the IO.html which updates every second via meta refresh:

<html>
    <head>
        <meta http-equiv = 'refresh' content = '5'>
    </head>

    <body>
        <input type = 'text' value = ':="Datablock".counter:' />
    </body
</html>

And the index.html containing the IO.html in an iframe:

<html>
    <head></head>

    <body>
        <iframe src = 'IO.html'></iframe>
    </body>
</html>

Upvotes: 1

Related Questions