Bummer! You must be logged in to access this page.

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Boris Kamp
Boris Kamp
16,660 Points

Javascript lines not working

Im using bootstrap's glyphicons to add some icons to my sidebar content by using this code:

//Add plus icon to content items
$( "<span></span>" ).addClass( "glyphicon glyphicon-plus pull-left" ).prependTo( "#review-contents p" );

//Add thumbs up & down to pros & cons
$( "<span></span>" ).addClass( "glyphicon glyphicon-thumbs-up pull-left" ).prependTo( ".pros p" );
$( "<span></span>" ).addClass( "glyphicon glyphicon-thumbs-down pull-left" ).prependTo( ".cons p" );

this code should work, as does the rest in my js file, however, it doesn't! When I copy those line in Chrome's inspector Console, it DOES work, that's the strange thing about it.... And the rest of the code works as well...

Here is my full js file that I use:

 //make jQuery reference to $
var $ =jQuery.noConflict();

//Collapse Box functionality
$(".collapsebox-header").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500);
    //toggle collapse-up & collapse-down icons
    $( this ).find(".glyphicon-collapse-down").toggleClass( "glyphicon-collapse-down, glyphicon-collapse-up" );
});

//add dropdown icon to the dropdown sidebar widgets
$( "<span></span>" ).addClass( "glyphicon glyphicon-collapse-down pull-right" ).appendTo( ".collapsebox-header h3" );
$( "<span></span>" ).addClass( "glyphicon glyphicon-collapse-down pull-right" ).appendTo( ".collapsebox-header h4" );

//Add plus icon to content items
$( "<span></span>" ).addClass( "glyphicon glyphicon-plus pull-left" ).prependTo( "#review-contents p" );

//Add thumbs up & down to pros & cons
$( "<span></span>" ).addClass( "glyphicon glyphicon-thumbs-up pull-left" ).prependTo( ".pros p" );
$( "<span></span>" ).addClass( "glyphicon glyphicon-thumbs-down pull-left" ).prependTo( ".cons p" );

//add camera icon to pictures tabs
//$(".collapsebox-header.bs-lightgrey.pictures").before($("<span></span>").addClass("glyphicon glyphicon-camera pull-left"));
$("<span></span>").addClass("glyphicon glyphicon-camera pull-right").appendTo( ".pictures h3" );
$("<span></span>").addClass("glyphicon glyphicon-camera pull-right").appendTo( ".pictures h4" );

//Wrap side-info lines in <p> tags
$(".auto-paragraph").each(function () {
    var lines = $(this).html().split("<br>");
    $(this).html('<p class="bs-lightgrey">' + lines.join("</p><p class='bs-lightgrey'>") + '</p>');
});

//Add plus icon to manufacturer types
//$(".manufacturer-types").before($("<span></span>").addClass("glyphicon glyphicon glyphicon-plus pull-left"));

//Create display options in archive pages
    //Toggle grid view
    $(".glyphicon-th").click(function() {
        $( ".grid-container" ).show();
        $( ".list-container" ).hide();
    });

    //Toggle list view
    $(".glyphicon-align-justify").click(function() {
        $( ".list-container" ).show();
        $( ".grid-container" ).hide();
    });

//end
( jQuery );

What's causing this? I can't figure it out by myself.... Thanks!

6 Answers

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

I think it's running the 'wrap in p tag' after the adding of the icons, which look for a p tag within the #review-contents div...

Try adding the auto-wrap before the line with the comment //Add plus icon to content items

Boris Kamp
Boris Kamp
16,660 Points

Genius! that did the trick. thank you very much! good learning moment that shows the importance of the order of lines of code in some situations!

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

I believe it's because you're not correctly using the jQuery.noConflict() method...

From the jQuery docs: jQuery.noConflict()

jQuery.noConflict();
(function( $ ) {
  $(function() {
    // More code using $ as alias to jQuery
  });
})(jQuery);

// Other code using $ as an alias to the other library

In the example from the docs, you would call jQuery.noConflict() to allow another JavaScript library to use the $ as the function/variable name, then enclose all of your jQuery in its own, immediately-invoked function scope so you can use the $ for your jQuery code.

So you can either:

  1. Wrap your code in an immediately-invoked function by using the code above (remove your first couple of lines and the last one in your code and place it where the first comment is in the code above)
  2. Assign the jQuery object to another variable name... e.g. var $j = jQuery.noConflict(); and then change the $ in your code to $j and remove the last line, since it shouldn't be there like that.

Also, I should note that you might want to look at the wrapping methods in jQuery for your '.autoparagraph' bit.

Finally, if none of this helps, please include a bit of the sample HTML structure so we can see the DOM tree, and make sure your jQuery code is being called after the HTML it modifies, as well as the script tag that includes the jQuery library.

Boris Kamp
Boris Kamp
16,660 Points

Thanks for you suggestion! I tried it and it still doesn't work.... here's my current js file content:

 //make jQuery reference to $
var $ =jQuery.noConflict();
(function( $ ) {
  $(function() {

//Collapse Box functionality
$(".collapsebox-header").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500);
    //toggle collapse-up & collapse-down icons
    $( this ).find(".glyphicon-collapse-down").toggleClass( "glyphicon-collapse-down, glyphicon-collapse-up" );
});

//add dropdown icon to the dropdown sidebar widgets
$( "<span></span>" ).addClass( "glyphicon glyphicon-collapse-down pull-right" ).appendTo( ".collapsebox-header h3" );
$( "<span></span>" ).addClass( "glyphicon glyphicon-collapse-down pull-right" ).appendTo( ".collapsebox-header h4" );

//Add plus icon to content items
$( "<span></span>" ).addClass( "glyphicon glyphicon-plus pull-left" ).prependTo( "#review-contents p" );

//Add thumbs up & down to pros & cons
$( "<span></span>" ).addClass( "glyphicon glyphicon-thumbs-up pull-left" ).prependTo( ".pros p" );
$( "<span></span>" ).addClass( "glyphicon glyphicon-thumbs-down pull-left" ).prependTo( ".cons p" );

//add camera icon to pictures tabs
//$(".collapsebox-header.bs-lightgrey.pictures").before($("<span></span>").addClass("glyphicon glyphicon-camera pull-left"));
$("<span></span>").addClass("glyphicon glyphicon-camera pull-right").appendTo( ".pictures h3" );
$("<span></span>").addClass("glyphicon glyphicon-camera pull-right").appendTo( ".pictures h4" );

//Wrap side-info lines in <p> tags
$(".auto-paragraph").each(function () {
    var lines = $(this).html().split("<br>");
    $(this).html('<p class="bs-lightgrey">' + lines.join("</p><p class='bs-lightgrey'>") + '</p>');
});

//Add plus icon to manufacturer types
//$(".manufacturer-types").before($("<span></span>").addClass("glyphicon glyphicon glyphicon-plus pull-left"));

//Create display options in archive pages
    //Toggle grid view
    $(".glyphicon-th").click(function() {
        $( ".grid-container" ).show();
        $( ".list-container" ).hide();
    });

    //Toggle list view
    $(".glyphicon-align-justify").click(function() {
        $( ".list-container" ).show();
        $( ".grid-container" ).hide();
    });

//end
  });
})(jQuery);

the html part for the "//Add plus icon to content items" is:

<div class="collapsebox">
            <div class="collapsebox-header bs-lightgrey">
              <h3>Content</h3>
            </div>
            <div id="review-contents" class="collapsebox-body paragraph-style auto-paragraph">
              <?php the_field('reviewContents'); ?>
            </div>
          </div>

but again, when I try it in the Chrome console, it works strangely enough... so I don't think it has to do with my html right?

Thanks for helping me out!

Gleb Kulakovski
Gleb Kulakovski
13,918 Points
Gleb Kulakovski
Gleb Kulakovski
13,918 Points

Because(maybe) you use wrong syntax of JQuery object. You should fetch like this $( "span" ) without closing tag and brackets.

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

His syntax is valid for creating an element with jQuery (because he's created blank span elements and then assigning classes and prepending/appending them to other elements.

A slightly shorter way is to use $("<span/>"), since jQuery knows which elements are allowed to be self-closing and which need to have a separate closing tag.

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

I put your JS and some slightly modified HTML into a JSFiddle: http://jsfiddle.net/qk60z8pz/

The dropdown and 'icon' changing works for me (I just used some CSS content instead of actual icons to indicate the state they are in).

Note that you're using a div with the id of review-contents, so if you plan on having more than one of those (you allow for multiple elements with the collapsebox-header class), then you should change that to a class in your HTML, JS and CSS.

Is your php content definitely coming through without <p> tags and with <br> tags separating the lines?

Boris Kamp
Boris Kamp
16,660 Points

thanks for the update. I got the dropdown icons to work by myself already (they work both up and down) before I started this topic, the weird thing is that the other lines don't work like I explained in my first post. You're right, Im using an ID instead of a class, reason is that the review-contents is only appearing once per page, thus it should be an ID right?

My content is spitted out with <br> tags indeed, I got the javascript line to convert it to <p> tags from somebody on this forum, the thread is here: https://teamtreehouse.com/forum/wrap-text-with-p-tag-with-jquery

But anyway, I still have the issue with the //Add plus icon to content items & //Add thumbs up & down to pros & cons JS lines, they don't work.....

Thanks for your time!

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Can you paste in some sample code coming from the PHP <?php the_field('reviewContents'); ?> ?

Then I might be able to help further.

Boris Kamp
Boris Kamp
16,660 Points
Boris Kamp
Boris Kamp
16,660 Points

It's no real code, it's an Advanced Custom Fields field where I just input plain text. typing on a new line means a line break <br> so basically I input something like:

instructions
upper hull
lower hull
21 sprues
3 bags of track links
photo etch
small piece of rope
decals
paint scheme chart

Without any formatting or whatsoever Does this help?

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

So changing the order of the code to add the plus icons after the auto-paragraph didn't work?

Boris Kamp
Boris Kamp
16,660 Points

Yeah it did, I marked you're answer as the solution right? You solved my question, thanks!