My url link is like so http://localhost:50255/product/filter/manufacturer/3

and on document load, i try to set the manufacturer 3 value like so

$(window).load(function(){
    var pathname = window.location.pathname.split("/");
    var filter = pathname[pathname.length-3];
            if(filter === 'filter'){
                var option = pathname[pathname.length-2];
                var id = pathname[pathname.length-1];
                $("#ManufacturerID").val(id).trigger("change");
            }
        });

but i get the error

Cannot read property 'join' of undefined

My html markup is

  <div class="select2-container select2-container-multi js-example-basic-multiple col-sm-12" id="s2id_ManufacturerID" style="border: 1px solid rgba(0, 0, 0, 0.14902); display: block;">
         <ul class="select2-choices">  
           <li class="select2-search-field">    
           <label for="s2id_autogen6" class="select2-offscreen"></label>    
           <input type="text" autoplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input select2-default" id="s2id_autogen6" placeholder="" style="width: 1004px;">  
           </li>
         </ul>
       <div class="select2-drop select2-drop-multi select2-display-none select2-drop-active">   
         <ul class="select2-results">   
           <li class="select2-no-results">No matches found</li>
         </ul>
       </div>
    </div>


    <select id="ManufacturerID" class="js-example-basic-multiple col-sm-12" multiple="multiple" placeholder="Κατασκευαστές" style="border: 1px solid rgba(0, 0, 0, 0.14902); display: none;" tabindex="-1">
         <option value="1">manufacturer 1</option>
         <option value="2">manufacturer 2</option>
         <option value="3">manufacturer 3</option>
    </select>

What am i doing wrong here?

UPDATE thanks to the ments, the error es from the following function

$(function () {
            $('select').select2()
            .on("change", function (e) {
                var id = '#sel' + $(this).attr("id");
                var array = e.val.join(",");
                $(id).val(array);
                PostIt();
            })
        });

My url link is like so http://localhost:50255/product/filter/manufacturer/3

and on document load, i try to set the manufacturer 3 value like so

$(window).load(function(){
    var pathname = window.location.pathname.split("/");
    var filter = pathname[pathname.length-3];
            if(filter === 'filter'){
                var option = pathname[pathname.length-2];
                var id = pathname[pathname.length-1];
                $("#ManufacturerID").val(id).trigger("change");
            }
        });

but i get the error

Cannot read property 'join' of undefined

My html markup is

  <div class="select2-container select2-container-multi js-example-basic-multiple col-sm-12" id="s2id_ManufacturerID" style="border: 1px solid rgba(0, 0, 0, 0.14902); display: block;">
         <ul class="select2-choices">  
           <li class="select2-search-field">    
           <label for="s2id_autogen6" class="select2-offscreen"></label>    
           <input type="text" autoplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input select2-default" id="s2id_autogen6" placeholder="" style="width: 1004px;">  
           </li>
         </ul>
       <div class="select2-drop select2-drop-multi select2-display-none select2-drop-active">   
         <ul class="select2-results">   
           <li class="select2-no-results">No matches found</li>
         </ul>
       </div>
    </div>


    <select id="ManufacturerID" class="js-example-basic-multiple col-sm-12" multiple="multiple" placeholder="Κατασκευαστές" style="border: 1px solid rgba(0, 0, 0, 0.14902); display: none;" tabindex="-1">
         <option value="1">manufacturer 1</option>
         <option value="2">manufacturer 2</option>
         <option value="3">manufacturer 3</option>
    </select>

What am i doing wrong here?

UPDATE thanks to the ments, the error es from the following function

$(function () {
            $('select').select2()
            .on("change", function (e) {
                var id = '#sel' + $(this).attr("id");
                var array = e.val.join(",");
                $(id).val(array);
                PostIt();
            })
        });

• javascript
• jquery
• jquery-select2

Share Improve this question Follow edited Apr 7, 2016 at 16:50 OrElse asked Apr 7, 2016 at 16:40 OrElseOrElse 10k4040 gold badges149149 silver badges265265 bronze badges 5

• 3 I don't believe the JS code you've posted is producing the error you're experiencing. The error is suggesting you're trying to read a property called join on an object which is undefined. However nothing in your code shows where you are trying to read this join property or from which object. – Wing Commented Apr 7, 2016 at 16:45
• 1 You're triggering a change event, do you have a change handler on that element that might be throwing the error? – Jared Smith Commented Apr 7, 2016 at 16:46
• @wing Saved me about a day of searching. Now i have to figure out why the e.val is undefined :) – OrElse Commented Apr 7, 2016 at 16:52
• @JaredSmith Without your help i would still be searching. Can you please check the update? – OrElse Commented Apr 7, 2016 at 16:53
• 1 @OrElse glad to be of help. Looks like Zoheiry got it for you. In the future don't forget that if all else fails (or right from the start) you can grep the directory for an idiom like '.join' and as long as you don't have a gagillion joins its pretty simple to figure out which is the problem. – Jared Smith Commented Apr 7, 2016 at 18:26

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

I believe your problem is that e.val is undefined. Try replacing it with e.target.value