Jquery in PHP echo

Question

This is my php with jquery code:

<?php
require('connection.php');
$query="select title,content from blogs";
echo '<html><head>';
echo '<link rel="stylesheet" href="blog.css" />';
echo '<script src="jquery.js"></script>';
//echo '<script src="blogs.js"></script>';
echo "</head><body>";
$i=0;
if($result=$mysqli->query($query))
{
while($news=$result->fetch_row())
{
echo "<br/><br />"."<strong ><h2 onclick='$(document).ready(function() {
    $(this).click(function(){ $(\"#a".$i."\").toggle(\"slow\");});});'>". $news[0]."</h2></strong>"."<br/><br />";
echo "<div id='a".$i."'>".$news[1]."</div>";
$i++;
}
$result->close();
echo "</body></html>";
}
?>

This works but not stable. When I click the first heading it toggles for 2 to 3 times like an animation. When I click the second heading the first and second headings content toggles.This is the function call in the source code of the output php.

<strong ><h2 onclick='$(document).ready(function() {
    $(this).click(function(){ $("#a0").toggle("slow");});});'>HELLO WORLD</h2></strong>

Please let me know why it happens like this?I am new to jquery so I use it inline.I know it is a bad practice to do so and eliminates the biggest advantage of using jquery.

If you insist on using inline script, don't use $(document).ready, it is not needed. — Richard Dalton
– Richard Dalton, Commented Sep 13, 2012 at 10:26

Abraham · Accepted Answer · 2012-09-13 10:49:46Z

1

Here's your cleaned up code:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="blog.css" />
    <script src="jquery.js"></script>
    <!--<script src="blogs.js"></script>-->
    <script>
      $(function(){
        $('h2').click(function(){
          $(this).next().toggle('slow')
        })
      })
    </script>
  </head>
  <body>';
<?php
  require('connection.php');
  $query="select title,content from blogs";
  $i=0;
  if($result=$mysqli->query($query)) {
    while($news=$result->fetch_row()) {
      echo "
    <h2><strong>{$news[0]}<strong></h2>
    <div id='a$i'>{$news[1]}</div>";
      $i++;
    }
    $result->close();
  }
?>
  </body>
</html>

edited Sep 13, 2012 at 10:49

answered Sep 13, 2012 at 10:37

Abraham

20.7k7 gold badges36 silver badges41 bronze badges

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

2 Comments

Viktor S. Over a year ago

This 'h2' must be changed to \'h2\' and same for 'slow' => \'slow\' in head script

Viktor S. Over a year ago

Besides, it would be even cleaner if you put all html outside php blocl. At least head and opening/closing body and head tags.

Clarence · Accepted Answer · 2012-09-13 10:34:17Z

1

Just the following would suffice and probably get rid of your unexpected behaviour.

<h2 onclick='$("#a0").toggle("slow")'>hello world</h2>

Further, you would normally do this in a javascript file or javascript tag. Put an ID on the h2, and add the listener to that.

Also, a good practice would be to apply bold to the h2 element with a css file, instead of bloating your HTML with a strong around it.

answered Sep 13, 2012 at 10:34

Clarence

2,96220 silver badges16 bronze badges

2 Comments

user1633170 Over a year ago

You didn't understand my question.I want the div id to increment.

Clarence Over a year ago

I did understand, I just corrected the javascript that you output. Could have done it with an echo instead, but correction is there.

Viktor S. · Accepted Answer · 2012-09-13 10:35:23Z

I would better do something like this:

<?php
require('connection.php');
$query="select title,content from blogs";
echo '<html><head>';
echo '<link rel="stylesheet" href="blog.css" />';
echo '<script src="jquery.js"></script>';
echo '<script type="text/javascript">';
echo '    $(document).ready(function() {';
echo '    $("h2").click(function(){ ;$('#a' + $(this).data("id")).toggle("slow");});});';
echo '</script>';
//echo '<script src="blogs.js"></script>';
echo "</head><body>";
$i=0;
if($result=$mysqli->query($query))
{
while($news=$result->fetch_row())
{
echo "<br/><br />"."<strong ><h2 data-id=".$i.">". $news[0]."</h2></strong>"."<br/><br />";
echo "<div id='a".$i."'>".$news[1]."</div>";
$i++;
}
$result->close();
echo "</body></html>";
}
?>

data-id in h2 tag will be taken by this code $(this).data("id") (see, it is added in my code), so you can easily find required div and do not need onclick for each h2. $(document).ready() is used to call some code only once, after page is completely loaded.

Collectives™ on Stack Overflow

Jquery in PHP echo

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related