Здравствуйте! У меня есть форма запроса данных из бд посредством ajax'a и выводом результатов обратно в вид. В общем ситуация такая:
Два инпута работают отлично. Пробиваем читателя - выходит инфа по нему, затем пробиваем книгу, выходит инфа по книге. Но что если, нам надо добавить еще одну книгу для выдачи или 2, 3, 10 и т.д. на одного читателя? Как видите скрипт добавления новой строки таблицы реализован (почему-то кнопка добавления при нажатии "Просмотр" здесь не отрабатывает, хотя на сайте у меня всё работает).
Но к этому неопределённому кол-ву окошек прикрутить соответствующее неопределённое кол-во ajax-запросов-выводов инфы из бд не выходит.
Через ajax-запрос я только получаю инфу по штрих-коду из бд. Последующий процесс выдачи (запись в бд и т.д.) это у меня происходит через контроллер php, далее просто сделаю перебор глобального массива и всё.
<form action="" method="post" id='givecart'>
<form action="" method="post" id='givecart'>
<table border="1" class="menu-main" id="table_container">
<tr>
<td style="text-align: center; width: 100px">Читатель</td>
<td><input type="text" style="width: 100px" name="reader_barcode" id="reader" maxlength="8"></td>
<td style="width: 300px">
<span style="display: none" id="readererror" class="noreader">Читатель не найден в базе данных.</span>
<p>Фамилия: <font style="color:green"><span id="p1"></span></font></p>
<p>Имя: <font style="color:green"><span id="p2"></span></font></p>
<p>Отчество: <font style="color:green"><span id="p3"></span></font></p>
</td>
</tr>
<tr id="tr_image_1">
<td style="text-align: center" style="width: 100px" >Книга</td>
<td id="td_title_1"><input type="text" style="width: 100px" name="book_barcode" id="book" maxlength="8">
</td>
<td style="width: 300px">
<span style="display: none" id="bookerror" class="noreader">Книга не найдена в базе данных.</span>
<p>Фамилия: <font style="color:green"><span id="p4_1"></span></font></p>
<p>Имя: <font style="color:green"><span id="p5_1"></span></font></p>
<p>Название: <font style="color:green"><span id="p6_1"></span></font></p>
</td>
</tr>
</table>
<br><input type="button" style="width: 500px; height:35px;" value="Добавить еще одну книгу" name="addanotherbook" id="add"> </br>
<br><input type="submit" style="width: 500px; height:35px;" value="Выдать" name="givematerialbtn"></br>
</form>
<!--Скрипт поиска инфы по введённому штрих-коду.!-->
<script>
var x = document.getElementById('reader');
var y = document.getElementById('book');
x.focus();
x.onkeyup = x.onpaste = y.onkeyup = y.onpaste = function(){
var z = this;
setTimeout(function(){
z.value = z.value.replace(/[^\d]/g, '');
if (z.value.length == 8) {
var reader_barcode = $("#reader").val();
//alert ("Данные уходят: " + reader_barcode);
$.ajax({
type: "POST",
data: "reader_barcode=" + reader_barcode,
url: "ajax/finduser",
dataType: "json",
success: function(data){
if(data)
{
var rese = JSON.stringify(data);
//alert( "Прибыли данные: " + rese);
var readerlastname = data.user_last_name;
$("#p1").text(readerlastname);
var readerfirstname = data.user_first_name;
$("#p2").text(readerfirstname);
var readerpatronymic = data.user_patronymic;
$("#p3").text(readerpatronymic);
//console.log (JSON.stringify(data));
}
else
{
$("#readererror").css('display','inline');
}
}
});
y.focus();
}
if (y.value.length == 8) {
var book_barcode = $("#book").val();
//alert ("Данные уходят: " + book_barcode);
$.ajax({
type: "POST",
data: "book_barcode=" + book_barcode,
url: "ajax/findbook",
dataType: "json",
success: function(data){
if(data)
{
var rese = JSON.stringify(data);
//alert( "Прибыли данные: " + rese);
var authorlastname = data.author_last_name;
$("#p4_1").text(authorlastname);
var authorfirstname = data.author_first_name;
$("#p5_1").text(authorfirstname);
var bookname = data.content;
$("#p6_1").text(bookname);
//console.log (JSON.stringify(data));
}
else
{
$("#bookerror").css('display','inline');
}
}
});
return false
}
}, 0);
};
</script>
<!--Скрипт добавления новой строки в таблицу.!-->
<script>
var total = 1;
function add_new_image(){
total++;
$('<tr>')
.attr('id','tr_image_'+total)
//.css({lineHeight:'20px'})
.append (
$('<td style="text-align: center">')
.css({paddingRight:'5px',width:'100px'})
.append(
$('<span>Книга</span>')
)
)
.append (
$('<td>')
.attr('id','td_title_'+total)
.css({paddingRight:'5px'})
//.css({paddingRight:'5px',width:'300px'})
.append(
$('<input type="text" />')
.css({width:'100px'})
.attr('id','book_'+total)
.attr('name','book_barcode_'+total)
)
)
.append (
$('<td>')
.append(
$('<p><span>Фамилия: <font style="color:green"><span id="p4_'+total+'"></span></font></span></p>')
)
.append(
$('<p><span>Имя: <font style="color:green"><span id="p5_'+total+'"></span></font></span></p>')
)
.append(
$('<p><span>Название: <font style="color:green"><span id="p6_'+total+'"></span></font></span></p>')
)
)
.append(
$('<td>')
.css({width:'20px'})
.append(
$('<span id="progress_'+total+'" ><a href="#" onclick="$(\'#tr_image_'+total+'\').remove();" class="ico_delete"><img src="img/false.png" alt="del" border="0"></a></span>')
)
)
.appendTo('#table_container')
}
$(document).ready(function() {
$("#add").click(add_new_image);
});
</script>