Jump to content
Sign in to follow this  
Kane

Advanced Web Server with jquery and AJAX

Recommended Posts

I am using a V130 series OPLC and I am working on an Advanced Web Server that will be mobile friendly. I like the simplicity of jquery and the power of ajax. I am currently only able to get the HTML to display from the web server. I am referencing the jquery files that are placed under Web on the SD card but they do not seem to load and the browser will hang for a bit before it loads the html without the jquery style sheets and structure. Any ideas? Comments? Also I am looking for examples of users updating operands with AJAX.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AgriNomix Production Management</title>
<link href="jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header" data-theme="a">
 <h1>AgriNomix Production Management System</h1>
</div>
<div data-role="content" data-theme="c">
 <ul data-role="listview" data-split-icon="plus">
  <li><a href="#Live">Live Feed</a></li>
 </ul>
</div>
<div data-role="footer">
 <h4>For Questions Please Contact AgriNomix at </h4>
</div>
</div>
<div data-role="page" id="Live">
<div data-role="header">
 <h1>Live Feed</h1>
</div>
<div data-role="content">
 [MI3,0,1,0]
</div>
<div data-role="footer">
 <h4>For Questions Please Contact AgriNomix at </h4>
</div>
</div>

</body>
</html>

Its just a stripped version of what the code looks like but you should be able to get the picture. Thanks.

Share this post


Link to post
Share on other sites

Well I found my own solution for the jquery issue.

Since for some reason I was not able to figure out the source link to grab the jquery files locally. I went the CDN-hosted route. Several websites claim that this is the way to go and no one should ever host it locally. Idk. The webpage is loading very quickly operands loading just fine. Now if any one has any feed back on AJAX that will be helpful and of course if I make any progress I will be happy to share.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

Share this post


Link to post
Share on other sites

Well after doing some reading and research. I came up with a way to integrate AJAX and refresh the operands without refreshing the page like the enhanced web server.pdf wants you to do with a <meta> command. It works pretty well sometimes a little slow. I am looking to see if I can make it more stable and responsive. I believe I read some where on the forums that if i separate the JavaScript into its own file it may work better. Hope this helps others that are looking to do a similar application. Also still looking for tips and tricks for improvements or if anyone has any questions let me know.

<Header>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#Content').load('/Web/Start.htm #Content').fadeIn("slow");
}, 200); // refresh every 200 milliseconds 
   </script>
</Header>
<body>
<Div data-role="content" id="Content">
[MI3,1,0]
</DIV>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...