Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 04-16-2011, 01:44 AM   PM User | #1
darkapec
New to the CF scene

 
Join Date: Apr 2011
Posts: 5
Thanks: 2
Thanked 0 Times in 0 Posts
darkapec is an unknown quantity at this point
How to replace "space" with %20

Hello, I am new to the forum and hoping to find some quick assistance. I have been struggling to fix this issue for quite sometime. My code is below

HTML / JAVASCRIPT
Code:
<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Darkapec Movie Player</title>
<script type="text/javascript" src="ss1.js">
</script>
</head>
<body>
<h1>Darkapec Movie Player</h1>
<b>Video location  :<?php require("movies.php");?>
<input type="button" onclick='ld()' value="Load" />
<div id="id1"></div>
<div id="nowt"></div>
    <script type="text/javascript">
    function ld(){
    document.write("<html><!DOCTYPE HTML PUBLIC \"-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN\"http\:\/\/www.w3.org\/TR\/html4\/loose.dtd><html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\" xml:lang=\"en\" lang=\"en\"><head><title>Darkapec Movie Player</title><script type=\"text\/javascript\" src=\"ss1.js\"><\/script><script type=\"text\/javascript\" src=\"fun1.js\"><\/script><\/head><body><h1>Darkapec Movie Player<\/h1><br/><embed type=\"application/x-vlc-plugin\" name=\"video1\" id=\"vlc\"  autoplay=\"yes\"  loop=\"no\"   width=\"640\"  height=\"480\"  target=\"/movies/"+document.getElementById("id4").value+"\"/><div id=\"nowt\"></div><div id=\"id1\"></div><div id=\"id2\"></div><script type=\"text\/javascript\" src=\"fun1.js\"><\/script><br/><input type=\"button\" onclick='pl()' value=\"Play\" /><input type=\"button\" onclick=\'ps()\' value=\"Pause\" /><input type=\"button\" onclick=\'st()\' value=\"Stop\" /><input type=\"button\" onclick=\'vlc.audio.toggleMute()\' value=\"Mute\" /><br/><b>width  :</b><input type=\"text\" id=\"i1\"/><br/><b>height :</b><input type=\"text\" id=\"i2\"/><br/><input type=\"button\" onclick=\'aspectRatio()\' value=\"Adjust Screen\" />");
     }
    </script>
<br/>
</body>
</html>
Second page of code is all PHP
Code:
<?php
$dir="/backup/Movies";
///$dir="C:/xampp/htdocs/php/backup/Movies";
$files = array();
if ($handle = opendir($dir)) {
	while (false !== ($file = readdir($handle)))
	{
		if ($file != "." && $file != ".." && $file != "index.php" && $file != "New Movies" && $file != "Icons" && $file != "Tv Shows")
		{
			$files[] = $file;
		}
	}
	closedir($handle);
}
sort($files)
?>
<form action="listen.php" method="post" name="table">
<select name="Movie" id="id4">
<p>
<?php
	$tmp = array();
	foreach ($files as $file) {
		$tmp[] = "<option value='$file'>$file</option>";
	}
	echo implode("\n",$tmp) . "\n";
?>
</p>
</select>
</form>
Basically the php gives the javascript a list of movies located in my directory, I am able to successfully launch any movie not containing a "space." I changed the code a little bit to allow for a "text input" and manually typed the name of a movie with %20 instead of a space and it worked. So I would like to modify the above code to do this automatically without visibly changing the movie titles. I am not sure where I should change the code.

Thanks in advance
Jake

Last edited by darkapec; 04-16-2011 at 01:48 AM..
darkapec is offline   Reply With Quote
Old 04-16-2011, 01:52 AM   PM User | #2
Old Pedant
Supreme Master coder!

 
Old Pedant's Avatar
 
Join Date: Feb 2009
Posts: 23,248
Thanks: 59
Thanked 3,999 Times in 3,968 Posts
Old Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to all
It would help a *LOT* if you would say WHERE the space is wrong.

It *looks* to me like you mean here:
Code:
... target=\"/movies/"+document.getElementById("id4").value+"\"/>...
???

If so, the just change that to
Code:
... target=\"/movies/"+escape(document.getElementById("id4").value)+"\"/>...
If not, tell us where the problem is.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Old Pedant is offline   Reply With Quote
Users who have thanked Old Pedant for this post:
darkapec (04-16-2011)
Old 04-16-2011, 01:53 AM   PM User | #3
Old Pedant
Supreme Master coder!

 
Old Pedant's Avatar
 
Join Date: Feb 2009
Posts: 23,248
Thanks: 59
Thanked 3,999 Times in 3,968 Posts
Old Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to all
Note: If escape() doesn't work (it should), try encodeURIComponent( )
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Old Pedant is offline   Reply With Quote
Users who have thanked Old Pedant for this post:
darkapec (04-16-2011)
Old 04-16-2011, 11:27 AM   PM User | #4
darkapec
New to the CF scene

 
Join Date: Apr 2011
Posts: 5
Thanks: 2
Thanked 0 Times in 0 Posts
darkapec is an unknown quantity at this point
still not working

First of all thank you very much for your reply. I tried both (escape() and encodeURIComponent()) both for whatever reason made my document.write output /movies/undefined as apposed to /movies/movietitle. If anyone has any other ideas I would be great full. In the mean time I will continue googling for the solution.

yes I do believe the code in question is
Code:
... target=\"/movies/"+document.getElementById("id4").value+"\"/>...
Thanks again
Jake

Last edited by darkapec; 04-16-2011 at 11:40 AM..
darkapec is offline   Reply With Quote
Old 04-16-2011, 12:24 PM   PM User | #5
oesxyl
Master Coder


 
Join Date: Dec 2007
Posts: 6,682
Thanks: 436
Thanked 890 Times in 879 Posts
oesxyl is a jewel in the roughoesxyl is a jewel in the roughoesxyl is a jewel in the rough
Quote:
Originally Posted by darkapec View Post
First of all thank you very much for your reply. I tried both (escape() and encodeURIComponent()) both for whatever reason made my document.write output /movies/undefined as apposed to /movies/movietitle. If anyone has any other ideas I would be great full. In the mean time I will continue googling for the solution.

yes I do believe the code in question is
Code:
... target=\"/movies/"+document.getElementById("id4").value+"\"/>...
Thanks again
Jake
both eacape and encodeURIComponent work, your problems is that 'id4' is the id of a select element, there is no value for select.

http://www.javascriptkit.com/jsref/select.shtml

use something like this:
Code:
var sel = document.getElementById("id4");

... target=\"/movies/"+ escape(sel.options[sel.selectedIndex]) +"\"/>...
best regards
oesxyl is offline   Reply With Quote
Old 04-16-2011, 09:00 PM   PM User | #6
Old Pedant
Supreme Master coder!

 
Old Pedant's Avatar
 
Join Date: Feb 2009
Posts: 23,248
Thanks: 59
Thanked 3,999 Times in 3,968 Posts
Old Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to all
Doesn't make sense, oesxyl. How did the code work, at all, before he used escape().

In any case, if you use sel.options[sel.selectedIndex] you will be getting an Option *object*.

You need to get either the .value or the .text of the Option:
Code:
sel.options[sel.selectedIndex].value
or
sel.options[sel.selectedIndex].text
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Old Pedant is offline   Reply With Quote
Users who have thanked Old Pedant for this post:
oesxyl (04-16-2011)
Old 04-16-2011, 09:12 PM   PM User | #7
oesxyl
Master Coder


 
Join Date: Dec 2007
Posts: 6,682
Thanks: 436
Thanked 890 Times in 879 Posts
oesxyl is a jewel in the roughoesxyl is a jewel in the roughoesxyl is a jewel in the rough
Quote:
Originally Posted by Old Pedant View Post
Doesn't make sense, oesxyl. How did the code work, at all, before he used escape().
Code:
<form action="listen.php" method="post" name="table">
<select name="Movie" id="id4">
<p>
<?php
	$tmp = array();
	foreach ($files as $file) {
		$tmp[] = "<option value='$file'>$file</option>";
	}
	echo implode("\n",$tmp) . "\n";
?>
</p>
</select>
</form>
this is the from op post #1 and is the reason why i jump to conclusion that using document.getElementById('id4').value doesn't work. How it work before i have no idea,

Quote:
In any case, if you use sel.options[sel.selectedIndex] you will be getting an Option *object*.

You need to get either the .value or the .text of the Option:
Code:
sel.options[sel.selectedIndex].value
or
sel.options[sel.selectedIndex].text
yes, you are right about object vs. value/text, is my fault. Thank you,

best regards
oesxyl is offline   Reply With Quote
Old 04-16-2011, 10:57 PM   PM User | #8
Old Pedant
Supreme Master coder!

 
Old Pedant's Avatar
 
Join Date: Feb 2009
Posts: 23,248
Thanks: 59
Thanked 3,999 Times in 3,968 Posts
Old Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to all
But all modern browsers *DO* support getting the .value of a <select>.

Basically, you can do document.someSelect.value and it is the equivalent of doing document.someSelect.options[document.someSelect.selectedIndex].value

There were many browser back in the early days that did not support this, but MSIE introduced it (I think in MSIE 5) and current browsers all follow suit. Or at least all that I tested: MSIE, Firefox, Chrome.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Old Pedant is offline   Reply With Quote
Old 04-16-2011, 11:46 PM   PM User | #9
bullant
Banned

 
Join Date: Feb 2011
Posts: 2,699
Thanks: 13
Thanked 395 Times in 395 Posts
bullant is on a distinguished road
Quote:
Originally Posted by darkapec View Post
I changed the code a little bit to allow for a "text input" and manually typed the name of a movie with %20 instead of a space and it worked. So I would like to modify the above code to do this automatically without visibly changing the movie titles. I am not sure where I should change the code.
There are a few functions you can use to encode special characters in a url.

I normally use encodeURI() unless I have to encode these chars as well - , / ? : @ & = + $ #. encodeURIcomponent() encodes these characters as well.

Parameter values in $_GET and $_POST are automatically decoded when they are received by your php script.
bullant is offline   Reply With Quote
Old 04-20-2011, 12:00 AM   PM User | #10
darkapec
New to the CF scene

 
Join Date: Apr 2011
Posts: 5
Thanks: 2
Thanked 0 Times in 0 Posts
darkapec is an unknown quantity at this point
wow, some of this stuff is beyond my capabilities. Originally I had this
Code:
<b>Video location  :</b><input type="text" id="id4"/>
that of course required me to type the name into the box and that did work. But it also would require the %20 to be typed in instead of spaces. This also caused problems because I did not know what file extension my movies had. So I thought using a php script to grab the name of the movies would eliminate the need for needing to know the file extension and that worked great. However I am still having the %20 issue. That should answer your questions about "how did it ever work before." The script still does work, wonder if there is a way to re incorporate the "id4" value? Then just use escape(). I understand the escape() I have used it in the past but I am unfamiliar with the rest of the suggestions.

Thanks again for everyones help, hopefully I will get this figured out pretty soon.
darkapec is offline   Reply With Quote
Old 04-20-2011, 12:19 AM   PM User | #11
Old Pedant
Supreme Master coder!

 
Old Pedant's Avatar
 
Join Date: Feb 2009
Posts: 23,248
Thanks: 59
Thanked 3,999 Times in 3,968 Posts
Old Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to all
encodeURIComponent() is just a more complete version of escape().

Handles more of the special character situations than escape() does.

If escape() works for you, use it. If not, try encodeURIComponent().
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Old Pedant is offline   Reply With Quote
Old 04-20-2011, 12:38 AM   PM User | #12
bullant
Banned

 
Join Date: Feb 2011
Posts: 2,699
Thanks: 13
Thanked 395 Times in 395 Posts
bullant is on a distinguished road
Quote:
Originally Posted by darkapec View Post
wow, some of this stuff is beyond my capabilities
...
Thanks again for everyones help, hopefully I will get this figured out pretty soon.
No problem

So to summarise:

If you need to just encode spaces and other special chars you can use encodeURI()

If you need to encode additional chars , / ? : @ & = + $ # you can use encodeURIcomponent()

If you need more help, just post back

Last edited by bullant; 04-20-2011 at 12:41 AM..
bullant is offline   Reply With Quote
Old 04-21-2011, 12:27 AM   PM User | #13
darkapec
New to the CF scene

 
Join Date: Apr 2011
Posts: 5
Thanks: 2
Thanked 0 Times in 0 Posts
darkapec is an unknown quantity at this point
Thanks again for all the suggestions, here is what I ended up doing
Code:
<script type="text/javascript">
   var a=document.getElementById("id6").value;
     var b=a.replace(/\s/g,"%20");
    function ld(){
    document.write("<html><!DOCTYPE HTML PUBLIC \"-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN\"http\:\/\/www.w3.org\/TR\/html4\/loose.dtd><html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\" xml:lang=\"en\" lang=\"en\"><head><title>Darkapec Movie Player</title><script type=\"text\/javascript\" src=\"ss1.js\"><\/script><script type=\"text\/javascript\" src=\"fun1.js\"><\/script><\/head><body><h1>Darkapec Movie Player<\/h1><br/><embed type=\"application/x-vlc-plugin\" name=\"video1\" id=\"vlc\"  autoplay=\"yes\"  loop=\"no\"   width=\"640\"  height=\"480\"  target=\""+b+"\"/><div id=\"nowt\"></div><div id=\"id1\"></div><div id=\"id2\"></div><script type=\"text\/javascript\" src=\"fun1.js\"><\/script><br/><input type=\"button\" onclick='pl()' value=\"Play\" /><input type=\"button\" onclick=\'ps()\' value=\"Pause\" /><input type=\"button\" onclick=\'st()\' value=\"Stop\" /><input type=\"button\" onclick=\'vlc.audio.toggleMute()\' value=\"Mute\" /><br/><b>width  :</b><input type=\"text\" id=\"i1\"/><br/><b>height :</b><input type=\"text\" id=\"i2\"/><br/><input type=\"button\" onclick=\'aspectRatio()\' value=\"Adjust Screen\" />");
     }
      </script>
It just seemed to work the best. I kept running into issues with the escape().

Now I am looking at how to set this up so load directories or load multiple directories and populate the list. But that question is more for a PHP forum.

Thanks again guys for all your help I will definitely be back to this community.
darkapec is offline   Reply With Quote
Old 04-21-2011, 12:35 AM   PM User | #14
bullant
Banned

 
Join Date: Feb 2011
Posts: 2,699
Thanks: 13
Thanked 395 Times in 395 Posts
bullant is on a distinguished road
no problem
bullant is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 11:44 PM.


Advertisement
Log in to turn off these ads.