✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Change The Content Of An Element After Certain Time Using jQuery,Ajax And PHP

Last Updated : Jul 1, 2023

IN - Ajax jQuery PHP | Written & Updated By - Ashish

In this tutorial we help you to change the content of an element after certain time period for eg: 5 Sec, 10 Sec etc using jQuery, Ajax and PHP. You may also like content slider using jQuery.

Change The Content Of An Element After Certain Time Using jQuery,Ajax And PHP

CHECK OUT THIS TUTORIAL LIVE DEMO →

To change the content of an element using Ajax and PHP it takes only four steps:-

  1. Make a HTML file and define markups for content
  2. Make a CSS file and define styling for content
  3. Make a Script file and define script to change the content
  4. Make a PHP file and send the content to HTML page

Step 1. Make a HTML file and define markups for content

We make a HTML form with post method and save it with a name content.html 

<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="content.js"></script>
<link rel="stylesheet" type="text/css" href="content_style.css">
</head>

<body>

<div id="quote_box">
 <p id="quote">Your Content is Initializing Please Wait</p>
</div>

</body>
</html>

Step 2. Make a CSS file and define styling for content

In this step we make a CSS file and save it with a name content_style.css 

body
{
 background-color:#610B21;
}
#quote_box
{
 margin-top:25%;
 width:70%;
 margin-left:15%;
 background-color:#424242;
 padding:10px;
 border-radius:20px;
 box-shadow:0px 0px 30px 2px #2E2E2E;
}
#quote
{
 font-family:helvetica;
 font-style:italic;
 color:#E6E6E6;
 text-align:center;
 font-size:17px;
}

Step 3. Make a Script file and define script to change the content

In this step we make a Script file and save it with a name content.js 

$(document).ready(function() 
{
 $.ajaxSetup({ cache: false }); 
 setInterval(fetch_quotes,5000);
});

function fetch_quotes()
{
 $.ajax({
 type: 'post',
 url: 'fetch_content.php',
 data: {
  get_quote:"quote"
 },
 success: function (response) {
  document.getElementById("quote").innerHTML='"'+response+'"'; 
 }
 });
}

In this step $.ajaxSetup({ cache: false }); it is used beacuse this part addresses an IE bug. without it, IE will only load the first number and will never refresh and setInterval(fetch_quotes,5000); it refers to the time to change the content of p.

It is in milliseconds and then we use simple ajax to change the content, it get the response from fetch_content.php file and put it on quote para.

Step 4. Make a PHP file and send the content to HTML page

In this step we make a PHP file and save it with a name fetch_content.php 

<?php
if(isset($_POST['get_quote']))
{
 $quote=array(
  'Learning gives creativity, Creativity leads to thinking, Thinking provides knowledge, Knowledge makes you great.',

  'Man needs his difficulties because they are neccessary to enjoy success.',
 
  'To succeed in your mission, you must have single-minded devotion to your goal.',

  'Dream is not that you see in the sleep; dream is that does not allow you to sleep.',

  'Always bear in mind that your own resolution to succeed is more important than any other.',

  'I am thankful to those who said NO to me. It is because of them i did it myself.',

  'Success is not the key to happiness. Happiness is the key to success. If you love what you are doing, you will be successful.'
 );

 $total=count($quote)-1;
 $var=mt_rand(0,$total);
 echo $quote[$var];
 exit();
}
?>

In this step we put quotations in array and use random function to get a random index and get that quotation and echo that indexed quotation.

We use quotations for content you can use anthing for content. Anything you echo in your PHP file is response for our content.js file.

Thats all, this is how to change the content of an element after certain time using Ajax,jQuery and PHP. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.



I hope this tutorial on change element content helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →