CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
Koray Ballı
Koray Ballı

Reputation: 99

Cant Call jQuery in PHP echo

When I'm using jQuery in HTML,it works fine.But it doesnt work when I echo in PHP.It should do dropdown when I want to read the content.

a busy cat

Here how it looks like.Now I want to click "View" and it should show the content:

a busy cat

blog.php

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="javascript" type="text/javascript" href="jquery-3.1.1.min.js">
    <script>
        $(document).ready(function() 
        {
            $('#drop').click(function()
                {
                    $('.post').slideToggle('fast');
                });
        });
    </script>
</head>
<body>



    <div id="contain">
        <div id="banner">
        </div>
        <div id="blogposts">
            <?php
            include 'constr.php';
            $query = mysqli_query($connect,"SELECT * from blog LIMIT 10");
            while($read = mysqli_fetch_array($query))
            {
                $yazar = $read["yazarAdi"];
                $baslik = $read["baslik"];
                $tarih = $read["tarih"];
                $icerik = $read["icerik"];
                echo '
                    <div id="postcontain">
                    <table class="info">
                        <tr>
                            <td><p style=" font-style:Italic;">'.$yazar.'</p> <td><p style="text-align:right; padding-right:10px;  font-style:Italic;">'.$tarih.'</p></td>
                        </tr>
                        <tr>
                            <td><p style="padding-bottom:5px; font-size:15px; font-weight:bold;">'.$baslik.'</p></td>
                            <td style="text-align:right;"><a id="drop">View</a></td>
                        </tr>

                    </table>
                    '.$icerik.'
                    </div>
                ';
            }
            ?>

        </div>
    </div>
</body>
</html>

CSS Related to the content:

.post
{
background-color:White;
width:800px;
box-shadow:inset 1px 1px 100px 5px #ccc;
border-top:3px solid #ffc;
display:none;
}

Upvotes: 2

Views: 289

Answers (5)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

The click must slide an element that have class post :

$('.post').slideToggle('fast');

And you're missing to add elements with this class to your code.

The id attributes should be unique in the same document so you've to change the id's you've in your loop to classes e.g: drop and postcontain.

NOTE : If you've the posts in your code, the js that you've now will slide all the posts in the same time, so it may you want to go up to the parent postcontain then toggle the post inside, using :

$(this).closest('.postcontain').find('.post').slideToggle('fast');

Full JS :

$(document).ready(function() 
{
    $('.drop').click(function(){
        $(this).closest('.postcontain').find('.post').slideToggle('fast');
    });
});

Hope this helps.

Upvotes: 4

RedaMakhchan
RedaMakhchan

Reputation: 481

I prefer that you separate PHP code from HTML, to make it clean and readable, you can create a new php file to get data from you databse json format :

Create data.php

<?php
include 'constr.php';
$query = mysqli_query( $connect, "SELECT * from blog LIMIT 10" );

$blog = [];
while ( $read = mysqli_fetch_array( $query ) ) {
    $item = array(
        "yazarAdi" => $read["yazarAdi"],
        "baslik"   => $read["baslik"],
        "tarih"    => $read["tarih"],
        "icerik"   => $read["icerik"],
    );
    array_push( $blog, $item );
}

echo json_encode( $blog );

On your HTML :

  • To include JS use <script> tags.
  • id="" should be used once per page, else you can replace with class=""
  • To understand the logic of your problem, your $('#drop').click is called before that php put links<a id="drop">View</a> on your page, so event is not binded to those links.

I maked a quick example for an HTML that use the file data.php file, you can adapte on your way :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="contain">
    <div id="banner">
    </div>
    <div id="blogposts">
        <div id="postcontain">
            <table id="mytable" class="info">

            </table>
        </div>
    </div>
</div>

<script type="application/javascript">
    $(document).ready(function () {
        $.getJSON("data.php", function (data) {
            $.each(data, function (key, val) {
                var item = '<tr>' +
                    '<td><p>' + val['yazar'] + '</p> <td><p>' + val['tarih'] + '</p></td>' +
                    '</tr>';

                item += '<tr>' +
                    '<td><p>' + val['baslik'] + '</p></td>' +
                    '<td><a href="#" class="drop" data-yazar="' + val['yazar'] + '">View</a></td>' +
                    '</tr>';

                $("#mytable").append(item);

            });

            $('.drop').click(function () {
                alert("drop clicked at : " + $(this).data('yazar'));
            });
        });
    });
</script>
</body>
</html>

Somes explanations :

  • $.getJSON("data.php" call our new page to get data on json format.
  • $.each(data, function (key, val) { fetch our data item per item.
  • $("#mytable").append(item); add rows <tr> to our table <table id="mytable"
  • On the view links <a href="#" class="drop" data-yazar=, I addad a data-yazar attribute to identify which link will be clicked using $(this).data('yazar') on click function, you can put your item id for example.

Upvotes: 0

madalinivascu
madalinivascu

Reputation: 32354

Use closest+next+find to select the element relative to your clicked tab

 $(document).ready(function() 
    {
      $('.info a').click(function()
       {
         $(this).closest('.info').next().find('.post').slideToggle('fast');
       });
    });

Consider using classes instead of ids

Upvotes: 0

Azad khan
Azad khan

Reputation: 79

Instead of echoing all the HTML close the PHP tag ?> above it and open it again below after HTML code <?PHP and variables in HTML must be in <?=$var?>

Like:

<?php while ($something): ?>

  <div class='Foo'>
    Bar
  </div>

<?php endwhile; ?>

Upvotes: -1

bugscoder
bugscoder

Reputation: 425

Try changing id="drop" to class="drop"

Hense jQuery will be $(".drop") to pick up on that class.

Upvotes: -1

Related Questions