Loop Div using javascript and php

Question

I have two files, 1 html and 1 php. I want to load data from php files to my html files my php file code

    include_once("db.php");
    $query ="select b.ID,b.title,b.description, b.image,b.publish_date,u.fullname from c_blog b left join user u on b.publish_by=u.loginid order by b.publish_date desc ";
    $result = mysqli_query($con,$query);
    foreach($result as $data) {
        //echo $data["image"].'---';
        echo '  <div class="blog-post">
        <div class="post-image">
            <a href="blog-single.html"><img src="blogimage/'.$data["image"].'" width="400" height="400" alt=""> </a>
        </div>
        <ul class="post-meta">
            <li class="post-author">by '.$data["fullname"].'</li>
            <li><i class="icon icon-clock"></i>'.$data["publish_date"].'</li>
            <li><i class="icon icon-talk"></i></li>
        </ul>
        <div class="inside">
            <h2 class="post-title"><a href="blog-single.html">'.$data["title"].'</a></h2>
            <div class="post-teaser">
                <p>'.$data["description"].'</p>
            </div>
        </div>
    </div>';
    }
    ?>

my html file code is

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"
    type="text/javascript"></script>
    <script>
        function onPageLoad() {
            //alert("testing");
            loadpost();

        }
        function loadpost(){
            $.ajax({          
                    type: "POST",
                    url: "loadpost.php",
                    data:'',
                    success: function(data){
                    $("#blogpost").load(data);
                    //alert(data);
                }
            });

        }

    </script>
</head>

<body onload="onPageLoad();" class="home layout-2">

    <div id="page-content">
        <div class="container">
            <h1 class="text-center">Blog <span class="color">Posts</span></h1>
            <div class="row">
                <div class="col-md-9 column-center">
                    <div id="blogpost" name="blogpost">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

I want to load data from database and print in the loop in div. my PHP code is working and printing the div. But I dont know to how to print php echo result to my html page.

Thanks in Advance

Answer 1

In your PHP file, put the elements you are echoing in a variable. You should only echo once. So try this....

include_once("db.php");
$output = '';
$query ="select b.ID,b.title,b.description, b.image,b.publish_date,u.fullname from c_blog b left join user u on b.publish_by=u.loginid order by b.publish_date desc ";
$result = mysqli_query($con,$query);
foreach($result as $data) {
    //echo $data["image"].'---';
    $output .= '  <div class="blog-post">
    <div class="post-image">
        <a href="blog-single.html"><img src="blogimage/'.$data["image"].'" width="400" height="400" alt=""> </a>
    </div>
    <ul class="post-meta">
        <li class="post-author">by '.$data["fullname"].'</li>
        <li><i class="icon icon-clock"></i>'.$data["publish_date"].'</li>
        <li><i class="icon icon-talk"></i></li>
    </ul>
    <div class="inside">
        <h2 class="post-title"><a href="blog-single.html">'.$data["title"].'</a></h2>
        <div class="post-teaser">
            <p>'.$data["description"].'</p>
        </div>
    </div>
</div>';
}

echo $output;
    ?>

and in your ajax success function, put this:

$("#blogpost").html(data);

Loop Div using javascript and php

Question

1 answers

solution1
1 ACCPTED 2020-02-06 03:58:13

Loop Div using javascript and php

Question

1 answers

solution1 1 ACCPTED 2020-02-06 03:58:13

solution1
1 ACCPTED 2020-02-06 03:58:13