投稿の内容を動的に変更する（CMS）

Question

シンプルなCMSを作成しようとしています。投稿の編集はうまくいきますが、編集中の「現在の」投稿をどのように切り替えるかについては苦労しています（Using ajax）。

私は、現在の投稿IDを含む余分な入力フィールドを各「概要」アイテム（cssを使用して非表示）に追加することができます。

私が探しているもの（または他のソリューション）：「overview-post-box」の1つがクリックされた場合、jquery/jsを使用して、要素が「post-id」（その特定の項目もちろん）。そのIDを含む別のページにXHRリクエストを送信すると、これは「投稿の編集」フィールドに配置された要求された投稿を返します。

これに関するアイデアは大歓迎です！前もって感謝します！

<?php foreach($projects as $project){ ?> 
    <a href="<?php echo $project['project_link'] ?>" class="overview-post-box"> 
     <div class="overview-post"> 
      <div class="post-id"><?php echo $project['project_id']; ?></div> 
       <div class="title"> 
        <?php echo $project['project_title']; ?> 
       </div> 
       <div class="content"> 
        <?php echo substr($project['project_content'], 0, strpos($project['project_content'], ' ', 40)) ?> 
       </div> 
     </div> 
    </a> 
<?php }; ?> 

Answer 1

特別VueJsをこのタスクを達成する方法はたくさんありますが、この作業を行うには勝者のように聞こえるが、jQueryのために私はあなたがこのような何かを行うことができると思います。

1. 最初にデータに追加は、プロジェクトのID

<a data-id="<?php echo $project['project_id']; ?>" href="<?php echo $project['project_link'] ?>" class="overview-post-box"> 

はポストデータを取得し、フォーム要素を更新するために、jQueryのハンドラをバインドし2.-属性。

$(document).ready(function(){ 
    $('.overview-post-box').click(function(event){ 
     event.preventDefault(); //Stop default <a> behavior 
     var id = $(this).data('id'); //get the current clicked post id 
     //do an ajax request to fetch post data 
     $.get('/getpostdata.php?id='+id,function(response){ 
     //return a json from your php side something like 
     // {data: { title: 'post title', body: 'post body' } 

     /* asign the json values to your inputs */ 
     $('your_input_class or id to the hidden id').val(id); 
     $('your_input_class or id to the title').val(response.data.title); 
     $('your_input_class or id to the body').val(response.data.body); 
     } 
    }); 
});