7

Possible Duplicate:
passing variables from php to javascript

I'm dynamically generating a list. I want to make each row hover on mouseover and clickable to a link. I want the link to pass the id of the content of the row.

Basically: 

foreach ($courses as $cid=>cinfo){ 
  $univ = $cinfo['univ'];
  $desc = $cinfo['desc'];
  $size = $cinfo['size'];
  $start = $cinfo['start'];
  print "<div class='rc_desc' id='rc_desc$cid'>"."$desc<br/>"."<b>$univ</b><br/>".
        "<span>Number of students</span>: $size<br/>".
        "<span>Started at</span>: ".date('F d, Y',strtotime($start))."<br/>".
}

<script>
    $(function ()
    {
      $('#rc_desc$cid').hover(function ()
      {
        $(this).toggleClass('.tr');
      });
      $('#rc_desc$cid').click(function ()
      {
        $(location).attr('href','student.php?$cid');
      });
    });
  </script>

The issue is in the js/jquery. I want to be able to grab the $cid and pass it to the student.php page upon click. The php code above works but the js won't of course. I know the fundamental of client-side vs server-side languages. This question doesn't warrant a lecture. I know I cannot do this exactly, but it is what I want to happen ultimately. Any thoughts on how I can achieve this simply? Thanks in advance my friends!

Community
  • 1
  • 1
campatsky
  • 324
  • 1
  • 3
  • 14
  • the suggestions below solve the first problem. the second problem is that the function needs to work dynamically with the list. currently my js will only work on the last item... any thoughts? – campatsky Jul 13 '12 at 17:16

6 Answers6

10

Yes, if you include the <script> section in your PHP code, you can do something similar to the following:

<script>
    var foo = <?php echo $foo; ?>;
</script>

In your case, you would be looking into the following code structure:

<script>
    $(function () {
        $('#rc_desc<?php echo $cid ?>').hover(function () {
            $(this).toggleClass('.tr');
        });
        $('#rc_desc<?php echo $cid ?>').click(function () {
            $(location).attr('href', 'student.php?<?php echo $cid ?>');
        });
    });
</script>

The reason why this is possible is because although the Javascript is run on the client-side, it's processed on the server-side first prior to being presented on the page. Thus, it'll replace all necessary instances of $cid with the one you have included.

Enjoy and good luck!

EDIT:

<script>
    $(function () {
        $('.rc_desc').hover(function () {
            $(this).toggleClass('.tr ');
        });
        $('.rc_desc').click(function () {
            $(location).attr('href', 'student.php?' + $(this).attr('id').split('rc_desc')[1]);
        });
    });
</script>
Daniel Li
  • 14,976
  • 6
  • 43
  • 60
5

You can do it like this :

    $(location).attr('href','<?php echo $cid ?>');

The javascript code doesn't know it comes from php, it appears as a constant (a literal) for it.

Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
2

Yes it is possible. All you have to do is put your <?PHP echo $cid; ?> in where you need it

<script>
$(function ()
{
  $('#rc_desc<?PHP echo $cid; ?>').hover(function ()
  {
    $(this).toggleClass('.tr');
  });
  $('#rc_desc$cid').click(function ()
  {
    $(location).attr('href','student.php?<?PHP echo $cid; ?>');
  });
});

This is possible because by the time the scrip is put into the page the cid has already been replaced by the string on the server. Since PHP is server driven, before it spits back the html/script it will be just like you put it in yourself.

bretterer
  • 5,693
  • 5
  • 32
  • 53
1

There is almost no way to actually communicate PHP and JavaScript. However, the best and simplest way is to set the ID within an attribute. The new HTML5 data attributes would be perfect.

For example, have a anchor tag with

<span data-id="22">some event</a>

and then:

$(this).attr('href','student.php?'+$(this).attr('data-id'));

Or just use

<?php echo $id; ?>

if it is not external JS file

CrazyVipa
  • 927
  • 7
  • 10
1

I think you block should be :

<script>
    $(function ()
    {
    <?php foreach($courses as $cid=>cinfo) : ?>

      $('#rc_desc<?php echo $cid; ?>').hover(function ()
      {
        $(this).toggleClass('.tr');
      });
      $('#rc_desc<?php echo $cid; ?>').click(function ()
      {
        $(location).attr('href','student.php?<?php echo $cid; ?>');
      }); 
      ";?>
      <?php endforeach; ?>
    });
  </script>

UPDATE

But you don't really need to do this, you have

"<div class='rc_desc' data-id='$cid' id='rc_desc$cid'>"."$desc<br/>"."<b>$univ</b><br/>".
"<span>Number of students</span>: $size<br/>".
"<span>Started at</span>: ".date('F d, Y',strtotime($start))."<br/>".

You can try this

$(function (){
      $('.rc_desc').hover(function ()
      {
        $(this).toggleClass('.tr');
      });
      $('.rc_desc').click(function ()
      {
        attrId = $(this).attr("data-id");
        $(location).attr('href','student.php?'+id);
      });
});
Davuz
  • 5,040
  • 13
  • 41
  • 61
1

Try this code

foreach ($courses as $cid=>cinfo){ 
  $univ = $cinfo['univ'];
  $desc = $cinfo['desc'];
  $size = $cinfo['size'];
  $start = $cinfo['start'];
  print "<div class='rc_desc' data-id='$cid' id='rc_desc$cid'>"."$desc<br/>"."<b>$univ</b><br/>".
        "<span>Number of students</span>: $size<br/>".
        "<span>Started at</span>: ".date('F d, Y',strtotime($start))."<br/>".
}

<script>
    $(function ()
    {
      $('#rc_desc$cid').hover(function ()
      {
        $(this).toggleClass('.tr');
      });
      $('.rc_desc').click(function ()
      {
        $(location).attr('href','student.php?' + $(this).attr("data-id"));

       // if you want to redirect the page do this
       // window.location.href = 'student.php?' + $(this).attr("data-id");
      });
    });
  </script>
kiranvj
  • 32,342
  • 7
  • 71
  • 76