Java脚本错误与原型

时间:2015-05-09 14:34:16

标签: jquery magento prototypejs conflict magento-1.8

我从magento项目获得js错误如下。我的项目网址为check my project。我认为这是一个错误的原型js.i试过js noconflict但没有用。

错误:

  

未捕获的TypeError :(中间值)(中间值   value)(中间值)(中间值)(中间值)是   不是函数www.bigzaar.com/:1未捕获的ReferenceError:jQuery是   未定义www.bigzaar.com/:93未捕获的ReferenceError:jQuery不是   定义www.bigzaar.com/:151未捕获的ReferenceError:jQuery不是   定义www.bigzaar.com/:157未捕获的ReferenceError:jQuery不是   定义www.bigzaar.com/:420 Uncaught ReferenceError:jQuery不是   定义了jquery.mobile.customized.min.js:10未捕获的ReferenceError:   jQuery没有定义camera.js:2238 Uncaught ReferenceError:jQuery   未定义www.bigzaar.com/:607未捕获的ReferenceError:jQuery是   未定义www.bigzaar.com/:704未捕获的ReferenceError:jQuery是   未定义www.bigzaar.com/:863未捕获的ReferenceError:jQuery是   未定义

MY js档案

/********Javascript for FREE TEXT SEARCH ************/
var Quicksearch = Class.create();
var idSearchInput = '';
Quicksearch.prototype = {
    initialize: function(searchUrl,resultNotice,idSearchInput){
        this.idSearchInput = idSearchInput;
        this.searchUrl = searchUrl;     
        this.onSuccess = this.onSuccess.bindAsEventListener(this);        
        this.onFailure = this.onFailure.bindAsEventListener(this);              
        this.currentSearch = '';    
        this.resultNotice = resultNotice;
    },
    search: function(){ 
        var searchBox = $(this.idSearchInput);

        if(searchBox.value=='')
        {
            return;
        }

        if ((this.currentSearch!="") &&(searchBox.value == this.currentSearch)) {
            return;
        }
        this.currentSearch = searchBox.value;

        searchBox.className =  'loading-result input-text';
        var keyword = searchBox.value;


        url = this.searchUrl+"keyword/" + escape(keyword);

        new Ajax.Request(url, {
              method: 'get',         
              onSuccess: this.onSuccess,

              onFailure: this.onFailure 
          });    
    },
    onFailure: function(transport){
        $(this.idSearchInput).className ="input-text";
    },
    onSuccess: function(transport)
    {
        var showResults = $('showResults');
        showResults.style.display = "block";
        var listResults = $('listResults');
        listResults.style.display = "block";
        var searchBox = $(this.idSearchInput);
        if (transport && transport.responseText) {
            try{
                response = eval('(' + transport.responseText + ')');
            }
            catch (e) {
                response = {};
            }

            if (response.html != "") {
                this.currentSearch = searchBox.value;
                listResults.update(response.html);
                var searchResultNotice = this.resultNotice;
                var strNotice = searchResultNotice.replace("{{keyword}}",this.currentSearch);
                this.updateResultLabel(strNotice);
                searchBox.className = 'search-complete input-text';
            }
            else
            {
                listResults.update(response.html);
                this.updateResultLabel('No results for "<span class="keyword">'+this.currentSearch+'</span>"');
                searchBox.className ="search-complete input-text";
            }           
        }       
    },
    updateResultLabel: function(message)
    {
        $("resultLabel").update(message);
    }
}

我的js调用函数

<script type="text/javascript">
    var quicksearch = new Quicksearch(
        '<?php echo $this->getUrl('freetextsearch/search/quicksearch') ?>',
        '<?php echo $resultNotice ?>',
        'input_search'
    );
    var numberChar = <?php echo Mage::getStoreConfig('freetextsearch/quick_search_setting/number_character')?>;
    Event.observe('input_search', 'keyup', function(event){
        var searchBox = $('input_search');
        if(searchBox.value.length >= numberChar){
            quicksearch.search();
        }   
    });
    function closeDropdown() {
        var showResults = $('showResults');
        showResults.style.display = "none";
    }
</script>

请帮我解决这个错误。任何帮助都会很明显

1 个答案:

答案 0 :(得分:1)

使用Chrome调试器控制台并在“来源”面板中启用“暂停例外”。 Chrome会直接显示异常发生的行。如果没有,重新加载页面一次或两次(如果脚本在模板中的某处内联并且您在Opera或其他一些基于Webkit的浏览器中使用此调试器,那就是必要的,而在Chrome中,即使对于内联脚本,它也可以在大多数时间使用)。

我看到你在包含jQuery 1.8之前尝试使用jQuery。确保在包含jQuery lib之前不要使用jQuery。

在缩小的jQuery 1.8 lib中抛出异常。目前还不清楚是什么原因导致jQuery 1.8 lib抛出异常,我建议你包含未压缩的版本,以便你可以看到异常发生的确切位置。我也看到了压缩版本的jQuery抛出异常而未压缩版本在Magento中没有。使用未压缩的版本可以神奇地“解决”您的问题,但压缩版本不起作用主要暗示jQuery或原型脚本之间的某种冲突。

确保您不使用包含jQuery脚本的扩展程序。一个页面中的多个jQuery版本可能会导致冲突,这也可以通过noconflict解决..

根据我的经验,如果你在head.phtml中包含jquery一次用于所有用途并在此之后添加jQuery.noconflict(),那么效果最好。然后通过布局xml一次包含所有magento原型脚本,然后添加任何其他jQuery脚本,并确保始终封装每个jQuery脚本,如下所示。

确保使用$作为快捷方式的每个jQuery脚本都封装如下:

jQuery(function($) {

    //your code using jQuery in $ notation

    $(document).ready(function() {
        //code that needs to wait for complete load of DOM
    });
});

我在stackoverflow上的第一个答案,希望我能提供帮助。