モーダル表示<br>次の行の瞬間

Question

データベースからすべてのデータを表示するwhileループがあり、各divにボタンがあります。ユーザーがボタンをクリックすると、その特定の情報がモーダルで表示されます。実際にはうまく動作しますが、小さなバグがあります。説明はデータベースに "textarea"を使って追加されました。それで、次の行で始まるいくつかの段落を含んでいます。 モーダルにデータを表示するときに次の行はありません。モーダルでは、次の行の "< br>"インスタントで表示されます。ユーザーがモーダルをクリックすると、新しい行にテキストが表示されます。それを修正するのを助けてください。

私はエラー画像を添付しました。

<li> 
    <div class="media wow fadeInDown articleclick" data-title="<?php echo $row2['title']; ?>" data-description="<?php echo nl2br($row2['article']); ?>" data-html="true" data-img="img/<?php if($row2['image']==''){ echo ''; } else { echo $row2['image']; } ?>" data-toggle="modal" data-target="#myModal" > 
    <a href="#" class="media-left"> 
     <img alt="img" class="img-responsive" src="img/<?php if($row2['image']==''){ echo './noarticle.gif'; } else { echo $row2['image']; } ?>" style="height: 85%;"> 
    </a> 
    <div class="media-body"> 
     <h4 class="media-heading"><a href="#"><?php echo $row2['title'];?></a></h4> 
    </div> 
    </div> 
</li> 

<script> 
$(document).on("click", '.articleclick', function (e) { 
    var description = $(this).data('description'); 
    var title = $(this).data('title'); 
    var img = $(this).data('img'); 
    $(".descrpdisplay").text(description); 
    $(".titledisplay").text(title); 
    $('.imgdisplay').attr('src', img); 
}); 
</script> 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Articles</h4> 
    </div> 
    <div class="modal-body"> 
     <img src="" class="img-responsive imgdisplay"> 
     <b><div class="titledisplay" style="padding: 25px 0px 10px 0px;"></div></b> 
     <div class="descrpdisplay" ></div> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

どのような問題を解決しようとしていますか？ DBに日付を解析するときには、\r\nを別のものに置き換えることが問題になります。たとえば、

$text= $_POST["textarea"]; 
str_replace("\r\n"," ", $text); 

ページに表示しようとすると、同じ問題がPHP側で解決できます。

それ以外の場合は、JSで背面に送信する前にテキストを準備するか、HTMLに配置する前に再レンダリングしてください。あなたは、任意のテキストが<p>で始まり、あなたが</p><p>にそれを有効にする必要があり\r\nように改行がある場合</p> .ANDで終了する必要があることを知って、両方の場合

str = str.replace(/(?:\r\n|\r|\n)/g, '</p><p>'); 

。

もちろん、二重改行で余分な段落が表示されますので、あらかじめ、または後でページを表示しないようにしてください。 「右側」を決定すると、ソリューションが展開されます。

UPD（いくつかの考え）：

$(document).ready(function() { 
 

 
    var textArea = $('textarea').text(); 
 
    console.log(textArea); 
 

 
    $('.textBefore').text(textArea); 
 
    
 
    var textAfter = '' 
 
    + '<p>' 
 
    + textArea.replace(/(?:\r\n|\r|\n|<br \/>|<br>)/g, '</p><p>') 
 
    + '</p>'; 
 

 
    textAfter = textAfter.replace(/<p><\/p>/g, ''); 
 
    
 
    $('.textAfter').html(textAfter); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<textarea> 
 
    Some 
 
    text 
 
    example 
 
</textarea> 
 
<div class="textBefore"></div> 
 
<div class="textAfter"></div>