Jump to content

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


narutofan

Recommended Posts

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

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

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.