We Keep Coding

onClick for link element doesnt work when trying to invoke a js function (Uncaught TypeError: Cannot set property 'onclick' of null)

Here I'm trying to send a http request to my spring controller once an icon is clicked that is displayed with a validation for a model attribute.
<div class="col-sm-4 col-sm-offset-1 page-title-section"></div>
<c:if test="${viewUsers}">
<div class="col-sm-4 page-actions-section">
<div class="page-actions">
<div class="page-action">
<a id="loadUserIcon">
<i class="fa fa-plus fa-2x"></i>
<h5>Add User</h5>
</a>
</div>
</div>
</div>
</c:if>
<c:if test="${viewRoles}">
<div class="col-sm-4 page-actions-section">
<div class="page-actions">
<div class="page-action">
<a id="loadRoleIcon">
<i class="fa fa-plus fa-2x"></i>
<h5>Add Role</h5>
</a>
</div>
</div>
</div>
</c:if>
</div>
The js to send the request once the icon is clicked :
(function() {
document.getElementById("loadUserIcon").onclick = function() {
window.location = 'loadUser?id=' + 0;
};
})();
(function() {
document.getElementById("loadRoleIcon").onclick = function() {
window.location = 'loadRole?id=' + 0;
};
})();
So now the separate icons are displayed with each model attribute validation and the first function is invoked once the 'Add User' icon is clicked but i cant seem to invoke this second function even though the icon is displayed with the model attribute validation. What could have been gone wrong here?
The error on the console once the 'Add Role' icon is clicked :
Uncaught TypeError: Cannot set property 'onclick' of null
at load:496
at load:500
these line numbers are directed to the second js function

Any error on console ?
Where you put the scripts?
You should put them into body.onload handler or just before the end tag </body>.

Include your JavaScript code, either at below the </body> tag, or load the functions upon DOM ready or onload.
I changed the code a bit for JSFiddle and its working fine, check here: https://jsfiddle.net/045L2xvj/
<div class="col-sm-4 col-sm-offset-1 page-title-section"></div>
<div class="col-sm-4 page-actions-section">
<div class="page-actions">
<div class="page-action">
<a href="#" id="loadUserIcon">
<h5>Add User</h5>
</a>
</div>
</div>
</div>
<div class="col-sm-4 page-actions-section">
<div class="page-actions">
<div class="page-action">
<a href="#" id="loadRoleIcon">
<h5>Add Role</h5>
</a>
</div>
</div>
</div>
And JS code:
(function() {
document.getElementById("loadUserIcon").onclick = function() {
alert('Add user');
};
})();
(function() {
document.getElementById("loadRoleIcon").onclick = function() {
alert('Add role');
};
})();

I just needed to wrap the js functions too with the model attribute validation to eliminate elements getting null.
<c:if test="${viewUsers}">
<script>
document.getElementById('loadUserIcon').onclick = function () {
window.location = 'loadUser?id=' + 0;
};
</script>
</c:if>
<c:if test="${viewRoles}">
<script>
document.getElementById('loadRoleIcon').onclick = function () {
window.location = 'loadRole?id=' + 0;
};
</script>
</c:if>

Bigcommerce - Display Certain Message/Image on a specific Category/Product

I'm fairly new to Big Commerce and had a question on how I'd be able to display an image / certain message on a specific category.
I currently have a free shipping image being displayed on all products but there's a certain category that I do not want that snippet of code being displayed.
How would I be able to achieve this?
The way I have the free shipping image being displayed is by modifying the card.html file
templates > components > products > card.html
Thanks!

You can consider inserting the image via banner on specific categories.
After this you can inject css via jQuery or override with plain css to display the banner wherever you like.
yourstore.xyz/manage/marketing/banners/create
Edit 1
Wrapping your div to if also should solve your issue on displaying that image in certain products.
{{#if product.shipping}}
{{#if product.shipping.price.value '===' 0}}
<img class="yourImgClass">{{imgURL}}
{{/if}}
{{/if}}
Edit 2
Here's the JS way to remove some elements from your specific categories:
var url = location.href;
if ( url.indexOf( 'your-url' ) !== -1 ) {
document.getElementById('your-free-shipping-image-id').remove();
console.log("yay, image bye");
}
else {
console.log("nay, image stays");
}
Edit 3
This is sort of a shift-make workaround with limited knowledge on jQuery. This would be much easier if you could place ID's on image wrapping span elements but I think you'll be alright with this.
Place this on footer, inside brackets.
$(document).ready(function() {
var s = $('img[src*="https://cdn7.bigcommerce.com/s-7iywz/product_images/uploaded_images/free-shipping-banner.jpg"]');
var url = location.href;
console.log(s.length);
if ( url.indexOf( 'framed' ) !== -1 ) {
s.remove();
}
});

You could try exempting that category (via ID or name) in particular with a conditional statement.
As an example, you might try:
{{#unless category.id '==' 5321}}
Free shipping!
{{/unless}}
Or for if/else:
{{#if category.id '==' 5321}}
No free shipping!
{{else}
Free shipping!
{{/if}}

Thanks for that but it still doesn't seem to be working.
Also there was a glitch with your code
You had {{/unless}} instead of {{/if}}
So this is what I used:
{{#if category.id '==' 70}}
No free shipping!
{{else}}
Free shipping!
{{/if}}
I've attached the Category ID which is 70
Everything on the store still shows the Free Shipping

If you want to remove "Free Shipping" from single category then use below code and get it fixed.
{{#if id '!=' 70 }} Free Shipping Message}} {{/if}}
If it doesn't work for you then i suggest you to post the "Card File" code here so that i can check what exactly you have written in the code.

<article class="card {{#if alternate}}card--alternate{{/if}}">
<figure class="card-figure">
{{#or price.non_sale_price_with_tax price.non_sale_price_without_tax}}
{{#if theme_settings.product_sale_badges '===' 'sash'}}
<div class="sale-flag-sash">
<span class="sale-text">On Sale!</span>
</div>
{{else if theme_settings.product_sale_badges '===' 'topleft'}}
<div class="sale-flag-side">
<span class="sale-text">On Sale!</span>
</div>
{{else if theme_settings.product_sale_badges '===' 'burst'}}
<div class="starwrap">
<div class="sale-text-burst">On Sale!</div>
<div class="sale-flag-star"></div>
</div>
{{/if}}
{{/or}}
{{#if demo}}
<img class="card-image lazyload" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{getImage image 'productgallery_size' (cdn theme_settings.default_image_product)}}" alt="{{image.alt}}" title="{{image.alt}}">
{{else}}
<div class="card-image-container">
<a href="{{url}}">
<img class="card-image lazyload" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{getImage image 'productgallery_size' (cdn theme_settings.default_image_product)}}" alt="{{image.alt}}" title="{{image.alt}}">
</a>
</div>
{{/if}}
</figure>
<div class="card-body">
<h4 class="card-title">
{{#if demo}}
{{name}}
{{else}}
{{name}}
{{/if}}
</h4>
<div class="card-text" data-test-info-type="price">
{{#or customer (if theme_settings.restrict_to_login '!==' true)}}
{{> components/products/price price=price customer=customer}}
{{else}}
{{> components/common/login-for-pricing}}
{{/or}}
</div>
<p class="card-text" data-test-info-type="productRating">
<span class="rating--small">
{{> components/products/ratings rating=rating}} <span style="color:gray;">{{#if num_reviews '>' 0}}</span>
({{num_reviews}}) Review{{#if num_reviews '>' 1}}s
{{/if}}{{/if}}
</span>
</p>
{{#if id '!=' 70 }}
<span><img src="https://cdn7.bigcommerce.com/s- 7iywz/product_images/uploaded_images/free-shipping-banner.jpg?t=1525811996&_ga=2.165904830.1847420277.1525706943-52562068.1494873040"></span>
{{/if}}
</div>
</article>
i have modified your code, just copy it and paste it in your theme.

I cant seem to find the error in Meteor

I am new at meteor and I am having some issues. I am creating a social network app and what it basically does is signs up user and the user can post and follow others. Thats the basic functionality it does right now. I want to add something that when a user clicks on other users profile it shows that users post. But the code isnt working and doesnt show any error at all
Template
<template name="profileArea">
{{#if currentUser}}
<div id="side-profile" class="side-box">
<a class="filter-user">{{currentUser.username}}</a>
</div>
{{/if}}
<div id="side-all" class="side-box">
<a class="community">Community</a>
</div>
{{#if currentUser}}
<div id="side-like" class="side-box">
<h3>Following</h3>
<div class="boxcontent">
{{#each username in following}}
<div>
<a class="filter-user">{{username}}</a>
</div>
{{/each}}
</div>
</div>
<div id="side-likeyou" class="side-box">
<h3>Follows You</h3>
<div class="boxcontent">
{{# each followers}}
<div>
<a class="filter-user">{{username}}</a>
</div>
{{/each}}
</div>
</div>
{{/if}}
</template>
Code:
Template.profileArea.events({
'click .filter-user': function(event){
event.preventDefault();
var selectedUser = event.target.text;
Session.set('username', selectedUser);
},
'click .community': function(event){
event.preventDefault();
Session.set('username', null);
}
});
Template.postsList.helpers({
posts: function() {
//Stuff should happen here but its not -_-
var result;
if(Session.get('username')){
result = Post.find({username: Session.get('username')}, {sort:{created: -1}});
}
else{
result = Post.find({}, {sort:{created: -1}});
}
return result;
}
});

The problem in this case is that you have never actually rendered your postsList template (you have only just defined it).
If you want to actually see postsList you need to call {{> postsList }} from somewhere in your profileArea's HTML. This will render that template and then your postsList.posts helper will execute (and change reactively when Session.get('username')) changes.
Maybe add this after the 'Follows You' section of the profile.
<div id="side-posts" class="side-box">
<h3>Posts</h3>
<div class="boxcontent"> {{> postsList }} <div>
</div>

Using summernote with meteor (Discover Meteor)

So, I've been working with Discover Meteor, and I'm having problems.
I'm trying to insert what content inputted in summernote into mongo but I'm having a few problems.
post_submit.html
<div class="form-group {{errorClass 'content'}}">
<textarea class="form-control" name="content" id="summernote"></textarea>
</div>
post_submit.js
var post = {
url: checkURLPrefix( $(e.target).find('[name=url]').val() ),
title: $(e.target).find('[name=title]').val(),
content: $(e.target).find('[name=content]').val()
};
lib/posts.js (will say Match Failed error when submitting)
meteor.methods({
postInsert: function(postAttributes) {
check(this.userId, String);
check(postAttributes, {
title: String,
url: String,
content: function(content){$('[name=content]').html($('#summernote').code());}
});
I've tried content: String to input the data into mongo. It would work but when I tried to load {{content}} in the post_page.html file, it would just show the unrendered HTML codes. {{{content}}} would show to content properly rendered but would mess up the functionality of the sorting system based on votes.
I'm really lost here and I wish I could find a solution soon.
Thank you in advance!
EDIT1: Here is my post_page.html and what I see when I insert content: String and load with {{content}}
<template name="postPage">
{{> postItem}}
<div class="col-md-12" style="background:blue;">
{{content}}
</div>
<ul class="comments">
{{#each comments}}
{{> commentItem}}
{{/each}}
</ul>
{{#if currentUser}}
{{> commentSubmit}}
{{else}}
<p>Please log in to leave a comment.</p>
{{/if}}
</template>
http://i.imgur.com/Fm0CXAN.png

First: you should use summernote in a div, not a textarea.
And in post_submit.js you have to leave it like this:
var post = {
...
content: $(e.target).find('#summernote').code()
};
In your post_page.html use triple brackets, because its HTML.
<div class="col-md-12" style="background:blue;">
{{{content}}}
</div>

Javascript Error when loading items on page

I'm having two errors on my site and I think the problem rests in the javascript. I have firebugs addon that is showing these two errors and the code but I have no idea how to fix it.
SyntaxError: missing ) after argument list
window.Templates['home'] = _.template('<% if (loggedInUser == null){ %><% } %><div id="home_container"> <div id="home_title">--- is back!</div> <div id="home_description">Created by music lovers, for music lovers.</div> <div id="home_header"> <div class="home_header home_header_on">Search<span> all your favorites</span></div> <div class="home_header">Share<span> songs with friends</span></div> <div class="home_header">See <span>What's </span> <span>Trending</span></div> </div> <div id="home_description"> --- is the best way to find and share music online</div> <div id="home_search_container"> <form id="home_search_form"> <input id="home_search" class="large_input_text" placeholder="Search music" type="text" /> <input id="home_search_button" type="button" value="search" /> <span id="home_search_bg"></span> </form> </div> <div id="home_share" class="hidden"> <div id="home_share_wrapper"> Tweet <div id="fb-root"></div> <div class="fb-like" data-send="false" data-layout="button_count" data-width="95" data-show-faces="true"></div> <g:plusone size="medium"></g:plusone> </div> </div> <div class="clear"></div></div><div id="home_footer_container"></div><body background="http://www.----.com/assets/images/testbg.jpg">');
The other error is where arrow is pointing
ReferenceError: Templates is not defined
var SongView = Backbone.View.extend({
showAvatar: true,
user: null,
-> template: Templates.common_songs,
tagName: "div",
className: "song_row a_song",
events: {
"click .song_view_love": "onLovedClicked",
"click .song_view_share": "onShareClicked",
"click .song_view_play_button": "onPlayButtonClicked",
"click .song_view_queue": "onQueueClicked"
}
THIS IS FIXED. However fixing the window.Templates js resulted in new (Type Error: be is undefined) which are shown below. Any ideas?
Zc.prototype.Ga=function(a){var b=a[0],c=window;c.google_unique_id?++c.google_unique_id:c.google_unique_id=1;b.cb=c.google_unique_id;this.f.U&&(P(this,"hxva",1),O(this,"cmsid",this.f.H),O(this,"vid",this.f.I));isNaN(this.f.Da)||P(this,"pod",this.f.Da);isNaN(this.f.Ea)||P(this,"ppos",this.f.Ea);isNaN(this.f.r)||P(this,"scor",this.f.r);N.prototype.Ga.call(this,a);a=window;var b=a.document.domain,d=a.document.cookie,e=a.history.length,f=a.screen,g=a.document.referrer,k=Math.round((new Date).getTime()/

In your first example you have a '
window.Templates['home'] = _.template('<% i<snip>...span>What's
^
That is terminating the string inside _.template(', remove the ' from What's and try

The second error is caused by the first.
If you look at the end of what you posted, the syntax highlighting would have given clue that it is seeing it as a comment because of the "//" in the URL.
<body background="http://www.----.com/assets/images/testbg.jpg">');
You need to escape the slashes.