PHP foreach, CSS and jQuery script.. How to interact?

Question

i'm trying to use a jQuery show/hide script on a PHP file, and it goes like this:

<?php
foreach ($empresas as $empresa) {
echo "<style type='text/css'>
.$empresa[teaserid] { 
width:100%;
background-color: #CCC;
color: #000;
margin-top:10px;
border:1px solid #CCC;
position:relative;
vertical-align:middle;
}
.showhide$empresa[teaserid] {
    display:none;
}
</style>";
echo '<script type="text/javascript">';
echo ' $(document).ready(function(){ ';
echo '         $(\".$empresa[teaserid]\").hide(); ';
echo '         $(\".showhide$empresa[teaserid]\").show(); ';
echo '  $(\".showhide$empresa[teaserid]\").click(function(){ ';
echo '  $(\".$empresa[teaserid]\").slideToggle(), 500; ';
echo '  }); ';
echo ' });';
echo '</script>';
echo "<a href='#' class='showhide$empresa[teaserid]'>$empresa[titulo]</a><br />
    <div class='$empresa[teaserid]'>
TEST</div>";
}
?>

So, what I need is a foreach in php that echoes new CSS values and a new jQuery script. because each DIV needs different CSS and jQuery to relate and be able to show and hide its content. This echoing didn't work. The CSS goes ok, but the jQuery doesn't with the PHP $strings. What can I do? Or there's a simpler way to do this? A jQuery function that relates to any current div alone ? Thanks anyone who helps me in this one..

its ok, we all started somewhere .. tinsology.net/2009/06/client-side-vs-server-side-code read this .. the light bulb will being to turn on then — samccone
– samccone, Commented Aug 10, 2011 at 2:51
There are two SEPARATE pieces to this puzzle, which is why it's called a "client-server" relationship. The two do no interact the way you think. PHP generates the HTML. The HTML is passed to the browser. The user does something, some data is passed back to a PHP file, which then decides which HTML to generate for the user's next page. — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Aug 10, 2011 at 3:01

Dan Heberden · Accepted Answer · 2011-08-10 03:35:21Z

1

Worth mentioning:

You can create a settings object to keep your variables in. For example:

Your php:

<?php
    $settings = array( 'settingA' => 'something',
                       'settingB' => 'something else',
                       'wat'      => 9001 );
?>

Keep your JS in your js file - scripts.js, whatever. But you can add this to your html file:

<script>
   var settings = <?php echo json_encode( $settings ) ?>;
</script>

What will that output?

var settings = {"settingA":"something","settingB":"something else","wat":9001};

So you can put your required server info in ONE global object (or put it as a property of your application object or something) and can access it.

console.log( settings.settingA ); // returns "something"

Looking further at your question, don't forget you dont' have to stay in the PHP tags. I'm not advocating ever needing PHP in your css, but this should help you grasp the concept:

<style>
  <?php foreach ($empresas as $empresa): ?>
    .showhide<?php echo $empresa['teaserid'] ?> {
      display:none;
     }  
  <?php endforeach; ?>
</style>

answered Aug 10, 2011 at 3:35

Dan Heberden

11.1k3 gold badges35 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gf3 Over a year ago

These things. All of these things. Do them all.

Jon Gu · Accepted Answer · 2011-08-10 03:00:52Z

0

In PHP, you can only put variables in double quote strings:

$a = 'Jon';
echo "Hi $a"; // Should output 'Hi Jon'
echo 'Hi $a'; // should output 'Hi $a'

So if you want the Javascript to read:

$(".Jon") // where Jon is the value of $a

Then in PHP you can output it this way:

echo '$(\".' . $a . '\")'; // Notice we are splitting the echo statement into a concatenation of 3 strings

edited Aug 10, 2011 at 3:00

answered Aug 10, 2011 at 2:55

Jon Gu

362 bronze badges

1 Comment

Dan Heberden Over a year ago

and how's that var statement in php treating ya?

loganfsmyth · Accepted Answer · 2011-08-10 03:26:38Z

There isn't really a need to have the PHP print out a new block of CSS and Javascript for each item. If you write the css and javascript is a good way, then it will all be handled for you.

One other thing to keep in mind is that PHP is at it's most basic a templating language, so if you find yourself echoing large chunks of code, you are probably being something wrong. Instead something like this:

<?php
$variable = "SOme value";
echo "Some very long huge string with <html> tags and stuff plus $variables";
?>

You can do something like this, opening and closing the tags several times.

<?php $variable = "SOme value"; ?>
Some very long huge string with <html> tags and stuff plus <?php print $variables; ?>

With that covered, here is a reworked version of your code. As well, rather than needing to make PHP output custom Javascript with hard-coded ids, what you reall need is to structure your javascript so that it doesn't need to know ANY of that stuff at all, as I have done.

<style type='text/css'>
/* The CSS is the same, so just have one class that is used on all the items. */
.empresa-teaser { 
  width:100%;
  background-color: #CCC;
  color: #000;
  margin-top:10px;
  border:1px solid #CCC;
  position:relative;
  vertical-align:middle;
}
</style>

<script type="text/javascript">
  $(function(){
    // Hide all of the teasers to start.
    $(".empresa-teaser").hide();

    // Add a handler for when the show/hide link is clicked.
    $(".showhide-empresa-teaser").click(function(){

      // When it is clicked, find the next item with the 'empresa-teaser' class
      // and show it using a sliding toggle effect.
      $(this).nextAll('.empresa-teaser:first').slideToggle(500);
    });
  });
</script>


<?php foreach ($empresas as $empresa) { ?>

  <a href='#' class="showhide-empresa-teaser">
    <?php print $empresa['titulo']; ?>
  </a>
  <br />
  <div class="empresa-teaser">TEST</div>

<?php } ?>

Collectives™ on Stack Overflow

PHP foreach, CSS and jQuery script.. How to interact?

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related