Steps for triggering a modal popup using server-side code when a button is clicked

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="3.aspx.cs" Inherits="KVTRANSAPORTS._3" MasterPageFile="~/Site1.Master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script type="text/javascript">
        function displayModal() {
            $('#myModal').modal('show');
        };
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="container">
        <div class="btn-group">
            <asp:Button ID="btnSubmit" class="btn-info" runat="server" Text="Submit"
                OnClick="btnSubmit_Click"></asp:Button>
        </div>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
            aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">title
                        </h4>
                    </div>
                    <div class="modal-body">
                        something
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default"
                            data-dismiss="modal">
                            close
                        </button>
                        <button type="button" class="btn btn-primary">
                            save
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</asp:Content>

    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "displayModal();", true);
    }

encountering an issue saying Uncaught TypeError: $(...).modal is not a function

Answer №1

Did you look into ~/Site1.Master? It's possible that your MasterPage also has the jQuery library included.

Encountering TypeError: $(...).modal is not a function with bootstrap Modal

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

Attempting to locate the precise jQuery selector for a specific element

Let me show you how I've set up my markup: <li class="websites" id="3"> <span class="id">3</span> <span><a href="http://www.google.com"><span class="url">www.google.com</span></a></span> ...

Tips for implementing jQuery validation with CakePHP 3.0

Just starting out with Cake PHP and I have a question. Can someone show me how to implement custom validation using jQuery in Cake PHP 3.0? Here is the code from my add.ctp file: <h2>Add New User</h2> <!-- link to add new users page --&g ...

Ways to change the chart type in ApexCharts

I'm seeking a way to change the chart type of an existing ApexCharts that has already been rendered. After reviewing the methods, I attempted to use the updateOptions() method, but encountered the error: Uncaught TypeError: Cannot read property &apos ...

The Content property of the HttpRequestMessage is populated with characters that are invalid and cannot be

After receiving the return from HttpRequestMessage.Contenc, it appears to be encrypted. Has anyone else experienced something similar? var client2 = new HttpClient(); client2.DefaultRequestHeaders.Accept.Clear(); client2.DefaultReq ...

Having trouble retrieving data from JSON using JavaScript

Hey folks, I need some help with the following code snippet: function retrieveClientIP() { $.getJSON("http://192.168.127.2/getipclient.php?callback=?", function(json) { eval(json.ip); });} This function is used to fetch the IP address of visitors. When i ...

Styling for jQuery mobile panels disappears when used on multiple pages

Currently, I am working on developing a mobile application for PhoneGap using jQuery Mobile. The app consists of multiple pages within the same HTML document. I have configured it so that all pages share the same panel, but I am facing an issue with the st ...

Transmit information from a Chrome extension to a Node.js server

Recently, I developed a basic Chrome extension that captures a few clicks on a specific webpage and stores the data in my content_script. Now, I am looking for ways to transmit this data (in JSON format) to my node.js file located at /start. I am seeking ...

Looking for a logo placed in the center with a top fixed navigation using Bootstrap

I am in need of a Centered Logo using Bootstrap fixed top navigation. The goal is to have the brand centered within the navigation. Check out my Sample Fiddle .LandPageNavLinks { list-style-type:none; margin:0; padding:0; } .LandPageNavLin ...

Incorporating partial page loading with PHP and ID links

Having some trouble with partial page loads and PHP variables. Currently, I have it set up to work, but when trying to include a PHP variable, it seems to be causing issues. The page successfully loads without the variable: <li><a href="javascri ...

Identifying the JS Tree nodes that have been repositioned via drag-and-drop

I'm working with a JS Tree structure that includes drag and drop functionality. Here's the basic code I have so far: $('#using_html_1').jstree({ "core": { "check_callback":true }, "plugins" : ["dn ...

Relocate the resizable handles in jQuery outside of the div elements

I currently have 3 nested divs. Using jQuery $(function() { $("#div1").resizable({ handles: "n, e, s, w, nw, ne, sw,se" }); $("#div1").draggable(); }); Within the HTML structure <div id="div1" style="left: ...

Perform the function with the value of the currently selected option

Despite selecting an option, a message still appears stating "Please choose something." This function works with only one dropdown list, but encounters issues when there are two or more. (In this example, the variable 'sport' is document.getElem ...

Access external link without leaving current page

Dear webmasters, I am seeking advice, tools, or guidance to solve a simple problem. I have my own HTTP server that responds to HTTP requests. Example: If I visit the link: http://ip_server/link1, it performs a specific functionality If I visit the lin ...

The Bootstrap slide function encounters issues within the AJAX success callback

Here's the code snippet with a 'slide' event inside an AJAX success call. success: function(data) { $('#my_container').html(data); // Successfully loading #mycarousel into #my_container $('#mycarousel').bind( ...

What is the process for pausing a video while it is still buffering and loading?

Is it possible to suspend a video when it is in an opening or preparing state? For example, if I open a video and then switch to another application using the smart hub feature, how can I suspend the video while it is in the process of opening or preparin ...

Click on the child element while it is already being clicked by manually implementing the 'declick' function in Javascript

Hey there, I'm looking for suggestions on a better title for this issue. I couldn't come up with the right wording myself. Problem I currently have a Google Maps element with pointer events set to none, preventing it from being scrolled when ho ...

"An ActionResult is received as null when the model is passed as an

Has anyone encountered a situation where the model is null when passed to the controller? I inserted an alert in the ajax call to verify the value and it seemed correct, but upon debugging on the first line of the controller's ActionResult, it shows a ...

Tips for arranging backend data horizontally within Bootstrap horizontal cards

After setting up my Angular application, I created a dashboard page and made API calls for dynamic signals (signal-1, signal-2, etc). To showcase this data, I decided to use Bootstrap horizontal cards. However, I'm facing an issue with displaying the ...

Transmitting several images via the HTML INPUT tag through AJAX to a Laravel Controller, in addition to sending other data not contained within the

$('#update-post').on('click', function(event){ $.ajax({ method: 'POST', url: editPostUrl, data: { content: $('#post-content').val(), deleteImages: deleteImages, postId: postID, ...

What is the process of using the delete function in combination with ajax and php?

Currently, I am working on a school database project for my homework assignment. I have been learning about CRUD operations and attempting to implement them in my project. However, I have encountered an issue with the functionality of the delete button. I ...