Question

我的网站上有一个滑动预订表格。检查http://royal.ikbiz.net 问题是，当我尝试在弹出窗口中显示结果时。直到第二次点击，滑动按钮才会显示。换句话说，第一次点击不会影响滑动按钮。这是我的代码Jquery代码。

$(function(){
    $("#form_reservation").submit(function(){
        $.ajax({
            type : "POST",
            url : "demo_result_ajax.php",
            data: $(this).serialize(),
            dataType : "json",
            success : function(data) {
                //$('.data_reserv').html(data['start_date']+"<br/>"+data['start_time']+"<br/>"+data['price']);

                // Show popup result
                $('.ry-popup-reserv').fadeIn();

                // Just for passing data in popup element
                var tr, form;
                for (var i = 0; i < data.length; i++) {
                    var time = data[i].start_time;
                    var hour = time.substr(0,2);
                    var min  = time.substr(2,2);

                    tr = $("<tr>");
                    tr.append("<td>" + (i+1) + "</td>");
                    tr.append("<td>" + data[i].newDate + "</td>");
                    tr.append("<td>" + hour +":"+ min +"</td>");
                    //tr.append("<td>" + data[i].cart + "</td>");
                    //tr.append("<td>" + data[i].currency + " " + data[i].newPrice + "<input type=text name=id["+ data[i].uid +"] value="+ data[i].uid +" /></td>");
                    tr.append("<td>" + data[i].currency + " " + data[i].newPrice + "</td>");
                    //tr.append("<td><select name=caddy["+ data[i].uid +"]><option value='standard'>Standard</option><option value='extra'>Extra</option></select></td>");
                    //tr.append("<td><select name=cart["+ data[i].uid +"]><option value='standard'>Standard</option><option value='extra'>Extra</option></select></td>");
                    //tr.append("<td><a href='golf.php?menu=nonmember-reserv&uid=" + data[i].uid + "' class=ry-btn-book>Book Now</a></td></tr>");
                    tr.append("<td>" + data[i].cart + "</td>");
                    tr.append("<td><a href='golf.php?menu=check-member&cart=" + data[i].cart + "&uid=" + data[i].uid + "' class=ry-btn-book>Book Now</a></td></tr>");
                    $('.ry-popup-reserv table.ry-table-gold').append(tr);
                }                   

                // Hide slider, but i click the button again it work on second click.
                $('#ry-slide-btn').animate({left:'0px'},"fast");
                $('#ry-slide-reservation').animate({left:'-655px'},"fast");
            }
        });

        return false;
    });
});

这是我的HTML代码：

<div id="ry-slide-reservation">
    <div class="ry-slide-logo"><img src="images/ry-reservation-logo.png" /></div>
    <form id="form_reservation" autocomplete=off>
        <table width="600" border="0" cellspacing="0" cellpadding="10" class="ry-table-reservation">
          <tr>
            <td height="30" colspan="4">&nbsp;</td>
            </tr>
          <tr>
            <td height="30">Date</td>
            <td height="30">
                <input type="text" name="start_date" id="date-datepicker" />
            </td>
            <td height="30" style="padding-left:10px;">Cart</td>
            <td height="30">
                <input type="radio" name="cart" value="standard" checked="checked" /> Standard
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="cart" value="extra" /> Extra
            </td>
          </tr>
          <tr>
            <td height="30">Time</td>
            <td height="30">
            <select name="start_hour">
                <option value="05">05</option>
                <option value="06" selected>06</option>
                <option value="07">07</option>
                <option value="08">08</option>
                <option value="09">09</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option value="23">23</option>
            </select>
            <select name="start_min">
                <option value="00">00</option>
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="30" selected>30</option>
                <option value="40">40</option>
                <option value="50">50</option>
            </select>
            </td>
            <td height="30" style="padding-left:10px;">
                <small>* Standard : <br />* Extra : </small>
            </td>
            <td height="30">
                <small>2 Players per cart<br />2 Players per cart</small>
            </td>
          </tr>
          <tr>
            <td height="30">&nbsp;</td>
            <td height="30">&nbsp;</td>
            <td height="30">&nbsp;</td>
            <td height="30">
                <input type="submit" value="Check Avaibility" class="ry-btn-gold"    />
            </td>
          </tr>
        </table>
    </form>
</div>

这个id点击处理程序预订按钮。

// untuk slide reservation
        $('#ry-slide-btn').toggle(function(){
            $('#ry-slide-reservation').animate({left:'0px'},"fast");
            $(this).animate({left:'650px'},"fast");
        }, function(){
            $('#ry-slide-reservation').animate({left:'-655px'},"fast");
            $(this).animate({left:'0px'},"fast");
        });

在JQuery中显示其他元素后，在div元素中模糊

0 个答案: