Hey,
I am trying to create an online music player that allows saving and loading playlists.
for better understanding, the website is:
I've already implemented the saving part, now I'm trying to implement the Load part.
The "playlist" file is just a text file with the song names in it. I need to populate the select box with those songs by reading each line. This is not difficult for me- just open the file, read the lines and echo in the javascript code to add an option with that value. The problem is, I need to know the name of the playlist that is selected to be loaded. (If this is unclear, go to the address provided above to see exactly).
The only way I know of recieving the playlist name is by submitting it through a form and using _REQUEST[]. However, this is not an option because it redirects the user to the script- therefore not being able to populate the select box.
I am pretty new to PHP, so I'm not exactly sure how it all works. Mayber there is a way to submit within the page? If not, any other suggestions and help would be great. Thanks.
Using javascript variable in PHP without submitting a form?
Moderator: General Moderators
-
developer1234
- Forum Newbie
- Posts: 3
- Joined: Sat Jun 24, 2006 7:30 pm
Using javascript variable in PHP without submitting a form?
Last edited by developer1234 on Thu Jul 19, 2012 11:27 pm, edited 1 time in total.
-
developer1234
- Forum Newbie
- Posts: 3
- Joined: Sat Jun 24, 2006 7:30 pm
Any help on exactly how I would use this in my specific scenario?
I've never used XMLHttpRequest before... I've been reading on it but can't figure out exactly how this would work for me.
I need to send the selectedIndex value to the php file using XMLHttpRequest, correct?
Then in the php file I need to open that file and read it.
This is all fine, but then how would I add an option to the select box using this information?
Only way I can think of is echoing the javascript to do so- Which can't be done from a separate file.
Help please.
I've never used XMLHttpRequest before... I've been reading on it but can't figure out exactly how this would work for me.
I need to send the selectedIndex value to the php file using XMLHttpRequest, correct?
Then in the php file I need to open that file and read it.
This is all fine, but then how would I add an option to the select box using this information?
Only way I can think of is echoing the javascript to do so- Which can't be done from a separate file.
Help please.
XMLHttpRequest
I wrote a tutorial on XMLHttpRequest for beginners who are well-versed with other parts of Javascript recently. There's a link to that tutorial in my sig, if you want to give it a read.
-
developer1234
- Forum Newbie
- Posts: 3
- Joined: Sat Jun 24, 2006 7:30 pm
verminox, I read through your tutorial and still cant seem to get it working... this is what i have come up with, and it gives a "type mismatch" error. Can you help me figure out what's wrong?
This is the function called when the "Load" button is pressed.
Assuming IE as browser for now.
and here is loadPlaylist.php
In the php file, I simply hardcode a static option to make sure its formatted right
in the javascript, this line is a little different from what the tutorial shows...
http.onreadystatechange=httpChange();
in the tutorial it doesn't have the parenthesis at the end of the function name. If I do it that way,
I don't get the 'Type Mismatch' error, but nothing happens at all.
Any help would be great- I want to get this figured out. Thanks.
This is the function called when the "Load" button is pressed.
Assuming IE as browser for now.
Code: Select all
function loadPlaylist()
{
var name = saveList.options[saveList.selectedIndex].value;
http = new ActiveXObject("Microsoft.XMLHTTP");
http.onreadystatechange=httpChange();
http.open('GET', "loadPlaylist.php?id=" + name, true);
http.send(null);
}
function httpChange()
{
if(http.readyState==4)
{
var response = http.responseText;
document.getElementById('playList').innerHTML = response;
}
}and here is loadPlaylist.php
Code: Select all
<?php
$name = $_GET['id'];
$File = "ftp://uglyduck.homeip.net/Music/" . $name . ".txt";
$Handle = fopen($File, 'r');
$Data = fgets($Handle);
$Data = substr($Data, 7);
$Data2 = substr($Data, 4);
$data3 = '<option value="/Music/50 Cent - Best Friend.mp3">50 Cent - Best Friend'
fclose($Handle);
echo $data3
?>in the javascript, this line is a little different from what the tutorial shows...
http.onreadystatechange=httpChange();
in the tutorial it doesn't have the parenthesis at the end of the function name. If I do it that way,
I don't get the 'Type Mismatch' error, but nothing happens at all.
Any help would be great- I want to get this figured out. Thanks.
That's correct, you don't need a paranthesis for the onreadystatechange property since that is an event handler, not a function definition.
Now, when defining your function httpChange() , you havn't made sure that this should trigger only after you get a HTTP response header of status 200. That is why, your script is probably terminating when http.responseText is found to be an invalid property. Try using this as your script for IE:
There are a number of ways to debug this script step by step, if it does not work. My best way of debugging other than reading the JS console in Firefox, is simple making the function alert at every important stage of the script to make sure it is doing what you want it to.
For example, you can add alert(http.readyState) in the httpChange() function (this will cause about 5-6 alerts repeatedly), if it does not reach '4' at all, it means there was a problem with your connection.
Once it does that you can make it alert(http.status) to make sure you are getting a response header of 200 otherwise there might be a problem with your php script.
If you are sure that it is reaching 200 then try alert(http.responseText) to make sure you are getting what you want.
I think you know where I am getting at already, so just keep on trying to debug step by step, you often realise you have made silly mistakes like mispelt the name of the file, or something else that you might laugh at later on.
Now, when defining your function httpChange() , you havn't made sure that this should trigger only after you get a HTTP response header of status 200. That is why, your script is probably terminating when http.responseText is found to be an invalid property. Try using this as your script for IE:
Code: Select all
function loadPlaylist()
{
var name = saveList.options[saveList.selectedIndex].value;
http = new ActiveXObject("Microsoft.XMLHTTP");
http.onreadystatechange=httpChange;
http.open('GET', "loadPlaylist.php?id=" + name, true);
http.send(null);
}
function httpChange()
{
if(http.readyState==4)
{
if(http.status==200)
{
var response = http.responseText;
document.getElementById('playList').innerHTML = response;
}
}
}For example, you can add alert(http.readyState) in the httpChange() function (this will cause about 5-6 alerts repeatedly), if it does not reach '4' at all, it means there was a problem with your connection.
Once it does that you can make it alert(http.status) to make sure you are getting a response header of 200 otherwise there might be a problem with your php script.
If you are sure that it is reaching 200 then try alert(http.responseText) to make sure you are getting what you want.
I think you know where I am getting at already, so just keep on trying to debug step by step, you often realise you have made silly mistakes like mispelt the name of the file, or something else that you might laugh at later on.