Using Jquery to Select a class in Joomla 2.5

Question

I am ripping my hair out as to why this isn't working. I have a client on Joomla 2.5 and the template calls jQuery 1.8. I'm simply trying to add a target="_blank" attribute to some links with a common class of .social-button Here is my code:

$(document).ready(function() {
$(".social-button").attr('target','_blank');
});
}

Does anyone have any ideas?

When/where are you adding the jqeury code in the DOM? What error are you getting? — iamkrillin, Jul 21 '14 at 17:04
"I have a client on Joomla 2.5" there's your first problem :) — Rob Schmuecker, Jul 21 '14 at 17:10
@AminJafari is correct. If you only had looked in the console of tour web-inspector/debugger/firebug you'd have noticed. You *do* have one of those *right*? — Rob Schmuecker, Jul 21 '14 at 17:12
I noticed the extra bracket after I posted, still doesnt make a difference. I know Joomla isn't the greatest but I'm stuck with it. I didnt build the site. The js is loading prior to the rest of the page, which is probably my problem. When I try to add it at the end of the document, Joomla re-writes the — Ryan, Jul 21 '14 at 17:26
@RobSchmuecker - "There's your first problem"....what the problem with that? — Lodder, Jul 21 '14 at 17:52
@Lodder :-) it was meant as tongue-in-cheek eluding at the fact that whilst Joomla is uer-friendly it's perhaps not particularly developer-friendly. — Rob Schmuecker, Jul 21 '14 at 18:23
@RobSchmuecker - Far from it actually. Joomla has come so far in the last couple of years in regards to development and it's only getting better ;) I really hope you aren't one of those people that thinks the web revolves around Wordpress lol :P — Lodder, Jul 21 '14 at 20:17

score 0 · Answer 1 · answered Jul 21 '14 at 17:05

0

Try this:

<script>
        window.onload = function()
        {
            $(".social-button").attr('target','_blank');
        };
</script>

answered Jul 21 '14 at 17:05

Leonid

81
4

no luck. It loads the js before the body tag...could this be causing an issue? – Ryan Jul 21 '14 at 17:23
hum, window.onload usually waits until the page is loaded, you can try this also: – Leonid Jul 21 '14 at 17:27
do you have another things on window.onload? if so use this window.addEventListener('load', function() {$(".social-button").attr('target','_blank');}); – Leonid Jul 21 '14 at 17:28
There is no need to add an onload function to the body tag – Lodder Jul 21 '14 at 18:02
@Ryan You could perhaps help by simply posting the HTML output from your Joomla setup as a fiddle and we can have a look what's loading where. – Rob Schmuecker Jul 21 '14 at 18:21

score 0 · Accepted Answer · edited May 23 '17 at 10:33

I'm not sure where you're adding your code by try the following:

<?php
   $doc = JFactory::getDocument();
   $doc->addScriptDeclaration('
      jQuery(document).ready(function($) {
          $(".social-button").attr("target","_blank");
      });
   ');
?>

The above code uses Jooma API methods to inject your code in the <head> of your template.

I'm not sure how you're importing jQuery or if this is already being done. If you are importing jQuery yourself, then please read my answer on How to import jQuery in Joomla as it might be possible that you have multiple libraries being loaded and thus causing conflicts.

And finally on a side note, Joomla does, like any CMS out there have it's down side, but for an out-the-box CMS it's actually very good and extremely flexible. If you were to upgrade to 3.3.1, you will find even more features at the palm of your hand.

Using Jquery to Select a class in Joomla 2.5

2 Answers2