Javascript not working correctly in my Joomla Article

Question

I'm trying to add a little funcionality to one of my Joomla article. The functionality is quite simple, when you click on a string, a html shows. I had made an standalone HTML and it's working.

Now I'm trying to include the code on my Joomla article, but its not working. This is what I added to the source code of the article.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
    jQuery(function(){
        jQuery('.showItem').click(function(){
                    jQuery('.targetDiv').hide();
                    jQuery('#div'+$(this).attr('target')).show();
            });
    }); 
</script>

<!-- BUTTONS  -->
<div class="buttons">
    <a class="showItem" target="1">First string</a><br>
    <a class="showItem" target="2">Second string</a><br>
</div>

<!-- Shows HTML page when you click in 'First string' -->
<div id="div1" class="targetDiv" style="display: none">
    <div id="m1" style="margin: 0 auto; width:100%; height:400px;">
        <object type="text/html" data="http://show_a_html_page.html"
                style="width:100%; height:100%; margin:1%;">
        </object>
    </div>
</div>

<!-- Shows HTML page when you click in 'Second string' -->
<div id="div2" class="targetDiv" style="display: none">
    <div id="m2" style="margin: 0 auto; width:100%; height:400px;">
        <object type="text/html" data="http://show_a_html_page.html"
                style="width:100%; height:100%; margin:1%;">
        </object>
    </div>
</div>

It's not the problem of the editor (aka it's not removing the <script> tags).

Do I've to change something in my script in order to make this work?

In case this can be interesting, after adding the code as Source Code in my post, this is what shows up the TinyMCE. It adds some <p> to the code as well as a / <![CDATA[. Is this right?

<p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>// <![CDATA[
jQuery(function(){
        jQuery('.showItem').click(function(){
                    jQuery('.targetDiv').hide();
                    jQuery('#div'+$(this).attr('target')).show();
            });
    });
// ]]></script>
</p>

This will help you :) http://stackoverflow.com/questions/33995404/how-to-use-different-version-of-jquery-on-a-js-file/33995498#33995498 — Bhojendra Rauniyar, Jun 14 '16 at 09:28
which version of joomla you're using? Inspect there, you may find another jquery loading in your page... — Bhojendra Rauniyar, Jun 14 '16 at 09:30
Inspecting the code, the `jquerys` are loading are: `jquery.min.js` ( jQuery v1.10.2), `jquery-noconflict.js` and `jquery-migrate.min.js` — Avión, Jun 14 '16 at 09:34
So, you may try with linked answer. Or just put one jquery lib. — Bhojendra Rauniyar, Jun 14 '16 at 09:37
Sorry but it's not working. I added `` at the top of my code, and after that all the code I added on the 1st post and it's not working either. — Avión, Jun 14 '16 at 09:41
If I post at the top of the code, it should load first, right? This is the code: http://pastebin.com/n4efRRe6 — Avión, Jun 14 '16 at 09:46
Yes! `TypeError: $(...).attr is not a function` on the line `jQuery('#div'+$(this).attr('target')).show();` — Avión, Jun 14 '16 at 09:51
@Borja - You don't need to import another jQuery library. Joomla already imports jQuery. By importing it twice, you'll get conflict errors — Lodder, Jun 15 '16 at 10:28

Avión · Accepted Answer · 2016-06-14T10:58:26.900

As @BhojendraNepal stated, it was a conflict problem. I fixed it by adding var $ = jQuery.noConflict(); to the function.

<script>
    jQuery(function(){
        var $ = jQuery.noConflict();
        jQuery('.showItem').click(function(){
                    jQuery('.targetDiv').hide();
                    jQuery('#div'+$(this).attr('target')).show();
            });
    }); 
</script>

EDIT: The marked as duplicate question doesn't provide an answer to the question. As that answer stated, I added <script>jQuery.noConflict(true);//remove jquery</script> before loading my jquery but it didn't worked:

<script>jQuery.noConflict(true);//remove jquery</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
    jQuery(function(){
        jQuery('.showItem').click(function(){
                    jQuery('.targetDiv').hide();
                    jQuery('#div'+$(this).attr('target')).show();
            });
    }); 
</script>

Just adding var $ = jQuery.noConflict(); inside the function worked perfectly.

You should have upvoted the linked answer and deleted your post... — Bhojendra Rauniyar, Jun 14 '16 at 10:24
Using the code of the link of your comment does not provide an answer to the question as I stated on the comments, adding `var $ = jQuery.noConflict();` to the code does, so I posted it. — Avión, Jun 14 '16 at 10:26

Javascript not working correctly in my Joomla Article

1 Answers1