Home » Php » javascript – change html dynamically using ajax and php

javascript – change html dynamically using ajax and php

Posted by: admin February 25, 2020 Leave a comment

Questions:

I’m developing my website. I have a comment section. I want to to show just two of them at a time. so I want to fetch comments from database and replace with another after a specific time(like slideshow). I want to just show name and comment of each user.

<div class="testimonials-item">
              <div class="user row">
                <div class="col-lg-3 col-md-4">
                  <div class="user_image">
                    <img src="assets/images/face2.jpg">
                  </div>
                </div>
                <div class="testimonials-caption col-lg-9 col-md-8">
                  <div class="user_text ">
                    <p class="mbr-fonts-style  display-7" style="margin-left: 2em">
                       <em>a comment</em>
                    </p>
                  </div>
                  <div class="user_name mbr-bold mbr-fonts-style align-right pt-3 display-7">
                       maria
                  </div>
                </div>
              </div>
            </div>

.

$sql = "select id, comment from comment where verify=1";
$res = mysqli_query($con, $sql);

help me if you can.
thank you

How to&Answers:

Hope this help you.

index.php

<div class="testimonials-item"></div>

<form id="idForm" method="post">
    <button type="submit" name="submit">Submit</button>
</form>
   <script> 
 $("#idForm").submit(function(e) {
    e.preventDefault(); // avoid to execute the actual submit of the form.
    $.ajax({
           type: "POST",
           url: 'AjaxFile.php',
           data: {data: "someData"}, // serializes the form's elements.
           success: function(data)
           {
               //alert(data); // show response from the php script.
               $('.testimonials-item').html(data);
           }
         });
});  

    </script>

AjaxFile.php

<?php 

//$sql = "select id, comment from comment where verify=1";
//$res = mysqli_query($con, $sql);

//can you change return data
//you have multple row use while or foreach

echo '<div class="user row">
                <div class="col-lg-3 col-md-4">
                  <div class="user_image">
                    <img src="https://picsum.photos/200/300">
                  </div>
                </div>
                <div class="testimonials-caption col-lg-9 col-md-8">
                  <div class="user_text ">
                    <p class="mbr-fonts-style  display-7" style="margin-left: 2em">
                       <em>a comment</em>
                    </p>
                  </div>
                  <div class="user_name mbr-bold mbr-fonts-style align-right pt-3 display-7">
                       maria
                  </div>
                </div>
              </div>';
echo '<div class="user row">
                <div class="col-lg-3 col-md-4">
                  <div class="user_image">
                    <img src="https://picsum.photos/seed/picsum/200/300">
                  </div>
                </div>
                <div class="testimonials-caption col-lg-9 col-md-8">
                  <div class="user_text ">
                    <p class="mbr-fonts-style  display-7" style="margin-left: 2em">
                       <em>B comment</em>
                    </p>
                  </div>
                  <div class="user_name mbr-bold mbr-fonts-style align-right pt-3 display-7">
                       Beta
                  </div>
                </div>
              </div>';            
?>