Есть модальное окно на бутстрапе, на него повешена форма, которая получает номер заказа от пользователя и через php запрашивает БД. БД отдает данные, php переводит их json. Это вроде как все удалось реализовать ) Хочется сделать чтобы данные полученные от БД выдавались в том же модальном окне без перезагрузки страницы, вот тут начинаются одни вопросы. В javascript и jquery только начинаю разбираться, поэтому уровень нулевой, но гугл есть, и есть решение проделать это через AJAX. Но не все так просто как хотелось бы )) Тестирую - ввожу данные и получаю запуск php который выдает json на новой странице, т.е. как будто и нет никакого js скрипта с AJAX. Надеюсь понятно объяснил. Три дня гугленья и чтения плодов не дали, поэтому обращаюсь к многоуважаемому сообществу - как это реализовать?
Само модальное окно
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Проверить заказ</h4>
</div>
<div class="modal-body">
<script src="./js/get_order.js"></script>
<form action="./php/getorder.php" method="post" id="getOrderform" novalidate>
<div class="control-group">
<div class="controls">
<input type="text" class="form-control"
placeholder="Номер заказа" id="num" name="num" required
data-validation-required-message="Введите номер заказа" />
<p class="help-block"></p>
<button type="submit" class="btn btn-primary">Отправить запрос</button>
</div>
</div>
<div id="success"> </div>
</form>
</div>
</div>
</div>
</div>
PHP обработчик (getorder.php)
<?php
$databasehost = "localhost";
$databasename = "test";
$databasetable = "sample";
$databaseusername="test";
$databasepassword = "";
try {
$pdo = new PDO("mysql:host=$databasehost;dbname=$databasename",
$databaseusername, $databasepassword,
array(
PDO::MYSQL_ATTR_LOCAL_INFILE => true,
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
)
);
}
catch (PDOException $e) {
die("database connection failed: ".$e->getMessage());
}
$pdo->exec("set names utf8");
$num = $_POST['num'];
$stmt = $pdo->prepare('SELECT item, discription FROM sample WHERE num = :num');
$stmt->execute(array('num' => $num));
$row = $stmt->fetch(PDO::FETCH_ASSOC);
echo json_encode($row, JSON_UNESCAPED_UNICODE);
exit();
?>
JS AJAX (get_order.js)
$(function(){
$('#getOrderform').submit(function(e){
e.preventDefault();
var m_method=$(this).attr('method');
var m_action=$(this).attr('action');
var num = $("input#num").val();
$.ajax({
type: m_method,
url: m_action,
data: {num: num},
cache: false,
dataType: 'json',
success: function(data) {alert(data);}
});
};
};
