CODEWITHSUNDEEP
javascriptphpjquerymysqldatatable
John Beasley
John Beasley

Reputation: 3071

Insert a line break after bullet points using jQuery and PHP

I have a page that a user enters comments in an HTML textarea. Recently, users have been including bullet points in their comments.

Here is how the users have been entering comments within the HTML textarea with the bullet points:

enter image description here

Now, upon saving the comments, here is exactly how the comments look in the database:

enter image description here

I included additional columns within the database in order to be clear that there are multiple entries that have comments with bullet points.

Upon returning the data, and then displaying the comments into a JQuery datatable cell, the comments are displayed exactly as you see in the picture below:

enter image description here

If you'll take notice to the picture, the bullet points are in paragraph form, not separated as they initially were when first entered in the HTML textarea.

What I need to do is add a line break after each bullet point that appears in the datatable cell, so that it looks like how it was originally entered.

I am not sure if I needed to do this with MySQL, however here is how the PHP/MySQL looks when querying the database:

<?php
include("../include/database.php"); 

$select = "SELECT pk, region, loctype, city, twenty, twenty_comm FROM eqpstatus";   
$query = mysqli_query($dbc, $select);

$out = array(); 
while($row = $query->fetch_assoc())
{
    $out[] = $row;
}
echo json_encode($out);
?>

I wasn't sure if there was a way to check for bullet points in a MySQL query.

On the jQuery side, here is how the datatable is returned to the page (shortened as much as possible):

var newData = 'process/eqpGuide.php'; 

$('#example1').DataTable({      
"ajax": {
    "url": newData,
    "type": "POST",
    "dataSrc": ''
},
"columns": [
  {"data": "region"},
  {"data": "loctype"},
  {"data": "city"},
  {"data": "twenty"},
  {"data": "twenty_comm"} // here is where I need to check for bullet points
],
"iDisplayLength": 25,
"order": [[ 1, "desc" ]],
"paging": false,
"scrollY": 550,
"scrollX": true,
"bDestroy": true,
"stateSave": true,
"autoWidth": true 
});

So to reiterate everything I have mentioned, all I need to do pertains to the twenty_comm section of the database, and that is to add a line break after each bullet point. I am not sure if that should or can be done in the PHP/MySQL portion of code, or if it can be done on the JQuery side within the datatable.

To put it in question form: How do I add a line break after a bullet point in either PHP/MySQL or jQuery?

Upvotes: 2

Views: 1680

Answers (3)

davidkonrad
davidkonrad

Reputation: 85538

I guess you mean you want to add a line break before the bullets and some whitespace after? Impossible to know what after is, except just before the next bullet. You could use a column render callback :

{ data: 'twenty_comm' ,
  render: function(data) {
     return data
       .replace(/•/g,'•&nbsp;&nbsp;')
       .replace(/(?!^)(•)/g, '<br>\$1')
  }
}

The first regex just replaces the bullet (or middot) with a bullet and two whitepaces. The next is a negative lookahead inserting <br> before the bullets except for the first occurence.

See http://jsfiddle.net/cj6nk8yz/

Upvotes: 2

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

EDITED

I think the best thing to do would be to add the new line when the user submits the text... Before the save to DB. But that's an opinion.

The second best thing would be to perform the string manipulation on server side, because relying on client's device (the least best solution which I deleted...) to do thing doable on the server is considered bad practice.

Try this:

<?php
include("../include/database.php"); 

$select = "SELECT pk, region, loctype, city, twenty, twenty_comm FROM eqpstatus";   
$query = mysqli_query($dbc, $select);

$out = array(); 
while($row = $query->fetch_assoc())
{
    $row['twenty_comm'] = implode("<br>•",explode("•",$row['twenty_comm']));
    if(substr($row['twenty_comm'],0,4)=="<br>"){
        $row['twenty_comm'] = substr($row['twenty_comm'],4);
    }

    $out[] = $row;
}
echo json_encode($out);
?>

Upvotes: 2

Kisaragi
Kisaragi

Reputation: 2218

You maybe could try to use preg_split() with your twenty_comm column and add a <br /> char, don't know how it will render though:

$row['twenty_comm'] = addNewLine($row['twenty_comm']); 

function addNewLine($string){
   $newString = '';
   $split= preg_split("/[;,]+/",$string);
   foreach($split as $char){
        $newString.=$char.'<br />'; 
   }
      return $newString;
}

Upvotes: 2

Related Questions