jquery ajax passing variables through functions
I need a little help on finishing my script that allows the User to confirm their bus reservation. I am using jQuery/Ajax:
allow the User to input a date and location to search the database of available buses
display each result(each bus) in its own div that has the bus info and a button that will send the User to the confirmation page which is in a modal box called ColorBOx
What I want to accomplish:
When the User clicks on the RSVP button, have jquery collect the bus number, date, and location so that I can display the info in the modal box along with a seat selector before they decide to confirm their booking
Once they click on the confirmation button in the modal box, gather the bus info again along with the seat selected and update a bus database
this is 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_开发者_如何学C04" 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>
I think that I need to create a function that assigns an id or class to each successful search result and then create another function that will handle passing the variables to the confirmation page. Please help! this is crucial. Thanks ahead of time.
You can collect the information just using simple ID selectors like so:
$('#bus_num')
$('#time')
$('#seats')
//etc
Then you can utilise the .text or .html methods to put this information into a modal box, possibly boxy plugin is an option here.
Then when you go to submit the values to pass onto your database for updating, again using the information from the selectors, format this into an object and pass onto your ajax function. jQuery will automatically sanitize and convert to a query string:
var post_details = {
'bus_num': $('#bus_num').text(),
'time': $('#time').text()
};
$.post('/confirm_booking', post_details, [....]);
加载中,请稍侯......
精彩评论