Controls inside Bootstrap's Modal do not work!

4 posts, 0 answers
  1. Michael
    Michael avatar
    17 posts
    Member since:
    Jan 2014

    Posted 09 Mar Link to this post

    Hi,

    I need to use bootstrap's modal and no controls are working inside those modals but of course outside the modals.

    I am talking about a very simple one. Let's consider the following:

    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
     
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">

    ...

    If I place a button inside a div with the class "modal", add an server side event handler, it never will be triggered when clicked.

    Pushing the same button outside the modal works perfectly and the event is triggered.

    The same happens to the RadDatePicker: The selected date cannot be used by other controls if the RadDatePicker is in the modal.

    I am using Bootstrap v3.3.5 and almost about to despair of this :S

    Hope someone can help.

     

    Best regards

  2. Michael
    Michael avatar
    17 posts
    Member since:
    Jan 2014

    Posted 11 Mar Link to this post

    Nobody? :S
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 14 Mar Link to this post

    Hello Michael,

    Can you ensure you are using a common jQuery (version 1.11.1) for the UI for ASP.NET AJAX controls and Bootstrap? 

    You can also try the example below which works properly on my side with RadButton and RadDatePicker controls when placed inside Bootstrap modal element.

    ASPX:
    <head runat="server">
        <title></title>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableEmbeddedjQuery="false">
                <Scripts>
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryExternal.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryPlugins.js" />
                </Scripts>
            </telerik:RadScriptManager>
            <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                Show Model with Button and Picker
            </button>
            <!-- Modal -->
            <div id="myModal" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <telerik:RadDatePicker ID="RadDatePicker1" runat="server"></telerik:RadDatePicker>
                            <telerik:RadButton ID="RadButton1" runat="server" Text="click" OnClick="RadButton1_Click" />
                            <asp:Label ID="Label1" Text="" runat="server" />
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </body>
    </html>


    Regards,
    Danail Vasilev
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  5. Michael
    Michael avatar
    17 posts
    Member since:
    Jan 2014

    Posted 21 Mar Link to this post

    Thanks for the reply. It works as suggested.

    I recognized the errors origin is a 3rd party js library :S

Back to Top