JQuery AJAX, передавая переменные через функции - PullRequest
Новая
       7

JQuery AJAX, передавая переменные через функции

0 голосов
/ 06 июня 2011

Мне нужна небольшая помощь в завершении скрипта, который позволяет пользователю подтвердить бронирование.Я использую jQuery / Ajax:

  1. позволяет пользователю вводить дату и местоположение для поиска в базе данных доступных автобусов

  2. отображать каждый результат(каждая шина) в своем собственном div, который имеет информацию о шине и кнопку, которая отправит пользователя на страницу подтверждения, которая находится в модальном поле под названием ColorBOx

Что я хочу выполнить:

  1. Когда пользователь нажимает на кнопку RSVP, попросите jquery собрать номер шины, дату и местоположение, чтобы я мог отобразить информацию в модальном поле вместе с селектором места передони решают подтвердить свое бронирование

  2. Как только они нажимают кнопку подтверждения в модальном окне, снова собирают информацию об автобусе вместе с выбранным местом и обновляют базу данных автобуса

это 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>

Я думаю,что мне нужно создать функцию, которая назначает идентификатор или класс для каждого успехаl результат поиска, а затем создайте другую функцию, которая будет обрабатывать передачу переменных на страницу подтверждения.Пожалуйста помоги!это очень важноЗаранее спасибо.

1 Ответ

0 голосов
/ 06 июня 2011

Вы можете собирать информацию, используя простые селекторы идентификаторов, например: 

$('#bus_num')
$('#time')
$('#seats')
//etc

Затем вы можете использовать методы .text или .html, чтобы поместить эту информацию в модальное поле, возможно, здесь может использоваться плагин boxy.

Затем, когда вы отправите значения для передачи в базу данных для обновления, снова используя информацию от селекторов, отформатируйте их в объект и передайте в вашу функцию ajax. jQuery автоматически очистит и преобразует в строку запроса: 

var post_details = {
    'bus_num': $('#bus_num').text(),
    'time': $('#time').text()
};

$.post('/confirm_booking', post_details, [....]);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...