www.webdeveloper.com
Results 1 to 3 of 3

Thread: Javascript and dynamic updating advise or example code

Hybrid View

  1. #1
    Join Date
    Nov 2012
    Posts
    2

    Javascript and dynamic updating advise or example code

    Thanks in advance.

    MY BACKGROUND:
    I'm self taught and have only done simple html webpages for special embedded systems.

    There is so much information I am hoping by posting here I can draw on an experts knowledge to help me 'filter' my solution and head me in the right direction or provide me with working example code.

    WHAT I NEED TO DO:
    From the previous webpage the client can select files to "play." I quote "play" because it is custom and we are playing data files out some hardware not audio or video files.

    I've already got the server cgi code side working where it parses the filenames and has calculated the TOTAL PLAY TIME.

    I'd like the TOTAL PLAY TIME information back to the client webpage to initialize a "slide bar" (with the time to play). Then the user will be able to select where they want to start the "play" and push a "start" button. So, back to the server would go the start time and to play or stop state from the client.

    I'm embedding this in uClinux and using boa as the webserver if that is of any importance.

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    961
    It looks like what you need is some AJAX to help your page work with server scripts dynamically so that there is no additional page loading required. There will likely need to be a few modifications to your server scripts but it shouldn't be too difficult.

    Firstly you do need the client-side AJAX scripting to make this work on that end. I assume these list of filenames is submitted to your cgi script via a form, if not please fill me in on how you are sending this list. Assuming it is a form, what you basically do from here is, rather than submitting the form (via your submit button), replace this with a standard input button that calls upon my _SubmitForm() function to send the data via AJAX and then receive a response to dynamically update your page.
    Code:
    <script type="text/javascript">
    function setReqObj() {
      var nAjax;
      if(window.XMLHttpRequest) {
        nAjax = new XMLHttpRequest();
      } else {
        nAjax = new ActiveXObject("Microsoft.XMLHTTP");
      }
      return nAjax;
    }
    
    function _SubmitForm() {
      var xmlhttp = setReqObj();
    
      if(xmlhttp) {
        xmlhttp.onreadystatechange=function() {
          if(xmlhttp.readyState == 4) {
            _UpdatePlayTime(xmlhttp.responseText); // This would be a function that edits your page with the time
          }
        }
    
        var $filenames = document.forms["your_form_name"]["form_field"].value;
        var $ajData = "filenames=" + $filenames;
    
        xmlhttp.open("POST", "some/cgi/script.cgi", true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send($ajData);
      } else {
        document.forms["your_form_name"].submit();
      }
    }
    </script>
    You would need to edit some of the values to fit your forms name and whatever fields are being read and sent. In the event multiple fields are being used the $ajData string needs to follow a format like: "filenames=" + $filenames + "&otherData=" $otherData + "&moreStuff=" + $moreStuff;

    Next there would need to be some _UpdatePlayTime() function that actually changes the proper text on your page. The xmlhttp.responseText value that is being passed in to this function is what your cgi script would be sending back. Which brings me to the last point which is that your cgi script must be changed so that the return value/output is your 'TOTAL PLAY TIME'. Basically whatever that script outputs will be sent back and stored in the xmlhttp.responseText value. If it is absolutely necessary that other information is still returned/output then you can always create a format and use the javascript .split() method to break it in to an array so you can properly use the parts you need.

    Hopefully this helps, but if you have any other questions feel free to ask.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Nov 2012
    Posts
    2

    Thanks !

    Thanks,
    I won't be able to get back to this for about a week. I will definitely ask again if I get stuck.

    Anyone have a recommendation on a good slidebar that I can configure when the "total play time" is returned?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles