How To Change Javascript Variables By Foreach

Hi All

I created images slider in clear php and it was worked . but when I changed it under Yii image not loaded because :

  • java script block not load image numbers .

  • I don’t know how I can load javascript block with change variables in yii like php

File :




	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

  	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

 	<head>

  	<title>jquery sliders</title>

  	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

  	<script type="text/javascript">var _siteRoot='index.html',_root='index.php';</script>

  	<script type="text/javascript" src="js/jquery.js"></script>

  	<script type="text/javascript" src="js/scripts.js"></script>

  	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

	

	<script type="text/javascript" src="newscript.js"></script>

 	</head>

 	<body>

 	

  	<!--/top-->

  	<div id="header"><div class="wrap">

   	<div id="slide-holder">

	<div id="slide-runner">

	<?php

            	include("samiloxide.php");

	//if(!$_POST['page']) die("0");

	

	

	$section=intval($_GET['section']);

	

	$i=1;

	$j=array();

	

	$sql=mysql_query(" select * from images order by section ");

	

	

	

	while($rr=mysql_fetch_array($sql)){

  	echo	"<a href=''><img id='slide-img-$i' src='$rr[image]' class='slide' alt='' /></a>";

       	$j[]=$i;

       	

       	$i=$i+1;

       	

       	

       	

   	

       	

        	} 	

   	?>

  	

   	

   	

    	<div id="slide-controls">

     	<p id="slide-client" class="text"><strong>post: </strong><span></span></p>

     	<p id="slide-desc" class="text"></p>

     	<p id="slide-nav"></p>

     	

   	

    	</div>

	</div>

		

		<!--content featured gallery here -->

   	</div>

   	<script type="text/javascript">

    	if(!window.slider) var slider={

      	

    	};

     	slider.data=[

    	<?php 

  	foreach($j as $value){	

	

	echo  "   

  	{ 'id':'slide-img-$value',

    	'client':'First one ',

    	'desc':'nature beauty photography'},

   	" ;

   	}  

   	?>

   	

   	

   	];

   	</script>

  	</div></div><!--/header-->

 	</body>

	</html>




Just I need to change javascript :




	<script type="text/javascript">

        	if(!window.slider) var slider={

          	

        	};

         	slider.data=[

        	<?php 

      	foreach($j as $value){	

    	

    	echo  "   

      	{ 'id':'slide-img-$value',

        	'client':'Some text  ',

        	'desc':'image description '},

       	" ;

       	}  

       	?>

       	

       	

       	];

       	</script>

To work under Yii ?

Thanks in advance .




<script type="text/javascript">

  if(!window.slider) var slider={ };

  slider.data=[

  <?php

    $js = array_map(function($value) {

      return "{'id':'slide-img-$value', 'client':'Some text', 'desc':'image description'}";

    }, $j);

    echo implode(',', $js);

  ?>      

  ];

</script>



Thank you , Can you please give me more details .

Does your SQL query return any results?

yes , I checked open source code and it’s work

Alex , your array loop work and print values but my problem is java script effect not work in yii with

<script type="text/javascript">

</script>

How can i change it to work ?

Do you have a copy of this page online so i can view the output?

First thank you Alex , my bro

NO , I had no copy online because it’s just I tested some effect like slider related to multi sections . but I know the problem now

Images in controller not load :(

my controller :





<?php


class SliderController extends Controller

{

	

	public $j;

	public function actionIndex()

	{


  

  

  

  $id=$_GET['id'];







$i=1;

$j=array();




  echo '

  <div id="header"><div class="wrap">

   <div id="slide-holder">

<div id="slide-runner">';




$images=Yii::app()->db->createCommand(" select * from images  where section='$id' ")->setFetchMode(PDO::FETCH_OBJ) ;


foreach($images->queryAll() as $image){

	

  echo	"<a href=''><img id='slide-img-$i' src='$image->image' class='slide' alt='' /></a>";

 

   	$j[]=$i;

   	

   	$i=$i+1;

   	

   	

   	

 

    	} 	

   

  

   

  	

   echo '<div id="slide-controls">

 	<p id="slide-client" class="text"><strong>post: </strong><span></span></p>

 	<p id="slide-desc" class="text"></p>

 	<p id="slide-nav"></p>

 	

   

	</div>

	

</div>

</div>




' ;





 

	

	}

	

	

}

	?>






View :




<?php

/* @var $this MysliderController */


$this->breadcrumbs=array(

	'Myslider',

);

?>





 <table>

<tr>

	<td  style="background-color: black;">

<?php







  

foreach($sections as $section){

 


echo CHtml::ajaxLink(

	$section->section,

	array('slider/index','id' =>$section->id), // Yii URL

	array('update' => '#pageContent') // jQuery selector

);

echo "<br/>";

}




 

	




   

  //// Load Jquery 

  

  $j=array();

 

 

  $j=array("1", "2","3","4","5","6");


?>

</td>

</tr>

</table>


<div id="pageContent"></div>


<script type="text/javascript">

  if(!window.slider) var slider={ };

  slider.data=[

  <?php

	$js = array_map(function($value) {

  	return "{'id':'slide-img-$value', 'client':'Some text', 'desc':'image description'}";

	}, $j);

	echo implode(',', $js);

  ?>  	

  ];

</script>







I’ts just simple and i added array $j just to test your idea :)

Thanks in advance

Does this




echo  "<a href=''><img id='slide-img-$i' src='{$image->image}' class='slide' alt='' /></a>";



or this




echo  '<a href=""><img id="slide-img-', $i, '" src="', $image->image, '" class="slide" alt="" /></a>';



work?

This work :




echo  '<a href=""><img id="slide-img-', $i, '" src="', $image->image, '" class="slide" alt="" /></a>';



and this is html source , but not printed anything :(





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head> 

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

	<meta name="language" content="en" /> 

 


	<!-- blueprint CSS framework --> 

	<link rel="stylesheet" type="text/css" href="[url="http://localhost/yiislider/css/screen.css"]/yiislider/css/screen.css[/url]" media="screen, projection" /> 

	<link rel="stylesheet" type="text/css" href="[url="http://localhost/yiislider/css/print.css"]/yiislider/css/print.css[/url]" media="print" /> 

	<!--[if lt IE 8]>

	<link rel="stylesheet" type="text/css" href="/yiislider/css/ie.css" media="screen, projection" />

	<![endif]--> 

 


	<link rel="stylesheet" type="text/css" href="[url="http://localhost/yiislider/css/main.css"]/yiislider/css/main.css[/url]" /> 

	<link rel="stylesheet" type="text/css" href="[url="http://localhost/yiislider/css/form.css"]/yiislider/css/form.css[/url]" /> 

 


<!-- Slider  --> 

	<link rel="stylesheet" type="text/css" href="[url="http://localhost/yiislider/css/style.css"]/yiislider/css/style.css[/url]" /> 

 


<!-- /Slider  --> 

	<script type="text/javascript" src="[url="http://localhost/yiislider/js/scripts.js"]/yiislider/js/scripts.js[/url]"></script> 

<script type="text/javascript" src="[url="http://localhost/yiislider/js/newscript.js"]/yiislider/js/newscript.js[/url]"></script> 

<title>Test Slider  - Test</title> 

 


 


 


</head> 

 


<body> 

 


<div class="container" id="page"> 

 


	<div id="header"> 

		<div id="logo">Test Slider </div> 

	</div><!-- header --> 

 


	<div id="mainmenu"> 

		<ul id="yw0"> 

<li><a href="[url="http://localhost/yiislider/index.php/site/index"]/yiislider/index.php/site/index[/url]">Home</a></li> 

<li><a href="[url="http://localhost/yiislider/index.php/site/page?view=about"]/yiislider/index.php/site/page?view=about[/url]">About</a></li> 

<li><a href="[url="http://localhost/yiislider/index.php/site/contact"]/yiislider/index.php/site/contact[/url]">Contact</a></li> 

<li><a href="[url="http://localhost/yiislider/index.php/site/login"]/yiislider/index.php/site/login[/url]">Login</a></li> 

</ul>	</div><!-- mainmenu --> 

			<div class="breadcrumbs"> 

<a href="[url="http://localhost/yiislider/index.php"]/yiislider/index.php[/url]">Home</a> &raquo; <span>Test</span></div><!-- breadcrumbs --> 

	


	<div id="content"> 

	<link rel="stylesheet" type="text/css" href=[url="http://localhost/yiislider/css/style.css%22"]/yiislider/css/style.css"[/url] /> 

        


      


  <div id="header"><div class="wrap"> 

   <div id="slide-holder"> 

<div id="slide-runner"><a href=""><img id="slide-img-1" src="[url="http://blogs-images.forbes.com/daviddisalvo/files/2012/01/googlelogo2.jpg"]http://blogs-images.forbes.com/daviddisalvo/files/2012/01/googlelogo2.jpg[/url]" class="slide" alt="" /></a><a href=""><img id="slide-img-2" src="[url="http://www.lilibirds.com/gallery2/d/257-4/northern_flicker_1.jpg"]http://www.lilibirds.com/gallery2/d/257-4/northern_flicker_1.jpg[/url]" class="slide" alt="" /></a><a href=""><img id="slide-img-3" src="[url="http://blogs-images.forbes.com/daviddisalvo/files/2012/01/googlelogo2.jpg"]http://blogs-images.forbes.com/daviddisalvo/files/2012/01/googlelogo2.jpg[/url]" class="slide" alt="" /></a><a href=""><img id="slide-img-4" src="[url="http://blogs-images.forbes.com/daviddisalvo/files/2012/01/googlelogo2.jpg"]http://blogs-images.forbes.com/daviddisalvo/files/2012/01/googlelogo2.jpg[/url]" class="slide" alt="" /></a><a href=""><img id="slide-img-5" src="[url="http://blogs-images.forbes.com/daviddisalvo/files/2012/01/googlelogo2.jpg"]http://blogs-images.forbes.com/daviddisalvo/files/2012/01/googlelogo2.jpg[/url]" class="slide" alt="" /></a><a href=""><img id="slide-img-6" src="[url="http://blogs-images.forbes.com/daviddisalvo/files/2012/01/googlelogo2.jpg"]http://blogs-images.forbes.com/daviddisalvo/files/2012/01/googlelogo2.jpg[/url]" class="slide" alt="" /></a><div id="slide-controls"> 

     <p id="slide-client" class="text"><strong>post: </strong><span></span></p> 

     <p id="slide-desc" class="text"></p> 

     <p id="slide-nav"></p> 

     


   


    </div> 

</div> 

	


 


   </div>  	<!--content featured gallery here --> 

   </div> 

   <script type="text/javascript"> 

    if(!window.slider) var slider={

      


    };

     slider.data=[

       


  { 'id':'slide-img-1',

    'client':'First one ',

    'desc':'nature beauty photography'},

      


  { 'id':'slide-img-2',

    'client':'First one ',

    'desc':'nature beauty photography'},

      


  { 'id':'slide-img-3',

    'client':'First one ',

    'desc':'nature beauty photography'},

      


  { 'id':'slide-img-4',

    'client':'First one ',

    'desc':'nature beauty photography'},

      


  { 'id':'slide-img-5',

    'client':'First one ',

    'desc':'nature beauty photography'},

      


  { 'id':'slide-img-6',

    'client':'First one ',

    'desc':'nature beauty photography'},

      


   


   ];

   </script> 

  </div></div><!--/header--></div><!-- content --> 

 


	<div class="clear"></div> 

 


	<div id="footer"> 

		Copyright &copy; 2012 by My Company.<br/> 

		All Rights Reserved.<br/> 

		Powered by <a href="[url="http://www.yiiframework.com/"]http://www.yiiframework.com/[/url]" rel="external">Yii Framework</a>.	</div><!-- footer --> 

 


</div><!-- page --> 

 


</body> 

</html> 






Alex , we have one step to fix this problem :)

I added full code to view and slider worked :

This my code :




<?php

/* @var $this TestController */


$this->breadcrumbs=array(

	'Test',

);

?>

<?php




	$baseUrl = Yii::app()->baseUrl; 

	$cs = Yii::app()->getClientScript();

	$cs->registerScriptFile($baseUrl.'/js/jquery.js');

   $cs->registerScriptFile($baseUrl.'/js/scripts.js');

   $cs->registerScriptFile($baseUrl.'/js/newscript.js');

  

   

   

  

 	

	echo '

    	

  	

  <div id="header"><div class="wrap">

   <div id="slide-holder">

<div id="slide-runner">'	;




//$section=intval($_GET['section']);

$section=1;


$i=1;

$j=array();


$images=Yii::app()->db->createCommand(" select * from images  where section='$section' ")->setFetchMode(PDO::FETCH_OBJ) ;


foreach($images->queryAll() as $image){

	

echo  '<a href=""><img id="slide-img-',$i, '" src="', $image->image, '" class="slide" alt="" /></a>';

 


   	$j[]=$i;

   	

   	$i=$i+1;

   	

   	

   	

 

    	}	


  

   

   

	echo '<div id="slide-controls">

 	<p id="slide-client" class="text"><strong>post: </strong><span></span></p>

 	<p id="slide-desc" class="text"></p>

 	<p id="slide-nav"></p>

 	

   

	</div>

</div>

	


   </div>';

   

   ?>

  	<!--content featured gallery here -->

   </div>

   <script type="text/javascript">

	if(!window.slider) var slider={

  	

	};

 	slider.data=[

	<?php 

  foreach($j as $value){	


echo  "   

  { 'id':'slide-img-$value',

	'client':'First one ',

	'desc':'nature beauty photography'},

   " ;

   }  

   ?>

   

   

   ];

   </script>

  </div></div><!--/header-->






So I change all my code to divide it to View and controller

View :




<?php

/* @var $this SiteController */


$this->pageTitle=Yii::app()->name;

?>


 <table>

<tr>

	<td  style="background-color: black;">

<?php





   $baseUrl = Yii::app()->baseUrl; 

   $cs = Yii::app()->getClientScript();


   $cs->registerScriptFile($baseUrl.'/js/scripts.js');

   $cs->registerScriptFile($baseUrl.'/js/newscript.js');

  

   

  

foreach($sections as $section){

 

echo CHtml::ajaxLink(

	$section->section,

	array('slider/index','id' =>$section->id), // Yii URL

	array('update' => '#pageContent') // jQuery selector

);

echo "<br/>";

echo "<br/>";

}




echo "=================================";

echo "<br/>";echo "<br/>";echo "<br/>";





	

/////





   

  //// Load Jquery 

  

  $j=array();

 

 

  $j=array("1", "2","3","4","5","6");


?>


 <script type="text/javascript">

            	if(!window.slider) var slider={

            	

            	};

            	slider.data=[

            	<?php 

    	foreach($j as $value){  

    	

    	echo  "   

    	{ 'id':'slide-img-$value',

            	'client':'Some text  ',

            	'desc':'image description '},

    	" ;

    	}  

    	?>

    	

    	

    	];

	

    	</script>

</td>

</tr>

</table>


<div id="pageContent"></div>






Controller :





	

	public $j;

	public function actionIndex()

	{


  

  $id=intval($_GET['id']);


 

 

   $baseUrl = Yii::app()->baseUrl; 

   $cs = Yii::app()->getClientScript();

   $cs->registerScriptFile($baseUrl.'/js/jquery.js');

   $cs->registerScriptFile($baseUrl.'/js/scripts.js');

   $cs->registerScriptFile($baseUrl.'/js/newscript.js');

  

    	

 	

	echo '

    	

  	

  <div id="header"><div class="wrap">

   <div id="slide-holder">

<div id="slide-runner">'	;




//$section=intval($_GET['section']);

$section=1;


$i=1;

$j=array();


$images=Yii::app()->db->createCommand(" select * from images  where section='$section' ")->setFetchMode(PDO::FETCH_OBJ) ;


foreach($images->queryAll() as $image){

	

echo  '<a href=""><img id="slide-img-',$i, '" src="', $image->image, '" class="slide" alt="" /></a>';

 


   	$j[]=$i;

   	

   	$i=$i+1;


   	

 

    	}	


  

   

   

	echo '<div id="slide-controls">

 	<p id="slide-client" class="text"><strong>post: </strong><span></span></p>

 	<p id="slide-desc" class="text"></p>

 	<p id="slide-nav"></p>

 	

   

	</div>

</div>

	


   </div>

   ';

   

   

   

   

	}

	

	




But not worked and loaded white page :(

Thanks in advance