This is a migrated thread and some comments may be shown as answers.

Controls inside Bootstrap's Modal do not work!

5 Answers 229 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 10 Mar 2016, 12:36 AM

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

5 Answers, 1 is accepted

Sort by
0
Michael
Top achievements
Rank 1
answered on 11 Mar 2016, 03:35 PM
Nobody? :S
0
Danail Vasilev
Telerik team
answered on 14 Mar 2016, 07:23 AM
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.
0
Michael
Top achievements
Rank 1
answered on 21 Mar 2016, 04:39 PM

Thanks for the reply. It works as suggested.

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

0
hurman
Top achievements
Rank 1
answered on 14 Jan 2020, 09:12 AM
You can watch this tutorial where he is practically explaining the method of
How to open bootstrap modal popup on button click in asp.net c#
Click on the following link
https://youtu.be/qdnKnOHnicw
0
Peter Milchev
Telerik team
answered on 14 Jan 2020, 04:43 PM

Hello Hurman,

Thank you for sharing your tutorial with the community. 

I would like to add this useful KB article that shows various ways to execute JavaScript code from the server-side:

Regards,
Peter Milchev
Progress Telerik

Get quickly onboarded and successful with UI for ASP.NET AJAX with the Virtual Classroom technical trainings, available to all active customers. Learn More.
Tags
General Discussions
Asked by
Michael
Top achievements
Rank 1
Answers by
Michael
Top achievements
Rank 1
Danail Vasilev
Telerik team
hurman
Top achievements
Rank 1
Peter Milchev
Telerik team
Share this question
or