Facebook style 'see more' text onclick using php, mysql, Ajax and Javascript | 2my4edge

06 August 2013

Facebook style 'see more' text onclick using php, mysql, Ajax and Javascript

This is small implementation in the last tutorial, as we discussed in the last tutorial, we know how to make insert and fetch data from database without refreshing the page, here i'm going to show you that, if i'm entering more number of data or texts in the field that will be shorten and make see more link, and to extract the full view of text, we have to make javascript hide and show concept for that, let see how i made it, in this. If you want to get clear idea from this you must have to see the previous tutorial i.e Insert and view data without refresh using PHP, MySql and AJAX.
see more onclick using php mysql javascript



most of them searching this concept to implement to their personal purpose. here i'm going to show you that, actually this is very very simple method. i did here. for this you must have to see the last tutorial. here i'm just showing you that how make see more button that's it.

this concept is mostly used for going out of overflow, for that. made limited text only have display in the page and make see more or read more link for that. here i'm using Toggle concept to make this technique.

As we discussed in the last tutorial. we have to use 3 files to that, they are

  1. DB.PHP
  2. INDEX.PHP
  3. ACTION.PHP
here i'm going to made some small changes in the ACTION.PHP alone. let see the changes

ACTION.PHP

refer the previous tutorial for more file datails. and we must have include Jquery min file.
<?php
include('db.php');
$check = mysql_query("SELECT * FROM comment order by id desc");
if(isset($_POST['content']))
{
$content=mysql_real_escape_string($_POST['content']);
$ip=mysql_real_escape_string($_SERVER['REMOTE_ADDR']);
mysql_query("insert into comment(msg,ip_add) values ('$content','$ip')");
$fetch= mysql_query("SELECT msg,id FROM comment order by id desc");
$row=mysql_fetch_array($fetch);
$id=$row['id'];
$cont=$row['msg'];
}
?>


<div class="showbox"> <?php echo substr($cont,0,25); ?> 
<?php if (strlen($cont) > 25):?>
<span class="<?php echo $id?>readmore" style="color:red; cursor:pointer;">See More</span>
<span class="<?php echo $id?>more" style="display:none;"><?php echo substr($cont,25); ?></span>
<?php endif; ?>
</div>

<script type="text/javascript"> 
$(document).ready(function(){
$(".<?php echo $id?>readmore").click(function(){ 
$(".<?php echo $id?>readmore").hide(); 
$(".<?php echo $id?>more").slideToggle("flash");
  });
});
</script>

Refer the previous tutorial ACTION.PHP file details to get clear idea in that.  here i just made small changes in <div class="showbox"> </div>. in the last tutorial i just echo the row data in that for small view of all data. here i'm using substr to show limited text form 0 to 25 letters, and php if condition with strlen for stringlength greater than 25 means make this link else default view.
and you must have to make call from the id so you have make class with the name of id.
for you clear idea. i just made CSS in the same line.


RELATED POSTS:










5 comments:

^