CODEWITHSUNDEEP
javascripthtml
man_or_astroman
man_or_astroman

Reputation: 648

updating javascript function without realoding

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

Upvotes: 0

Views: 938

Answers (2)

user17753
user17753

Reputation: 3161

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>

Upvotes: 0

James Kyburz
James Kyburz

Reputation: 14453

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.

Upvotes: 1

Related Questions