Jahia DX > jQuery - $(document).ready

0 (0 Good)
0 (0 Bad)

jQuery - $(document).ready

by  cachavez »  2011/11/29 07:04

Hi all.

I'm trying to use some jQuery funtionality but the $(document).ready is not working.

I have a file named: jquery-tabs.js, the code is pretty simple:

$(document).ready(function() {

    //Default Action
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
    });

});
 

I added this file with <template:addResources type="javascript" resources="jquery-tabs.js" />

So, the code is not executed.

But if I add a alert as the first sentence, the code works.

any idea ?

 

Cheers.

Carlos Chávez.

Quoin Inc.

  • jQuery - $(document).ready
    2011/11/29 07:04

    cachavez <p> Hi all.</p> <p> I&#39;m trying to use some jQuery funtionality but the $(document).ready is not working.</p> <p> I have a file named: jquery-tabs.js, the code is pretty simple:</p> <p> $(document).ready(function() {<br /> <br /> &nbsp;&nbsp;&nbsp; //Default Action<br /> &nbsp;&nbsp;&nbsp; $(&quot;.tab_content&quot;).hide(); //Hide all content<br /> &nbsp;&nbsp;&nbsp; $(&quot;ul.tabs li:first&quot;).addClass(&quot;active&quot;).show(); //Activate first tab<br /> &nbsp;&nbsp;&nbsp; $(&quot;.tab_content:first&quot;).show(); //Show first tab content<br /> <br /> &nbsp;&nbsp;&nbsp; //On Click Event<br /> &nbsp;&nbsp;&nbsp; $(&quot;ul.tabs li&quot;).click(function() {<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(&quot;ul.tabs li&quot;).removeClass(&quot;active&quot;); //Remove any &quot;active&quot; class<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(this).addClass(&quot;active&quot;); //Add &quot;active&quot; class to selected tab<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(&quot;.tab_content&quot;).hide(); //Hide all tab content<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var activeTab = $(this).find(&quot;a&quot;).attr(&quot;href&quot;); //Find the rel attribute value to identify the active tab + content<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(activeTab).fadeIn(); //Fade in the active content<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return false;<br /> &nbsp;&nbsp;&nbsp; });<br /> <br /> });<br /> &nbsp;</p> <p> I added this file with &lt;template:addResources type=&quot;javascript&quot; resources=&quot;jquery-tabs.js&quot; /&gt;</p> <p> So, the code is not executed.</p> <p> But if I add a alert as the first sentence, the code works.</p> <p> any idea ?</p> <p> &nbsp;</p> <p> Cheers.</p> <p> Carlos Ch&aacute;vez.</p> <p> Quoin Inc.</p>

  • Number of messages  32
    Registration date Nov 29, 2011
    0 (0 Good)
    0 (0 Bad)

    Re: jQuery - $(document).ready

    by  rvt »  2011/11/30 14:36

    Carlos,

    can you check if jqeury.js or jquery-mins.js is loaded before jquery-tabs.js, this should be the case. In most of my cases this was the reason why some of my JS wasn't working. I use jquery tabs myself.

    For some testing you can also add the code like this in your JSP.

    <template:addResources type="javascript">

        <script type="text/javascript">

            ...... your javascript...

        </script>

    </template>

     

    Second, make sure you have your javascript debugger open in your browser to see if there are any errors.

    Ries

     

     

  • Re: jQuery - $(document).ready
    2011/11/30 14:37

    rvt <p> Carlos,</p> <p> can you check if jqeury.js or jquery-mins.js is loaded before&nbsp;jquery-tabs.js, this should be the case.&nbsp;In most of my cases this was the reason why some of my JS wasn&#39;t working. I use jquery tabs myself.</p> <p> For some testing you can also add the code like this in your JSP.</p> <p style="margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo"> &lt;template:addResources type=<span style="color: #cf3125">&quot;javascript&quot;</span>&gt;</p> <p style="margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo"> &nbsp; &nbsp; &lt;script type=<span style="color: #cf3125">&quot;text/javascript&quot;</span>&gt;</p> <p style="margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo"> &nbsp; &nbsp; &nbsp; &nbsp; ...... your javascript...</p> <p style="margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo"> &nbsp; &nbsp; &lt;/script&gt;</p> <p style="margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo"> &lt;/template&gt;</p> <p style="margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo"> &nbsp;</p> <p style="margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo"> Second, make sure you have your javascript debugger open in your browser to see if there are any errors.</p> <p style="margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo"> Ries</p> <p style="margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo"> &nbsp;</p> <p style="margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo"> &nbsp;</p>

  • Number of messages  185
    Registration date Nov 30, 2011
    Contact
    Share
    Feedback

    Get in touch

    Whether you are a current user or if you are just evaluating Jahia, we are here to help.

    Contact us

    Share this page