I need someone to clean up my mess of a nonworking code

[Tools]

I've used quite a lot of time on my website, but for whatever reason, I can't find a tutorial on how to properly update a div with html.

What I've got now:

$count = 0;
$count_2 = 0;
$q = "SELECT * FROM types";
$r = mysql_query($q, $mysql);
html('<table border="0"><font color="#FFFFFF">');
echo '<script type="text/javascript">';

while($data = mysql_fetch_array($r)) {
	$count++;
	$original[$count] = '<div id="divexp"'.$count.'"><tr><td class="off" onmouseover=this.className="on" onmouseout=this.className="off"><a id="link'.$count.'" href="javascript:display(show'.$data[types].', '.$count.')"><img src="./images/'.$data[types].'.gif"></a></td></tr>';
	$epQ = "SELECT * FROM menus WHERE type = '".$data[types]."'";
	$epGet = mysql_query($epQ, $mysql);
	while($epGot = mysql_fetch_array($epGet)) {
		$count_2++;
		$ens[$count_2] = '<tr><td class="off" onmouseover=this.className="on" onmouseout=this.className="off"><a href="?b='.$epGot[link].'"><img src="./images/'.$epGot[shortname].'.gif"></a></td></tr>';
	}
	echo '</div>';
//------From here shit won't work---------
echo 'function display'.$data[types].'(action, id)
{
if (action == \'show\')
{
document.getElementById("divexp"+id).style.display = "block";
document.getElementById("link"+id).href= "javascript:display(\'hide\', "+id+")";
document.getElementById("link"+id).innerHTML = (\''.$original[$count].'\');
}

if (action == \'hide\')
{
document.getElementById("divexp"+id).style.display = "none";
document.getElementById("link"+id).href= "javascript:display(\'show\', "+id+")";
document.getElementById("link"+id).innerHTML = (\''.$original[$count];
foreach($ens as $key=>$value) { echo $ens[$key]; }
echo '\');
}
}
';
}
echo '</script>';
foreach ($original as $key=>$value) {
	echo $original[$key];
}


echo '</font></table>';
mysql_close();
?>

All of the code works, but I can't get the javascript to update the div with the new content.

Link; [url]http://www.scallex.net/[/url]
It's supposed to update the div on the left when you click the square, showing all of my episodes on my website.

[mdakin]

Use jquery. (The .html(); function)

Oh and if(action.

Have you got like $action = $_GET['action']; plus its if($action.

[editline]07:17PM[/editline]

[url=http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas]Like this for an eg[/url]

[Tools]

I don't get it. :confused:

[a2h]

[QUOTE=Wipmuck;19758738]Use jquery. (The .html(); function)

Oh and if(action.

Have you got like $action = $_GET['action']; plus its if($action.

[editline]07:17PM[/editline]

[url=http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas]Like this for an eg[/url][/QUOTE]

jQuery is very nice and useful, but if you're going to have only a tiny bit of very simple JavaScript, otherwise it's unnecessary.

[editline]07:59PM[/editline]

<script type="text/javascript"></div>function displayCartoon(action, id)
{
if (action == 'show')
{
document.getElementById("divexp"+id).style.display = "block";
document.getElementById("link"+id).href= "javascript:display('hide', "+id+")";
document.getElementById("link"+id).innerHTML = ('<div id="divexp"1"><tr><td class="off" onmouseover=this.className="on" onmouseout=this.className="off"><a id="link1" href="javascript:display(showCartoon, 1)"><img src="./images/Cartoon.gif"></a></td></tr>');
}

if (action == 'hide')
{
document.getElementById("divexp"+id).style.display = "none";
document.getElementById("link"+id).href= "javascript:display('show', "+id+")";
document.getElementById("link"+id).innerHTML = ('<div id="divexp"1"><tr><td class="off" onmouseover=this.className="on" onmouseout=this.className="off"><a id="link1" href="javascript:display(showCartoon, 1)"><img src="./images/Cartoon.gif"></a></td></tr><tr><td class="off" onmouseover=this.className="on" onmouseout=this.className="off"><a href="?b=sp"><img src="./images/sp.gif"></a></td></tr><tr><td class="off" onmouseover=this.className="on" onmouseout=this.className="off"><a href="?b=bl"><img src="./images/bl.gif"></a></td></tr>');
}
}
</script><div id="divexp"1">

Use "View Source" to check out any issues in your code, there's two immediately obvious; there's HTML in a <script> tag, and the issue with the div at the end of the snippet there is self-explanatory.

[editline]08:01PM[/editline]

By "HTML in a <script> tag" I mean HTML outside of a string or anything like that.

Also, if you have Firefox, use Firebug, if you have Safari Mac/Chrome use the debug tools, IE has debug tools as well

[Tools]

But that's what I want it to do. I want it to update the page with new menus and such, but it doesn't work cause I can't add all the code into the innerHTML, and I have no alternative, except for jQuery which I have no idea of how to use. :l

[mdakin]

Tis'nt hard me boy.

[andersonmat]

[QUOTE=Wipmuck;19759384]Tis'nt hard me boy.[/QUOTE]

It isn't hard yet you can't offer a viable solution except "LOL USE JQUERY". :downs:

[a2h]

[QUOTE=Tools;19759337]But that's what I want it to do. I want it to update the page with new menus and such, but it doesn't work cause I can't add all the code into the innerHTML, and I have no alternative, except for jQuery which I have no idea of how to use. :l[/QUOTE]

jQuery is a collection of functions and methods to make JavaScript programming easier/faster. You [B]do not[/B] necessarily need it, and some people encourage getting familiar with JS first, which is a good idea.

As for your code, I might take a look at it later, or someone else might, because by taking a quick glance it seems to be a giant mix of PHP and JavaScript, a method which I don't like to use for any non-minor components.

[Tools]

I tried it, but I can't get it to work properly for some reason.

while($data = mysql_fetch_array($r)) {
	echo '<script type="text/javascript">';
	echo "$('#div".$data[types]."').click(function() {
	$('#ep".$data[types]."').slideToggle('slow', function() {
	//It worked!
	});
	});";
	echo '</script>';
	
	html('<div id="div'.$data[types].'"><tr><td class="off" onmouseover=this.className="on" onmouseout=this.className="off"><img src="./images/'.$data[types].'.gif"></td></tr></div>');
	$epQ = "SELECT * FROM menus WHERE type = '".$data[types]."'";
	$epGet = mysql_query($epQ, $mysql);
	html('<ep'.$data[types].'>');
	while($epGot = mysql_fetch_array($epGet)) {
		html('<tr><td class="off" onmouseover=this.className="on" onmouseout=this.className="off"><a href="?b='.$epGot[link].'"><img src="./images/'.$epGot[shortname].'.gif"></a></td></tr>');
	}
	echo '</ep'.$data[types].'>';

}

[a2h]

Oh, good god...

I... I... want to spew.

OK.

I have a very strong urge to completely rewrite your code, but that's not the best thing to do.

Here's a list for you with extensive formatting to ensure you [b]actually read things[/b]

1. :siren: [highlight][u][b]JavaScript is not in any way or form at all integrated into PHP at all. Nothing. Zero. Nada. Zilch. And neither is jQuery.[/b][/u][/highlight] :siren:
2. [b]Does your editor have syntax highlighting?[/b] Your posted code already has [B]extremely obvious[/B] unescaped strings, which [B]shows up in the syntax highlighting[/B] here on Facepunch
3. What the hell is your function in PHP "html" meant to do?
4. <ep>? That's [B]not a tag in HTML[/B]
5. I don't get what you're doing that well but from the looks of it you're wanting to output every single piece of data from the table for a non user input element a user is not guaranteed to click, if you are, that's an extremely bad idea

[Tools]

I'm not combining javascript and php, I'm printing it out for the browser to read.
Yes I'm using notepad++
html is just echo but with \n\r at the end. Makes it easier to read the code.
<ep> was supposed to work as a <div id="">, but didn't.
I'm making a simple form for menu, where you click on something and some new menu options appear.

[a2h]

OK, on close inspection of your code, it appears it's the forum's syntax highlighter (dp.SyntaxHighlighter) at fault. Speaking of which, an old version is being used here.

Anyway, you really need to provide what errors PHP is throwing.

I can't help you much otherwise without carefully looking at the code, but I'll just say from the looks of it, you're repeatedly outputting the same code.

Here:
<div id="div'.$data[types].'">

Add a class to it.

Say the class is called "unladenswallow".

This code:

     echo '<script type="text/javascript">';  
     echo "$('#div".$data[types]."').click(function() {  
     $('#ep".$data[types]."').slideToggle('slow', function() {  
     //It worked!  
     });  
     });";  
     echo '</script>';

Move it outside of the while loop and change $('#div".$data[types]."') into $(".unladenswallow") - this also opens the possibility of the piece of JS not having to be inside PHP code.

[Tools]

All the PHP is working just fine, it's the jQuery that I can't get working.

[mdakin]

I think he means html as .html (jquery).

$(this).html('html shit here');

[a2h]

[QUOTE=Tools;19778299]All the PHP is working just fine, it's the jQuery that I can't get working.[/QUOTE]

What browser are you using? If it's IE8/Safari Mac/Chrome you have web developer tools preloaded, if you have Firefox, get Firebug.

Open Firebug/web developer tools, see if the console returns any errors

[mdakin]

Check to see if your jquery version/file is right, because i found some stuff that i use doesn't work in 1.4, only 1 .3.2.

[a2h]

[QUOTE=Wipmuck;19779057]Check to see if your jquery version/file is right, because i found some stuff that i use doesn't work in 1.4, only 1 .3.2.[/QUOTE]

There's a list of breaking changes on the jQuery 14 days website.

[Tools]

Fixed a bug using Firebug, but it still doesn't work.

I moved the div tag around the image, so that when you click the image it's supposed to expand, however it doesn't.

[url]http://dk.scallex.net/[/url]

[a2h]

Uh... you have multiple elements with the same id. Try and learn the difference between classes and ids.

[DJ Biscuit]

I cleaned up your code a bit, I am still looking for whats wrong in the bit that doesn't work, but this may help someone else try and find your problem.

<?php
$count = 0;
$count_2 = 0;

echo '
<table border="0"><font color="#FFFFFF">
<script type="text/javascript">';

$r = mysql_query("SELECT `types`.*, `menus`.`link`, `menus`.`shortname` FROM `types`
	INNER JOIN `menus` ON `types`.`types`=`menus`.`type`", $mysql);
while($data = mysql_fetch_array($r)) {
	$count++;
	$count_2++;
	$original[$count] = '<div id="divexp"'. $count .'"><tr><td class="off" onmouseover=this.className="on" onmouseout=this.className="off"><a id="link'. $count .'" href="javascript<b></b>:display(show'. $data['types'] .', '. $count .')"><img src="./images/'. $data['types'] .'.gif"></a></td></tr>';
	$ens[$count_2] = '<tr><td class="off" onmouseover=this.className="on" onmouseout=this.className="off"><a href="?b='. $epGot['link'] .'"><img src="./images/'. $epGot['shortname'] .'.gif"></a></td></tr>';
	echo '</div>';
	//------From here shit won't work---------
	echo '
	function display'. $data['types'] .'(action, id){
		if (action == \'show\'){
			document.getElementById("divexp"+id).style.display = "block";
			document.getElementById("link"+id).href= "javascript<b></b>:display(\'hide\', "+id+")";
			document.getElementById("link"+id).innerHTML = (\''. $original[$count] .'\');
		}
		if (action == \'hide\'){
			document.getElementById("divexp"+id).style.display = "none";
			document.getElementById("link"+id).href= "javascript<b></b>:display(\'show\', "+id+")";
			document.getElementById("link"+id).innerHTML = (\'. $original[$count]; foreach($ens as $key=>$value) {
				echo $ens[$key]; 
			}
			echo \'\');
		}
	}';
}
echo '</script>';
foreach ($original as $key=>$value) {
	echo $original[$key];
}

echo '</font></table>';
mysql_close();
?>

I also cleaned up your SQL query, I didn't test the new query since I don't have your database, but it should work.