/    Sign up×
Community /Pin to ProfileBookmark

Javascript and dynamic updating advise or example code

Copy linkTweet thisAlerts:
Nov 14.2012

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.

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@Sup3rkirbyNov 14.2012 — 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 [B][I][FONT=Courier New]_SubmitForm()[/FONT][/I][/B] function to send the data via AJAX and then receive a response to dynamically update your page.
<i>
</i>&lt;script type="text/javascript"&gt;
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
}
}

<i> </i>var $filenames = document.forms["your_form_name"]["form_field"].value;
<i> </i>var $ajData = "filenames=" + $filenames;

<i> </i>xmlhttp.open("POST", "some/cgi/script.cgi", true);
<i> </i>xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
<i> </i>xmlhttp.send($ajData);
} else {
document.forms["your_form_name"].submit();
}
}
&lt;/script&gt;


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 [B][I][FONT=Courier New]$ajData[/FONT][/I][/B] string needs to follow a format like: [B][I][FONT=Courier New]"filenames=" + $filenames + "&otherData=" $otherData + "&moreStuff=" + $moreStuff;[/FONT][/I][/B]

Next there would need to be some [B][I][FONT=Courier New]_UpdatePlayTime()[/FONT][/I][/B] function that actually changes the proper text on your page. The [B][I][FONT=Courier New]xmlhttp.responseText[/FONT][/I][/B] 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 [B][I][FONT=Courier New]xmlhttp.responseText[/FONT][/I][/B] value. If it is absolutely necessary that other information is still returned/output then you can always create a format and use the javascript [B][I][FONT=Courier New].split()[/FONT][/I][/B] 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.
Copy linkTweet thisAlerts:
@jpe1313authorNov 15.2012 — 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?
×

Success!

Help @jpe1313 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...