Форум

arimanecro · #1 (**permalink**) 05.11.2014, 18:56

Доброго вечера.

В ajax'e полный ноль, возможно решение оч.простое.
Оооочеь нужна помощь, ибо без этого дальше двигаться не могу

вот форма:

<form id="form" method="post">

				<textarea name="comment" id="comment" cols="30" rows="10" placeholder="Type your comment here...." required></textarea>
			
			<input type="submit" class="submit_comment" id="submit"  value="Submit Comment">
		</form>

вот скрипт отвечающий за отправку через данную форму сообщений:

$(document).ready(function(){
	var form = $('form');
	var submit = $('#submit');

	form.on('submit', function(e) {
		// prevent default action
		e.preventDefault();
		// send ajax request
		$.ajax({
			url: 'ajax_comment.php',
			type: 'POST',
			cache: false,
			data: form.serialize(), //form serizlize data
			beforeSend: function(){
				// change submit button value text and disabled it
				submit.val('Submitting...').attr('disabled', 'disabled');
			},
			success: function(data){
				// Append with fadeIn see [url]http://stackoverflow.com/a/978731[/url]
				var item = $(data).hide().fadeIn(800);
				$('.comment-block').append(item);

				// reset form and button
				form.trigger('reset');
				submit.val('Submit Comment').removeAttr('disabled');
			},
			error: function(e){
				alert(e);
			}
		});
	});
});

на одной странице находятся три формы ПОСТ, первая логин-пароль, вторая форма поиска и третья, это вышеуказанная.

Так вот, когда подключаю данный скрипт, первые две формы перестают работать, с чем это может быть связано и как это решить?

Заранее спасибо

ksa · #2 (**permalink**) 06.11.2014, 08:20

Как понять "форма перестает работать"? Как она "работала" раньше?

Примеры нужно делать минимально полными и отображающими проблему. Кому нужны эти огрызки?

BETEPAH · #3 (**permalink**) 06.11.2014, 08:48

arimanecro,
во второй строке вы собираете коллекцию из трех форм, а в 13й пытаетесь собрать данные из коллекции. Замените form на this внутри обработчика или разделите обработку форм.

arimanecro · #4 (**permalink**) 06.11.2014, 10:57

Спасибо, всем кто отклинулся, насчет огрызков кода...не хотел все постить, так как кода достаточно много, поэтому пробую...

значит, как я уже сказала на странице три формы:

первая:

<form method="post">
<span class="ic_login"></span><input style="margin-bottom: 20px; " class="enter" name="login2" type="text">
<span class="ic_key"></span><input style="margin-bottom: 11px; " class="enter" type="password" name="password"><br>
<input  type="checkbox" name="remember_me"><span class="remember_me">&nbsp;Remember me</span><br>

<a style="display: block;" href="index.php?reg=<?php raw("reg");?>"><input style=" margin-right: 5px; margin-top: 8px;" type="button" value="Create Account"></a>

<input class="btn" style="background-color: rgba( 83, 71, 65, 0.89 );width: 86px; height: 25px; margin-top: 8px;" name="sign_in" type="submit" value="Sign In">
</form>

вторая:

<form method="get">
<input name="id" value="<?php echo intval($_GET['id'])?>" type="hidden">
<input style="margin-left: 60px;"type="search" id="search" name = 'keyword' placeholder="Search" autocomplete="off">

<input name="search_sub" type="submit" id="search_ico" value=" ">

</form>

третья

<form id="form" method="post">

				<textarea name="comment" id="comment" cols="30" rows="10" placeholder="Type your comment here...." required></textarea>
			
			<input type="submit" class="submit_comment" id="submit"  value="Submit Comment">
		</form>

на странице есть скрипит отвечающий за пагинацию:

<script type="text/javascript">
            $(document).ready(function(){
                function loading_show(){
                    $('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');
                }
                function loading_hide(){
                    $('#loading').fadeOut('fast');
                }                
                function loadData(page){
                    loading_show();                    
                    $.ajax
                    ({
                        type: "POST",
                        url: "<?php if(isset($_GET['search_sub'])) {
						echo './inc/loadData2.php';
					}
						if(isset($_GET['id'])) {
							echo './inc/submitdata2.php';
						}else {echo 'nothing.php';}
						
						?>",
                        data: "page="+page,
                        success: function(msg)
                        {
                            $("#container").ajaxComplete(function(event, request, settings)
                            {
                                loading_hide();
                                $("#container").html(msg);
                            });
                        }
                    });
                }
                loadData(1);  // For first time page load default results
                $('#container #paginator span.active').live('click',function(){
                    var page = $(this).attr('p');
                    loadData(page);
                    
                });           
                $('#go_btn').live('click',function(){
                    var page = parseInt($('.goto').val());
                    var no_of_pages = parseInt($('.total').attr('a'));
                    if(page != 0 && page <= no_of_pages){
                        loadData(page);
                    }else{
                        alert('Enter a PAGE between 1 and '+no_of_pages);
                        $('.goto').val("").focus();
                        return false;
                    }
                    
                });
            });
        </script>

из этого скрипта, загрузка пагинатора и выборка комментов происходит с помощью подгрузки submitdata2.php, вот его содержание:

<?php
session_start();
include "../func/conn.php";
include "../func/functions.php";

if($_POST['page'])
{	
$page = $_POST['page'];
$cur_page = $page;
$page -= 1;
$per_page = 5;
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;

$idikus = $_SESSION['idikus'];

		// retrive comments with post id
	$comment_query = mysqli_query($connection,
			"SELECT *
			FROM comment
			WHERE post_id = '$idikus'
			ORDER BY date DESC
			LIMIT $start, $per_page");
	
		/*echo '<div class="comment-block">';*/
		 while($comment = mysqli_fetch_array($comment_query)){ ?>
			<div class="comment-item">
				<div class="comment-avatar">
					<img src="img/noavatar.jpg" alt="avatar">
				</div>
				<div class="comment-post">
					<h3>
					<span><?php echo ucfirst($comment['name']);?> said....</span></h3>
					<p><?php echo $comment['comment']?></p>
                    <p><?php 
					$time = strtotime($comment['date']);
					$server_time = date('Y');
					if($server_time > $current_time) {
							$my_format = date("jS F g:i A", $time);
					}
					else {
							$my_format = date("jS F, Y g:i A", $time);
					}
					echo "<span class='time'>$my_format;</span>";
				echo '</div>';
			echo '</div>';
		 }
		/*echo '</div>';*/
		
/* --------------------------------------------- */

$query_pag_num = "SELECT COUNT(*) AS `count` FROM comment WHERE `post_id` = '$idikus'";
$result_pag_num = mysqli_query($connection,$query_pag_num);
$row = mysqli_fetch_assoc($result_pag_num);
$count = $row['count'];
$no_of_paginations = ceil($count / $per_page);

if ($cur_page >= 7) {
    $start_loop = $cur_page - 3;
    if ($no_of_paginations > $cur_page + 3)
        $end_loop = $cur_page + 3;
    else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
        $start_loop = $no_of_paginations - 6;
        $end_loop = $no_of_paginations;
    } else {
        $end_loop = $no_of_paginations;
    }
} else {
    $start_loop = 1;
    if ($no_of_paginations > 7)
        $end_loop = 7;
    else
        $end_loop = $no_of_paginations;
}
/* ----------------------------------------------------------------------------------------------------------- */
$msg .= "<div id='paginator'>";

for ($i = $start_loop; $i <= $end_loop; $i++) {

    if ($cur_page == $i)
        $msg .= "<span p='$i' style='background-color: #666666;' class='active'><p style='margin-left: -19px; margin-top: 3px;'>{$i}</p></span>";
    else
        $msg .= "<span p='$i' class='active'><p style='margin-left: -19px; margin-top: 3px;'>{$i}</p></span>";
}

$msg = $msg . "</div>"; 

echo $msg;
}
?>

==============

Сейчас заметил, что при подключении скрипта комментов, когда нажимаю залогиниться, вместо логирования происходит добавления коммента, именно только появление на экране, в саму БД ничего не заносится.

Если нужен, ещё код, то говорите, я выставил вроде самый необходимый.

=============
BETEPAH

Я использую процедурный стиль, а не ООП. Какой процедурный аналог посоветуешь?

arimanecro · #5 (**permalink**) 06.11.2014, 11:11

в первом посте, ajax скрипт обращается к url: 'ajax_comment.php',

вот его содержание:

<?php
session_start();
if (isset( $_SERVER['HTTP_X_REQUESTED_WITH'] )):
	include('func/conn.php');
	include('func/function.php');
	include('func/functions.php');
	if (!empty($_POST['comment'])) {
		$comment = clear_str($_POST['comment']);
		
		$idikus = $_SESSION['idikus'];
		
		if(isset($_SESSION['login'])) {
		$query = "INSERT INTO comment (name, comment, post_id) VALUES (?, ?, ?)";
$stmt = mysqli_prepare($connection, $query);
mysqli_stmt_bind_param($stmt, 'ssi', $_SESSION['login'], $comment, $idikus);
mysqli_stmt_execute($stmt);
mysqli_stmt_close($stmt);
		}
		
		if(isset($_COOKIE['login'])) {
		$my_salt = 'incantaTIoN=JHGJh343hhOJfgfgf347';
		$decrypted_string = ucfirst(decrypt_string($my_salt, $_COOKIE['login']));
		$query = "INSERT INTO comment (name, comment, post_id) VALUES (?, ?, ?)";
$stmt = mysqli_prepare($connection, $query);
mysqli_stmt_bind_param($stmt, 'ssi', $decrypted_string, $comment, $idikus);
mysqli_stmt_execute($stmt);
mysqli_stmt_close($stmt);
		}

$query2 = "SELECT `comment`, `date`, `name`
			FROM comment
			WHERE `post_id` = ?";
$stmt2 = mysqli_prepare($connection, $query2);
mysqli_stmt_bind_param($stmt2, 'i', $idikus);
mysqli_stmt_execute($stmt2);
mysqli_stmt_bind_result($stmt2, $comments, $date, $name);
		while (mysqli_stmt_fetch($stmt2)) {
    }
mysqli_stmt_close($stmt2);
}				
?>

<div class="comment-item">
	<div class="comment-avatar">
		<img src="img/noavatar.jpg" alt="avatar">
	</div>
	<div class="comment-post">
		<h3>
                    
                    <span><?php echo ucfirst($name);?> said....</span></h3>
                    <p><?php echo $comments;?></p>
                    <p><?php 
					$time = strtotime($date);
					$server_time = date('Y');
					if($server_time > $current_time) {
							$my_format = date("jS F g:i A", $time);
					}
					else {
							$my_format = date("jS F, Y g:i A", $time);
					}?></p>
					<span class='time'><?php echo $my_format;?></span>
	
	</div>
</div>

<?php
endif?>

ksa · #6 (**permalink**) 06.11.2014, 13:17

Сообщение от arimanecro

не хотел все постить, так как кода достаточно много, поэтому пробую

Неудачная попытка...

Дело в том, что всегда можно смастерить маааленький и полный (!) пример, не кусками как у тебя... На котором при запуске проявляется проблема.
Используя такой пример могут на нем же показать, что не так или предложить более оптимальный вариант решения.
Частенько создание таких примеров само дает ответ на вопрос "че не так?".

Посмотри соседние темы как делаются простенькие примеры, которые тут же и запускаются...

arimanecro · #7 (**permalink**) 06.11.2014, 18:11

ksa,

Смастерил, маленький и полный пример

Значит на странице две формы:

<form method="post">
        <input name="id" type="text" id="name">
        <input type="submit">
        
        </form>

она выполняет следующее:

<?php 
	 if(isset($_POST['id'])) {
		 $id = $_POST['id'];
		 $query = "SELECT `name` FROM comment WHERE id = '$id'";
		 $query_run = mysqli_query($connection, $query);
		 if(mysqli_fetch_row($query_run) >= 1) {
		 while ($row = mysqli_fetch_row($query_run)) {
		 echo $row['name'];
		 }
		 } else { echo 'nothing';}
	 }
	 
	 ?>

далее идет вторая форма, через которую и выполняются ajax комменты:

<form id="form" method="post">	
			<input type="hidden" name="postid" value="<?php echo $row['post_id']?>">
			<input type="text" name="name" id="comment-name" placeholder="Your name here....">

			<textarea name="comment" id="comment" cols="30" rows="10" placeholder="Type your comment here...."></textarea>
			</label>
			<input type="submit" id="submit" value="Submit Comment">
		</form>

сам ajax скрипт(чтобы по сто раз не постить одно и тоже), смотри первый пост данной темы.

==================
Вообщем, когда отправляю первую форму, срабатывает добавление коммента, почему так??
Когда отключаю <script src="js/script.js"></script>(это и есть ajax скрипт из первого поста), то первая форма выполняет то, что ей и предназначено.

Хоть я в ajax'e ноль, но логика подсказывает, что дело в данной строчке -- var form = $('form'); и тут нужно что-то поменять

ksa · #8 (**permalink**) 07.11.2014, 08:31

Сообщение от arimanecro

Смастерил, маленький и полный пример

У тебя видать свое представление о полных прмерах...

Сообщение от arimanecro

Вообщем, когда отправляю первую форму, срабатывает добавление коммента, почему так?

Как вариант, принимающий УРЛ, получив данные решил, что это нужно сделать и данные для этого присланы.

Сообщение от arimanecro

логика подсказывает, что дело в данной строчке --

var form = $('form');

и тут нужно что-то поменять

Тебе про это уже писали!

Этой строчкой ты "берешь" все теги form! А тебе, насколько я понял, нужна только с id='form' (дурацкое значение для ИД формы)...
Т.е. наверное нужно написать

var form = $('#form');

arimanecro · #9 (**permalink**) 07.11.2014, 10:30

Т.е. наверное нужно написать
var form = $('#form');

спасибо, в этом всё и было дело

"Тебе про это уже писали!" -- да, но мне предложили вставить this, а это ООП стиль, я до его изучения ещё не дошел, поэтому мне нужен был процедурный аналог this

BETEPAH · #10 (**permalink**) 07.11.2014, 17:32

Сообщение от arimanecro

да, но мне предложили вставить this

Сообщение от BETEPAH

или разделите обработку форм

Форум

Справочник

Discord чат

Курсы javascript