CODEWITHSUNDEEP
javascripthtmlsingle-page-application
SidC
SidC

Reputation: 3203

Where to Add JQuery Mult Select Script in my SPA?

Good Morning,

I've started building out the HTML elements of my first Single Page Application. I need to invoke the JQuery Multi Select for a particular input. I've included the script tag in my html file. However, it's not rendering at all. 

<script>
$(document).ready(function () {
    $("#Sites").multiselect();
});
</script>
<section>
<h2 class="page-title" data-bind="text: title"></h2>
</section>
<section id ="Recipients">
 <article>
    <div class="row">
        <div class="span6">
        <label for="Study">Study: </label>
        <select data-bind="text: Study" title="Study"></select><br />
        <label for="Sites">Sites: </label>
        <select data-bind="text: Sites" title="Sites" multiple="multiple" ></select><br />
        <label for="Distribution">Distribution: </label>
        <input type="checkbox" data-bind="text: Distribution" title="Distribution" />
    </div><!-- span6 -->
    </div><!-- row -->
    <div class="row">
    <div class="span6">
        <label for="Recipients">Recipients: </label>
        <input type="checkbox" data-bind="text: Recipients" title="Recipients"/><br />
    </div><!-- span8 -->
    </div><!-- row -->
 </article>
</section>

<section id ="Communication">
 <article>
    <label for="SendFrom">Send From: </label>
    <label id="SendFrom"></label><br />
    <label for="Subject">Subject: </label>
    <input id="Subject" /><br />

 </article>
</section>

Am I placing the script tag in the correct file? Should it instead be in my home.js file? Does the HTML file need a reference to the attached stylesheet and JavaScript files, or does Durandal/KO handle this behind the scenes?

Upvotes: 1

Views: 111

Answers (1)

Dirk McQuickly
Dirk McQuickly

Reputation: 2139

$("#Sites").multiselect(); points to an element with id 'Sites'. However you don't have an id on your select element. So change <select data-bind="text: Sites" title="Sites" multiple="multiple" ></select> into <select data-bind="text: Sites" id="Sites" title="Sites" multiple="multiple" ></select> and I think you're good to go.

Upvotes: 2

Related Questions