JQuery/JS: Select change even does not trigger on change from Jquery code

Question

Posting my first question on stackoverflow. I have never had it occur that stackoverflow was not able to provide me with an answer that was already posted but for everything a first time. Here is the problem I have been struggling with:

I have used an HTML form to transfer data (values in specific) from one page to another (don't know PHP). On the dedicated website, I have a portfolio of listings that can be filtered by changing inputs and selects (dropdowns). The JQuery for the filter system works perfectly. However, I have written some JS that changes the values of these selects to the values transferred from the previous site after a delay but this change does not trigger the "select change" event that filters the system. Below is the JS that is running on the website. Again, the filter system works when I manually change the select, but it does not execute when the select is changed by my JS code in the bottom.

Any suggestions will be welcomed with open arms.

Thank you!

jQuery(window).load( function(){


        var filters = {};

        var $container = $('.grid-container');

        $container.isotope();

        $('.combination-filter').on( 'change', 'select', function() {
            var $this = $(this);
            // get group key
            var $buttonGroup = $this.closest('.btn-groupn');
            var filterGroup = $buttonGroup.attr('data-filter-group');
            // set filter for group
            filters[ filterGroup ] = $this.find('option:selected').attr('data-filter');
            // combine filters
            var filterValue = concatValues( filters );
            $container.isotope({ filter: filterValue });

            return false;
        });

        // flatten object by concatting values
        function concatValues( obj ) {
            var value = '';
            for ( var prop in obj ) {
                value += obj[ prop ];
            }
            return value;
        }

        $(window).resize(function() {
            $container.isotope('layout');
        });


        function initselect() {

            var parameters = location.search.substring(1).split("&");

            var temploca = parameters[0].split("=");
            loca = unescape(temploca[1]);
            $("input[name=locations]").val(loca);

            var tempsqua = parameters[1].split("=");
            squa = unescape(tempsqua[1]);
            $("select[name=squarems]").val(squa);

            var temppric = parameters[2].split("=");
            pric = unescape(temppric[1]);
            $("select[name=pricings]").val(pric);

            };

        setTimeout(initselect, 1000)

    });

---

Below the HTML code. My apologies for the bulk of it but hopefully it contains enough for us to figure it out.

<header id="header" class="transparent-header full-header sticky-header" data-sticky-class="not-dark">

        <div id="header-wrap">

            <div class="container clearfix">

                <div id="primary-menu-trigger"><i class="icon-reorder"></i></div>

                <!-- Logo
                ============================================= -->
                <div id="logo">
                    <a href="http://nomadr.nl" class="standard-logo" data-dark-logo="images/nomadrlogoblack.png"><img src="images/nomadrlogoblack.png" alt="Canvas Logo"></a>

                </div><!-- #logo end -->

                <div  class="combination-filter" style="display: inline-block; width: 40%; margin-top: 11px;">

                        <div class="navblock" style="border-radius: 4px 0px 0px 4px;">
                        <i class="icon-globe"></i>
                        <input id="searchTextField" type="text" name="locations" placeholder="Location">
                        </div>

                        <div class="navblock btn-groupn" role="group" data-filter-group="space" data-container="#portfolio" style="margin-left: -4px; margin-right: -4px;">
                        <i class="icon-external-link"></i>
                        <select name="squarems">
                            <option class="btnf" data-filter="*" value="all">All</option>
                            <option class="btnf" data-filter=".tenm2" value="+10m2">+10m<sup>2</sup></option>
                            <option class="btnf" data-filter=".fifteenm2" value="+15m2">+15m<sup>2</sup></option>
                            <option class="btnf" data-filter=".twentym2" value="+20m2">+20m<sup>2</sup></option>
                            <option class="btnf" data-filter=".twentyfivem2" value="+25m2">+25m<sup>2</sup></option>                                    
                        </select>
                        </div>

                        <div class="navblock btn-groupn" role="group" data-filter-group="price" data-container="#portfolio" style="border-radius: 0px 4px 4px 0px; box-shadow: 0.5px 0.5px 1px lightgrey;">
                        <i class="icon-euro"></i>
                        <select name="pricings" >
                            <option class="btnf" data-filter="*" value="all">All</option>
                            <option class="btnf" data-filter=".p450" value="450max.">450max.</option>
                            <option class="btnf" data-filter=".p500" value="500max.">500max.</option>
                            <option class="btnf" data-filter=".p550" value="550max">550max.</option>                                    
                            <option class="btnf" data-filter=".p600" value="600max">600max.</option>
                        </select>
                        </div>

                </div>

                <!-- Primary Navigation
                ============================================= -->
                <nav id="primary-menu" class="dark">

                    <ul class="one-page-menu">
                        <li><a href="http://nomadr.nl/"><div>Home</div></a></li>
                        <li class="current"><a href="http://nomadr.nl/listings/"><div>Listings</div></a></li>
                        <li><a href="http://nomadr.nl/faq/"><div>FAQ</div></a></li>
                        <li><a href="http://nomadr.nl/proprietor/"><div>Proprietor</div></a></li>
                        <li><a href="http://nomadr.nl/blog/"><div>Blog</div></a></li>
                        <li><a href="http://nomadr.nl/contact/"><div>Contact</div></a></li>
                    </ul>


                </nav><!-- #primary-menu end -->

            </div>

        </div>

    </header><!-- #header end -->   

    <section id="content">

        <div class="content-wrap" style="padding-top: 50px !important">


            <div class="container clearfix">

                <!--<div class="row topmargin-lg bottommargin-sm">


                    <div id="section-features" class="heading-block center">
                        <h2 class="newprime">Our Current Listings</h2>
                        <span class="divcenter">Below you can filter and find all the listings we have to offer.</span>
                    </div>


                </div> -->

                <div class="clear"></div>

                <!-- Portfolio Items
                ============================================= -->
                <div id="portfolio" class="portfolio grid-container clearfix">

                <article class="portfolio-item tenm2 fifteenm2 twentym2 p500 p550 p600 west">
                        <div class="portfolio-image">
                            <div class="fslider" data-arrows="false" data-pause="10000">
                                <div class="flexslider">
                                    <div class="slider-wrap">
                                            <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/5042ns/5042ns1-min.jpg" alt="Shake It"></a></div>
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/5042ns/5042ns2-min.jpg" alt="Shake It"></a></div>
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/5042ns/5042ns3-min.jpg" alt="Shake It"></a></div>
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/5042ns/5042ns4-min.jpg" alt="Shake It"></a></div> 
                                    </div>
                                </div>
                            </div>
                            <div class="portfolio-overlay" data-lightbox="gallery">
                                    <a href="images/portfolio/5042ns/5042ns1.jpg" class="left-icon" data-lightbox="gallery-item"><i class="icon-line-stack-2"></i></a>
                                <a href="images/portfolio/5042ns/5042ns2.jpg" class="hidden" data-lightbox="gallery-item"></a>
                                <a href="images/portfolio/5042ns/5042ns3.jpg" class="hidden" data-lightbox="gallery-item"></a>
                                <a href="images/portfolio/5042ns/5042ns4.jpg" class="hidden" data-lightbox="gallery-item"></a>
                                <a href="http://nomadr.nl/listings/5042ns/" class="right-icon"><i class="icon-line-ellipsis"></i></a>   
                            </div>
                        </div>
                        <div class="portfolio-desc">
                            <h3><a href="http://nomadr.nl/listings/5042ns/">Tobias Asserlaan</a></h3>
                            <span><a href="#">20m<sup>2</sup></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">&euro;500,-</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">West</a></span>
                        </div>
                    </article>

                    <article class="portfolio-item tenm2 fifteenm2 twentym2 p550 p600 west">
                        <div class="portfolio-image">
                            <div class="fslider" data-arrows="false" data-pause="10000">
                                <div class="flexslider">
                                    <div class="slider-wrap">
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room5-min.jpg" alt="Shake It"></a></div>
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room6-min.jpg" alt="Shake It"></a></div>
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room7-min.jpg" alt="Shake It"></a></div>
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room8-min.jpg" alt="Shake It"></a></div>
                                    </div>
                                </div>
                            </div>
                            <div class="portfolio-overlay" data-lightbox="gallery">
                                <a href="images/portfolio/room5.jpg" class="left-icon" data-lightbox="gallery-item"><i class="icon-line-stack-2"></i></a>
                                <a href="images/portfolio/room6.jpg" class="hidden" data-lightbox="gallery-item"></a>
                                <a href="images/portfolio/room7.jpg" class="hidden" data-lightbox="gallery-item"></a>
                                <a href="images/portfolio/room8.jpg" class="hidden" data-lightbox="gallery-item"></a>
                                <a href="http://nomadr.nl/listings/5042ns/" class="right-icon"><i class="icon-line-ellipsis"></i></a>
                            </div>
                        </div>
                        <div class="portfolio-desc">
                            <h3><a href="http://nomadr.nl/listings/5042ns/">Statentlaan</a></h3>
                            <span><a href="#">20m<sup>2</sup></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">&euro;550,-</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">West</a></span>
                        </div>
                    </article>

                    <article class="portfolio-item tenm2 fifteenm2 p500 p550 p600 south">
                        <div class="portfolio-image">
                            <div class="fslider" data-arrows="false" data-pause="10000">
                                <div class="flexslider">
                                    <div class="slider-wrap">
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room9-min.jpg" alt="Shake It"></a></div>
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room10-min.jpg" alt="Shake It"></a></div>
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room11-min.jpg" alt="Shake It"></a></div>
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room12-min.jpg" alt="Shake It"></a></div>
                                    </div>
                                </div>
                            </div>
                            <div class="portfolio-overlay" data-lightbox="gallery">
                                <a href="images/portfolio/room9.jpg" class="left-icon" data-lightbox="gallery-item"><i class="icon-line-stack-2"></i></a>
                                <a href="images/portfolio/room10.jpg" class="hidden" data-lightbox="gallery-item"></a>
                                <a href="images/portfolio/room11.jpg" class="hidden" data-lightbox="gallery-item"></a>
                                <a href="images/portfolio/room12.jpg" class="hidden" data-lightbox="gallery-item"></a>
                                <a href="http://nomadr.nl/listings/5042ns/" class="right-icon"><i class="icon-line-ellipsis"></i></a>
                            </div>
                        </div>
                        <div class="portfolio-desc">
                            <h3><a href="http://nomadr.nl/listings/5042ns/">Broekhovenseweg</a></h3>
                            <span><a href="#">15m<sup>2</sup></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">&euro;500,-</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">South</a></span>
                        </div>
                    </article>

                    <article class="portfolio-item tenm2 fifteenm2 twentym2 twentyfivem2 p550 p600 south">
                        <div class="portfolio-image">
                            <div class="fslider" data-arrows="false" data-pause="10000">
                                <div class="flexslider">
                                    <div class="slider-wrap">
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room13-min.jpg" alt="Shake It"></a></div>
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room14-min.jpg" alt="Shake It"></a></div>
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room15-min.jpg" alt="Shake It"></a></div>
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room16-min.jpg" alt="Shake It"></a></div>
                                    </div>
                                </div>
                            </div>
                            <div class="portfolio-overlay" data-lightbox="gallery">
                                <a href="images/portfolio/room13.jpg" class="left-icon" data-lightbox="gallery-item"><i class="icon-line-stack-2"></i></a>
                                <a href="images/portfolio/room14.jpg" class="hidden" data-lightbox="gallery-item"></a>
                                <a href="images/portfolio/room15.jpg" class="hidden" data-lightbox="gallery-item"></a>
                                <a href="images/portfolio/room16.jpg" class="hidden" data-lightbox="gallery-item"></a>
                                <a href="http://nomadr.nl/listings/5042ns/" class="right-icon"><i class="icon-line-ellipsis"></i></a>
                            </div>
                        </div>
                        <div class="portfolio-desc">
                            <h3><a href="http://nomadr.nl/listings/5042ns/">Valkenierstraat</a></h3>
                            <span><a href="#">25m<sup>2</sup></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">&euro;550,-</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">South</a></span>
                        </div>
                    </article>

                        </div><!-- #portfolio end -->


            </div>


        </div>

    </section><!-- #content end -->

*******EDIT********

Hi there!

I have added the following code to the initselect function, and now it does execute the filter. However, somehow it now does not fill in the last select (price). It leaves it blank, and therefore also does not include it in the filter. Filter now does work on the automated change to the first select. This is the code that executes within the initselect function after the selects are changed by the js:

$(".combination-filter select").each(function() {
                var $this = $(this);
            // get group key
            var $buttonGroup = $this.closest('.btn-groupn');
            var filterGroup = $buttonGroup.attr('data-filter-group');
            // set filter for group
            filters[ filterGroup ] = $this.find('option:selected').attr('data-filter');
            // combine filters
            var filterValue = concatValues( filters );
            $container.isotope({ filter: filterValue });


            return false;

            });

Answer 1

Solution to this problem was the following. Instead of having

$("select[name=squarems]").val(squa);

I had to add .change(); to the end of it for each val change in the initselect() function. This would look like this (for each):

$("select[name=squarems]").val(squa).change();

Somehow this made it register as a change and triggered the filter event in JS.

Thank you all for your input!

Cheers

Answer 2

You need to invoke the .change() event from your code => $('.combination-filter').change().

If you change the value programatically the change event is not "called by the browser".