Jump to content
rizwansyed

text value update

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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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"?

Share this post


Link to post
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

 

 

Share this post


Link to post
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).

Share this post


Link to post
Share on other sites

Hi Dsonesuk,

Thanks for the Reply .It may not work as this again similar to refreshing to get the value.

Is It possible to do with HTML.

Please suggest

 

Edited by rizwansyed

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Hi,

Am able to get the dynamic data every 1 sec.

I need to submit a form using ajax so that i can avoid going to other page with html.

Please suggest how to use submit form using ajax.

Share this post


Link to post
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

×