Jahia in English > jQuery - $(document).ready

0 (0 Good)
0 (0 Bad)

jQuery - $(document).ready

by  cachavez »  2011/11/29 07:05

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:05

    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  shyrkov »  2011/11/29 09:01

    Hello Carlos,

     

    you could perhaps try to narrow down the problem step-by-step:

    1) Remove all your custom code from the $(document).ready(function() {}); block and put there only e.g. alert('test'). If it works, continue to step 2

    2) Add the <template:addResources type="javascript" resources="jquery-tabs.js" /> into your JSP template and check the source code of the generated HTML page and if the URL to include the jquery-tabs.js resource is correct and does not lead to a 404 page. Continue to step 3

    3) If previous steps are OK, put back your custom code into the $(document).ready(function() {}); and test it once again, enabling e.g. Firebug console in Firefox to see if there are any JavaScript error on page load. If there are some, please, check them and correct them.

    Let me know, please, if you will need help on any of the steps.

    Kind regards

    Sergiy

  • Re: jQuery - $(document).ready
    2011/11/29 09:01

    shyrkov <p> Hello Carlos,</p> <p> &nbsp;</p> <p> you could perhaps try to narrow down the problem step-by-step:</p> <p> 1) Remove all your custom code from the $(document).ready(function() {}); block and put there only e.g. alert(&#39;test&#39;). If it works, continue to step 2</p> <p> 2) Add the &lt;template:addResources type=&quot;javascript&quot; resources=&quot;jquery-tabs.js&quot; /&gt; into your JSP template and check the source code of the generated HTML page and if the URL to include the jquery-tabs.js resource is correct and does not lead to a 404 page. Continue to step 3</p> <p> 3) If previous steps are OK, put back your custom code into the $(document).ready(function() {}); and test it once again, enabling e.g. Firebug console in Firefox to see if there are any JavaScript error on page load. If there are some, please, check them and correct them.</p> <p> Let me know, please, if you will need help on any of the steps.</p> <p> Kind regards</p> <p> Sergiy</p>

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

    Re: Re: jQuery - $(document).ready

    by  cachavez »  2011/11/29 21:44

    Hi Sergiy, thanks for the reply.

    The code is correctly added to the page, I have noticed that the issue is on the "Edit mode", when I Preview the page the tab functionality works very well, but for some reason in the "Edit mode" it did not work.

    In the "Edit mode" there is like 3 sections, the section where Jahia display my page and the section where Jahia display the components and the section where is the menu, my code run when the section of my page load, but after load the rest of the parts (Jahia components, Menu) seems the that messup the code.

    After load all the sections, the code it did not work anymore, If I added a alert to my code, it seems that this delay the load of my code, but everything in the page is loaded, then the code run correctly en "Edit mode".

    Cheers.

    Carlos Chávez.

    Quoin Inc.

  • Re: Re: jQuery - $(document).ready
    2011/11/29 21:44

    cachavez <p> Hi Sergiy, thanks for the reply.</p> <p> The code is correctly added to the page, I have noticed that the issue is on the &quot;Edit mode&quot;, when I Preview the page the tab functionality works very well, but for some reason in the &quot;Edit mode&quot; it did not work.</p> <p> In the &quot;Edit mode&quot; there is like 3 sections, the section where Jahia display my page and the section where Jahia display the components and the section where is the menu, my code run when the section of my page load, but after load the rest of the parts (Jahia components, Menu) seems the that messup the code.</p> <p> After load all the sections, the code it did not work anymore, If I added a alert to my code, it seems that this delay the load of my code, but everything in the page is loaded, then the code run correctly en &quot;Edit mode&quot;.</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: Re: Re: jQuery - $(document).ready

    by  cachavez »  2011/11/29 21:53

    Hi Sergiy.

    I need to create a form for edit a lot of field, so I don't want to make the user scroll to much in the integrated Jahia edit form, so I was thinking on create my own form but try to reuse the input control that are out of the box in Jahia, I don't want to build my own selection input or my own richtext editor, I want to use the one integrated in Jahia,

    Is it possible to do that?

    --

    Cheers

    Carlos Chávez

    Quoin Inc.

  • Re: Re: Re: jQuery - $(document).ready
    2011/11/29 21:53

    cachavez <p> Hi Sergiy.</p> <p> I need to create a form for edit a lot of field, so I don&#39;t want to make the user scroll to much in the integrated Jahia edit form, so I was thinking on create my own form but try to reuse the input control that are out of the box in Jahia, I don&#39;t want to build my own selection input or my own richtext editor, I want to use the one integrated in Jahia,</p> <p> Is it possible to do that?</p> <p> --</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: Re: Re: Re: jQuery - $(document).ready

    by  cedmail »  2011/11/30 09:27

    Hi,

    We provide the contribute mode to achieve what you want to do. In this mode there is no GWT interface that will mess with your jquery scripts, but only jquery scripts to do some inline editing by default.

    You can customize your forms on a per node type basis if needed.

    The contribute is activated on a list or an area, and i sthen accesible by the url /contribute/default instead of /edit/default.

    Here is more documentation http://www.jahia.com/community/documentation/jahiapedia/jahia-modules/contribute.html

    Regards,

    Cedric

    misterCedricMailleux

    Cedric Mailleux (cedmail)

    Number of messages  11
    Registration date
    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