Installed CiviCRM in a fresh Drupal install, customized the CiviCRM and added data. The actual Drupal site was built separately in a separate install. Now that it is complete, I merged the CiviCRM with the new Drupal Site (files and database). Everything appears to work except when logged into CiviCRM: http://example.com/civicrm/dashboard it says:
"Javascript must be enabled in your browser in order to use the dashboard features."
And yes Javascript is enabled. The CiviCRM Menu is all broken and such. Chrome also reports the following errors:
Uncaught TypeError: Object # has no method 'menu'
jquery.textarearesizer.js:5Uncaught TypeError: Object # has no method 'TextAreaResizer'
main.js:6Uncaught TypeError: Object # has no method 'cycle'
jquery.textarearesizer.js:5Uncaught TypeError: Object # has no method 'TextAreaResizer'
Javascript compression under performance is not enabled. Any ideas?
CiviCRM uses the jQuery object as cj instead of $ in order to avoid conflicts with the Drupal JQuery library. In theory, they are fine using different versions because they are namespaced differently (which jQuery supports officially using noConflict()).
The conflict you have probably comes from your modifications causing either Drupal or CiviCRM to load its jQuery library at a different point in the bootstrap, or making it try to load jQuery more than once. This would make the operation to convert $ into cj pick up the Drupal jQuery object after it has already been instantiated, rather than before, leaving Drupal and/or CiviCRM without the libraries it needs being attached to the $ object (are you using # instead of $?).
Search for all code that uses noConflict() everywhere on the page in question and its JavaScript includes. You should only find it in one place. Compare with the demo.civicrm.org pages to see the difference and you'll probably find an extra one in there somewhere. Best hope for fixing it is to adjust the load order of your custom modules in the Drupal system table, or else set the second noConflict() call to run conditionally on there not being a cj object already.
I've completed a bug report. Applying this patch resolved the problem for me in a seemingly clean way. This way the jQuery library does not get loaded more than once if not necessary.
Related
i want to put a soundcloud music player (http://stratus.sc/) on my drupalgardens page. i added an external source javascript library and uploaded a js file on the system as it says on the pluging website. all this tru the administration website of drupalgardens. When i check the sourcecode of my webpage it appears like the pluging is on the header. But it doesnt work, i cant see it. i activated all the jquery functions.
bit of sourcecode on header where the pluging seems there:
<script type="text/javascript" src="http://stratus.sc/stratus.js"></script>
<script type="text/javascript" src="http://NAMEOFMYSITE/sites/NAMEOFMYSITE/files/js/js_PRNQJr2GPf-FrbaSuV5IDQ1l6Lfby6e79KpPOUTf5kI.js"></script>
link:
http://bit.ly/10nyAHV
Any suggestions?
Note : The player im talking about is NOT the one that can be seen under the rotating banner. the one im talking about its supposed to be globally on the webpage at its seem on the pluging oficcial webpage
For one you're getting this console error: "Uncaught SyntaxError: Unexpected token < "
Not sure how that script is getting added but just removing the script tags may clear it up.
Even if the frame errors mentioned by KG are unrelated, you have to go clean that all up.
Your script should also be loaded after jquery. Since it looks like you have js aggregation turned on, I don't really know how to determine if drupal is loading things correctly. You can just tell your script to load in the footer instead of header if you're unsure. The links below explain how to do that.
Here are some javascript related resources for Drupal. They sometimes expect things to be handled differently.
The plugin is dependent on jQuery. By default, Drupal 7 loads jQuery 1.4. You may need to use the jQuery Update plugin to use 1.5, 1.7 or 1.8
Drupal Community docs about javascript:
http://drupal.org/node/756722
Drupal javascript API:
http://drupal.org/node/751744
I had a similar issue. Some reasons for a not working player are:
For some reason $ is not known (although jQuery is included). I replaced '$' by 'jQuery' and everything worked fine. That means use jquery(document).ready(... instead of $(document).ready(... and jQuery.stratus({.. instead of $.stratus({...
There is a typo on the stratos.sc web site. It should read $.stratus not $stratus (or jQuery.stratus, see previous hint).
Check that the source stratus.js and the initialisation code is included.
Mixture of https and http might be a good guess as reason for problems, but actually it works (I just tried it). If you can't find the problem, try to use a JavaScript debugger and check the error logs first!
Background
I have a snippet of javascript that sites on customer pages. When this script is executed, it loads necessary assets and scripts and then executes the main code.
One of the script's I'm loading is Twitter's bootstrap JS to create a modal window. It's implemented as a jQuery plugin, and adds '$.modal()' to a jquery object.
Problem
This works on all but one customer site. On this particular site, as I invoke $('#idOfWindow').modal();, the page throws a javascript error Object has no method 'modal'
I've verified that the bootstrap code is invoked, and $.fn.modal is called to setup the plugin, My hunch is that something is clobbering the jQuery object, but I'm not sure how to debug this.
Comments
I'm currently using Chrome's Developer Tools to Debug, and I have verified that the plugin is loaded and executed before it's ever called. The client site is using jQuery 1.7.2. I'm familiar with chrome tools, but I'm not a power user.
If you are right, that your original jQuery object is being overwritten somewhere, you should be able to restore it with jQuery.noConflict().
Demo: jsfiddle.net/KthZu
Edit: Some debugging tips:
To help in debugging, you can check the jQuery version in the console with this code:
$().jquery
Another potential debugging trick would be to store a reference to jQuery when you create you plugin.
$.fn.myPlugin = function(){};
window.jQueryWithMyPlugin = $;
Then, when debugging, you can plainly see if window.$ has been overwritten:
$ === jQueryWithMyPlugin
Generally for any widget type of code that is to be embedded externally, you'll want to wrap your code:
(function($){
$('#idOfWindow').modal();
})(jQuery);
I have, in the past had issues where multiple versions of jQuery (or jQuery & prototype) were loaded on the same page. Be sure that the version of jQuery you're adding $.fn.modal to is identical to the version that's being called. $().jquery can be used to access the specific version of jQuery in use.
I have this error while trying to run mediaelement player.
The error is reported at mediaelement-and-player.min.js:44.
Edit: My apologies, I posted this from the mediaelementjs.com Support website.
I was trying to use mediaelement.js to play audio on my website.
Edit 8/2: The interesting thing is that when i load the full mediaelement-and-player.js instead of the minified version, it works fine.
I just dealt with this same issue while trying to use the Drupal module, http://drupal.org/project/mediaelement.
Turns out that a core Drupal javascript file, drupal.js, was calling jQuery.noConflict() which removes the $ variable from being defined in the global scope, hence bringing this bug in mediaelement-and-player.js to light.
This was reported in the issue queue for the mediaelement project and it looks like the fix just got committed: https://github.com/johndyer/mediaelement/pull/570
Most likely you have not loaded the jquery library into your script.
You have to reference the library (a js file) from within the header of your page via url. The url can point to a copy pf jquery you keep local or to a public site.
I am working on a JavaScript library that makes internal use of jQuery. However, when the time comes for its deployment, I would prefer to simplify things (w.r.t. deployment) and not worry about whether the environment has (or doesn't have) jQuery already included in <head>.
I should mention that my library is implemented as a class in Coffescript and the resulting .js file has the default function wrapper to isolate scope.
I can think of a few solutions to this problem:
Ask the website admin whether they have jQuery already present. If
yes, just include the library itself. If not, then include jQuery +
the library, perhaps in a single file and concatenated. Deployment is harder, but problem is likely solved.
Create a file that concatenates jQuery and my lib code and always
have the website admins just include this file. To prevent clashes,
do a var myJ = jQuery.noConflict() right after the jQuery code.
Do as in (2) above, but call the var myJ = jQuery.noConflict() inside the encapsulated Coffeescript class.
In summary, the objectives for this challenge are:
Absolutely avoid any breakage on the deployed website, regardless of
what they might be using
Keep deployment as simple as possible
Avoid unnecessary transfer of jQuery, if possible
My concerns are:
What if the site already has jQuery, but needs an older/newer
version?
What if my noConflict() call breaks something on their
end?
What is the best way to tackle this situation? Am I missing something?
CoffeeScript has a -b option to compile without the top-level function wrapper. Using this method, you could use your own top-level function wrapper instead.
i.e.
(($) ->
# ...
# your code
# ...
)(jQuery.noConflict())
Then, as part of your build process, concatenate jQuery onto the front of the compiled output. The appropriate Linux/Mac shell command would be:
(cat jQuery.js; coffee -pb yourSource.coffee) > yourCompiledFileWithjQuery.js
The p option for CoffeeScript prints the compiled output to stdout, so that you can combine it with the cat jQuery.js and redirect that output into yourCompiledFileWithjQuery.js
This would ensure that, immediately before your code is executed, jQuery would be included. jQuery keeps a reference to the old owner of $, so if some library or another version of jQuery is already using it it will be returned to them with the jQuery.noConflict() call.
jQuery.noConflict() also returns a reference to that jQuery, so that is how it would be passed to the $ of your code.
I hope that's clear.
Extra:
As of CoffeeScript 1.3, released a few days ago, you could use this instead for your top-level function wrapper, which is somewhat clearer:
do ($ = jQuery.noConflict()) ->
# ...
# your code
# ...
If your end script as a closure you can simply pass it jQuery as an argument and check if that is undefined or not.
(function($) {
if (!$) {
// load jQuery
} else {
// check jQuery version if needed or just use jQuery
if ($.fn.jquery !== '1.7.2') {
// load 1.7.2
};
};
})(window.jQuery || false);
Must use window.jQuery as jQuery only will generate an error if jQuery is not declared
So I just finished writing a single page with html5 boilerplate and everything is find with the dev code (the original one I just finished writing). Google Chrome and Firefox love it and display it well.
So I use the ant script ( ant build or ant text to skip jpeg/png optimization ) and browse to /publish/ to view it. And I got a javascript error :
Uncaught TypeError: Cannot read property 'Twipsy' of undefined
But the fact is I never used Twipsy or prototype, just jQuery ... so I run a javascript debug console and see in the generated javascript file a reference to Twipsy and Prototype. But I never use any of those in my code. So what's wrong ? and what can I do ?
Html5Boilerplate use a kind of very strong cache which actually keep the files you already delete in your project and always inline / include it in future build. You must delete publish and intermediate forlder to kepp your builder up to date.