Jump to content

text value update


rizwansyed
 Share

Recommended Posts

Hi

I have  a sample code for dynamic update of value every 1 sec.

<script>
var count = 100;
var fxn = function() {
    count++;
    document.getElementById('time').innerHTML = count;
}
setInterval(fxn, 1000);
</script>

<div id=time></div>

 

As in above example, i need to display dynamic values  every second .

So i tried to modify my code as below.

<br>
<input style="border:none;font-size:18pt;"  type="text"  name="$$$undefinedA1$$$" size="10" >
<script>
var fxn = function() {
    document.getElementById('time').innerHTML = "$$$ABC1$$$";
}

setInterval(fxn, 1000);
</script>
<div id=time>
</div>

 

In above code , i will receive the value from my board in "$$$ABC1$$$". So i should be able to update the value continuously on web browser apge.

I tried above code but doesnot work.Please suggest how to proceed.

 

Edited by rizwansyed
Link to comment
Share on other sites

What part of this isn't working Rizwansyed?

 

Is the value not showing up?
Is the value incorrect?

Can you edit into your post what you expect to receive, AND what you are receiving.

This will let me help you a bit more.

Link to comment
Share on other sites

Hi Funce,

Thanks for the reply.

 

Actually My requirement is, I need to reload only a portion of the page like only the updating value to my html page .

Its like updating time where only seconds are updating and other part is constant.

Similar way i need to update all the values which changes dynamically every 1 second.

In the above post, i tried the code which i have posted, it updates only once whenever i refresh and not continuous.

Without refreshing i should be able to update the values .

 

Thanks and Regards

Rizwan Syed

Link to comment
Share on other sites

????

it IS refreshing every second, all you have coded it to do is keep displaying the same text on every setInterval looping of function call .

Using your previous example

        <input style="border:none;font-size:18pt;"  type="text"  name="$$$undefinedA1$$$" size="10" >
        <script>
            var count = 0;
            var fxn = function() {
                count++;
                document.getElementById('time').innerHTML = "$$$ABC1$$$" + count;
            }

            setInterval(fxn, 1000);
        </script>
        <div id=time>
        </div>

IF you are using post method as in your previous post, you would have submit the form every time to send current value.

Edited by dsonesuk
Link to comment
Share on other sites

Explain about the "Board" how does the "Board" and a html interact? The html page can update through JavaScript, surely the board can only retrieve the updated html file value how does it retrieve the value?  similar to a server language retrieving a value through post request sent from form that has been submitted? You talk about the html updating, then the board?

WHAT IS THE "BOARD"?

Link to comment
Share on other sites

Hi Dsonesuk,

I have a S7G2-DK MCU board which interacts with HTML file loaded from SD card.

As mentioned above the code below has a delimiter "$$$". The code inside delimiters will be searched and replaced with a particular text or value.

var fxn = function() {
    document.getElementById('time').innerHTML = "$$$ABC1$$$";
}

"$$$ABC1$$$"  is one delimiter. Similarly it counts the number of delimiters in the html file  and updates the values based on our values assigning to replace the delimiter on html file .

The problem am facing is, whenever i refresh my web page only that particular time, the value gets updated else it will be a constant.

But i need whenever there is change in value,it should get updated without refreshing my web page.

 

This is my requirement and am not getting exactly how to solve this

Please suggest

Thanks and Regards

Rizwan Syed

 

 

Link to comment
Share on other sites

Unless  the board can retrieve values from html without the need of the html file refreshing, you will have to refresh the the page.

What if you store the current value in local storage, refresh the page then compare the current value to localstorage value? does this work?

        <input id="thisinput" style="/*border:none*/;font-size:18pt;"  type="text"  name="$$$undefinedA1$$$" size="10" >

        <div id="time">bbbbbb
        </div>
        <script>
            var x = document.getElementById("thisinput");
            if (typeof (Storage) !== "undefined") {

                if (localStorage.thisinput_LSvalue) {

                    x.value = localStorage.thisinput_LSvalue;
                } else {

                    localStorage.thisinput_LSvalue = "";
                }
                document.getElementById("time").innerHTML = "$$$ABC1$$$" + localStorage.thisinput_LSvalue;
            } else {
                document.getElementById("time").innerHTML = "Sorry, your browser does not support web storage...";
            }



            var fxn = function() {

                if (x.value !== x.defaultValue && x.value !== localStorage.thisinput_LSvalue)
                {
                    localStorage.thisinput_LSvalue = x.value;

                    document.getElementById('time').innerHTML = "$$$ABC1$$$" + localStorage.thisinput_LSvalue;
                    location.reload();
                }
            }

            var stIntVal01 = setInterval(fxn, 1000);

            x.onfocus = function() {
                clearInterval(stIntVal01);

            }

            x.onblur = function() {
                stIntVal01 = setInterval(fxn, 1000);
            }
        </script>

Type something in the input and then click outside the input (we can change this later).

Link to comment
Share on other sites

Like I said IF the BOARD CANNOT retrieve values without the page refreshing, you will have rely on refreshing and if the forum for this board can't supply an answer, which you have from what I've seen, how do you expect us? usually you would use a server language to retrieve this data like PHP curl. BUT! we can't use this "we have to use only html" well that's not going to happen, html on its own CAN'T do that!

Edited by dsonesuk
Link to comment
Share on other sites

Hi

My board can access post requests.

By seeing above link, it has  "xhttp.open(\"GET\", \"ajax_info.txt\", true);"

Do it need a file for taking a data.

How does it work

Actually my code will be searching a delimiter and then replace the text or value corresponding to it.

I may not be using any other file

Link to comment
Share on other sites

Usually through AJAX JavaScript sends 'post' or 'get' requests along with data, to the server language script page and this page will read those requests and be able to retrieve the data, as though it was retrieving the same data from a form submission or a url get querystring. But! with AJAX it is done in the background. IF your board can retrieve data from these AJAX requests, you are on the way of getting the required result.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...