如何在Joomla中使用jquery noconflict

Question

我正在使用PHP，JavaScript Json来填充表单中的字段。 一切运行良好，直到我将joomla从3.1.5升级到3.2.2。 我相信这与jQuery冲突。

所以这里是我正在使用的代码。 如果我使用此独立版本，则可以正常运行，但不能在Joomla中运行。

请帮助我解决此jquery冲突。

<?php

try {

    $objDb = new PDO('mysql:host=localhost;dbname=prod', 'xxx', 'xxxx');
    $objDb->exec('SET CHARACTER SET utf8');

    $sql = "SELECT id, Master, Area, Rate1
            FROM `products`
            WHERE `Master` = 0";
    $statement = $objDb->query($sql);
    $list = $statement->fetchAll(PDO::FETCH_ASSOC);

} catch(PDOException $e) {
    echo 'There was a problem';
}

?>
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link href="/1/finished/css/core.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
<script>
function sendForm() {
    document.myform.submit()
}
</script>

<div id="wrapper">

    <form id="myform" action="/index.php/it-hardware-disposal-cost-upto-25-items" method="post">

        <select name="Area" id="Area" class="update">
            <option value="">Select Your Location</option>
            <?php if (!empty($list)) { ?>
                <?php foreach($list as $row) { ?>
                    <option value="<?php echo $row['id']; ?>">
                        <?php echo $row['Area']; ?>
                    </option>
                <?php } ?>
            <?php } ?>
        </select>

        <select name="County" id="County" class="update"
            disabled="disabled">
            <option value="">----</option>
        </select>

        <select name="City" id="City" class="update"
            disabled="disabled" onchange="this.form.submit()">
            <option value="">----</option>
        </select>


    </form>

</div>


<script src="/1/finished/js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/1/finished/js/core.js" type="text/javascript"></script>
</body>
</html>

我坚信问题出在这里，这是core.js的问题，这可能是因为joomla中的其他代码相互冲突。

var formObject = {
        run : function(obj) {
                if (obj.val() === '') {
                        obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
                } else {
                        var id = obj.attr('id');
                        var v = obj.val();
                        jQuery.getJSON('/1/finished/mod/update.php', { id : id, value : v }, function(data) {
                                if (!data.error) {
                                        obj.next('.update').html(data.list).removeAttr('disabled');
                                } else {
                                        obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
                                }
                        });
                }
        }
};
$(function() {

        $('.update').live('change', function() {
                formObject.run($(this));
        });

});

因此，Core.js使用Jquery.json通过具有以下代码的update.php填充数据。

<?php
if (!empty($_GET['id']) && !empty($_GET['value'])) {

        $id = $_GET['id'];
        $value = $_GET['value'];

        try {

                $objDb = new PDO('mysql:host=localhost;dbname=xxxx', 'xxx', 'xxx');
                $objDb->exec('SET CHARACTER SET utf8');

                $sql = "SELECT id, Master, Area
                                FROM `products`
                                WHERE `master` = ?";
                $statement = $objDb->prepare($sql);
                $statement->execute(array($value));
                $list = $statement->fetchAll(PDO::FETCH_ASSOC);

                if (!empty($list)) {

                        $out = array('<option value="">Select Your Area, City</option>');

                        foreach($list as $row) {
                                $out[] = '<option value="'.$row['id'].'">'.$row['Area'].'</option>';
                        }

                        echo json_encode(array('error' => false, 'list' => implode('', $out)));

                } else {
                        echo json_encode(array('error' => true));
                }

        } catch(PDOException $e) {
                echo json_encode(array('error' => true));
        }

} else {
        echo json_encode(array('error' => true));
}
?>

Answer 1

在Joomla中使用jQuery时，最好使用jQuery（）代替工厂符号$（） 。 这样您就不会有冲突。 Joomla默认使用MooTools，因此MooTools拥有工厂符号的所有权。

否则，您需要使用jQuery.noConflict（）

例如..因此：

$(function() {

    $('.update').live('change', function() {
            formObject.run($(this));
    });

});

会变成这样：

jQuery(function() {

    jQuery('.update').live('change', function() {
            formObject.run(jQuery(this));
    });

});

如何使用jQuery.noConflict（）的示例，因此可以使用$（）工厂符号：

<!-- Another way to put jQuery into no-conflict mode. -->
<script src="mootools-core.js"></script>
<script src="jquery-min.js"></script>
<script>
jQuery.noConflict();
jQuery( document ).ready(function( $ ) {
       // You can use the locally-scoped $ in here as an alias to jQuery.
       $( "div" ).hide();
});

// The $ variable in the global scope has the mootools-core.js meaning.
window.onload = function(){
   var mainDiv = $( "main" );
}
</script>

Joomla还具有jQuery noConflict插件，因此如果您不想自己添加它，也可以使用其中一个插件来提供帮助。

Joomla插件可以查看：

jQuery Easy

jQuery脚本Joomla插件

您必须在自定义jQuery代码之前使用jQuery.noConflict（） ，或者始终必须使用jQuery（）而不是$（） 。

看看是否有帮助！

更新

如果打开浏览器控制台，您将看到5个JavaScript错误..例如未定义jQuery，以及其他取决于jQuery的错误。 同样，如果您查看脚本的加载顺序，则会看到在依赖于jQuery的其他脚本之后加载了jQuery。 您必须确保jQuery已正确地在Joomla中加载，并且所有错误都已修复，以使您的代码正常工作。

Answer 2

我相信Joomla中包含的jQuery版本已弃用jQuery live方法。 它在示例代码中有效，因为您正在加载jQuery 1.6.4。 在Joomla代码中，尝试将此链接起来：

$(function() {

        $('.update').live('change', function() {
                formObject.run($(this));
        });

});

对此：

jQuery(function() {

        jQuery('.update').on('change', function() {
                formObject.run(jQuery(this));
        });

});

看看是否可行。

编辑

我附上了链接的屏幕截图，其中有两个错误我们应该首先解决。

在此处输入图片说明

脚本tabs-state.js抛出未定义的错误jQuery。 这很可能意味着您尚未加载jQuery库，从而导致错误。
bootsrap.min.js抛出一个错误，指出没有方法“ on”指示已加载jQuery，而是旧版本。 Joomla 3.x带有1.8.23，但是在您的网页上查看DOM时显示版本1.6正在加载。

使用Joomla核心加载jQuery和Bootstrap的正确方法如下：

JHtml::_('jquery.framework');
JHtml::_('bootstrap.framework');

您应该删除手动加载这些框架中任何一个的行，并在可能的情况下，将这些方法放在模板的index.php的顶部，以确保在运行任何其他嵌入式脚本之前将它们加载。

尝试解决这些问题，并让我们查看是否从控制台中删除了这些错误，以及在正确加载它们之后代码是否按预期执行。

如何在Joomla中使用jquery noconflict

问题描述

2 个解决方案

解决方案1
0 2014-03-25 16:25:17

解决方案2
0 已采纳 2014-03-25 16:30:05

如何在Joomla中使用jquery noconflict

问题描述

2 个解决方案

解决方案1 0 2014-03-25 16:25:17

解决方案2 0 已采纳 2014-03-25 16:30:05

解决方案1
0 2014-03-25 16:25:17

解决方案2
0 已采纳 2014-03-25 16:30:05