我需要一些帮助来完成我的脚本，允许用户确认他们的巴士预订。我正在使用jQuery / Ajax：
允许用户输入日期和地点以搜索可用巴士数据库
在自己的div中显示每个结果（每个总线），该div具有总线信息和一个按钮，用于将用户发送到名为ColorBOx的模式框中的确认页面
我想要完成的事情：
当用户点击RSVP按钮时，让jquery收集公交车号码，日期和位置，以便我可以在他们决定确认预订之前在模态框中显示信息以及座位选择器< / p>
点击模态框中的确认按钮后，再次收集公交信息以及所选座位并更新公交车数据库
这是index.php：
<script type="text/javascript">
$(document).ready(function() {
$("a, input:submit").button();
$("#date").datepicker({
showOtherMonths: true,
selectOtherMonths: true,
changeMonth:true,
changeYear:true,
numberOfMonths:1,
showButtonPanel:true,
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
dateFormat:'yy-mm-dd'
});
$('#search1').submit(function(){
var date = $('#date').val();
var location = $('#location').val();
var datastring = 'date=' + date + '&location=' + location;
$.ajax({
type: "POST",
cache: "true",
url: "search.php",
dataType:"json",
data: datastring,
success: function(data){
$('#main').html('')
for ($i = 0, $j = data.bus.length; $i < $j; $i++) {
if (data.bus[$i].seats > 20)
{
var price = 50
}
else if (data.bus[$i].seats <= 20 && data.bus[$i].seats > 10)
{
var price = 45
}
else
{
var price = 40
}
var html = '<div id="' + data.bus[$i].number + '">';
html += '<div id="bus_num">' + '<b>BUS #</b>' + data.bus[$i].number + '</div>';
html += '<div id="bus_graphic"></div>';
html += '<div id="capacity">' + '<h1>Capacity</h1>' + data.bus[$i].capacity + '</div>';
html += '<div id="time">' + '<h1>Departure</h1>' + data.bus[$i].time + '</div>';
html += '<div id="seats">' + '<h1>Open Seats</h1>' + data.bus[$i].seats + '</div>';
html += '<div id="price">$' + price + '</div>';
html += '<a class="rsvp" href="#rsvp">RSVP</a>';
html += '</div>';
$('#main').append(html);
}
$("a.rsvp").button();
$(".rsvp").colorbox({width:"640px", inline:true, href:"#rsvp"});
}
});
return false;
});
});
</script>
<body>
<div style='display:none'>
<div id='rsvp'>
<?php include("colorbox.php");?>
</div>
</div>
</body>
colorbox.js：
$(document).ready(function() {
// Add click listener to seats
$('#airplane a').click(function()
{
// Asign value of the link target
var thisTarget = $(this).attr('href');
$(thisTarget).addClass('selected');
// Assign the value of the parent <li class="*">
var thisSeat = $(this).parent('li').attr('class');
// Toggle selected class on/off
$(this).toggleClass('selected');
return false;
});
$('#book').click(function ()
{
//collect user and bus information to store in database
});
});
colorbox.php：
<ul id="airplane">
<li class="seat_01 A"><a href="#row_01" title="01A">01A</a></li>
<li class="seat_01 B"><a href="#row_01" title="01B">01B</a></li>
<li class="seat_01 C"><a href="#row_01" title="01C">01C</a></li>
<li class="seat_01 D"><a href="#row_01" title="01D">01D</a></li>
<li class="seat_02 A"><a href="#row_02" title="02A">02A</a></li>
<li class="seat_02 B"><a href="#row_02" title="02B">02B</a></li>
<li class="seat_02 C"><a href="#row_02" title="02C">02C</a></li>
<li class="seat_02 D"><a href="#row_02" title="02D">02D</a></li>
<li class="seat_03 A"><a href="#row_03" title="03A">03A</a></li>
<li class="seat_03 B"><a href="#row_03" title="03B">03B</a></li>
<li class="seat_03 C"><a href="#row_03" title="03C">03C</a></li>
<li class="seat_03 D"><a href="#row_03" title="03D">03D</a></li>
<li class="seat_04 A"><a href="#row_04" title="04A">04A</a></li>
<li class="seat_04 B"><a href="#row_04" title="04B">04B</a></li>
<li class="seat_04 C"><a href="#row_04" title="04C">04C</a></li>
<li class="seat_04 D"><a href="#row_04" title="04D">04D</a></li>
<li class="seat_05 A"><a href="#row_05" title="05A">05A</a></li>
<li class="seat_05 B"><a href="#row_05" title="05B">05B</a></li>
<li class="seat_05 C"><a href="#row_05" title="05C">05C</a></li>
<li class="seat_05 D"><a href="#row_05" title="05D">05D</a></li>
<li class="seat_06 A"><a href="#row_06" title="06A">06A</a></li>
<li class="seat_06 B"><a href="#row_06" title="06B">06B</a></li>
<li class="seat_06 C"><a href="#row_06" title="06C">06C</a></li>
<li class="seat_06 D"><a href="#row_06" title="06D">06D</a></li>
<li class="seat_07 A"><a href="#row_07" title="07A">07A</a></li>
<li class="seat_07 B"><a href="#row_07" title="07B">07B</a></li>
<li class="seat_07 C"><a href="#row_07" title="07C">07C</a></li>
<li class="seat_07 D"><a href="#row_07" title="07D">07D</a></li>
<li class="seat_08 A"><a href="#row_08" title="08A">08A</a></li>
<li class="seat_08 B"><a href="#row_08" title="08B">08B</a></li>
<li class="seat_08 C"><a href="#row_08" title="08C">08C</a></li>
<li class="seat_08 D"><a href="#row_08" title="08D">08D</a></li>
<li class="seat_09 A"><a href="#row_09" title="09A">09A</a></li>
<li class="seat_09 B"><a href="#row_09" title="09B">09B</a></li>
<li class="seat_09 C"><a href="#row_09" title="09C">09C</a></li>
<li class="seat_09 D"><a href="#row_09" title="09D">09D</a></li>
<li class="seat_10 A"><a href="#row_10" title="10A">10A</a></li>
<li class="seat_10 B"><a href="#row_10" title="10B">10B</a></li>
<li class="seat_10 C"><a href="#row_10" title="10C">10C</a></li>
<li class="seat_10 D"><a href="#row_10" title="10D">10D</a></li>
<li class="seat_11 A"><a href="#row_11" title="11A">11A</a></li>
<li class="seat_11 B"><a href="#row_11" title="11B">11B</a></li>
<li class="seat_11 C"><a href="#row_11" title="11C">11C</a></li>
<li class="seat_11 D"><a href="#row_11" title="11D">11D</a></li>
<li class="seat_12 A"><a href="#row_12" title="12A">12A</a></li>
<li class="seat_12 B"><a href="#row_12" title="12B">12B</a></li>
<li class="seat_12 C"><a href="#row_12" title="12C">12C</a></li>
<li class="seat_12 D"><a href="#row_12" title="12D">12D</a></li>
<li class="seat_13 A"><a href="#row_13" title="13A">13A</a></li>
<li class="seat_13 B"><a href="#row_13" title="13B">13B</a></li>
<li class="seat_13 C"><a href="#row_13" title="13C">13C</a></li>
<li class="seat_13 D"><a href="#row_13" title="13D">13D</a></li>
<li class="seat_14 A"><a href="#row_14" title="14A">14A</a></li>
<li class="seat_14 B"><a href="#row_14" title="14B">14B</a></li>
<li class="seat_14 C"><a href="#row_14" title="14C">14C</a></li>
<li class="seat_14 D"><a href="#row_14" title="14D">14D</a></li>
<li class="seat_15 A"><a href="#row_15" title="15A">15A</a></li>
<li class="seat_15 B"><a href="#row_15" title="15B">15B</a></li>
<li class="seat_15 C"><a href="#row_15" title="15C">15C</a></li>
<li class="seat_15 D"><a href="#row_15" title="15D">15D</a></li>
<li class="seat_16 A"><a href="#row_16" title="16A">16A</a></li>
<li class="seat_16 B"><a href="#row_16" title="16B">16B</a></li>
<li class="seat_16 C"><a href="#row_16" title="16C">16C</a></li>
<li class="seat_16 D"><a href="#row_16" title="16D">16D</a></li>
<li class="seat_17 A"><a href="#row_17" title="17A">17A</a></li>
<li class="seat_17 B"><a href="#row_17" title="17B">17B</a></li>
<li class="seat_17 C"><a href="#row_17" title="17C">17C</a></li>
<li class="seat_17 D"><a href="#row_17" title="17D">17D</a></li>
<li class="seat_18 A"><a href="#row_18" title="18A">18A</a></li>
<li class="seat_18 B"><a href="#row_18" title="18B">18B</a></li>
<li class="seat_18 C"><a href="#row_18" title="18C">18C</a></li>
<li class="seat_18 D"><a href="#row_18" title="18D">18D</a></li>
<li class="seat_19 A"><a href="#row_19" title="19A">19A</a></li>
<li class="seat_19 B"><a href="#row_19" title="19B">19B</a></li>
<li class="seat_19 C"><a href="#row_19" title="19C">19C</a></li>
<li class="seat_19 D"><a href="#row_19" title="19D">19D</a></li>
<li class="seat_20 A"><a href="#row_20" title="20A">20A</a></li>
<li class="seat_20 B"><a href="#row_20" title="20B">20B</a></li>
<li class="seat_20 C"><a href="#row_20" title="20C">20C</a></li>
<li class="seat_20 D"><a href="#row_20" title="20D">20D</a></li>
<li class="seat_21 A"><a href="#row_21" title="21A">21A</a></li>
<li class="seat_21 B"><a href="#row_21" title="21B">21B</a></li>
<li class="seat_21 C"><a href="#row_21" title="21C">21C</a></li>
<li class="seat_21 D"><a href="#row_21" title="21D">21D</a></li>
<li class="seat_22 A"><a href="#row_22" title="22A">22A</a></li>
<li class="seat_22 B"><a href="#row_22" title="22B">22B</a></li>
<li class="seat_22 C"><a href="#row_22" title="22C">22C</a></li>
<li class="seat_22 D"><a href="#row_22" title="22D">22D</a></li>
<li class="seat_23 A"><a href="#row_23" title="23A">23A</a></li>
<li class="seat_23 B"><a href="#row_23" title="23B">23B</a></li>
<li class="seat_23 C"><a href="#row_23" title="23C">23C</a></li>
<li class="seat_23 D"><a href="#row_23" title="23D">23D</a></li>
<li class="seat_24 A"><a href="#row_24" title="24A">24A</a></li>
<li class="seat_24 B"><a href="#row_24" title="24B">24B</a></li>
<li class="seat_24 C"><a href="#row_24" title="24C">24C</a></li>
<li class="seat_24 D"><a href="#row_24" title="24D">24D</a></li>
<li class="seat_25 A"><a href="#row_25" title="25A">25A</a></li>
<li class="seat_25 B"><a href="#row_25" title="25B">25B</a></li>
<li class="seat_25 C"><a href="#row_25" title="25C">25C</a></li>
<li class="seat_25 D"><a href="#row_25" title="25D">25D</a></li>
</ul>
<!-- end #airplane -->
<p>
<input type="submit" value="Save" class="button" id="book" />
</p>
</div>
我认为我需要创建一个函数，为每个成功的搜索结果分配一个id或类，然后创建另一个函数来处理将变量传递给确认页面。请帮忙！这是至关重要的。提前谢谢。
答案 0 :(得分：0)
您可以使用简单的ID选择器收集信息，如下所示：
$('#bus_num')
$('#time')
$('#seats')
//etc
然后，您可以使用.text或.html方法将此信息放入模式框中，possibly boxy plugin is an option here.
然后，当您提交要传递到数据库进行更新的值时，再次使用选择器中的信息，将其格式化为对象并传递给您的ajax函数。 jQuery将自动清理并转换为查询字符串：
var post_details = {
'bus_num': $('#bus_num').text(),
'time': $('#time').text()
};
$.post('/confirm_booking', post_details, [....]);