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
Scott Wilcox
9,517 Pointsjquery error, the code works but I am getting an message in the console.
I created this code to insert 1 of 5 random images in my DOM.
$(".inner").prependTo(function(){ var num; num = Math.floor(Math.random() * 5) + 1;
if (num === 1) {
return $( "<img src=\"assets/h1.jpg\" class=\"img-responsive center-block\" alt=\"Responsive image\">" ).appendTo( ".inner" );
} else if (num === 2) {
return $( "<img src=\"assets/h2.jpg\" class=\"img-responsive center-block\" alt=\"Responsive image\">" ).appendTo( ".inner" );
} else if (num === 3) {
return $( "<img src=\"assets/h3.jpg\" class=\"img-responsive center-block\" alt=\"Responsive image\">" ).appendTo( ".inner" );
} else if (num === 4) {
return $( "<img src=\"assets/h4.png\" class=\"img-responsive center-block\" alt=\"Responsive image\">" ).appendTo( ".inner" );
} else {
return $( "<img src=\"assets/h5.jpg\" class=\"img-responsive center-block\" alt=\"Responsive image\">" ).appendTo( ".inner" );
}
});
but I am getting these error messages
Uncaught TypeError: Cannot read property 'createDocumentFragment' of null createSafeFragment jQuery.extend.buildFragment jQuery.fn.extend.domManip jQuery.fn.extend.prepend jQuery.each.jQuery.fn.(anonymous function) (anonymous function)
This is running in a Ruby on Rails enviroment.
Any help?
11 Answers
Marcus Parsons
15,719 PointsHi Scott,
I developed a different method of delivering those random images because prependTo does not accept a function as an argument; it only accepts a target as an argument: "A selector, element, HTML string, array of elements, or jQuery object; the matched set of elements will be inserted at the beginning of the element(s) specified by this parameter."
I don't think you even need prependTo in your case because all you have to do is set up a default image element, and then change its src attribute to a random image. You can see what I did in this codepen and see if that is similar to what you're going for. I added comments in the JavaScript.
Scott Wilcox
9,517 PointsIts close to what I am looking for but I want the image to load on pageload and change when the page refreshes. so no button click.
Marcus Parsons
15,719 PointsAh okay, well that's easy enough. I'll modify the codepen to reflect that and let you know here in just a couple minutes.
Marcus Parsons
15,719 PointsOkay check out the codepen again. All you have to do is leave the src blank in the DOM (or you can put a default image to load - preferred method) and then in the jQuery run the function insertRandomImage() that I have which will load a random image after page load (as long as the script is placed at the end of the body or within a document.ready function in the head). You can refresh the codepen to test.
Same codepen: http://codepen.io/anon/pen/zGZQOV?editors=101
Scott Wilcox
9,517 Pointsthank you, I am much better coding rails then I am coding Jquery or JS :)
Scott Wilcox
9,517 PointsSo I am leave src as src= or src=""?
Marcus Parsons
15,719 PointsYou can leave it equal to a pair of empty quotes or set it to a default picture. You definitely wouldn't want to put just =. I have it as a default picture now in the codepen, actually, because the first load might result in the image not being set properly. You should go ahead and set a default picture for the first ever load by a client computer.
Scott Wilcox
9,517 Pointsok this is what I placed.
<div class="col-md-2"> <img id="randomImage" class="img-responsive center-block" src="" alt="Responsive image"> </div>
If I put in a place holder image, it comes up as it should. If I take it out I get the alt="" placeholder. Am i missing something?
That's all I needed right?
or do I need to add this? $(document).insertRandomImage();
which didn't work anyway.
Marcus Parsons
15,719 PointsThe first time you refresh the page you're likely to get the placeholder alt text with a blank src attribute so that's why I wanted you to put a default image for the first load.
Scott Wilcox
9,517 PointsI did put it in the first time and it never changed after 10 loads but let me try this again :)
Marcus Parsons
15,719 PointsYou can verify that my code works by refreshing the codepen page several times. It is a random number so the same image may appear multiple times. Ensure that you have the JavaScript copied as it is now, with the function call on the bottom. The only thing I changed in the codepen in the JavaScript was to call the function at the very bottom of the script by putting insertRandomImage(); and I deleted the button in the HTML part.
Scott Wilcox
9,517 PointsYup I just recopied it again after refreshing a few times. still not getting a random image with or without the placeholder. I even left your image links in just to test it.
I'm confused.
Marcus Parsons
15,719 PointsAre you testing this on the codepen site or on your local site? Because I know for a fact it's working on the codepen site, but if it's on your local site, then I'm going to need to see the HTML that's calling the script and what you have so far. You've done something wrong, Scott.
Scott Wilcox
9,517 Pointshttp://codepen.io/DarkPhoenixFL/pen/mJWYmB?editors=101
I just set up codepen. Thats the link to my application.js and application.html.erb
Marcus Parsons
15,719 PointsScott, when you use your own Codepen, you have to link to jQuery; Codepen doesn't link to the jQuery library automatically. Go to the gear icon in the top left corner of the JavaScript section and go to the select box that says "Quick add:" beside it and select "jQuery" and then hit "Save & Close". You'll now see the code working.
Scott Wilcox
9,517 Pointsit's working in my codepen too now. Since I am running rails with several gems, + bootstrap 3+ it could be the issue. There may be a way to do this already built into bootstrap, i just haven't looked.
Marcus Parsons
15,719 PointsThose shouldn't cause any clashing, I believe. You do have jQuery linked to your local site right?
Scott Wilcox
9,517 PointsI do.
The original code I had at the top of the discussion worked, it was just throwing a couple JS errors in the console that I wanted to get rid of.
I am going to leave this for the night and come at it with fresh eyes in the morning. I have a ton of other things to work on at this point since I am building a fully functional Social Media site from scratch. I can leave the pretty stuff till later.
Thank you for the help. You have been very patient with me. I'm not good with jquery and JS even though I have taken a lot of the courses on treehouse for it. I just can't wrap my head around it like I can rails, html, and css.
Marcus Parsons
15,719 PointsJavaScript is a bit of a different beast than those languages, I agree. It is so powerful, though, and it seems like every update to ECMAScript, it gets more powerful.
That is awesome! I wish you good luck in your project. If you need a front end developer, I happen to have a multi-black belt in JavaScript/jQuery/HTML/CSS lol :D
Scott Wilcox
9,517 PointsI would love the help. We should take this to a private chat though if we are going to talk about that. I don't have the site up on github yet. I can always create a private github for the project.
Marcus Parsons
15,719 PointsShoot me an email, Scott. marcus.parsons@gmail.com