We help IT Professionals succeed at work.

Updating checkbox via JQuery does not trigger Knockout binding

Dean OBrien
Dean OBrien asked
on
212 Views
Last Modified: 2017-05-10
Experts,

I am using knockout.js on a project to show/hide articles, based on what tag (checkbox) has been selected. My problem arises however, when i try to trigger the checked / unchecked status of a tag, using some jquery code elsewhere in the page.

The code is successfully check/unchecking the box, however the observable array that the checkboxes are bound to in knockout is not then getting updated.

I have attached a code snippet of code. First try checkbox at top, then the tags in bold. You will see the checkbox then gets selected, but no update on knockout.
<!DOCTYPE HTML>
<html>
<body>
<style>
.news-block {width: 250px;}
</style>
<div id="latest-news">
    <div>
        <h1>News</h1>
        <div class="row">
            <div id="tags">
                <h2>Tagged in:</h2>
                <div class="tags">
                        <label><input type="checkbox" value="general" id="general-tag-checkbox" data-bind="checked: tags" /><span class="tag general-tag" id="general-tag" >general</span></label>
                        <label><input type="checkbox" value="accomodation" id="accomodation-tag-checkbox" data-bind="checked: tags " /><span class="tag accomodation-tag" id="accomodation-tag" >accomodation</span></label>
                        <label><input type="checkbox" value="careers" id="careers-tag-checkbox" data-bind="checked: tags " /><span class="tag careers-tag" id="careers-tag" >careers</span></label>
                        <label><input type="checkbox" value="catering" id="catering-tag-checkbox" data-bind="checked: tags " /><span class="tag catering-tag" id="catering-tag" >catering</span></label>
                        <label><input type="checkbox" value="retail" id="retail-tag-checkbox" data-bind="checked: tags " /><span class="tag retail-tag" id="retail-tag" >retail</span></label>
                        <label><input type="checkbox" value="sport" id="sport-tag-checkbox" data-bind="checked: tags " /><span class="tag sport-tag" id="sport-tag" >sport</span></label>
                </div>
            </div>
        </div>

        <div id="news" data-bind='template: { foreach: articlesToShow, afterMove: afterMove }'>
            <div class="news-block large-3 medium-6 columns">
                <a data-bind="attr: { href: LinkToPage }" class="news-item">
                    <div class="news-img" data-bind="style: { backgroundImage: 'url(\'' + ImageUrl + '\')' }">
                        <div class="title">
                            <h3><strong data-bind="text: Title"></strong></h3>
                        </div>
                    </div>
                </a>
                <div class="news-content">
                    <p data-bind="text: Excerpt"></p>
                    <p data-bind="text: PublishedDate"></p>
                    <div class="tags" data-bind='foreach: Categories'>
                        <b><span data-bind="text: $data, attr: {text: $data, class: $data+'-tag'}"></span></b>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.0/masonry.pkgd.min.js'></script>
<script>
$(document).ready(function () {

	$container = $('#news');
	$container.masonry({});

	$("[class$=-tag]").click(function (event) {
		if($(event.target).attr('class').indexOf(' ') >= 0){}
		else{
			var x="#"+$(event.target).attr('class');
			var y=x+"-checkbox";

			if($(y)[0].checked == false){
				alert("adding " + y);
				//$(y)[0].checked = true;
			}else{
				alert("removing "+ y);
				//$(y)[0].checked = false;		
			}
			$(x).click();
		}
	});

	$(".tag").click(function () {
	    if ($(this).hasClass('active')) {
	        $(this).removeClass('active');
	    }
	    else {
	        $(this).addClass('active');
	    }
	});
});

var NewsModel = function() {
	this.tags = ko.observableArray([]);
	this.newsArticles = ko.observableArray([{"Title":"xxx","ImageUrl":"xxx.jpg","ImageAlt":"xxx","Excerpt":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus justo mi, ut vestibulum velit convallis non. Nam dictum congue arcu, et suscipit dolor convallis id. Duis vel diam dignissim elit congue rutrum. Integer tristique eu nibh id tincidunt. In interdum enim nibh, ut dictum dui condimentum sit amet. Duis scelerisque congue tristique. Quisque interdum, odio eu tristique iaculis, nisl libero efficitur urna, sit amet finibus tortor nibh nec erat. Ut tincidunt augue ac lacus euismod blandit.","PublishedDate":"6 days ago","LinkToPage":"xxx","Categories":["accomodation","careers"]},{"Title":"xxx","ImageUrl":"xxx","ImageAlt":"xxx","Excerpt":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus justo mi, ut vestibulum velit convallis non. Nam dictum congue arcu, et suscipit dolor convallis id. Duis vel diam dignissim elit congue rutrum. Integer tristique eu nibh id tincidunt. In interdum enim nibh, ut dictum dui condimentum sit amet. Duis scelerisque congue tristique. Quisque interdum, odio eu tristique iaculis, nisl libero efficitur urna, sit amet finibus tortor nibh nec erat. Ut tincidunt augue ac lacus euismod blandit.","PublishedDate":"3 days ago","LinkToPage":"xxx","Categories":["careers","general"]},{"Title":"New News Article","ImageUrl":"xxx","ImageAlt":"","Excerpt":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus justo mi, ut vestibulum velit convallis non. Nam dictum congue arcu, et suscipit dolor convallis id. Duis vel diam dignissim elit congue rutrum. Integer tristique eu nibh id tincidunt. In interdum enim nibh, ut dictum dui condimentum sit amet. Duis scelerisque congue tristique. Quisque interdum, odio eu tristique iaculis, nisl libero efficitur urna, sit amet finibus tortor nibh nec erat. Ut tincidunt augue ac lacus euismod blandit.","PublishedDate":"3 days ago","LinkToPage":"xxx","Categories":["retail"]},{"Title":"New News Article","ImageUrl":"xxx","ImageAlt":"","Excerpt":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus justo mi, ut vestibulum velit convallis non. Nam dictum congue arcu, et suscipit dolor convallis id. Duis vel diam dignissim elit congue rutrum. Integer tristique eu nibh id tincidunt. In interdum enim nibh, ut dictum dui condimentum sit amet. Duis scelerisque congue tristique. Quisque interdum, odio eu tristique iaculis, nisl libero efficitur urna, sit amet finibus tortor nibh nec erat. Ut tincidunt augue ac lacus euismod blandit.","PublishedDate":"3 days ago","LinkToPage":"xxx","Categories":["catering"]},{"Title":"ddddd","ImageUrl":"xxx","ImageAlt":"","Excerpt":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus justo mi, ut vestibulum velit convallis non. Nam dictum congue arcu, et suscipit dolor convallis id. Duis vel diam dignissim elit congue rutrum. Integer tristique eu nibh id tincidunt. In interdum enim nibh, ut dictum dui condimentum sit amet. Duis scelerisque congue tristique. Quisque interdum, odio eu tristique iaculis, nisl libero efficitur urna, sit amet finibus tortor nibh nec erat. Ut tincidunt augue ac lacus euismod blandit.","PublishedDate":"3 days ago","LinkToPage":"xxx","Categories":["sport"]},{"Title":"qqq","ImageUrl":"xxx","ImageAlt":"","Excerpt":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus justo mi, ut vestibulum velit convallis non. Nam dictum congue arcu, et suscipit dolor convallis id. Duis vel diam dignissim elit congue rutrum. Integer tristique eu nibh id tincidunt. In interdum enim nibh, ut dictum dui condimentum sit amet. Duis scelerisque congue tristique. Quisque interdum, odio eu tristique iaculis, nisl libero efficitur urna, sit amet finibus tortor nibh nec erat. Ut tincidunt augue ac lacus euismod blandit.","PublishedDate":"3 days ago","LinkToPage":"xxx","Categories":["sport"]},{"Title":"yyy","ImageUrl":"xxx","ImageAlt":"xxx","Excerpt":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus justo mi, ut vestibulum velit convalli non. Nam dictum congue arcu, et suscipit dolor convallis id. Duis vel diam dignissim elit congue rutrum. Integer tristique eu nibh id tincidunt. In interdum enim nibh, ut dictum dui condimentum sit amet. Duis scelerisque congue tristique. Quisque interdum, odio eu tristique iaculis, nisl libero efficitur urna, sit amet finibus tortor nibh nec erat. Ut tincidunt augue ac lacus euismod blandit. ","PublishedDate":"3 days ago","LinkToPage":"xxx","Categories":["careers","catering","general"]},{"Title":"xxx","ImageUrl":"xxx","ImageAlt":"xxx","Excerpt":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus justo mi, ut vestibulum velit convallis non. Nam dictum congue arcu, et suscipit dolor convallis id. Duis vel diam dignissim elit congue rutrum. Integer tristique eu nibh id tincidunt. In interdum enim nibh, ut dictum dui condimentum sit amet. Duis scelerisque congue tristique. Quisque interdum, odio eu tristique iaculis, nisl libero efficitur urna, sit amet finibus tortor nibh nec erat. Ut tincidunt augue ac lacus euismod blandit. ","PublishedDate":"3 days ago","LinkToPage":"xxx","Categories":["retail"]}]);
	this.afterMove = function(element, index, data) {$container.masonry( 'reloadItems' );$container.masonry( 'layout' );};
    this.articlesToShow = ko.computed(function() {
		var desiredArray = this.tags();

		if (_.isEmpty(desiredArray)) return this.newsArticles();

        return ko.utils.arrayFilter(this.newsArticles(), function(newsArticle) {
            return !_.isEmpty(_.intersection(newsArticle.Categories, desiredArray));
        });
    }, this);

};

ko.applyBindings(new NewsModel(), document.getElementById('latest-news'));

</script>
</body>
</html>

Open in new window


Any suggestions on getting this to update the knockout array would be appreciated.

Regards
Dean
Comment
Watch Question

Dorababu MSenior Software Engineer
CERTIFIED EXPERT
Distinguished Expert 2018

Commented:
Hi I am seeing some news getting loaded when I check the check boxes, what was not working in this
Inital Load
On checking general checkbox
general.PNG
CERTIFIED EXPERT

Author

Commented:
Hi Dorababu,

The boxes at the top work fine.

Whats now working is if you click the bold tags at the bottom of the article (i.e. accommodation in first one), ehich causes the alert('Adding xxxx'). It causes the accomodation checkbox at the top to be ticked, but not the knockout to show hide articles.

Regards
Dean
Dorababu MSenior Software Engineer
CERTIFIED EXPERT
Distinguished Expert 2018

Commented:
OK if I got you correctly when you click on the bold text and if checkbox got unchecked you need to hide the respective posts?
CERTIFIED EXPERT

Author

Commented:
The behaviour when you  'check' and then 'uncheck' GENERAL bold tab on a news article, should be the same as when you 'check' and then 'uncheck' GENERAL checkbox in the top group.

Does that make sense?

The top boxes work correctly, then tabs in the articles do not work correctly.

Regards
Dean
Owner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
CERTIFIED EXPERT

Author

Commented:
Hi Rob,
I have reviewed and that works perfectly. Really helped me out thanks!
Cheers
Dean

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.