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,500 points
45,568 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,740 points
0 votes

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

answered Dec 15, 2020 by Roshni
• 10,500 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

0 votes
0 answers

how to create a HTML5 video element without it being shown in the page?

how is it possible to dynamically create ...READ MORE

Jul 5 in HTML by Tejashwini
• 1,660 points
10 views
0 votes
0 answers

CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

I have the following page, which contains ...READ MORE

Jul 19 in HTML by Tejashwini
• 1,660 points
18 views
0 votes
0 answers

Get the query string value and display it in my html page

I can see the query string values ...READ MORE

Jul 21 in HTML by Ashwini
• 1,160 points
19 views
0 votes
0 answers

How can I change the line spacing for one paragraph in an HTML email template?

I want to add html commands that ...READ MORE

Jul 24 in HTML by Ashwini
• 1,160 points
13 views
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,740 points
12,162 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,740 points
499 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,740 points
2,867 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,740 points
359 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,740 points
200 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,740 points
751 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP