jquery.js / whmcs integration - javascript

I have a problem with integrating my header and footer in whmcs. Everything works perfectly. Although a strange problem came along. It has something to do with the jquery.js file in my custom layout.
when I comment out the jquery.js in my footer.tpl the dropdown menu in the header does not work on pages where whmcs generates tables. (invoices and domains)
But when I do use that jquery file the tables are still generated fine and the menus work, but then I can't order domains.
No button or text fields appear when ordering a domain.
I know this is not a good and a vague question but this has got me puzzled for quit a while now.
Anyone with who can push me in the right direction to find a solution? Or someone with a similar experience with whmcs integration?
thanks in advance!!

Not sure if you found a solution on this, but likely the culprit is one of two things:
1) The jquery library loading second is clobbering the first one so it no longer exists. To fix this you should call jQuery.noConflict(); prior to loading the second jquery library, this way the $ shortcut gets pushed over to use jQuery and frees up the $ for the new jquery. This however may become a problem if any of the javascript relies on the $ shortcut and must point to the first jQuery library, in which case all shortcuts should be renamed to jQuery.
2) The scripts executing the later jQuery library aren't compatible. This can be problematic if the versions are very different as some methods and capabilities have changed over time.
Best thing to do is always to use only one jQuery library, and use the newest one if possible. Older scripts that rely on the older jQuery should be updated if possible.

Related

Editing a jQuery script so the new version has code I need to make a gallery work

I read a post answer that you can do search for the code I need from an old version of jQuery and copy it and paste it into a newer version jQuery script. This way I don't have to try and have two versions of jQuery to load at the same time which was unsuccessful. Both the jQuery scripts I have are .min
How do I do this? See the person's answer below
Why would you need two jQuery libraries anyway?! Just use the newer one! ... Let's even say you needed the old one because you need some functions that aren't available in the new framework. Just look them up in search mode and copy past them one by one to the new framework (can only be done if you use jQuery offline like me, which saves loading time during developpement cause it gets cached.) P.S: I hope this doesn't cause any copyrights infrigments.
Editing jquery is very bad practice, do it only for very small projects which maintenance won't have any work with jquery or component updates at all!
Better try using Jquery Noconflict library.

Joomla menu item type iframe-wrapper doesn't load javascript

I am building a new template from the ground up for an existing site that uses the menu item type iframe-wrapper to display external content.
My template uses a bit of jQuery which works fine on all pages I have checked so far, except for those using the iframe-wrapper. On those pages joomla does not seem to include any of the js it usually does (jQuery, mootools, joomla stuff). Since I need jQuery my scripts break.
I could probably work around that by hardcoding jQuery into the template. Even ignoring all the problems that would most likely cause it solves only part of my problem. I use a module to include a bit of inline js to initialize a countdown so the end-date can be configured from the backend. That script is not included either, infact the whole module is missing in the frontend (or at least its container).
I am quite the novice with regards to joomla so this might be an obvious mistake on my end but how do I get joomla to include the js it usually does when not displaying an iframe-wrapper?
Got it to work finally:
JHtml::_('jquery.framework');
This line added to the template ensures that jQuery version shiped with Joomla is included and only loaded once.
I still don't know why jQuery was only missing from one specific pagetype rather than all of them or none, but it's working now.
If the iFrame is not part of the Joomla website and not part of the Joomla environment (which is the case 99.99% of the times), you will need to re-add the JS files there manually. There's no other way for doing this.

Javascript stopped working after combination

Well I had lots of scripts so what I did is that I combined all of them into one script file, which contains files like Jquery library too.
But now the problem is that it has stopped working, I don't know why did this happen.
What I did is that I took every script copied and pasted it and then I gave some space under it by pressing enter a few times and then I used to paste other script, I was told this was the method to combine scripts but now the scripts don't work.
Here is the link to combined scripts http://files.cryoffalcon.com/bloghuts/uncompressed/BlogHuts%20UNCOMPRESSED.js
And the link to a live example is http://bloghutsbeta.blogspot.com/
ANSWER/SOLUTION:
Earlier I was using an older version of Jquery I think 1.5 now I changed it to latest 1.7 and that was the reason that everything stopped working. It had nothing to do with combination. I am using all scripts combined and everything is working fine But why is older version better than New that is a new question for me
First, I'd suggest you move the jquery library links out to the main page. Have one file for all of your javascript, and include the other stuff on separate lines.
Whether or not you do that, though, your problem is almost certainly some sort of unclosed bracket or semicolon missing or something similar. Javascript often reacts to stuf like that by throwing its hands up in the air and giving up. The way to fix it is to go through your file and pick a function that is not currently working, but that is easy to test for functionality. Then comment out everything else, and test to see if the function works. If not, fix the function until it does work. Then, one piece at a time, uncomment each of the other blocks, again testing to see if the initial function works. If uncommenting a block causes the thing to stop working, then that's the block that you need to fix. Depending on how long your blocks are, you may need to do this in tiers
First, don't do that with jQuery, ever. You're almost always better off pointing your script src to a public CDN somewhere.
Second, what you're trying to do is very brittle, and probably not worth troubleshooting. If you have that many JS files, you really need to use a module library (I like require.js) to give your project some structure and make it more manageable. Most libraries like this will include some sort of utility to combine and minifi your scripts safely.
This will take some work on your part to get things setup, but it should prove well worth it in the long run!

Thin down jQuery

I have been optimizing my website but the one problem that stands in my way is all the jQuery functions that I do not use. The only ones that I use are for a smooth page scroller. It just seems like such a waste of download time.
My question is: Is there any script or program that will remove the jQuery code that I do not need and leave the 1 or 2 functions that I do need.
There's no way to do this, especially since it's not that simple. For example .fadeIn() is one method, but it calls the whole animation section of jQuery to fade the element, but that's after your selector has accessed the traversal section including the Sizzle selector engine...that's how most frameworks are, it'd be very tricky to remove pieces because of so many dependencies inside the framework itself.
That being said, if you're delivering jQuery correctly, it's minified and gzipped, and you're only sending about 24kb to the client which they cache so it's just sent once, not every page load. Also, they may have already cached it from another site, the more people who point their site to the same CDN (the page you're viewing does) the more likely this is to happen.
Google has a CDN, details here, for example from there you can grab jQuery, or jQuery UI:
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js
Previous versions of these as well
Also, Microsoft has a CDN, details here, you can fran jQuery and the validation library from it:
http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js
http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.js
Full list of validation files here
Note: these are the current versions as of the time of this answer, don't use these explicit links if you're finding this later, there may be more recent versions available.
Just reference the library from Google, chances are it will already be cached on the client...
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
This will also save you bandwidth. StackOverflow and many other sites do this.

Two jQuery versions on the same page

Is it possible to have 2 different jQuery versions in the same document, and have them to not collide with each other?
For example if I create a bookmarklet and want to base the code on jQuery.
This bookmarklet is injected on some page that uses another version of jQuery then my code would overwrite the version used on the page.
Is it possible to avoid that?
Or are there some other libraries that provides this functionality
Or maybe I should rethink the whole thing.
Thanks for answers and pointers,
bob
jQuery comes with a way to avoid collisions. After you load the first version, you can assign it to a different variable.
var $j = jQuery.noConflict();
And then load your second jQuery version. The first one you load can be accessed with $j(...) while the second one can be accessed with $(...).
Alternatively, somebody made a little helper in an attempt to make it easier to switch between different versions.
Here is a way to detect is JQuery is already present: jQuery in widget
Work out the oldest version of JQuery your code will work with.. And refuse to work if the version present is too old. Only a few people will miss out, most sites using JQuery are pretty up to date..
Why not just have different versions of your javascript, for different versions of jquery, so, look at what version is on the page and get the appropriate code that will work on that version of jquery.
This would be safer, as anything else may be very fragile, as it sounds like you don't have control over the version of jquery that will be on the page.

Categories

Resources