text value update

[rizwansyed]

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 August 27, 2018 by rizwansyed

[Funce]

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.

[rizwansyed]

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

[dsonesuk]

????

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 August 28, 2018 by dsonesuk

[rizwansyed]

Hi Dsonesuk

Yes correct. 

I think from HTML it is updating.

But I think board is not sending updated value 

[dsonesuk]

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"?

[rizwansyed]

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

 

 

[dsonesuk]

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).

[rizwansyed]

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 August 29, 2018 by rizwansyed

[dsonesuk]

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 August 29, 2018 by dsonesuk

[rizwansyed]

Hi Dsonesuk

https://renesasrulz.com/synergy/f/synergy---forum/10817/writing-data-on-web-browser

Some one has used a AJAX for writing , who has similar requirement.

Will this be helpful for writing a dynamic data, being a new for AJAX.i need to get some info on this

Edited August 29, 2018 by rizwansyed

[dsonesuk]

IF your board can access 'post' or 'get' requests methods then yes!

[rizwansyed]

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

[dsonesuk]

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.

[rizwansyed]

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.