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

narutofan · November 9, 2018

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 November 9, 2018 by narutofan

Barand · November 9, 2018

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

Dear Santa, I would like ...

narutofan · November 9, 2018

@Barand come on man i'm asking because i don't know how to do it and you are making fun of me.

Barand · November 9, 2018

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

Sign In

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

Recommended Posts

narutofan

Link to comment

Share on other sites

Barand

Link to comment

Share on other sites

narutofan

Link to comment

Share on other sites

Barand

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information