AJAXでonclickイベントを使用するときモーダルを作成

リンクがクリックされたときにモーダルを作成する必要があるため、長いテキストが多い90個のモーダルが必要なファイルがあります。AJAXでonclickイベントを使用するときモーダルを作成

のindex.php

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Bootstrap 101 Template</title> 

    <!-- Bootstrap --> 
    <link href="inc/bootstrap.css" rel="stylesheet"> 
    <script src="inc/jquery.min.js"></script> 
    <script src="inc/bootstrap.min.js"></script> 
    </head> 
    <body> 
     <script>    
      $(function(){ 
       $('a').click(function(){ 
        var link = $('#name').html(); // I need sent this to my calculator file 
        $.ajax({ 
         url : "result.php", 
         type : "post", 
         dataType:"text", 
         data : { 
          name: link 
         }, 
         success : function (a){ 
          $('#result').html(a); 
         } 
        }); 
       }); 
      }); 
     </script> 
     <div id="result"></div> 
     <a href="#" id="name">I need this text for php script</a> 
    </body> 
</html>

resuilt.php

/* I used PHP becase i need more functions, this only a example how 
* to creat and call a modal after click on a link. 
*/ 
function create_modal($modal_ID = 'myModal') 
{ 
    return "<div class='modal fade' id='$modal_ID' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'> 
       <div class='modal-dialog'> 
        <div class='modal-content'> 
        <div class='modal-header'> 
         <button type='button' class='close' data-dismiss='modal'><span aria-hidden='true'>&times;</span><span class='sr-only'>Close</span></button> 
         <h4 class='modal-title' id='myModalLabel'>Nhãn</h4> 
        </div> 
        <div class='modal-body'> 
         Nội dung 
        </div> 
        <div class='modal-footer'> 
         <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button> 
         <button type='button' class='btn btn-primary'>Save changes</button> 
        </div> 
        </div> 
       </div> 
       </div>"; 
} 
echo create_modal(); 
?>

結果は、私は私のモーダルを表示するには、リンク上で2回クリックする必要があります。しかし、それは閉じることができないか、何もしません。

どこが間違っていましたか？私のアイデアをより良くする方法はありますか？

出典

2017-08-28 Văn Cao Trần

を助けが必要な場合は、私に教えてくださいモーダル（ 'ショー'）。 #resultでモーダルをロードするときに

出典

2017-08-28 09:22:12

非常によく！それは働いた、ありがとう！ –

90モーダルは良い考えではないと思います。データをdatabasに保存してみてください。リンクに異なるIDを割り当てます。 jqueryを使用してクリックイベントを聞きます。サーバーからデータを取得します。サーバーの値でモーダルを設定します。これをチェックするstack overflow link

あなたはたったの$（ '＃のmyModal'）を追加し

success : function (a){ 
         $('#result').html(a); 
         $('#myModal').modal('show'); 
        }

を追加することができます

出典

2017-08-28 09:06:24

AJAXでonclickイベントを使用するときモーダルを作成

答えて

関連する問題