Question

我的主页上有一个滑块，并开发了一个简单的datepicker应用程序，也应该显示在主页上。我使用Jumi制作了一个模块，其中包含一个完整的datepicker模块，包括一段Javascript和一个Joomla Jquery库的调用。但是，当我尝试在同一页面上同时显示滑块和日期选择器时，滑块会消失。我相信这是一个Jquery问题。当我从模块中删除Jquery调用时，会出现滑块，但是datepicker功能停止工作。

我尝试了几乎所有的东西，包括NoConflict模式，然而却没有解决任何问题。在这个Jumi模块中调用Jquery库的最佳方法是什么？我基本上只需要调用一次这个库，并且两个功能都使用它但是这样做的方法超出了我的范围。

模块中的代码：

<link rel="stylesheet" href="/js/css/ui-    lightness/jquery-ui-1.10.3.custom.css" type="text/css" />

<script src="/js/jquery-1.9.1.js"></script>
<script src="/js/jquery-ui-1.10.3.custom.js">    </script>
<script src="/js/jquery.ui.datepicker-nl.js"></script>
<script src="/js/staying_length_cal.js"></script>

<script type="text/javascript">
$(function() {
$('input.datepicker').datepicker({
dateFormat: 'dd/mm/yy',
yearRange: "-0:+2",
changeMonth: true,
 buttonImage: 'images/calendar.gif',
changeYear: true,
showOn: 'both',
buttonImageOnly: false
},
$.datepicker.regional['nl']);
 });
</script>

<?php
if(isset($_POST['submit']))
{
 $nights = $_POST['nights'];
$persons = $_POST['persons'];
$start_date = $_POST['start_date'];
$end_date = $_POST['end_date'];

header ("Location: Link that uses form information");} 
?>

 <form method="post" id="stayingCalculation">
  <fieldset>
   <h4>Ik zoek</h4>
   <select id="stayLength" name="nights" onchange="calculateTotal(); " />
    <option value="week">Week</option>
    <option value="midweek">Midweek</option>
    <option value="weekend">Weekend</option>
    <option value="twoweek">Twee weken</option>
    <option value="threeweek">Drie weken</option>
    <option value="3">3 Nachten</option>
    <option value="4">4 Nachten</option>
    <option value="5">5 Nachten</option>
    <option value="6">6 Nachten</option>
    <option value="7">7 Nachten</option>
    <option value="8">8 Nachten</option>
    <option value="9">9 Nachten</option>
    <option value="10">10 Nachten</option>
    <option value="11">11 Nachten</option>
    <option value="12">12 Nachten</option>
    <option value="13">13 Nachten</option>
    <option value="14">14 Nachten</option>
    <option value="15">15 Nachten</option>
    <option value="16">16 Nachten</option>
    <option value="17">17 Nachten</option>
    <option value="18">18 Nachten</option>
    <option value="19">19 Nachten</option>
    <option value="20">20 Nachten</option>
</select>

<h4>met</h4>
   <select name="persons">
        <option value="0">Niet relevant</option>
    <option value="1">1 persoon</option>
    <option value="2">2 personen</option>
    <option value="3">3 personen</option>
    <option value="4">4 personen</option>
    <option value="5">5 personen</option>
    <option value="6">6 personen</option>
   </select>
    <br/>

<h4>tussen</h4>
<p>   <input type="text" name="start_date" id="start_date"  value="" class="datepicker" data-jquerydateformat="dd-mm-yy" data-isodateformat="dd-mm-yyyy" onchange="setExpDate(this.value)" />
    </p>
  <h4>en</h4>
<p>    <input type="text" name="end_date" id="end_Date" value="" class="datepicker" data-jquerydateformat="dd-mm-yy" data-isodateformate="dd-mm-yyyy" onchange="setStartDate(this.value)" /> </p>
    </fieldset>
<input type="submit" name="submit" value="Zoeken" class="btn btn-primary"><br>
</form>

提前致谢！

Answer 1

对于多个jQuery包含，你可以使用jQueryEasy插件，它试图只包含一次jQuery。

下载插件安装插件启用插件在插件的配置页面中，启用jQuery。

就是这样。

http://extensions.joomla.org/extensions/core-enhancements/performance/jquery-scripts/18327

Answer 2

我遇到了同样的问题，我用以下方法解决了这个问题：

<script>

jQuery.noConflict();

jQuery(function() {

jQuery( "#datepicker1" ).datepicker();

jQuery( "#datepicker2" ).datepicker();

});

</script>

而不是$(...

也许这对你也有帮助！

Joomla，无法在同一页面上显示滑块和日期选择器！冲突？

2 个答案: