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,510 points
51,503 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,820 points
0 votes

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

answered Dec 15, 2020 by Roshni
• 10,520 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,890 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, 2022 in HTML by Tejashwini
• 3,470 points
80 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, 2022 in HTML by Tejashwini
• 3,470 points
313 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, 2022 in HTML by Ashwini
• 2,960 points
490 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, 2022 in HTML by Ashwini
• 2,960 points
211 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,820 points
13,874 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,820 points
652 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,820 points
3,225 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,820 points
466 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,820 points
293 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,820 points
948 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP