Сейчас у меня оценка контента реализована вот так: Форма оценки контента: Код (Text): <form id="vote_video" action="vote_res_video.php" method="post" name="vv"> <span class="vote_1"><input name="score" type="radio" value="1"></span> <span class="vote_2"><input name="score" type="radio" value="2"></span> <span class="vote_3"><input name="score" type="radio" value="3"></span> <span class="vote_4"><input name="score" type="radio" value="4"></span> <span class="vote_5"><input name="score" type="radio" value="5" checked></span> <input name="submit" type="submit" value="Оценить"> <input name="id" type="hidden" value="<?php echo "$id";?>"></form> vote_res_video.php: Код (Text): if (isset ($_POST['score'])) {$score = $_POST['score'];} if (isset ($_POST['id'])) {$id = $_POST['id'];} $result = mysql_query ("SELECT rating,q_vote FROM videos WHERE id='$id'",$db); $myrow = mysql_fetch_array ($result); $new_rating = $myrow['rating'] + $score; /*Новое значение rating*/ $new_q_vote = $myrow['q_vote'] + 1; /*Новое значение q_vote*/ /*Обновление рейтинга в базе*/ $update = mysql_query ("UPDATE videos SET rating = '$new_rating', q_vote = '$new_q_vote' WHERE id='$id' ",$db); if ($update) /*Если обновление произошло, то...*/ { /*Возврат на страницу контента*/ echo "<html><head> <meta http-equiv='Refresh' content='0; URL=view_video.php?id=$id'> </head></html>"; exit ();} Вывод общей оценки: Код (Text): <?$r = $myrow_video["rating"]/$myrow_video["q_vote"]; /*Вычисление среднего рейтинга*/ $r = intval ($r); /*Приведение среднего рейтинга к целому числу*/?> <p>Оценка: <?php echo ("<img src='img/rate/$r.png'>");?> (Голосов: <?php echo $myrow_video["q_vote"];?>)</p> Как сделать, чтобы это происходило без перезагрузки страницы?
в jQuery метод load — самое оно. я бы оставил существующий код как есть, чтобы работало при отключенном js + добавил бы навешивание события под jQuery
Если не сложно, подскажите, пожалуйста, порядок моих действий, а то я и понятия не имею, как это сделать. Читал про load, вот только ничего полезного для моих целей не нашел.
необходимо через скрипт передать данные обработчику vote_res_video.php Код (Text): $("#submit").load("vote_res_video.php", { 'choices[]': ["score", "id"] } ); и затем вывести $new_rating, полученный обработчиком, на странице? я правильно понял? или нужно перехватить скриптом передаваемые данные обработчику, обработать их, занести в базу и вывести результат на страницу?
боже мой! надо хоть немного уметь читать обработкой занимается сам load. тебе нужно только правильно указать элемент куда должен быть вставлен ответ серверного скрипта. ответ это буквально текст HTML если не силен в английском, яндекс найдет тебе массу русских примеров "jQuery load"
Не силен в jQuery) Код (Text): $("#vote_form").ajaxForm(function() { //Обрабатываем данные формы и заносим в базу //Выводим результат на странице в контейнере #new_rating $("#result").load("view_video.php #new_rating"); }); Примерно так?
Если load сам занимается обработкой, то какой же url надо указать в load? Добавлено спустя 5 минут 58 секунд: я пробовал ajaxForm, но он мне ничего не возвращает от скрипта обработчика. Хотя если отключить jquery.form.js, то выдает то что нужно в vote_res_video.php: Код (Text): <div id="newww">test</div> js: Код (Text): $(document).ready(function(){ $("#vote_form").ajaxForm(function() { $("#new_rating").load("vote_res_video.php #newww"); }); }); php: Код (Text): <div id="new_rating"></div> обработчик (при успешном обновлении оценки в базе): Код (Text): echo '<div id="newww">test</div>';
Уже глядел... Только нифига не понятно. Проверил работу .load таким образом: Отправил с помощью скрипта данные в обработчик, обработчик обновил оценку в базе. Далее скрипт при помощи .load в контейнер #new_rating поместил контейнер со средней оценкой #333. В результате при помощи скрипта при нажатии на кнопку "оценить" без перезагрузки на странице видеоурока под контейнером со средней оценкой добавляется тот же самый контейнер, но уже с учетом новой оценки. Код (Text): $(document).ready(function(){ $("#vote_form").ajaxForm(function() { $("#new_rating").load("view_video.php?id=14 #333"); }); }); По идее при помощи скрипта нужно удалить контейнер со старой оценкой, форму и вывести сообщение, что уже поставлена оценка. В принципе можно сделать и так, но столкнулся с проблемой формирования url в .load. Я тестил на странице с id=14. Но у меня ведь много страниц и с разными id, и я не в курсе, как в url воткнуть айдишник видеоурока, который передается через форму как переменная $id. Вроде разобрался как работает .load, но как понял по вашим постам иду не в том направлении и еще использую дополнительный скрипт jquery.form.js. В каком направлении вообще двигаться, если для всего этого использовать только 1 скрипт? Судя по документации .load должен содержать аргумент url. Этим url должен являться та же самая страница с формой или каким то способом добавленная временная страница при помощи этого скрипта (везде в документации грузятся данные с других страниц)? Если та же страница, то как воткнуть переменную id в url load'а (гуглеж не помог)? Как лучше перехватить нажатие кнопки submit, click'ом или другим образом?
Передавай значение текущего id из php-скрипта в JavaScript - а там уже подставляй в url. Код (PHP): <script type="text/javascript"> var id = <?php echo($id); ?>; </script>
А ответьте на тупой вопрос, как теперь вставить id в url?))) Сейчас делаю вот так: Код (Text): $(document).ready(function(){ $("#vote_form").ajaxForm(function() { var id = <?php echo ($id); ?>; $("#new_rating").load("view_video.php?id="+id+" #333"); }); }); Добавлено спустя 46 минут 11 секунд: Оказалось даже проще, чем я думал)) url я вообще заменил пробелом и заработало Код (Text): $(document).ready(function(){ $("#vote_form").ajaxForm(function() { $("#new_rating").load(" #333"); }); });
Короче, переделал код. Сейчас при нажатии на кнопку "оценить" при помощи скрипта jquery.form отправляются данные в обработчик, обработчик обновляет инфу о новой оценке в базе. Затем при помощи .load контейнер с обновленной оценкой #average_rate загружается в контейнер #new_rating и при помощи .remove удаляется исходный контейнер #average_rate. В результате контейнер со средней оценкой при голосовании обновляется без перезагрузки. Далее у меня есть еще один контейнер. Если пользователь не авторизирован, выдается соответствующее сообщение. Если пользователь авторизирован и не ставил оценку за видеоурок, то выводится форма оценки. Если пользователь уже голосовал, то выводится соответствующее сообщение с поставленной оценкой. Решил сделать здесь подобно средней оценке: При нажатии на сабмите при помощи .load загружается контейнер #your_rate в пустой контейнер #your_new_rate. Исходный контейнер содержал в себе форму, а при том условии что если пользователь уже проголосовал, выводится соответствующее сообщение. Вроде бы работает. Но в отличии от средней оценки контейнер исходный контейнер с формой #your_rate не хочет удаляться при помощи .remove. Иногда скрипт просто не работает, и оценка обновляется уже как было до этого с перезагрузкой страницы. Так и не пойму, что я упустил. Может Вы что подскажете? Исходная страница: Поставлена оценка: php файл: Код (Text): <div class="adds_container"><div class="view_adds"><p>Просмотров: <?php echo $myrow_video["view"];?></p><p id="average_rate">Оценка: <?php echo ("<img src='img/rate/$r.png'>");?> (Голосов: <?php echo $myrow_video["q_vote"];?>)</p><div id="new_rating"></div> </div><div class="clear"></div> <div id="uuu" class="div_video_vote"> <div id="your_rate"> <?php $result_vote = mysql_query ("SELECT id,value FROM vote WHERE user_id=$forum_user[id] AND video_id=$id",$db); $myrow_vote = mysql_fetch_array ($result_vote); if (!$forum_user['is_guest']) { if (mysql_num_rows($result_vote) > 0) { echo '<p align="center">Вы оценили этот видеоурок на<img src="img/rate/value_'.$myrow_vote["value"].'.png"></p>'; } else { echo ' <form id="vote_form" action="vote_res_video.php" method="post" name="vv"> <div class="div_stars"> <label id="vote_1" class="vote_1" for="score-1"></label><input id="score-1" name="score" type="radio" value="1"> <label id="vote_2" class="vote_2" for="score-2"></label><input id="score-2" name="score" type="radio" value="2"> <label id="vote_3" class="vote_3" for="score-3"></label><input id="score-3" name="score" type="radio" value="3"> <label id="vote_4" class="vote_4" for="score-4"></label><input id="score-4" name="score" type="radio" value="4"> <label id="vote_5" class="vote_5" for="score-5"></label><input id="score-5" name="score" type="radio" value="5"> <div class="clear"></div></div><div class="clear"></div> <input id="submit_vote" name="submit" type="submit" value="Оценить"> <input name="id" type="hidden" value="'.$id.'"> <input name="user_id" type="hidden" value="'.$forum_user["id"].'"> </form> ';} } else { echo '<p class="login_required" align="center">Для добавления оценки Вам необходимо <a class="open_top_panel" href="#">Войти</a> или <a href="register.php">Зарегистрироваться</a></p>'; } ?></div><div id="your_new_rate"></div></div> </div><div class="clear"></div> js: Код (Text): $("#vote_form").ajaxForm(function() { $("#new_rating").load(" #average_rate"); $("#your_new_rate").load(" #your_rate"); }); $("#submit_vote").click(function() { $("p").remove("#average_rate"); $("div").remove("#your_rate"); });
Разместил блок #your_new_rate выше #your_rate и прописал к стилю adds_container, где они оба находятся, фиксированную высоту и overflow:hidden. Сейчас исходный блок прячется за пределами блока. Хотя может и не правильно, но работает)) Добавлено спустя 17 минут 10 секунд: заметил только один косяк. Если клавишей tab расположить курсор на кнопке оценить, то можно поставить еще сколько угодно оценок, т.к. формы будет просто не видно, а фокус на кнопке остается