JQuery DatePicker冲突在Joomla 3网站



对不起,我不是程序员,真的不知道如何处理这个…

在Joomla 3.3.0网站(http://lantanaweb.com/savoy-sofia/sofia/)上,我添加了一个自定义HTML代码模块(这意味着将JS和脚本添加到Joomla模块)来显示预订表单中的日期选择器。但是日期选择器没有显示。

并且,在添加此模块后,整个页面的JQuery幻灯片模块停止工作。

然后我安装了JQuery Easy Plugin解决JQuery相关的冲突,幻灯片实际上是固定的。

但是我仍然不能使日期显示,因为它应该做的。我的joomla自定义HTML模块代码是:

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<link type="text/css" href="css/overcast/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<form action="https://reservations.verticalbooking.com/reservation_hotel.htm" method="post" name="myform" id="myform" target="_blank" style="margin:0px; padding:0px;" onsubmit="invia_form();_gaq.push(['_linkByPost', this]);" >

                  <!-- ###################### -->
                  <!-- PARAMETERS TO CUSTOMIZE -->
                  <input name="gg" id="gg" value="" type="hidden">
                  <input name="mm" id="mm" value="" type="hidden">
                  <input name="aa" id="aa" value="" type="hidden">
                  <input name="id_albergo" value="312" type="hidden">
                  <input name="lingua_int" value="ita" type="hidden">
                  <input name="dc" value="710" type="hidden">
                  <input name="id_stile" value="9456" type="hidden">
                  <input name="headvar" value="ok" type="hidden">
                  <input name="graph_be" value="4" type="hidden">

<div id="arrival_date" class="blocco">
    <div class="label">Data di Arrivo</div>                
    <div class="tendina">
        <input id="datepicker" type="text" value="" >
    </div>
    </div>
<div id="nights" class="blocco">
    <div class="label">Notti</div>                
    <div class="tendina">
        <select class="select" name="notti_1" >
            <option value="1" selected>1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</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>
        </select>
    </div>
</div>
<div id="rooms" class="blocco">
    <div class="label">Camere</div>                
    <div class="tendina">
        <select class="select" name="tot_camere">
            <option value="1" selected>1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>
    </div>
</div>
<div id="adults" class="blocco">
    <div class="label">Adulti</div>                
    <div class="tendina">
        <select class="select" name="tot_adulti">
            <option value="1">1</option>
            <option value="2" selected="selected">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>
    </div>
</div>
<div id="children" class="blocco">
    <div class="label">Bambini</div>                
    <div class="tendina">
        <select class="select" name="tot_bambini" >
            <option value="0" selected >0</option>      
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>
    </div>
</div>
<div id="search" class="blocco">
  <input id="button" type="submit" value="cerca" />
  </input>
</div>
<div id="cancella"><a href="https://reservations.verticalbooking.com/reservation_hotel.htm?id_albergo=312&dc=710&lingua_int=ita&headvar=ok&id_stile=9456&graph_be=4&cancel=pren">Annulla/Modifica Prenotazione</a></div>
</form>
<script type="text/javascript">
$(document).ready( function() {
var now = new Date();
var today = now.getDate() + '/' + (now.getMonth() + 1) + '/' + now.getFullYear();
$('#datepicker').val(today);
});
</script>
<script type="text/javascript">
$(function() {
$( "#datepicker" ).datepicker({ minDate: "0", showOtherMonths: true, selectOtherMonths: true, altField: "#gg",  altFormat: "dd" });
});
function invia_form()
{
var data =  $( "#datepicker" ).attr('value');
//alert(data);
data = data.split('/');
$('#gg').attr({value:data[0]});
$('#mm').attr({value:data[1]});
$('#aa').attr({value:data[2]});
//alert($('#gg').attr('value')+' - '+$('#mm').attr('value')+' - '+$('#aa').attr('value'));
//$('#myform').submit();
}
</script>

虽然我在论坛上读了一些相关的帖子,但我真的不知道从哪里开始…任何帮助都将是非常感激的……谢谢!

编辑1:错误是:

$(...).datepicker is not a function related code (line 435) is: $( 
"#datepicker" ).datepicker({ minDate: "0", showOtherMonths: true, 
selectOtherMonths: true, altField: "#gg",   altFormat: "dd" });

如果您查看页面中的其他jQuery,它使用别名jQuery而不是$。使用$可能会导致与MooTools或其他JavaScript库的冲突。

转换你的代码,例如:

$(function() {
    $( "#datepicker" ).datepicker({ minDate: "0", showOtherMonths: true, selectOtherMonths: true, altField: "#gg",  altFormat: "dd" });
});

:

jQuery(function($) {
   $( "#datepicker" ).datepicker({ minDate: "0", showOtherMonths: true, selectOtherMonths: true, altField: "#gg",  altFormat: "dd" });
});

注意函数开头的jQuery别名和括号中的$。任何其他不在这个包装器函数内的jQuery代码必须使用jQuery,而不是$。你也许可以把它们都移到里面,没有任何不良影响。

实际上,jQuery Easy扩展文档也涵盖了这一点。看一下"But wait…"部分

最新更新