Issues arise when attempting to activate bootstrap popups containing ASP content

Struggling with implementing bootstrap popups modal in ASP content pages. While my content page can inherit CSS for all ASP server controls, I'm facing an issue where the bootstrap popups are not working within the ASP:Content tags. Despite running the debugger, I still can't pinpoint where the problem lies.

One specific instance of a non-working bootstrap element is the datepicker. Even when using the following code within ASP:Content, the datepicker fails to function. I've tried placing this content within and outside of table rows, but the issue remains unresolved.

<div>
<div class="container">
        <div class="hero-unit">
            <input  type="text" placeholder="click to show datepicker"  id="example1">
        </div>
    </div>
    <!-- Load jQuery and bootstrap datepicker scripts -->
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="datepicker/js/bootstrap-datepicker.js"></script>
    <script type="text/javascript">
        // When the document is ready
        $(document).ready(function () {

            $('#example1').datepicker({
                format: "dd/mm/yyyy"
            });

        });
    </script>
</div>

Answer №1

Currently, everything is functioning properly. Below is the code that made it work:

$(function () {
            $('#dp1').datepicker({
                format: "dd/mm/yyyy"
            });
        });

function copy_data(val){
                    var a = document.getElementById('dp1').value
                    document.getElementById("<%=txtdob2.ClientID%>").value=a
                }
<div>
                                <input type="text" placeholder="Click to show Datepicker" id="dp1" class="form-control input-sm" onblur ="copy_data(this)"/>
                                    <asp:HiddenField ID="txtdob2" runat="server" />
                                    
                                    <asp:Label ID="lblDOB" runat="server" ForeColor="Red"></asp:Label>
                                    </div>

However, I have encountered a new issue. I am having difficulty saving the data from the Textbox to the server. Because it is a client-side Textbox, the data is not being saved to the server. I attempted using a Hidden value, but this approach was unsuccessful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for applying multiple style properties to an element using JavaScript

I have been experimenting with different versions of this code in an attempt to modify a specific element for a coding challenge, but none of them seem to successfully change multiple styling properties of the element upon clicking on a button. Would great ...

Having an alignment problem with my logo and inline block navigation due to CSS coding

Embracing the world of CSS as a newbie has been an exciting journey. However, I've encountered a hurdle in my coding process and could use some expert guidance. In my website layout, I'm aiming to position my logo on the left side of the navigat ...

Can you explain the process for moving a div to align with another div?

Having just started with HTML and jQuery, I am looking to create three draggable divs stacked one below the other - div1, div2, and so on. I want to drag div1 into the position of div3, changing the order to div3, div1, div2. How can this be achieved? Ple ...

RADIUS for Secure User Verification

I'm looking to implement user authentication in my MVC4 application using a RADIUS server. We have the necessary SMTP, port number, and shared secret information. However, I'm unsure how to integrate these into the application. Can anyone provide ...

Tips for Keeping the WPF Combobox Dropdown Open and Properly Positioned

I am looking to make the Combobox editable and keep the dropdown open. Currently, I have set the following properties: IsEditable="True" IsDropDownOpen="True" StaysOpenOnEdit="True" However, whenever the user clicks on the input textbox or switches focu ...

Position the navbar as an overlay when expanding, instead of pushing down the page contents

Is there a way in bootstrap 4.0 to have the navbar overlaying the contents of a page when it expands from the collapsed state, instead of pushing the contents down? I've experimented with setting z-index properties on the navbar and other classes, as ...

Unable to access the suggestion list within the modal

I incorporate the PrimeNG AutoComplete feature within a PrimeNG Dialog, displaying a list of elements below the AutoComplete in the dialog. My objectives are: To set the max-height of the modal dialog to 300, and have a visible scrollbar if the total ...

Is it possible to dynamically change the image displayed on a panel to a jpg file that is not stored in the resources folder using code

Is there a way to dynamically assign a jpg image file (outside of resources) to the background of a panel? I'm familiar with setting BMP files (not in resources) or resource files as background images, but I'm unsure how to achieve this with JPG ...

Tips for avoiding a noticeable sliding drawer when changing the direction of an HTML element

I am encountering an issue with the Daisy UI drawer component on my page. When I attempt to change the page direction using a JavaScript function, the drawer animates visibly from left to right or right to left, which is not the desired behavior. I have tr ...

Disable the movement and dragging functionality of the scroll feature in Google Maps using React

I have a map.jsx file in my React application that contains the code below: import React from 'react'; import GoogleMapReact from 'google-map-react'; import './map.css'; const Map = ({ location, zoomLevel }) => ( <d ...

Bootstrap4 lacks responsiveness

html, body { background-color: #E3E3E3; width: 100%; height: 100%; margin: 0; padding: 0; } /* Custom Styling */ .section1 { background: url("../images/laptop-table1920-gray.jpg") no-repeat center center fixed; -webkit-background-size: cover ...

if the checkbox is selected, navigate to the displayed section

In my scenario, I have a total of 5 checkboxes and corresponding to each checkbox, there are 5 div elements. The functionality that I need is that when a checkbox is checked, the associated div should be displayed; otherwise, it should be hidden. The check ...

What causes one CSS file's properties to be inherited by another CSS file in a React application?

I'm puzzled as to why my hero section file seems to be adopting the styling from the navbar CSS file. I do understand that the index.css file sets properties for the entire app, but in my case, I have separate CSS files for different components instea ...

The presence of two dropdown lists within a Gridview is triggering an issue: Utilizing databinding methods like Bind() is restricted to being used only within a databound control

Even though this issue has been discussed previously, I am having trouble applying the given solutions in my specific case: Within the Edit Template of a Gridview, I have 2 DropDownLists (DDL1, DDL2) bound to a SQLDataSource. The values in DDL2 depend on ...

The Events handler does not trigger the code window to open when clicked

I'm encountering an issue that's puzzling me. I have two projects, each with their own set of webpages. Initially, I didn't implement User Account Creation and Login functionality. However, I just wanted to be able to trigger a process on a ...

Avoid the issue of a fixed position navigation bar overlapping with a sticky footer

I need help with making a navigation bar stick to the bottom of the viewport without overlapping the fixed-height sticky footer. Here is the basic markup for reference: <div id="wrap"> <div id="main"></div> </div> <div id="fo ...

How to dynamically toggle the visibility of neighboring HTML elements with CSS

https://i.sstatic.net/ENpqW.jpg In the image linked above, there is a scenario where the create button and password inputs are initially disabled. When the user verifies their email address, the create button becomes enabled. The challenge is to use CSS t ...

Tips for centering text in a dijitTextBox:

Ensure that the text is centered vertically with left padding and placeholder text included Check out the image link below: https://i.stack.imgur.com/PbHDa.jpg Snippet of my xPage code: <xe:djTextBox id="djTextBoxSearch" style="width:100%;height: ...

Setting the width of a wizard modal to auto

I am facing an issue with my modal wizard. The width of the first modal is perfect, but when I navigate to the second and third modals by pressing next, they automatically take on a fixed width size that I need to modify. I have tried declaring the width ...

Stylish dots emerging under navigation bar

Okay, so I've run into a simple issue, but I can't seem to figure out the solution. Ever since I wrote this code, I've noticed these small dots appearing below the menu. Take a look at the image for a clearer picture. https://i.sstatic.ne ...