locked
How to merege two javacript into one and bind that cssclass to drodpwnlist RRS feed

  • Question

  • User-807418713 posted

    Hello

    I want to bind two javacript to one dropownlist cssclass here is my two javascript

    how to make this one

    <script type="text/javascript">
            $(function () {
                $(".chzn-select").chosen({
                    search_contains: true                
                 });
                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
                function EndRequestHandler(sender, args) {
                    //Binding Code Again
                    $(".chzn-select").chosen({
                    search_contains: true                
                 });
                }
            });
        </script>
        
        <script>
            $(function () {
                $(".mytext").val($(".myddl").val())
                $(".myddl").change(function () {
                    $(".mytext").val($(this).val())
    
                })
    
    
            })
        </script>

    thanks

    Thursday, May 30, 2019 5:30 AM

Answers

  • User839733648 posted

    Hi Gopi.MCA,

    It seems that you are using Master Page and I've tried your code on myside and it works well on my side.

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:DropDownList ID="DropDownList3" runat="server" DataTextField="Item_Name" TabIndex="14" Width="302px"
            class="myddl" Font-Names="Palatino Linotype" AppendDataBoundItems="True" DataValueField="Price">
            <asp:ListItem Selected="True">Select Item Name</asp:ListItem>
            <asp:ListItem>11111</asp:ListItem>
            <asp:ListItem>22222</asp:ListItem>
        </asp:DropDownList>
            <link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" rel="stylesheet" type="text/css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $("#MainContent_DropDownList3").chosen({
                    search_contains: true
                });
                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
                function EndRequestHandler(sender, args) {
                    //Binding Code Again
                    $("#MainContent_DropDownList3").chosen({
                        search_contains: true
                    });
                }
                $("#MainContent_TextBox1").val($("#MainContent_DropDownList3").val());
                $("#MainContent_DropDownList3").change(function () {
                    $("#MainContent_TextBox1").val($(this).val())
                })
            });
        </script>
    </asp:Content>

    result:

    You may try to add the script below your div in your asp:content.

    I suggest that you could use F12 developer tools to check whether the function is called.

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 31, 2019 9:24 AM

All replies

  • User839733648 posted

    Hi Gopi.MCA,

    According to your description and code, I'm sorry that I'm not clear about your requirment.

    I want to bind two javacript to one dropownlist cssclass here is my two javascript

    Do you mean that you want to add the change function and the chosen plugin function to one dropdownlist?

    If so, I would like to ask what is your requirment? How is the dropdownlist you want to designed?

    Best Regards,

    Jenifer

    Thursday, May 30, 2019 9:57 AM
  • User-807418713 posted
    Hello

    This two script I want to bind one dropdownlist.

    How to do si
    Thursday, May 30, 2019 10:04 AM
  • User475983607 posted

    Hello

    This two script I want to bind one dropdownlist.

    How to do si

    My best guess is you are trying to get the chosen selected value.  Please see the chosen documentation 

    https://harvesthq.github.io/chosen/

    If my guess is incorrect, then please show the markup and explain at a high level the problem you are trying to solve.

    Thursday, May 30, 2019 10:21 AM
  • User-807418713 posted

    Hello 

    This is my script

    <script type="text/javascript">
            $(function () {
                $(".chzn-select").chosen({
                    search_contains: true                
                 });
                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
                function EndRequestHandler(sender, args) {
                    //Binding Code Again
                    $(".chzn-select").chosen({
                    search_contains: true                
                 });
                }
            });
        </script>
        
        <script>
            $(function () {
                $(".mytext").val($(".myddl").val())
                $(".myddl").change(function () {
                    $(".mytext").val($(this).val())
    
                })
    
    
            })
        </script>

    This is my dropdownlist code

                    <asp:DropDownList ID="DropDownList3" runat="server"  DataTextField="Item_Name" TabIndex="14" Width="302px"
                             class="chzn-select" Class="myddl" Font-Names="Palatino Linotype" AppendDataBoundItems="True" DataValueField="Price">
                                <asp:ListItem Selected="True">Select Item Name</asp:ListItem>
                            </asp:DropDownList>

    How to bind the both script chzn-select & myddl  to  my dropdownlist

    I'm getting this error

    Parser Error Message: The tag contains duplicate 'Class' attributes.

    Thursday, May 30, 2019 11:06 PM
  • User839733648 posted

    Hi Gopi.MCA,

    How to bind the both script chzn-select & myddl  to  my dropdownlist

    You could use ID Selector instead of adding two classes to bind the two methods to your dropdownlist like below.

    <script type="text/javascript">
      $(function () {
        $(".chzn-select").chosen({
            search_contains: true                
        });
      Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
      function EndRequestHandler(sender, args) {
         //Binding Code Again
         $("#DropDownList3").chosen({
             search_contains: true                
         });
       }
      $(".mytext").val($(".myddl").val())
      $("#DropDownList3").change(function () {
         $(".mytext").val($(this).val())
      })
    }); </script>

    Best Regards,

    Jenifer

    Friday, May 31, 2019 6:07 AM
  • User-807418713 posted

    Hello

    Good Day

    This code once dropdownlist select textbox not binding value why..?

     <script type="text/javascript">
      $(function () {
        $("#ctl00_ContentPlaceHolder1_DropDownList3").chosen({
            search_contains: true                
        });
      Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
      function EndRequestHandler(sender, args) {
         //Binding Code Again
         $("#ctl00_ContentPlaceHolder1_DropDownList3").chosen({
             search_contains: true                
         });
       }
      $("#ctl00_ContentPlaceHolder1_TextBox9").val($("#ctl00_ContentPlaceHolder1_DropDownList3").val())
      $("#ctl00_ContentPlaceHolder1_DropDownList3").change(function () {
         $("#ctl00_ContentPlaceHolder1_TextBox9").val($(this).val())
      })
    });
    </script>

    Thanks

    Friday, May 31, 2019 7:25 AM
  • User839733648 posted

    Hi Gopi.MCA,

    It seems that you are using Master Page and I've tried your code on myside and it works well on my side.

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:DropDownList ID="DropDownList3" runat="server" DataTextField="Item_Name" TabIndex="14" Width="302px"
            class="myddl" Font-Names="Palatino Linotype" AppendDataBoundItems="True" DataValueField="Price">
            <asp:ListItem Selected="True">Select Item Name</asp:ListItem>
            <asp:ListItem>11111</asp:ListItem>
            <asp:ListItem>22222</asp:ListItem>
        </asp:DropDownList>
            <link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" rel="stylesheet" type="text/css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $("#MainContent_DropDownList3").chosen({
                    search_contains: true
                });
                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
                function EndRequestHandler(sender, args) {
                    //Binding Code Again
                    $("#MainContent_DropDownList3").chosen({
                        search_contains: true
                    });
                }
                $("#MainContent_TextBox1").val($("#MainContent_DropDownList3").val());
                $("#MainContent_DropDownList3").change(function () {
                    $("#MainContent_TextBox1").val($(this).val())
                })
            });
        </script>
    </asp:Content>

    result:

    You may try to add the script below your div in your asp:content.

    I suggest that you could use F12 developer tools to check whether the function is called.

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 31, 2019 9:24 AM