Magento 1.8 JavaScript – Resolving Prototype JS Error

conflictextensionsjquerymagento-1.8prototype-js

I am getting js error as follows from my magento project.MY project url is check my project.
i tried js noconflict but no use.

Error:

Uncaught TypeError: (intermediate value)(intermediate
value)(intermediate value)(intermediate value)(intermediate value) is
not a function www.bigzaar.com/:1 Uncaught ReferenceError: jQuery is
not defined www.bigzaar.com/:93 Uncaught ReferenceError: jQuery is not
defined www.bigzaar.com/:151 Uncaught ReferenceError: jQuery is not
defined www.bigzaar.com/:157 Uncaught ReferenceError: jQuery is not
defined www.bigzaar.com/:420 Uncaught ReferenceError: jQuery is not
defined jquery.mobile.customized.min.js:10 Uncaught ReferenceError:
jQuery is not defined camera.js:2238 Uncaught ReferenceError: jQuery
is not defined www.bigzaar.com/:607 Uncaught ReferenceError: jQuery is
not defined www.bigzaar.com/:704 Uncaught ReferenceError: jQuery is
not defined www.bigzaar.com/:863 Uncaught ReferenceError: jQuery is
not defined

my js file:

/********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);
    }
}

my js calling function

<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";
}

please help me to solve this error.any help will be appreciable

Best Answer

First I would turn off js merging in System -> Configuration -> Advanced -> Developer -> JavaScript Settings -> Merge Javascript Files = No. Then you can see the order your files are included and actually do some debugging.

Secondly I would make sure that between your prototype includes and your jquery include you have a jquery noconflict defined jQuery.noConflict();

Simply create a small .js file with that content and include it just before including jquery.

Now checking your merged file I can see that the error is that you have included the /********Javascript for FREE TEXT SEARCH ************/ prior to including the jquery library.

Make sure you change the order so that your script is loaded AFTER jQuery has been included.

If you check your merged .js file, you can see that your FREE TEXT SEARCH .js is added in line 11852, but you don't include jquery until line 11929, so of course you will receive 'jquery is not defined' errors when you try and execute your javascript.

Related Topic