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 in HTML by kartik
• 11,890 points
28 views

1 answer 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 by Niroj
• 23,950 points

Related Questions In HTML

0 votes
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 in HTML by Niroj
• 23,950 points
403 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 in HTML by Roshni
• 600 points
80 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 in Laravel by Niroj
• 23,950 points
222 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 in PHP by Niroj
• 23,950 points
25 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 in Laravel by Niroj
• 23,950 points
98 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 in Java-Script by Niroj
• 23,950 points
29 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 in HTML by Niroj
• 23,950 points
16 views
0 votes
1 answer

What is Html Web storage

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

answered Jan 31 in HTML by Niroj
• 23,950 points
70 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 in Java-Script by Niroj
• 23,950 points
27 views
0 votes
1 answer

Real time power bi dashboard update without refreshing the browser

The only solution possible by code - ...READ MORE

answered Sep 28, 2018 in Power BI by Kalgi
• 51,850 points
424 views