Skip to Content

Register Login

Industry Online Support

Technical Forum

Navigation

webserver navigation and refresh error

Created by: MJB prog at: 12/21/2018 8:47 AM (5 Replies)

Rating (0)

Thanks 0

6 Entries

12/21/2018 8:47 AM	Rate (0)
MJB prog Advanced Member Joined: 12/5/2018 Last visit: 6/20/2024 Posts: 17 Rating: (0)	Hi, I have some problems with my navigation script, its working in local host but not on the PLC. What am I doing wrong? i also need a suggestion for killing the refresh script when changing pages. Attachment Webserver-navigation-and-refresh-problem.jpg (121 Downloads)
	Last edited by: MJB prog at: 12/21/2018 8:48:07 AM Last edited by: MJB prog at: 12/21/2018 8:52:46 AM Last edited by: MJB prog at: 12/21/2018 8:56:29 AM Last edited by: MJB prog at: 12/21/2018 8:59:51 AM Last edited by: MJB prog at: 12/21/2018 9:01:55 AM
Suggestion To thank Quote Answer

1/7/2019 11:18 AM	Rate (0)
Bastian.Geier Experienced Member Joined: 10/2/2014 Last visit: 11/12/2024 Posts: 88 Rating: (15)	MJB prog Hi, I have some problems with my navigation script, its working in local host but not on the PLC. What am I doing wrong? i also need a suggestion for killing the refresh script when changing pages. can't believe that your script works well on local host You attach in every method the doc.ready event which is called only once when the page's DOM is complete loaded... So your concept of your script is wrong..... could you share the whole app as a zip archive to dig into the code? 'Regards

Suggestion To thank Quote Answer

1/7/2019 3:39 PM	Rate (0)
MJB prog Advanced Member Joined: 12/5/2018 Last visit: 6/20/2024 Posts: 17 Rating: (0)	Hi, i've added the entire webpage. hopefully you can help me solve this problem. kind regards Bastian.Geier MJB prog Hi, I have some problems with my navigation script, its working in local host but not on the PLC. What am I doing wrong? i also need a suggestion for killing the refresh script when changing pages. can't believe that your script works well on local host You attach in every method the doc.ready event which is called only once when the page's DOM is complete loaded... So your concept of your script is wrong..... could you share the whole app as a zip archive to dig into the code? 'Regards Attachment web.zip (123 Downloads)

Suggestion To thank Quote Answer

1/8/2019 8:03 AM	Rate (0)
Bastian.Geier Experienced Member Joined: 10/2/2014 Last visit: 11/12/2024 Posts: 88 Rating: (15)	Hi, as i said you mix up different strategies in your app :-) You have to split your structure (HTML) code(JS) and Data.... So its just worst to dig into it and search for the failure as the concept would never be as good as it can be with the right approach. from my point of view you have to options: using standard HTML and using hyperlinks to switch between the pages thats quite similar to what you already did right know... ore using a "single Page" application / "one Page" Application layout - but that with the whole approach using AJAX and JSON if you want a single page application, just look for the following in google and also here in the online support forum: Jquery Ajax Post JSON jquery show() hide() having all the html code in on document, show and hide the container and load the belonging data via AJAX / JSON and deploy the received data into HTML by using java script regards

Suggestion To thank Quote Answer

1/16/2019 9:29 AM	Rate (0)
MJB prog Advanced Member Joined: 12/5/2018 Last visit: 6/20/2024 Posts: 17 Rating: (0)	I've got the following structure -main page, this is where i've got my web template incl script -content page1 -content page2 -content page3 -content page4 -content page5 -content page6 - external css page Main page: <!DOCTYPE html> <html> <head> <title>HVC webpagina remote station</title> <meta content="charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <link rel="stylesheet" href="stylesheet/hvc-stylesheet.css"/> <!-- script om de PLC data automatisch te verversen --> </head> <body onLoad="load_1(), document.getElementById('statuslijst').style.backgroundColor = '#ffb511'"> <!-- header van de pagina --> <div id="header"> <h1 align="center"><img src="images/hvc.png" alt="images/hvc.png" style="float:left"> Remote station</h1> <hr color="red" size="0.5"> <br> </div> <!-- menu van de header --> <div id="cssmenu"> <button class="tablink" onclick="load_1(), changeColor(this.id)" id="statuslijst">overzicht</button> <button class="tablink" onclick="load_2(), changeColor(this.id)" id="statuspid">PID</button> <button class="tablink" onclick="load_3(), changeColor(this.id)" id="Parameters">Parameters</button> <button class="tablink" onclick="load_4(), changeColor(this.id)" id="Instellingen">Instellingen</button> <button class="tablink" onclick="load_5(), changeColor(this.id)" id="Simulatie">Simulatie</button> <button class="tablink" onclick="load_6(), changeColor(this.id)" id="Alarmen">Alarmen</button> </div> <div id="myDiv" class="tabcontent"></div> <!-- <iframe id="myDiv" width="auto" frameborder="0"></iframe>--> </body> </html> <script src="script/jquery-1.10.2.js"></script> <script> function changeColor(id) { var tabs = document.getElementsByClassName('tablink') for (var i = 0; i < tabs.length; ++i) { var item = tabs[i]; item.style.backgroundColor = (item.id == id) ? "#ffb511" : "#7a726f"; } } function load_1() { $('#myDiv').load('overzicht_inhoud.html');} function load_2() { $('#myDiv').load('Overzicht_inhoud_main.html');} function load_3() { $('#myDiv').load('parameters.html');} function load_4() { $('#myDiv').load('instellingen.html');} function load_5() { $('#myDiv').load('simulatie.html');} function load_6() { $('#myDiv').load('alarmen_inhoud.html');} </script>
	Last edited by: MJB prog at: 1/16/2019 9:30:51 AM Last edited by: MJB prog at: 1/16/2019 9:45:34 AM
Suggestion To thank Quote Answer

1/16/2019 2:31 PM	Rate (0)
Bastian.Geier Experienced Member Joined: 10/2/2014 Last visit: 11/12/2024 Posts: 88 Rating: (15)	Hi, are there any questions regarding your source code? You can find an example here in the W3 Schools documentation: http://api.jquery.com/load/

Suggestion To thank Quote Answer

|

Share this page:

Share this page on...

Follow us on