对不起,我不是程序员,真的不知道如何处理这个…
在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…"部分