Question

我需要在colorbox中使用动态网址，但link变量为空。我是在没有使用函数的情况下尝试过的，只是link = data;，但它不起作用。

var link = '';

function getURL(){
    $.ajax({
        url:"<?echo get_template_directory_uri();?>/designesia/bookAjax.php",
        cache: false,
        type: "POST", 
        data: $("#myForm").serialize(),
        success:function(data){
            link = data;
        }
    });
}

$(".iframe").click(getURL);

$(".iframe").colorbox({
    iframe:true, 
    width: "50%", 
    height: "80%", 
    href: link, 
});

Answer 1

您可以将颜色框代码放在接收成功的函数中：

function getURL(){
    $.ajax({
        url:"<?echo get_template_directory_uri();?>/designesia/bookAjax.php",
        cache: false,
        type: "POST", 
        data: $("#myForm").serialize(),
        success:function(data){
           $(".iframe").colorbox({
               iframe:true, 
               width: "50%", 
               height: "80%", 
               href: data, 
           }); 
        }
    });
}

问题是您在接收响应或甚至响应click事件之前设置了link的值。这样做可确保一旦请求结束，您将数据应用为href。

更新

元素.iframe应该是一个锚链接

<a href="" class="iframe">My Link</a>

如果应该自动打开一个窗口，代码应该触发一次点击：

$(document).ready(function(){
    $('.example').click(function(event){
        $.ajax({
            url:"<?echo get_template_directory_uri();?>/designesia/bookAjax.php",
            cache:false,
            success: function(data){
                $(".iframe").colorbox({
                   iframe:true, 
                   width: "50%", 
                   height: "80%", 
                   href: data 
               }).click();
            }
        });
    });
});

Answer 2

谢谢，但现在正在工作。

    <script>
    jQuery(document).ready(function () {
        $('.example').click(function(event){
            $.ajax({
                url:"<?echo get_template_directory_uri();?>/designesia/bookAjax.php",
                cache:false,
                success: function(data){
                    $(".iframe").colorbox({
                       iframe:true, 
                       width: "50%", 
                       height: "80%", 
                       href: data 
                   }).click();
                }
            });
        });
    });

    </script>
        <div id="b_editDates">
         <h3>Book in Booking.Com</h3>
             <form method="post" id="myForm" action="">
             <div class="b_availFormInner">

                 <div class="b_availDatesInner">

                     <span class="text-label"><i class="fa fa-calendar"></i> Check In Date</span>
                        <br>
                        <input type="text" name="datep1" id="datep1" style="cursor:default" value="<? echo date('d-m-Y'); ?>" class="form-control" readonly />

                 </div>
                <br>

                 <div class="b_availDatesInner">
                     <span class="text-label"><i class="fa fa-calendar"></i> Check Out Date</span>
                      <br>
                      <input type="text" name="datep2" id="datep2" style="cursor:default" value="<? echo date('d-m-Y', strtotime($stop_date . ' + 1 day')); ?>" class="form-control" readonly />

                 </div>
                 <br>
                 <div id="b_availSubmit">
                    <!-- <input type="submit" value="Check NOW!" id="bookingcheck" name="bookingcheck" class="btn btn-custom btn-large"/> -->

                 </div>
                 </div>
             </form>
         </div>
         <div id="div1"></div>

        <a class="btn btn-custom btn-large iframe" >Check NOW!</a>

PHP代码：

$datep1 = explode("-", $_POST['datep1']);
$datep2 = explode("-", $_POST['datep2']);

$link = array(
    "aid" => 'XX',
    "hotel_id" => 'XX',
    "lang" => "en",
    "pb" => "",
    "stage" => 0,
    "hostname" => "www.booking.com",
    "checkin_monthday" => $datep1[0],
    "checkin_year_month" => $datep1[2].'-'.$datep1[1],
    "checkout_monthday" => $datep2[0],
    "checkout_year_month" => $datep2[2].'-'.$datep2[1]
);

echo "XX?".http_build_query($link);

Answer 3

以下代码正在运行：

        $(".iframe").click(function() {
            var link = '';
            $.ajax({
                url:"<?echo get_template_directory_uri();?>/designesia/bookAjax.php",
                cache: false,
                async: false,
                type: "POST", 
                data: $("#myForm").serialize(),
                success: function(data){ 
                    link = data; 
                }
            });
            $(".iframe").colorbox({
                iframe:true, 
                innerWidth: "45%",
                height: "90%", 
                href: link,             
            }); 
        });

jQuery ajax返回成功数据

3 个答案:

更新