Gå til innhold

Javascript til å motta variabel og endre denne i bakgrunnen


Anbefalte innlegg

Hei

 

Jeg har veldig basic kunnskaper om HTML, men når det kommer til Javascript er jeg helt ute å sykler.

 

Jeg holder på å sette opp webserver på en Siemens S7-1200 PLS. Via webserveren skal jeg kunne sette inn og utganger på PLSen, samt endre variabler.

 

Ved hjelp av denne guiden har jeg klart å få det til å fungere, men utrolig tungvint når jeg skal kunne endre flere variabler.:

 

https://www.dmcinfo.com/latest-thinking/blog/id/8567/siemens-s7-1200-web-server-tutorial--from-getting-started-to-html5-user-defined-pages

 

Håper noen her inne har kunnskaper om dette så kan gjøre dette enklere.

 

Slik det er nå må jeg opprette en egen html fil for hver variabel, og kopiere javascriptet under, og endre selve navnet variabelen.

 

Koden i IOtriangleWave.htm:

 

<!-- AWP_In_Variable Name='"webdata".triangleWave' -->:="webdata".triangleWave:

 

Koden i index.html:

 

 

<!-- AWP_In_Variable Name='"webdata".triangleWave' -->
 
<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Javascript Example</title>
      <script src="jquery-2.0.2.min.js"></script>
    </head>
    <body>
      <!--This label value is being updated in the background using JavaScript-->
      <label id="triangleWave" name="triangleWave">:="webdata".triangleWave:</label>
      </br>
      <input id='setvar' type="text" />
      <!--This button modifies the value in the background using JavaScript without a postback-->
      <button>Modify</button>
     <p><img src="logo-DMC.png" alt="DMC Logo"><p/>
    </body>
 
    <script type="text/javascript">
    $(document).ready(function(){
        //query the trianglewave variable every second
        $.ajaxSetup({ cache: false });
        setInterval(function() {
            $.get("IOtriangleWave.htm", function(result){
                $('#triangleWave').text(result);
                });
        },1000);
         
        //modify the triangleWave value
                $("button").click(function(){
                    url="IOtriangleWave.htm";
                    name='"webdata".triangleWave';
                    val=$('input[id=setvar]').val();
                    sdata=escape(name)+'='+val;
                    $.post(url,sdata,function(result){});
                });
 
    });
    </script>
 
</html>
Endret av Garrian
Lenke til kommentar
Videoannonse
Annonse

Vet ikke hva en PLS er, men du trenger neppe kalle den opp etter variabel. Kall den heller etter funksjonalitet, f eks 'myControlPanel.htm'. Du må da også endre kallene i javascriptet fra IOtriangleWave.htm til myControlPanel.htm

 

For å få flere felter kopierer du bare <label> bla bla </label> til linjen under, og endrer id/name til det du ønsker.

For flere input-felter kopierer du bare alt mellom <input> .... og ... </button> til linjen under, og endrer id/name til noe forklarende på disse også. Sett også inn id="button2" eller noe fornuftig i <button>-taggen.

 

// bla bla -> betyr at linjen er en forklaring på hva koden under gjør.

for å oppdatere ditt nye felt/label, kopierer du koden: $('#triangleWave').text(result); til linjen under, og endrer #triangleWave til #idForDittNyeFelt

 

for å sende inn nye verdier kan du f eks kopiere $("button").click(function(){...bla bla ..});, og endre "button" til #button2 og id=setvar til riktig id for inputfelt nummer 2...

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...