引导下拉菜单与滑块 jquery ui 冲突答案

【问题标题】：Bootstrap dropdown conflict with slider jquery ui引导下拉菜单与滑块 jquery ui 冲突
【发布时间】：2017-12-14 07:00:46
【问题描述】：

我在我的 OpenCart 2.3 项目中遇到了一些问题。让我简要介绍一下。

在产品列表页面，基本上catalog -> view -> product -> category.tpl，我使用货币模块和过滤器模块。

参考图片

当我使用滑块过滤我的产品列表时，它正在刷新页面数据（注意：此处页面未重新加载），但货币下拉菜单不起作用。

如果我再次使用滑块，则下拉菜单有效。

意思是：第一次加载页面后。如果我使用滑块，那么对于每个奇数转，滑块都在工作，对于每个偶数，滑块都不起作用。

现在你对这个问题有了一点了解。

让我们进入编码部分。

我在module -> filter.tpl 文件中。这里为滑块编写了这个 jquery

$("#slider-range").slider({});

在滑块函数中，传递一个对象，如下：

$("#slider-range").slider({
    range: true,
    min: <?php echo $min_product_price ; ?>,
    max: <?php echo $max_product_price; ?>,
    values: [ <?php echo $amount_min; ?>, <?php echo $amount_max; ?> ],
    create: function (event, ui) {
        $("#amount").val("<?php echo $currency_symbol; ?> " + $("#slider-range" ).slider( "values", 0 ) +"  -  <?php echo $currency_symbol; ?> " +
        $("#slider-range").slider("values", 1 ) );
        $('#amtmin').text('<?php echo $currency_symbol; ?> '+$("#slider-range").slider("values")[0]);
        $('#amtmax').text('<?php echo $currency_symbol; ?> '+$("#slider-range").slider("values")[1]);
      },
    slide: function( event, ui ) {
        $('#amtmin').text('<?php echo $currency_symbol; ?> '+$("#slider-range").slider("values")[0]);
        $('#amtmax').text('<?php echo $currency_symbol; ?> '+$("#slider-range").slider("values")[1]);
        $("#slider-range").val( "<?php echo $currency_symbol; ?> " + ui.values[ 0 ] + "  -  <?php echo $currency_symbol; ?> " + ui.values[ 1 ] );
      },
    stop: function (event, ui) {
        filter = [];
        $('input[name^=\'filter\']:checked').each(function(element) {
              filter.push(this.value);
            });
        amount=[];
        var amtmin = ui.values[0];
        var amtmax = ui.values[1];
        amount.push(amtmin,amtmax);
        $('#amtmin').text("<?php echo $currency_symbol; ?> "+$("#slider-range").slider("values")[0]);
        $('#amtmax').text("<?php echo $currency_symbol; ?> "+$("#slider-range").slider("values")[1]);
        window.history.pushState("","",'<?php echo $action; ?>&filter=' + filter.join(',')+'&amtmin=' + amtmin+'&amtmax='+amtmax);
        $("body").load('<?php echo $action; ?>&filter=' + filter.join(',')+'&amtmin=' + amtmin+'&amtmax='+amtmax);
        // window.location.href = '<?php echo $action; ?>&filter=' + filter.join(',')+'&amtmin=' + amtmin+'&amtmax='+amtmax;
    }
});

关注这一行：

$("body").load('<?php echo $action; ?>&filter=' + filter.join(',')+'&amtmin=' + amtmin+'&amtmax='+amtmax);

这行代码基本上是在我的body标签中加载一个新的url，注意，我的header，我的货币都在body中。我不知道这段代码发生了什么。因此，一次货币下拉菜单有效，另一次无效。

我还想说点什么，你可以看到最后评论的那行。

window.location.href = '<?php echo $action; ?>&filter=' + filter.join(',')+'&amtmin=' + amtmin+'&amtmax='+amtmax;

如果我正在加载新文档（基本上是重新加载），那么一切都很好。

但我不想重新加载页面。你们能帮我解决这个问题吗？

【问题讨论】：

标签： javascript php jquery twitter-bootstrap opencart

【解决方案1】：

您好，请在下面的代码中输入您的最低和最高价格

$this->currency->format((float)$min_product_price ? $min_product_price : $min_product_price , $min_product_price)

$this->currency->format((float)$max_product_price ? $max_product_price : $max_product_price , $max_product_price )

注意：您需要将这些行放在controller/product/category.php

【讨论】：