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.

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
- DB.PHP
- INDEX.PHP
- 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>
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:
thanks so much
ReplyDeletevery nice
ReplyDeleteyou are great! keep updating
ReplyDeletegood job, please keep updating..
ReplyDeletegood
ReplyDelete