Jump to content
narutofan

how to create a tagging sys like in phpfreaks forum with tinymce

Recommended Posts

hi @requinix,
i want to create a dropdown style tagging sys as in this forum can i know how to do it in jquery and php. And i would also like to know how to create a facebook style read more dropdown link after some 250 words??

Edited by narutofan

Share this post


Link to post
Share on other sites

Ah yes, it's that time of year again.

Dear Santa, I would like ...

Share this post


Link to post
Share on other sites

OK, I've donned my red costume and white beard. Here's an example of displaying more or less text

Data

CREATE TABLE `product` (
  `product_id` int(11) NOT NULL AUTO_INCREMENT,
  `description` text,
  PRIMARY KEY (`product_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `product` (`description`) VALUES
('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.'),
('In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien.'),
('Donec ut est in lectus consequat consequat. Etiam eget dui. Aliquam erat volutpat. Sed at lorem in nunc porta tristique. Proin nec augue. Quisque aliquam tempor magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ac magna. Maecenas odio dolor, vulputate vel, auctor ac, accumsan id, felis. Pellentesque cursus sagittis felis.');

Example code

<?php
include('db_inc.php');
$db = pdoConnect("test");   // connect to "test" database

//
// this bit handles the AJAX request to get the full or partial description
//
    if (isset($_GET['ajax'])) {
        $stmt = $db->prepare("SELECT description
                              FROM product
                              WHERE product_id = ? 
                             ");
        $stmt->execute( [ $_GET['id'] ] );
        $descrip = $stmt->fetchColumn();
        
        switch ($_GET['ajax']) {
            case 'more':
                $less = "<span class='less' data-id='{$_GET['id']}'> (less)</span>";
                exit($descrip.$less);                          // send back the description in the ajax response

            case 'less':
                $words = explode(' ', $descrip);
                $partial_descrip = join(' ', array_slice($words, 0, 25));
                $more = "<span class='more' data-id='{$_GET['id']}'> ...more</span>";
                exit($partial_descrip.$more);
        }
    }
    
//
// select the product details from the table
//
$res = $db->query("SELECT product_id
                        , description
                   FROM product     
                   ");
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="generator" content="PhpED 18.0 (Build 18044, 64bit)">
<title>Example</title>
<style type='text/css'>
    .descrip {
        font-family: verdana, sans-serif;
        font-size: 10pt;
        margin-left: 50px;
        width: 50%;
    }
    .more, .less {
        color: blue;
        cursor: pointer;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type='text/javascript'>
    $().ready( function() {

        $(".more").click( function() {
            var id = $(this).data('id')
            var target = $(".descrip[data-id="+id+"]")      // find descrip div with matching data-id
            $.get (
                "",                                         // send request to "self"
                { "ajax" : "more",
                  "id" : id
                  },
                function(resp) {
                    target.html(resp)                       // put returned description in target div
                    enableLess()
                  },
                "TEXT"
            )
        })

    })
    
    function enableLess() {
        $(".less").click( function() {
            var id = $(this).data('id')
            var target = $(".descrip[data-id="+id+"]")      // find descrip div with matching data-id
            $.get (
                "",                                         // send request to "self"
                { "ajax" : "less",
                  "id" : id
                  },
                function(resp) {
                    target.html(resp)                       // put returned description in target div
                  },
                "TEXT"
            )
        })
        
    }
</script>
</head>
<body>
    <?php
    //
    // display the data, putting description in its own div
    //
    foreach ($res as $row) {
        $words = explode(' ', $row['description']);
        $partial_descrip = join(' ', array_slice($words, 0, 25));                      // show first 25 words of description
        $more = "<span class='more' data-id='{$row['product_id']}'> ...more</span>";
        echo "<div class='product'>
                <h3>Product {$row['product_id']}</h3>
                <div class='descrip' data-id='{$row['product_id']}'>
                    <h4>Description</h4>
                    $partial_descrip $more
                </div>
              </div>\n";
    }

    ?>
</body>
</html>

Sample output

 

Capture.PNG

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.