CODEWITHSUNDEEP
javascriptjqueryfunctiononclickmootools
Howdy_McGee
Howdy_McGee

Reputation: 10673

Jquery No Conflict - Onclick Functions - Multiple Frameworks

I have multiple JS Frameworks running and some onClick="changeText()" with the content just changing the elements text. In my script I have 

jQuery(document).ready(function($){
     function changeText(){
         $('#test').text('Hello World!');
     }
});

I believe that the Jquery.ready function is throwing it all off. In my debugger it is telling me that it cannot find my changeText() function, which the script is 100% loading in (I can view via view:source -> js link). Also if it makes a difference I'm running Joomla 1.5 with Mootools being loaded in as my other framework.

I also know the functions are 100% right because I can run them normally in a standard html page without the Jquery.ready function.

Is there a way to specify what file to call this from or 'hacky' way around this?

Upvotes: 1

Views: 1673

Answers (3)

Joseph
Joseph

Reputation: 119867

you can wrap jQuery in a function. by the way, $ is just an alias for jQuery which is the actual namespace of jQuery. all in all, it looks like this:

(function($){
   $(function(){

       //do regular jQuery as needed

       function changeText(){                //your function
           $('#test').text('Hello World!');
       }

       $('element').on('click',function(){   //onclick handler
           changeText();
       });

   });
}(jQuery));

as @ThiefMaster commented, you already used jQuery and provided $ so you may discard my wrapping.

and to add, inline events like <button onclick="doSomething()"> only trigger events that are on the global namespace. once you wrap the function in jQuery, it's not part of the global namespace anymore. it's better you attach event handlers using JS instead, from within the wrapped code.

Upvotes: 3

ThiefMaster
ThiefMaster

Reputation: 318588

The best option is not using inline events at all - use $('selector').on('click', function() { ... }) instead.

If you cannot do that for some reason, you can still use inline events. However, since you are defining your functions inside another function, you need to make them global. You do so by adding them to the window object which is the global object in a browser environment:

window.changeText = function() {
    // ...
};

Upvotes: 0

Gwyn Howell
Gwyn Howell

Reputation: 5424

From the documentation, 

var $j = jQuery.noConflict();

immediately after your jquery script tag will change the jQuery variable to $j

Upvotes: 1

Related Questions