PHP breaking Javascript

[shyish]

Ok well I have my PHP code working.. it auto finds the news.

I also have some Javascript, using mootools, that gives sliding open/closed news articles on click of a button.

Of course each news box needs to have a different div ID, and corresponding div ID in the JS file.

But the PHP script causes all of the news boxes to have the same div ID, thus breaking the JS code and stopping it from working at all.

So I tried adding a table in the databse for the div id so it has

<div ID="articlemain#"> style of thing, each with a different number, then I place <?PHP echo $div ?> for whereever I need to place the code of course.

Except the JS still wont work...

 

any idea how I should go about fixing this?

 

Thanks.

[peter_anderson]

Can you post your code, if possible?

[shyish]

for which? The PHP, the JS or both?

[ignace]

for which? The PHP, the JS or both?

 

both

[shyish]

<?php
$host="localhost";
$username="root";
$password="XXXXX";
$database="vd";

mysql_connect($host,$username,$password);
@mysql_select_db($database) or die( "Unable to select database");
$query="SELECT * FROM articles";
$result=mysql_query($query);

$num=mysql_numrows($result);

mysql_close();
?>
<?php
$i=0;
while ($i < $num) {

$title=mysql_result($result,$i,"title");
$author=mysql_result($result,$i,"Author");
$body=mysql_result($result,$i,"body");
$time=mysql_result($result,$i,"time");
$id=mysql_result($result,$i,"id");
$div=mysql_result($result,$i,"div");
?>      
          <div id="articleheader">
            <table width="100%" height="44px" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td background="images/headernav_bg_l.jpg" width="17px"></td>
                <td background="images/headernav_bg.jpg" width="466px"><img src="images/newsicons/VD.PNG" /> <?PHP echo $title ?></td>
                <td background="images/headernav_bg_r.jpg"  width="17px">
                <a id="v_toggle2" href="#" onclick="changeMySrc(1)" onMouseover="change_img()" onMouseout="change_back()"><img id="Img1" src="images/newsicons/expand.png"/></a>                </td>
              </tr>
            </table>
            
          </div>
<div id="articlemainbox2">
<table width="480px;" left-padding="15px" border="0" cellspacing="0" cellpadding="5">
  <tr>
    <td background="images/article-bg.png"><div align="center" class="articlemain">
      <div align="left">
<?php echo $body ?>
      </div>
    </div></td>
    </tr>
  <tr>
    <td height="45px" background="images/newsbox_bg_bottom.png" class="articlemain">Written By <?PHP echo $author ?> | <?PHP echo $time ?></td>
    </tr>
</table>

</div><br /><br />    

<?php
$i++;
}
?>

 

window.addEvent('domready', function() {
var status = {
	'true': 'open',
	'false': 'close'
};

//-vertical

var myVerticalSlide1 = new Fx.Slide('articlemainbox1');

$('v_slidein').addEvent('click', function(e){
	e.stop();
	myVerticalSlide1.slideIn();
});

$('v_slideout').addEvent('click', function(e){
	e.stop();
	myVerticalSlide1.slideOut();
});

$('v_toggle').addEvent('click', function(e){
	e.stop();
	myVerticalSlide1.toggle();
});

$('v_hide').addEvent('click', function(e){
	e.stop();
	myVerticalSlide1.hide();
	$('vertical_status').set('html', status[myVerticalSlide1.open]);
});

$('v_show').addEvent('click', function(e){
	e.stop();
	myVerticalSlide1.show();
	$('vertical_status').set('html', status[myVerticalSlide1.open]);
});

// When Vertical Slide ends its transition, we check for its status
// note that complete will not affect 'hide' and 'show' methods
myVerticalSlide.addEvent('complete', function() {
	$('vertical_status').set('html', status[myVerticalSlide.open]);
});


//-vertical2

var myVerticalSlide2 = new Fx.Slide('articlemainbox2');

$('v_slidein').addEvent('click', function(e){
	e.stop();
	myVerticalSlide2.slideIn();
});

$('v_slideout2').addEvent('click', function(e){
	e.stop();
	myVerticalSlide2.slideOut();
});

$('v_toggle2').addEvent('click', function(e){
	e.stop();
	myVerticalSlide2.toggle();
});

$('v_hide2').addEvent('click', function(e){
	e.stop();
	myVerticalSlide2.hide();
	$('vertical_status').set('html', status[myVerticalSlide2.open]);
});

$('v_show2').addEvent('click', function(e){
	e.stop();
	myVerticalSlide2.show();
	$('vertical_status').set('html', status[myVerticalSlide2.open]);
});


//-vertical3

var myVerticalSlide3 = new Fx.Slide('articlemainbox3>');

$('v_slidein').addEvent('click', function(e){
	e.stop();
	myVerticalSlide3.slideIn();
});

$('v_slideout3').addEvent('click', function(e){
	e.stop();
	myVerticalSlide3.slideOut();
});

$('v_toggle<?PHP echo $id ?>').addEvent('click', function(e){
	e.stop();
	myVerticalSlide3.toggle();
});

$('v_hide3').addEvent('click', function(e){
	e.stop();
	myVerticalSlide3.hide();
	$('vertical_status').set('html', status[myVerticalSlide3.open]);
});

$('v_show3').addEvent('click', function(e){
	e.stop();
	myVerticalSlide3.show();
	$('vertical_status').set('html', status[myVerticalSlide3.open]);
});

[shyish]

Bump? Please, need some help with this D: