chosen-select not initiating within document.ready. Unable to reset chosen-select

up vote
0
down vote

favorite

I have a sample list on which i am using javascript chosen plugin.

On all the tutorials I have seen, they initiate chosen within $(document).ready function but whenever i try to do that, it gives me an error:
"Uncaught type error...chosen is not a function" .

If i initiate outside of it, It works fine..

Next Issue is if i try to reset the list using val("").trigger("chosen:updated")
it doesnt do anything..

My code is below:

         <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

    </asp:Content>





        <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">





            <script src="http://code.jquery.com/jquery-1.8.3.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">





            <select class="chosen-select" data-placeholder="Search for Numbers" style="width: 300px; height: 20px">

                <option value=""></option>

                <option value="1">1</option>

                <option value="2">2</option>

                <option value="3">3</option>

                <option value="4">4</option>

                <option value="5">5</option>

            </select>

            <button id="btn">click me to reset</button>

            <script type="text/javascript">

                $(document).ready(function () {

                    $('.chosen-select').chosen();

                });





                $("#btn").click(function () {

                    console.log("Button Clicked To Reset");

                    $('.chosen-select').val("").trigger("chosen:updated");

                    $('.chosen-select').val("").trigger("liszt:updated");



                });



            </script>

        </asp:Content>

Am I making some simple mistake? could it be loading jquery or chosen thats causing the problem?

Any help would be appreciated.

HTML Rendered:

    <html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1"><title>







</title>



    <script src='/Scripts/common.js'                       type="text/javascript"></script>  

    <script src='/Scripts/jquery-1.4.1-vsdoc.js'           type="text/javascript"></script>

    <script src='/Scripts/jquery-1.7.1.min.js'             type="text/javascript"></script>

    <script type="text/javascript">

        var jq171 = jQuery.noConflict();

    </script>

    <script src='/Scripts/jquery.validate.min.js'          type="text/javascript"></script>

    <script src='/Scripts/MicrosoftAjax.js'                type="text/javascript"></script>

    <script src='/Scripts/MicrosoftMvcAjax.js'             type="text/javascript"></script>

    <script src='/Scripts/MicrosoftMvcValidation.debug.js' type="text/javascript"></script>

    <script src='/Scripts/js.cookie.js'                    type="text/javascript"></script>

    <script src='/Scripts/breadcrumb-messageSender.js'  type="text/javascript"></script>



    <link id="Link1" href="../Content/Site.css" rel="stylesheet" type="text/css" /><link id="Link2" href="../Content/jquery.ui.autocomplete.css" rel="stylesheet" type="text/css" /><link id="Link3" href="../Content/jquery.ui.theme.css" rel="stylesheet" type="text/css" /><link id="Link4" href="../Content/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" /><link id="Link5" href="../Content/jquery.ui.datepicker.css" rel="stylesheet" type="text/css" /><link id="Link7" href="../Content/Icons/scss/font-awesome.css" rel="stylesheet" type="text/css" /><link id="Link6" href="../Content/Styles/eps-site.css" rel="stylesheet" type="text/css" /><link type="text/css" href="/Content/TelerikStyles/telerik.common.min.css" rel="stylesheet"/>

<link type="text/css" href="/Content/TelerikStyles/telerik.telerik.min.css" rel="stylesheet"/>

<link type="text/css" href="/Content/Styles/eps-telerik-grid.css" rel="stylesheet"/>





    <!--Hayri-->

    <script src='/Scripts/EpsUtils.js' type="text/javascript"></script>





    <script type="text/javascript">

        addExpanderEventHandlers(null);

    </script>

</head>



<body>

    <div class="page">







  <script src="https://code.jquery.com/jquery-1.8.3.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">







    <select  class="chosen-select" data-placeholder="Search for Numbers" style="width: 300px; height: 20px" >

        <option value=""></option>

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

        <option value="4">4</option>

        <option value="5">5</option>

    </select>





    <button id="btn">click me to reset</button>

    <script type="text/javascript">





        $(document).ready(function () {

          $('.chosen-select').chosen();

        });









        $("#btn").click(function () {

      console.log("Button Clicked To Reset");

      $('.chosen-select').val("").trigger("chosen:updated");

      $('.chosen-select').val("").trigger("liszt:updated");



        });

    </script>





    </div>



    <!-- This should be exact sequence for scripts -->

    <script type="text/javascript" src="/Scripts/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="/Scripts/jquery-ui-1.8.2.1.custom.js"></script>

<script type="text/javascript" src="/Scripts/jquery.ui.autocomplete.js"></script>

<script type="text/javascript" src="/Scripts/jquery-ui-1.8.2.custom.min.js"></script>

<script type="text/javascript" src="/Scripts/jquery.ui.core.js"></script>

<script type="text/javascript" src="/Scripts/jquery.ui.widget.js"></script>

<script type="text/javascript" src="/Scripts/jquery.ui.datepicker.js"></script>

 <!--this one has jquery-1.4.2.min.js-->

</body>

</html>

edited Nov 9 at 14:12

asked Nov 9 at 12:51

NAKDeveloper

add a comment |

up vote
0
down vote

favorite

I have a sample list on which i am using javascript chosen plugin.

On all the tutorials I have seen, they initiate chosen within $(document).ready function but whenever i try to do that, it gives me an error:
"Uncaught type error...chosen is not a function" .

If i initiate outside of it, It works fine..

Next Issue is if i try to reset the list using val("").trigger("chosen:updated")
it doesnt do anything..

My code is below:

         <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

    </asp:Content>





        <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">





            <script src="http://code.jquery.com/jquery-1.8.3.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">





            <select class="chosen-select" data-placeholder="Search for Numbers" style="width: 300px; height: 20px">

                <option value=""></option>

                <option value="1">1</option>

                <option value="2">2</option>

                <option value="3">3</option>

                <option value="4">4</option>

                <option value="5">5</option>

            </select>

            <button id="btn">click me to reset</button>

            <script type="text/javascript">

                $(document).ready(function () {

                    $('.chosen-select').chosen();

                });





                $("#btn").click(function () {

                    console.log("Button Clicked To Reset");

                    $('.chosen-select').val("").trigger("chosen:updated");

                    $('.chosen-select').val("").trigger("liszt:updated");



                });



            </script>

        </asp:Content>

Am I making some simple mistake? could it be loading jquery or chosen thats causing the problem?

Any help would be appreciated.

HTML Rendered:

    <html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1"><title>







</title>



    <script src='/Scripts/common.js'                       type="text/javascript"></script>  

    <script src='/Scripts/jquery-1.4.1-vsdoc.js'           type="text/javascript"></script>

    <script src='/Scripts/jquery-1.7.1.min.js'             type="text/javascript"></script>

    <script type="text/javascript">

        var jq171 = jQuery.noConflict();

    </script>

    <script src='/Scripts/jquery.validate.min.js'          type="text/javascript"></script>

    <script src='/Scripts/MicrosoftAjax.js'                type="text/javascript"></script>

    <script src='/Scripts/MicrosoftMvcAjax.js'             type="text/javascript"></script>

    <script src='/Scripts/MicrosoftMvcValidation.debug.js' type="text/javascript"></script>

    <script src='/Scripts/js.cookie.js'                    type="text/javascript"></script>

    <script src='/Scripts/breadcrumb-messageSender.js'  type="text/javascript"></script>



    <link id="Link1" href="../Content/Site.css" rel="stylesheet" type="text/css" /><link id="Link2" href="../Content/jquery.ui.autocomplete.css" rel="stylesheet" type="text/css" /><link id="Link3" href="../Content/jquery.ui.theme.css" rel="stylesheet" type="text/css" /><link id="Link4" href="../Content/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" /><link id="Link5" href="../Content/jquery.ui.datepicker.css" rel="stylesheet" type="text/css" /><link id="Link7" href="../Content/Icons/scss/font-awesome.css" rel="stylesheet" type="text/css" /><link id="Link6" href="../Content/Styles/eps-site.css" rel="stylesheet" type="text/css" /><link type="text/css" href="/Content/TelerikStyles/telerik.common.min.css" rel="stylesheet"/>

<link type="text/css" href="/Content/TelerikStyles/telerik.telerik.min.css" rel="stylesheet"/>

<link type="text/css" href="/Content/Styles/eps-telerik-grid.css" rel="stylesheet"/>





    <!--Hayri-->

    <script src='/Scripts/EpsUtils.js' type="text/javascript"></script>





    <script type="text/javascript">

        addExpanderEventHandlers(null);

    </script>

</head>



<body>

    <div class="page">







  <script src="https://code.jquery.com/jquery-1.8.3.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">







    <select  class="chosen-select" data-placeholder="Search for Numbers" style="width: 300px; height: 20px" >

        <option value=""></option>

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

        <option value="4">4</option>

        <option value="5">5</option>

    </select>





    <button id="btn">click me to reset</button>

    <script type="text/javascript">





        $(document).ready(function () {

          $('.chosen-select').chosen();

        });









        $("#btn").click(function () {

      console.log("Button Clicked To Reset");

      $('.chosen-select').val("").trigger("chosen:updated");

      $('.chosen-select').val("").trigger("liszt:updated");



        });

    </script>





    </div>



    <!-- This should be exact sequence for scripts -->

    <script type="text/javascript" src="/Scripts/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="/Scripts/jquery-ui-1.8.2.1.custom.js"></script>

<script type="text/javascript" src="/Scripts/jquery.ui.autocomplete.js"></script>

<script type="text/javascript" src="/Scripts/jquery-ui-1.8.2.custom.min.js"></script>

<script type="text/javascript" src="/Scripts/jquery.ui.core.js"></script>

<script type="text/javascript" src="/Scripts/jquery.ui.widget.js"></script>

<script type="text/javascript" src="/Scripts/jquery.ui.datepicker.js"></script>

 <!--this one has jquery-1.4.2.min.js-->

</body>

</html>

edited Nov 9 at 14:12

asked Nov 9 at 12:51

NAKDeveloper

add a comment |

up vote
0
down vote

favorite

I have a sample list on which i am using javascript chosen plugin.

On all the tutorials I have seen, they initiate chosen within $(document).ready function but whenever i try to do that, it gives me an error:
"Uncaught type error...chosen is not a function" .

If i initiate outside of it, It works fine..

Next Issue is if i try to reset the list using val("").trigger("chosen:updated")
it doesnt do anything..

My code is below:

         <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

    </asp:Content>





        <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">





            <script src="http://code.jquery.com/jquery-1.8.3.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">





            <select class="chosen-select" data-placeholder="Search for Numbers" style="width: 300px; height: 20px">

                <option value=""></option>

                <option value="1">1</option>

                <option value="2">2</option>

                <option value="3">3</option>

                <option value="4">4</option>

                <option value="5">5</option>

            </select>

            <button id="btn">click me to reset</button>

            <script type="text/javascript">

                $(document).ready(function () {

                    $('.chosen-select').chosen();

                });





                $("#btn").click(function () {

                    console.log("Button Clicked To Reset");

                    $('.chosen-select').val("").trigger("chosen:updated");

                    $('.chosen-select').val("").trigger("liszt:updated");



                });



            </script>

        </asp:Content>

Am I making some simple mistake? could it be loading jquery or chosen thats causing the problem?

Any help would be appreciated.

HTML Rendered:

    <html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1"><title>







</title>



    <script src='/Scripts/common.js'                       type="text/javascript"></script>  

    <script src='/Scripts/jquery-1.4.1-vsdoc.js'           type="text/javascript"></script>

    <script src='/Scripts/jquery-1.7.1.min.js'             type="text/javascript"></script>

    <script type="text/javascript">

        var jq171 = jQuery.noConflict();

    </script>

    <script src='/Scripts/jquery.validate.min.js'          type="text/javascript"></script>

    <script src='/Scripts/MicrosoftAjax.js'                type="text/javascript"></script>

    <script src='/Scripts/MicrosoftMvcAjax.js'             type="text/javascript"></script>

    <script src='/Scripts/MicrosoftMvcValidation.debug.js' type="text/javascript"></script>

    <script src='/Scripts/js.cookie.js'                    type="text/javascript"></script>

    <script src='/Scripts/breadcrumb-messageSender.js'  type="text/javascript"></script>



    <link id="Link1" href="../Content/Site.css" rel="stylesheet" type="text/css" /><link id="Link2" href="../Content/jquery.ui.autocomplete.css" rel="stylesheet" type="text/css" /><link id="Link3" href="../Content/jquery.ui.theme.css" rel="stylesheet" type="text/css" /><link id="Link4" href="../Content/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" /><link id="Link5" href="../Content/jquery.ui.datepicker.css" rel="stylesheet" type="text/css" /><link id="Link7" href="../Content/Icons/scss/font-awesome.css" rel="stylesheet" type="text/css" /><link id="Link6" href="../Content/Styles/eps-site.css" rel="stylesheet" type="text/css" /><link type="text/css" href="/Content/TelerikStyles/telerik.common.min.css" rel="stylesheet"/>

<link type="text/css" href="/Content/TelerikStyles/telerik.telerik.min.css" rel="stylesheet"/>

<link type="text/css" href="/Content/Styles/eps-telerik-grid.css" rel="stylesheet"/>





    <!--Hayri-->

    <script src='/Scripts/EpsUtils.js' type="text/javascript"></script>





    <script type="text/javascript">

        addExpanderEventHandlers(null);

    </script>

</head>



<body>

    <div class="page">







  <script src="https://code.jquery.com/jquery-1.8.3.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">







    <select  class="chosen-select" data-placeholder="Search for Numbers" style="width: 300px; height: 20px" >

        <option value=""></option>

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

        <option value="4">4</option>

        <option value="5">5</option>

    </select>





    <button id="btn">click me to reset</button>

    <script type="text/javascript">





        $(document).ready(function () {

          $('.chosen-select').chosen();

        });









        $("#btn").click(function () {

      console.log("Button Clicked To Reset");

      $('.chosen-select').val("").trigger("chosen:updated");

      $('.chosen-select').val("").trigger("liszt:updated");



        });

    </script>





    </div>



    <!-- This should be exact sequence for scripts -->

    <script type="text/javascript" src="/Scripts/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="/Scripts/jquery-ui-1.8.2.1.custom.js"></script>

<script type="text/javascript" src="/Scripts/jquery.ui.autocomplete.js"></script>

<script type="text/javascript" src="/Scripts/jquery-ui-1.8.2.custom.min.js"></script>

<script type="text/javascript" src="/Scripts/jquery.ui.core.js"></script>

<script type="text/javascript" src="/Scripts/jquery.ui.widget.js"></script>

<script type="text/javascript" src="/Scripts/jquery.ui.datepicker.js"></script>

 <!--this one has jquery-1.4.2.min.js-->

</body>

</html>

edited Nov 9 at 14:12

asked Nov 9 at 12:51

NAKDeveloper

I have a sample list on which i am using javascript chosen plugin.

On all the tutorials I have seen, they initiate chosen within $(document).ready function but whenever i try to do that, it gives me an error:
"Uncaught type error...chosen is not a function" .

If i initiate outside of it, It works fine..

Next Issue is if i try to reset the list using val("").trigger("chosen:updated")
it doesnt do anything..

My code is below:

         <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

    </asp:Content>





        <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">





            <script src="http://code.jquery.com/jquery-1.8.3.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">





            <select class="chosen-select" data-placeholder="Search for Numbers" style="width: 300px; height: 20px">

                <option value=""></option>

                <option value="1">1</option>

                <option value="2">2</option>

                <option value="3">3</option>

                <option value="4">4</option>

                <option value="5">5</option>

            </select>

            <button id="btn">click me to reset</button>

            <script type="text/javascript">

                $(document).ready(function () {

                    $('.chosen-select').chosen();

                });





                $("#btn").click(function () {

                    console.log("Button Clicked To Reset");

                    $('.chosen-select').val("").trigger("chosen:updated");

                    $('.chosen-select').val("").trigger("liszt:updated");



                });



            </script>

        </asp:Content>

Am I making some simple mistake? could it be loading jquery or chosen thats causing the problem?

Any help would be appreciated.

HTML Rendered:

    <html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1"><title>







</title>



    <script src='/Scripts/common.js'                       type="text/javascript"></script>  

    <script src='/Scripts/jquery-1.4.1-vsdoc.js'           type="text/javascript"></script>

    <script src='/Scripts/jquery-1.7.1.min.js'             type="text/javascript"></script>

    <script type="text/javascript">

        var jq171 = jQuery.noConflict();

    </script>

    <script src='/Scripts/jquery.validate.min.js'          type="text/javascript"></script>

    <script src='/Scripts/MicrosoftAjax.js'                type="text/javascript"></script>

    <script src='/Scripts/MicrosoftMvcAjax.js'             type="text/javascript"></script>

    <script src='/Scripts/MicrosoftMvcValidation.debug.js' type="text/javascript"></script>

    <script src='/Scripts/js.cookie.js'                    type="text/javascript"></script>

    <script src='/Scripts/breadcrumb-messageSender.js'  type="text/javascript"></script>



    <link id="Link1" href="../Content/Site.css" rel="stylesheet" type="text/css" /><link id="Link2" href="../Content/jquery.ui.autocomplete.css" rel="stylesheet" type="text/css" /><link id="Link3" href="../Content/jquery.ui.theme.css" rel="stylesheet" type="text/css" /><link id="Link4" href="../Content/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" /><link id="Link5" href="../Content/jquery.ui.datepicker.css" rel="stylesheet" type="text/css" /><link id="Link7" href="../Content/Icons/scss/font-awesome.css" rel="stylesheet" type="text/css" /><link id="Link6" href="../Content/Styles/eps-site.css" rel="stylesheet" type="text/css" /><link type="text/css" href="/Content/TelerikStyles/telerik.common.min.css" rel="stylesheet"/>

<link type="text/css" href="/Content/TelerikStyles/telerik.telerik.min.css" rel="stylesheet"/>

<link type="text/css" href="/Content/Styles/eps-telerik-grid.css" rel="stylesheet"/>





    <!--Hayri-->

    <script src='/Scripts/EpsUtils.js' type="text/javascript"></script>





    <script type="text/javascript">

        addExpanderEventHandlers(null);

    </script>

</head>



<body>

    <div class="page">







  <script src="https://code.jquery.com/jquery-1.8.3.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">







    <select  class="chosen-select" data-placeholder="Search for Numbers" style="width: 300px; height: 20px" >

        <option value=""></option>

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

        <option value="4">4</option>

        <option value="5">5</option>

    </select>





    <button id="btn">click me to reset</button>

    <script type="text/javascript">





        $(document).ready(function () {

          $('.chosen-select').chosen();

        });









        $("#btn").click(function () {

      console.log("Button Clicked To Reset");

      $('.chosen-select').val("").trigger("chosen:updated");

      $('.chosen-select').val("").trigger("liszt:updated");



        });

    </script>





    </div>



    <!-- This should be exact sequence for scripts -->

    <script type="text/javascript" src="/Scripts/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="/Scripts/jquery-ui-1.8.2.1.custom.js"></script>

<script type="text/javascript" src="/Scripts/jquery.ui.autocomplete.js"></script>

<script type="text/javascript" src="/Scripts/jquery-ui-1.8.2.custom.min.js"></script>

<script type="text/javascript" src="/Scripts/jquery.ui.core.js"></script>

<script type="text/javascript" src="/Scripts/jquery.ui.widget.js"></script>

<script type="text/javascript" src="/Scripts/jquery.ui.datepicker.js"></script>

 <!--this one has jquery-1.4.2.min.js-->

</body>

</html>

jquery html jquery-chosen

edited Nov 9 at 14:12

asked Nov 9 at 12:51

NAKDeveloper

edited Nov 9 at 14:12

asked Nov 9 at 12:51

NAKDeveloper

edited Nov 9 at 14:12

asked Nov 9 at 12:51

NAKDeveloper

asked Nov 9 at 12:51

NAKDeveloper

asked Nov 9 at 12:51

NAKDeveloper

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

accepted

Try change this:

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">

in this:

<script src="https://code.jquery.com/jquery-1.8.3.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">

<script type="text/javascript">

        var jq183 = jQuery.noConflict();

</script>

And change this:

$(document).ready(function () {

    $('.chosen-select').chosen();

});



$("#btn").click(function () {

    console.log("Button Clicked To Reset");

    $('.chosen-select').val("").trigger("chosen:updated");

    $('.chosen-select').val("").trigger("liszt:updated");

});

in this:

<script type="text/javascript">

    jq183(document).ready(function () {

      jq183('.chosen-select').chosen();



      jq183("#btn").click(function () {

        console.log("Button Clicked To Reset");

        jq183('.chosen-select').val("").trigger("chosen:updated");

        jq183('.chosen-select').val("").trigger("liszt:updated");

      });

    });

</script>

If it works I can elaborate more on what went wrong and what might be a cleaner solution for you. Let me know how it goes.

edited Nov 10 at 13:21

answered Nov 9 at 13:19

Jesse K

1119

This is exactly what i want to achieve. However, I am using MVC 2 webform with Master Page to create the aspx view pages. (Something i have no control over at the moment, need to use it). I added the https and also added the scripts to the <head> of Master page, I'm still unable to reproduce this behavior in my page.
– NAKDeveloper
Nov 9 at 13:38

Can you post the rendered HTML if it's not too big? You can get this by opening your page, then right-click "View page source" (or something like that) and post that.
– Jesse K
Nov 9 at 14:01

I updated the Question with it
– NAKDeveloper
Nov 9 at 14:12

Ah ok, that is very useful @NAKDeveloper I think I know what is going wrong. I will update my answer tomorrow. Just got home late from a long day.
– Jesse K
Nov 10 at 0:47

I edited my answer @NAKDeveloper
– Jesse K
Nov 10 at 14:20

|
show 4 more comments

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53226050%2fchosen-select-not-initiating-within-document-ready-unable-to-reset-chosen-selec%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

accepted

Try change this:

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">

in this:

<script src="https://code.jquery.com/jquery-1.8.3.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">

<script type="text/javascript">

        var jq183 = jQuery.noConflict();

</script>

And change this:

$(document).ready(function () {

    $('.chosen-select').chosen();

});



$("#btn").click(function () {

    console.log("Button Clicked To Reset");

    $('.chosen-select').val("").trigger("chosen:updated");

    $('.chosen-select').val("").trigger("liszt:updated");

});

in this:

<script type="text/javascript">

    jq183(document).ready(function () {

      jq183('.chosen-select').chosen();



      jq183("#btn").click(function () {

        console.log("Button Clicked To Reset");

        jq183('.chosen-select').val("").trigger("chosen:updated");

        jq183('.chosen-select').val("").trigger("liszt:updated");

      });

    });

</script>

If it works I can elaborate more on what went wrong and what might be a cleaner solution for you. Let me know how it goes.

edited Nov 10 at 13:21

answered Nov 9 at 13:19

Jesse K

1119

This is exactly what i want to achieve. However, I am using MVC 2 webform with Master Page to create the aspx view pages. (Something i have no control over at the moment, need to use it). I added the https and also added the scripts to the <head> of Master page, I'm still unable to reproduce this behavior in my page.
– NAKDeveloper
Nov 9 at 13:38

Can you post the rendered HTML if it's not too big? You can get this by opening your page, then right-click "View page source" (or something like that) and post that.
– Jesse K
Nov 9 at 14:01

I updated the Question with it
– NAKDeveloper
Nov 9 at 14:12

Ah ok, that is very useful @NAKDeveloper I think I know what is going wrong. I will update my answer tomorrow. Just got home late from a long day.
– Jesse K
Nov 10 at 0:47

I edited my answer @NAKDeveloper
– Jesse K
Nov 10 at 14:20

|
show 4 more comments

up vote
0
down vote

accepted

Try change this:

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">

in this:

<script src="https://code.jquery.com/jquery-1.8.3.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">

<script type="text/javascript">

        var jq183 = jQuery.noConflict();

</script>

And change this:

$(document).ready(function () {

    $('.chosen-select').chosen();

});



$("#btn").click(function () {

    console.log("Button Clicked To Reset");

    $('.chosen-select').val("").trigger("chosen:updated");

    $('.chosen-select').val("").trigger("liszt:updated");

});

in this:

<script type="text/javascript">

    jq183(document).ready(function () {

      jq183('.chosen-select').chosen();



      jq183("#btn").click(function () {

        console.log("Button Clicked To Reset");

        jq183('.chosen-select').val("").trigger("chosen:updated");

        jq183('.chosen-select').val("").trigger("liszt:updated");

      });

    });

</script>

If it works I can elaborate more on what went wrong and what might be a cleaner solution for you. Let me know how it goes.

edited Nov 10 at 13:21

answered Nov 9 at 13:19

Jesse K

1119

This is exactly what i want to achieve. However, I am using MVC 2 webform with Master Page to create the aspx view pages. (Something i have no control over at the moment, need to use it). I added the https and also added the scripts to the <head> of Master page, I'm still unable to reproduce this behavior in my page.
– NAKDeveloper
Nov 9 at 13:38

Can you post the rendered HTML if it's not too big? You can get this by opening your page, then right-click "View page source" (or something like that) and post that.
– Jesse K
Nov 9 at 14:01

I updated the Question with it
– NAKDeveloper
Nov 9 at 14:12

Ah ok, that is very useful @NAKDeveloper I think I know what is going wrong. I will update my answer tomorrow. Just got home late from a long day.
– Jesse K
Nov 10 at 0:47

I edited my answer @NAKDeveloper
– Jesse K
Nov 10 at 14:20

|
show 4 more comments

up vote
0
down vote

accepted

Try change this:

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">

in this:

<script src="https://code.jquery.com/jquery-1.8.3.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">

<script type="text/javascript">

        var jq183 = jQuery.noConflict();

</script>

And change this:

$(document).ready(function () {

    $('.chosen-select').chosen();

});



$("#btn").click(function () {

    console.log("Button Clicked To Reset");

    $('.chosen-select').val("").trigger("chosen:updated");

    $('.chosen-select').val("").trigger("liszt:updated");

});

in this:

<script type="text/javascript">

    jq183(document).ready(function () {

      jq183('.chosen-select').chosen();



      jq183("#btn").click(function () {

        console.log("Button Clicked To Reset");

        jq183('.chosen-select').val("").trigger("chosen:updated");

        jq183('.chosen-select').val("").trigger("liszt:updated");

      });

    });

</script>

If it works I can elaborate more on what went wrong and what might be a cleaner solution for you. Let me know how it goes.

edited Nov 10 at 13:21

answered Nov 9 at 13:19

Jesse K

1119

Try change this:

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">

in this:

<script src="https://code.jquery.com/jquery-1.8.3.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">

<script type="text/javascript">

        var jq183 = jQuery.noConflict();

</script>

And change this:

$(document).ready(function () {

    $('.chosen-select').chosen();

});



$("#btn").click(function () {

    console.log("Button Clicked To Reset");

    $('.chosen-select').val("").trigger("chosen:updated");

    $('.chosen-select').val("").trigger("liszt:updated");

});

in this:

<script type="text/javascript">

    jq183(document).ready(function () {

      jq183('.chosen-select').chosen();



      jq183("#btn").click(function () {

        console.log("Button Clicked To Reset");

        jq183('.chosen-select').val("").trigger("chosen:updated");

        jq183('.chosen-select').val("").trigger("liszt:updated");

      });

    });

</script>

If it works I can elaborate more on what went wrong and what might be a cleaner solution for you. Let me know how it goes.

edited Nov 10 at 13:21

answered Nov 9 at 13:19

Jesse K

1119

edited Nov 10 at 13:21

answered Nov 9 at 13:19

Jesse K

1119

answered Nov 9 at 13:19

Jesse K

1119

answered Nov 9 at 13:19

Jesse K

1119

This is exactly what i want to achieve. However, I am using MVC 2 webform with Master Page to create the aspx view pages. (Something i have no control over at the moment, need to use it). I added the https and also added the scripts to the <head> of Master page, I'm still unable to reproduce this behavior in my page.
– NAKDeveloper
Nov 9 at 13:38

Can you post the rendered HTML if it's not too big? You can get this by opening your page, then right-click "View page source" (or something like that) and post that.
– Jesse K
Nov 9 at 14:01

I updated the Question with it
– NAKDeveloper
Nov 9 at 14:12

Ah ok, that is very useful @NAKDeveloper I think I know what is going wrong. I will update my answer tomorrow. Just got home late from a long day.
– Jesse K
Nov 10 at 0:47

I edited my answer @NAKDeveloper
– Jesse K
Nov 10 at 14:20

|
show 4 more comments

This is exactly what i want to achieve. However, I am using MVC 2 webform with Master Page to create the aspx view pages. (Something i have no control over at the moment, need to use it). I added the https and also added the scripts to the <head> of Master page, I'm still unable to reproduce this behavior in my page.
– NAKDeveloper
Nov 9 at 13:38

Can you post the rendered HTML if it's not too big? You can get this by opening your page, then right-click "View page source" (or something like that) and post that.
– Jesse K
Nov 9 at 14:01

I updated the Question with it
– NAKDeveloper
Nov 9 at 14:12

Ah ok, that is very useful @NAKDeveloper I think I know what is going wrong. I will update my answer tomorrow. Just got home late from a long day.
– Jesse K
Nov 10 at 0:47

I edited my answer @NAKDeveloper
– Jesse K
Nov 10 at 14:20

This is exactly what i want to achieve. However, I am using MVC 2 webform with Master Page to create the aspx view pages. (Something i have no control over at the moment, need to use it). I added the https and also added the scripts to the <head> of Master page, I'm still unable to reproduce this behavior in my page.
– NAKDeveloper
Nov 9 at 13:38

Can you post the rendered HTML if it's not too big? You can get this by opening your page, then right-click "View page source" (or something like that) and post that.
– Jesse K
Nov 9 at 14:01

I updated the Question with it
– NAKDeveloper
Nov 9 at 14:12

Ah ok, that is very useful @NAKDeveloper I think I know what is going wrong. I will update my answer tomorrow. Just got home late from a long day.
– Jesse K
Nov 10 at 0:47

I edited my answer @NAKDeveloper
– Jesse K
Nov 10 at 14:20

|
show 4 more comments

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk