updating javascript function without realoding

Question

Im trying to build an embedded web server with Nano WiReach SMT

So far i have wrote this code

<HTML> 
    <HEAD>
        <SCRIPT LANGUAGE=JavaScript>
            function swapImage() {
                var val1 = "~Value1~"
                val1=Number(val1);
                intImage = val1;
                switch (intImage) {
                    case 0:
                    IMG1.src = "off.jpg";
                    return(false);
                    case 1:
                    IMG1.src = "on.jpg";
                    return(false);   
                }
                setTimeout("swapImage()",500)
            }
            swapImage()
        </SCRIPT>
    </HEAD>
    <BODY>
        <body onload="swapImage()">
        <IMG id="IMG1" name="IMG1" src="on.jpg">
    </BODY>
</HTML>

Through some AT+i commands to the Nano WiReach SMT i can change the ~Value1~ content, and by sending "0" and "1" i cant change the images. Now in order to change the image i have to always reload the page through the browser.. I wonder if there is anyway to do that automatic in some specified time period or even better when the Value1 changes without reloading the hole page.. Maybe put it on a div and reload just the div content but i dont know how.. One last thing..searching the web i found something similar with jquery..i cant use jquery cause the libs are very big for my uC..

Thank you

I'm not sure I follow you exactly, are you creating the image with new Image() and preloading it in some other code somewhere? — user17753
– user17753, Commented Mar 7, 2012 at 20:46

James Kyburz · Accepted Answer · 2012-03-07 20:59:49Z

1

Are you missing the following?

var IMG1 = window.document.getElementById("IMG1");

Also does your function need a name?

!function() {
  var val1 = "~Value1~"
  val1=Number(val1);
  var intImage = val1;
  var IMG1 = window.document.getElementById('IMG1');
  switch (intImage) {
    case 0:
      IMG1.src = "off.jpg";
      return(false);
    case 1:
      IMG1.src = "on.jpg";
      return(false);
  }
  setTimeout(arguments.callee, 500);
}();


It's better to send a function to setTimeout instead of a string, otherwise
the string eval is performed on the string in the global context - not always what you want.

edited Mar 7, 2012 at 20:59

answered Mar 7, 2012 at 20:52

James Kyburz

14.6k1 gold badge34 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

man_or_astroman Over a year ago

Thanx for the answer. I was missing the declaring o IMG1 you are right but the code i've posted is working properly except the "refresh" thing that im asking.. No i dont need a name for the function..so with your code my function will be called every 500ms.is that right?

user17753 · Accepted Answer · 2012-03-07 22:12:06Z

0

I haven't tested this code, and not sure about your platform, but you'll probably want to preload the images and in addition reference the element in the body by id to change it's source.

<HTML> 
<HEAD>
<SCRIPT LANGUAGE=JavaScript>

var IMG1 = new Image();
IMG1.src = "on.jpg";

var IMG2 = new Image();
IMG2.src = "off.jpg";

function swapImage() {

var oIMG = document.getElementById("IMG1");


var val1 = "~Value1~"

val1=Number(val1);

intImage = val1;

switch (intImage) {

case 0:

oIMG.src = IMG2.src;

return(false);

case 1:

oIMG.src = IMG1.src;

return(false);   

}

 setTimeout("swapImage()",500)

}



</SCRIPT>

</HEAD>

<BODY>

<body onload="swapImage()">

<IMG id="IMG1" name="IMG1" src="on.jpg">

</BODY>
</HTML>

Before we examine modules and inserting things with ~, etc. Let's make sure we can do a base script that works just fine. The following you can load in a normal browser, and it swaps the image back and forth every 500ms. setInterval causes the function to be called every 500ms, setTimeout will just call it once. Use which ever you want.

See if you can get this base script working, as it should, before trying other stuff. Ask any questions if you have any about it.

<!DOCTYPE html>
<html>

<head>
<title>Image Test</title>

<script language="javascript" type="text/javascript">


var IMG1 = new Image(); // create new image
var IMG2 = new Image(); // crete another new image

function init() {


IMG1.src = "on.jpg"; // preload on.jpg
IMG2.src = "off.jpg"; // preload off.jpg

var oIMG = document.getElementById("oIMG"); // grab a reference to img in doc with id of oIMG

oIMG.src = IMG1.src; // initially set the source of oIMG to IMG1's source
oIMG.toggled = 1; // initially give oIMG a toggled state of 1 (meaning on)

setInterval("swapImage()",500); //start time out for swapping image

}

function swapImage() {


var oIMG = document.getElementById("oIMG"); // grab a reference to img in doc with id of oIMG

switch (oIMG.toggled) { //switch based on the oIMG toggle state

case 0: //if off, turn it on
oIMG.src = IMG1.src;
oIMG.toggled = 1;
break;

case 1: //if on, turn it off
oIMG.src = IMG2.src;
oIMG.toggled = 0;
break;
}





}


window.onload = init;
</script>

</head>

<body>

<img id="oIMG" src="" />


</body>

</html>

edited Mar 7, 2012 at 22:12

answered Mar 7, 2012 at 20:54

user17753

3,18110 gold badges41 silver badges75 bronze badges

8 Comments

man_or_astroman Over a year ago

no im not preloading the image somewhere else..this is the only code the the webserver runs. (Sorry for my noobness these thing are very new to me and im trying to understand them)

user17753 Over a year ago

Well I'm saying, that normally in Javascript, if you want to switch images on-the-fly it helps to preload them using the new Image() construct as exampled above. As for your "refresh" issue, I'm not really sure what you mean. Are you manually refreshing? Your script shouldn't refresh the page on its own as it's written.

man_or_astroman Over a year ago

Yes exactly this..im manually refreshing.I can auto refresh with something like <meta http-equiv="refresh" content="5" > but this refresh the hole page,i want just to refresh this specific "swap" thing cause later i will put more things on the page.

user17753 Over a year ago

That is odd behavior, normally it should not save the state of javascript variables between refreshes.

man_or_astroman Over a year ago

Ill try to explain better how its works. Im building an html an then a program that came with the Nano Wireach is building it to an .img file that it can be uploaded to the module. Whatever you put in the html in ~~ you can change it from the module. So for example in you upload this html to the module<HTML> <HEAD> <TITLE>SAMPLE PAGE</TITLE> </HEAD> <BODY> <h1>~headline~</h1> </BODY> </HTML>

|

Collectives™ on Stack Overflow

updating javascript function without realoding

2 Answers 2

1 Comment

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related