[En-Nut-Discussion] EIR and AJAX

[Ulrich Prinz]

Hi!

I'm a bit stuck at rewriting some html code of the EIR.
Target is to get rid of the page refreshes at every button click and to 
put some more memory consuming things to the browser instead of doing it 
in the radio.

Let's start easy :)

On the Discover page the radio stations are listed. I exchanged some things:

<script type="text/javascript">
var urlctrl = "/cgi-bin/sc_control.cgi";

function DoSearch(s) {
   if (document.form.search.value == '') {
     return false;
   }
   else {
     xmlhttp=new XMLHttpRequest();
     xmlhttp.open('GET','/cgi-bin/stations.cgi?action=1&search='+s,false);
     xmlhttp.send(null);
     return false;
   }
}

function DoGenre(s) {
   xmlhttp=new XMLHttpRequest();
   xmlhttp.open('GET','/cgi-bin/stations.cgi?action=2&search='+s,true);
   xmlhttp.onreadystatechange = function() {	//Call a function when the 
state changes.
   if(http.readyState == 4 && http.status == 200) {
     alert(xmlhttp.responseText);
   }
   xmlhttp.send(null);
   return false;
}

function DoPlay(i)
{
   xmlhttp=new XMLHttpRequest();
   xmlhttp.open("GET",urlctrl+"?play="+i,false);
   xmlhttp.send(null);
   xmlhttp.close();
}

function DoAdd(i)
{
   xmlhttp=new XMLHttpRequest();
   xmlhttp.open("GET",urlctrl+"?add="+i,false);
   xmlhttp.send(null);
   xmlhttp.close();
}
</script>

<div id="wait" class="wait">Please wait<br>List is loading</div>
<div class="headline">Radio Stations</div>

<!--#exec cgi="/cgi-bin/sc_control.cgi?$QUERY_STRING" -->
<form> <!-- action="/onlinelist.shtml" method="GET" name="form" 
id="form"> -->
   <div class="headline">Search:
   <INPUT type="text" name="search" class="form" 
onchange="DoSearch(search.value)"
  	<!--#exec cgi="/cgi-bin/search.cgi?$QUERY_STRING" -->>
  <INPUT type="submit" name="action" value="Search" class="submit" 
onClick="DoSearch(search.value)">
Genre:
  <SELECT name="genre" tabindex="1" class="form" 
onchange="DoGenre(genre.value)">
   	<!--#exec cgi="/cgi-bin/genres.cgi?$QUERY_STRING" -->
  </SELECT>
  </div>

  <table cellspacing="0" border="0" cellpadding="3" class="table">
   <!--#exec cgi="/cgi-bin/stations.cgi?$QUERY_STRING" -->
  </table>
</form>

<script>
document.getElementById('wait').style.visibility="hidden";
</script>

What happens now is that I get funny results:
When I press play, the page refreshes... That's one thing that I didn't 
want. Another thing is that I defined things as follows:

var urlctrl = "/cgi-bin/sc_control.cgi";
...
xmlhttp.open("GET",urlctrl+"?play="+i,false);
...

But I get this string on the browser line:
http://192.168.10.119/onlinelist.shtml?search=&genre=Default&0=play

So there are request parts like search= and genre= that are not part of 
the function called. And the 0=play part is reversed as it has to look 
like play=0.

I'm a bit puzzled and yess, I know that the search and genre functions 
are not complete.

Regards, Ulrich