HTML - Change Update page contents without refreshing reloading the page

0 votes

I get the data from DB and display it in a div... what I want to do is when I click a link it should change the content of the div

one option is to pass parameter through URL to itself and reload the page...

I need to do it without reloading\refreshing...

<?php   
    $id   = '1';

    function recp( $rId ) {
        $id   = $rId;
    }
?>

<a href="#" onClick="<?php recp('1') ?>" > One   </a>
<a href="#" onClick="<?php recp('2') ?>" > Two   </a>
<a href="#" onClick="<?php recp('3') ?>" > Three </a>

<div id='myStyle'>
<?php
    require ('myConnect.php');     
    $results = mysql_query("SELECT para FROM content WHERE  para_ID='$id'");

    if( mysql_num_rows($results) > 0 ) {
        $row = mysql_fetch_array( $results );
        echo $row['para'];
    }
?>
</div>
Apr 23, 2020 in HTML by kartik
• 37,490 points
24,359 views

3 answers to this question.

0 votes

Hii kartik,

onclick handlers run on the client side, in the browser, so you cannot call a PHP function directly. Instead, you need to add a JavaScript function that (as you mentioned) uses AJAX to call a PHP script and retrieve the data. Using jQuery, you can do something like this:

<script type="text/javascript">
function recp(id) {
  $('#myStyle').load('data.php?id=' + id);
}
</script>

<a href="#" onClick="recp('1')" > One   </a>
<a href="#" onClick="recp('2')" > Two   </a>
<a href="#" onClick="recp('3')" > Three </a>

<div id='myStyle'>
</div>

Then you put your PHP code into a separate file: (I've called it data.php in the above example)

<?php
  require ('myConnect.php');     
  $id = $_GET['id'];
  $results = mysql_query("SELECT para FROM content WHERE  para_ID='$id'");   
  if( mysql_num_rows($results) > 0 )
  {
   $row = mysql_fetch_array( $results );
   echo $row['para'];
  }
?>
answered Apr 23, 2020 by Niroj
• 82,680 points
0 votes

AJAX is about updating parts of a web pagewithout reloading the whole page.

answered Dec 15, 2020 by Roshni
• 10,420 points
0 votes

pushState() #

The pushState() method let's you update the URL and create a new item in the browser history without reloading the page. Because the history is updated, this new URL can be changed with the browser's forward and backward buttons as well.

Change content and URL without refreshing page using ajax – jquery – php

  1. Part 1: jQuery Code (It is used to change the url of the website) ...
  2. Part 2: Ajax Code (It is used to fetch data of other pages) ...
  3. (1) Create “header. ...
  4. (2) Create “footer.php” file then copy below code and paste it. ...
  5. (3) Create “index. ...
  6. (4) Create “home.
answered Dec 15, 2020 by Gitika
• 65,870 points

Related Questions In HTML

+1 vote
1 answer

How can i create simple register form using html and css?

Html5 contains lots of elements using which ...READ MORE

answered Jan 31, 2020 in HTML by Niroj
• 82,680 points
1,973 views
0 votes
1 answer

How to Identify Web Element( Button) when there are multiple buttons without any ID

Hi Gangadhar, Do you need the HTML code to ...READ MORE

answered Feb 10, 2020 in HTML by Roshni
• 10,420 points
458 views
0 votes
0 answers
0 votes
1 answer

How can we Create Multiple Where Clause Query Using Laravel Eloquent?

Hii, You can use Conditions using Array: $users = User::where([ ...READ MORE

answered Mar 30, 2020 in Laravel by Niroj
• 82,680 points
7,048 views
0 votes
1 answer

How to send email using php?

Hello @kartik 1.) Download PHPMailer, open the zip file ...READ MORE

answered Apr 1, 2020 in PHP by Niroj
• 82,680 points
226 views
0 votes
1 answer

Where to register Facades & Service Providers in Lumen?

Hello, To register a facade with an alias, ...READ MORE

answered Apr 6, 2020 in Laravel by Niroj
• 82,680 points
1,226 views
0 votes
1 answer

How can I update NodeJS and NPM to the next versions?

Hello @kartik, First check your NPM version npm -v 1).Update ...READ MORE

answered May 5, 2020 in Java-Script by Niroj
• 82,680 points
148 views
0 votes
1 answer

How to align a <div> to the middle (horizontally/width) of the page?

Hello Kartik, position: absolute and then top:50% and left:50% places the top edge ...READ MORE

answered Apr 23, 2020 in HTML by Niroj
• 82,680 points
98 views
0 votes
1 answer

What is Html Web storage

With web storage, web applications can store ...READ MORE

answered Jan 31, 2020 in HTML by Niroj
• 82,680 points
236 views
0 votes
1 answer

How can we change the page URL without refreshing the page?

Hello @kartik,  In HTML5 you can change the ...READ MORE

answered Apr 27, 2020 in Java-Script by Niroj
• 82,680 points
171 views