jQuery обновить div

Question

Я работаю над проектом для кого-то. В настоящее время я строю страницу с 2 divs, видео с YouTube слева и поле с комментариями справа. Он очень похож на функцию facebook. Пользователи, которые вошли в систему, могут также прокомментировать видео, введя комментарий внутри текстового поля и нажав кнопку «Комментарий». Затем страница обновится, и комментарий будет отображаться в поле комментария.

В данном случае проблема; когда страница обновляется, видео перестает воспроизводиться. Есть ли способ обновить только div с помощью поля комментариев?

Я знаю, что мой код не очень аккуратный, но это всего лишь доказательство концепции, поэтому не беспокойтесь об этом.

Код получить видео

echo "<div id='video' style='float:left; margin-right: 5px;'>"; 
$video_id = $_GET['i']; 
$getinfo = new Music(); 
$getinfo = $getinfo->getMusicInfo($video_id); 
if($getinfo){ 
?> 
<object width="425" height="350" data="http://www.youtube.com/v/<?php echo $getinfo['link']; ?>" type="application/x-shockwave-flash"><param name="src" value="http://www.youtube.com/v/<?php echo $getinfo['link'];?>" /></object></div> 

И это, чтобы получить комментарии к видео.

<div id='comment_area' style='border: 1px solid green; height: 300px;'> 
     <div id='comments' style='border: 1px solid blue; height:180px; overflow-y: scroll;'> 
     <?php 
     $getcomments = new Music(); 
     $getcomments = $getcomments->getMusicComments($video_id); 
     if($getcomments){ 
      foreach($getcomments as $comment){ 
       echo "<br /><a href='#'>" . $comment['stagename'] . "</a><br />" . $comment['comment'] . "<br /><br />"; 
      } 
     } 
     else {echo "<br />No comments yet. Be the first to comment<br />";} ;?> 
     <span id='response'></span> 
     <input type='hidden' id='music_id' value='<?php echo $video_id;?>' /> 
     <input type='hidden' id='user' value='<?php echo $_SESSION['user'];?>' /></div><br /> 
     <textarea cols=50 rows=7 id='comment_box' placeholder='Comment on this'></textarea><br /> 
     <input type='submit' onclick="addComment()" value='add comment'> 
    </div> 

Итак, есть способ обновить только второй div, используя jQuery/javascript?

Answer 1

Вы можете использовать функцию load() Jquery и определить содержание для загрузки:

$('#comment_area').load('mypage.php #comment_area'); 

Конечно, вы также должны представить комментарий через AJAX, а также. Таким образом, другой вариант заключается в том, чтобы отправить комментарий с помощью ajax, затем отправить подтверждение, что он сработал, и просто добавить комментарий в список комментариев с помощью javascript.

В качестве побочного примечания я не вижу, где вы кодируете свои комментарии, чтобы предотвратить XSS. Не забудьте сделать это.

Answer 2

Лучший способ добиться этого - использовать метод $ .ajax jquery. Это позволит вам публиковать комментарий и читать/обновлять комментарии без перезагрузки страницы. Поскольку похоже, что у вас уже есть метод getMusicComments в вашем php, довольно просто вызвать этот метод с помощью ajax для извлечения комментариев.

Читайте на JQuery $ .ajax here