Динамически меняющийся контент сообщения (CMS)

Question

Я пытаюсь создать простую CMS. Редактирование сообщений работает нормально, но я борюсь за то, как я переключу «текущую» запись, которую вы редактируете (используя ajax).

Я понял, что могу добавить дополнительное поле ввода, содержащее текущий идентификатор сообщения, каждому элементу «обзор» (который скрыт с помощью css).

Что я ищу (или другое решение): Если щелкнуть один из «обзор-почтовый ящик», использование jquery/js находит элемент с классом: «post-id» (в этом конкретном элементе конечно). И отправляет XHR-запрос на другую страницу, содержащую этот идентификатор, это возвращает запрошенный пост, который помещается в поля «edit post».

Любые идеи по этому поводу приветствуются! Заранее спасибо!

<?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. Первый добавить к данным атрибута идентификатор вашего проекта

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

2.- BIND обработчик JQuery, чтобы получить сообщение данных и обновлять свои элементы формы.

$(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); 
     } 
    }); 
});