Issue with Bootstrap functionality when used in conjunction with UpdatePanel

I have a web application built with ASP.NET that utilizes bootstrap as the frontend framework. To manage the libraries I'm using, I am bundling them using the ScriptBundle method shown below:

bundles.Add(new ScriptBundle("~/bundles/masterPageScripts").Include(
        "~/Theme/plugins/jQuery/jQuery-2.2.0.min.js",
        "~/Theme/bootstrap/js/bootstrap.min.js",
        "~/Scripts/bootstrap-select.min.js",
        ....
    ));

Additionally, I have implemented a ListView within an UpdatePanel to prevent the entire page from refreshing when interacting with it. The ListView has the following structure:

https://example.com/image1.jpg

Upon clicking the "+" icon, the dropdownlist disappears, as illustrated in the image below:

https://example.com/image2.jpg

I have attempted to reload the bundles within the pageLoad function but have not had success so far.

<script type="text/javascript>
    // Reload js on partial postback
    function pageLoad(sender, args) {
        if (args.get_isPartialLoad()) {
            jQuery.ajax({
                type: "GET",
                url: '<%: Scripts.Url("~/bundles/masterPageScripts") %>',
                dataType: "script",
                cache: true
            });
        }
    }
</script>

Does anyone have any suggestions or solutions?

javascriptasp.netajaxupdatepanel

Answer №1

The functions pageLoad or $(document).ready are triggered only upon the initial loading of the page, not after an asynchronous postback (such as content update within an UpdatePanel). To handle actions after an Async PostBack event, you must utilize the PageRequestManager.

<script>
    var requestmanager = Sys.WebForms.PageRequestManager.getInstance();

    requestmanager.add_endRequest(function () {
        if (args.get_isPartialLoad()) {
            jQuery.ajax({
                type: "GET",
                url: '<%: Scripts.Url("~/bundles/masterPageScripts") %>',
                dataType: "script",
                cache: true
            });
        }
    });
</script>

Answer №2

It appears that the scripts are not needed for loading. Instead, I just had to refresh the selectpicker.

Here's how I resolved it:

<script type="text/javascript>
    function reloadPage(sender, args) {
        if (args.needsUpdate()) {                
            $('#<%= updatePanelId.ClientID %> .selectpicker').selectpicker();
        }
    }
</script>

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

Utilizing Django custom template tags with the power of JavaScript

I have created a custom template tag that fetches the name and roll number of a student based on their ID. @register.inclusion_tag('snippet/student_name.html') def st_name_tag(profile, disp_roll=True, disp_name=True): #performing some calcu ...

javascriptdjangodjango-templates

Creating a TypeScript interface for the Ethereum Window object with a request method implementation

Currently, I have a function running that imports ethers from the "ethers" library. import { ethers } from "ethers"; async function requestAccount() { await window.ethereum.request({ method: "eth_requestAccounts" }); } The problem ...

javascripttypescriptethereummetamaskethers.js

What could be causing the issue of the background color not being applied with SCSS and CSS?

My project utilizes both scss and css. I have two files named styles.css and styles.css, which I imported in my _app.js. import "../styles.scss"; import Head from "next/head"; import React from "react"; import App from "n ...

javascriptreactjswebpacknext.js

Angular has trouble displaying information across multiple HTML files

I have created an HTML file to display some data. The initial HTML file named disc-log.html looks like this: <div> <h2>Discs</h2> <jhi-alert></jhi-alert> <div class="container-fluid"> <div class=" ...

javascripthtmlangularjsjhipster

Restricting the input range with JQuery

Need assistance with limiting user input in a text box for amounts exceeding a specified limit. Attempted using Ajax without success, considering jQuery as an alternative solution. Any expertise on this matter? function maxIssue(max, input, iid) { v ...

phpjavascriptjqueryajax

Navigate to a new page by updating the component in React

I am currently working on an application that utilizes react, redux,react-router v3, and react-router-redux. I have a specific need to create a search page with multiple attributes. How can I create an action creator for the onChange event of an input co ...

javascriptreactjsreduxreact-routerreact-redux

What are some strategies to enhance the performance of JavaScript pagination to ensure it functions effectively for varying numbers of pages?

Currently, I am working on building Vanilla Javascript Pagination. I encountered an issue where the pagination seems to work flawlessly only when there are precisely 7 pages. If the page count exceeds or falls below 7, some minor bugs start to surface. I h ...

javascripthtmlcss

Update a servlet's element value and send the updated data back to the webpage seamlessly using AJAX without the need for a refresh

I'm working on a project involving a web page and a servlet. I've successfully created dynamic input elements using JavaScript in the webpage, which are then used to pass data to the backend servlet for mathematical calculations. The IDs of these ...

javascriptjavajqueryajaxservlets

How can I create a placeholder in semantic-ui components?

I'm currently utilizing the plugin and facing an issue with displaying the placeholder. Although data retrieval from the database is functioning properly, the placeholder is not being shown. Note:- When I remove the PHP code, the placeholder display ...

javascriptphphtmlhtml-selectsemantic-ui

Pressing the button will enable the printing of a PDF file directly from

I'm feeling stuck on this one. My asp.net site in vb.net is connected to intranet SharePoint pages. I have code that creates a pdf from an SSRS report and now I want to print the pdf file using the same code. Here's what I have so far: &apos ...

asp.netvb.netprintingonclickadobe

Tips on creating type definitions for CSS modules in Parcel?

As someone who is brand new to Parcel, I have a question that may seem naive. In my project, I am using typescript, react, less, and parcel. I am encountering an error with typescript stating 'Cannot find module 'xxx' or its corresponding t ...

javascriptcsstypescriptcss-modulesparcel

Sharing information between jQuery and PHP systems

Is it the correct approach to send data to a PHP script using AJAX or jQuery in the following format? - ['item1','item2','item3'] - action = update - uid = 'dsfs112' The expected response should be: - ['i ...

phpjqueryajax

How can the ID of a table row be retrieved if it is selected?

In my datatable, I have a list of Cars where each row contains a Car ID. A checkbox column has been added to the first cell in the table - when checked, the row is highlighted to show the user their selection. The goal is to retrieve the IDs of all selecte ...

javascriptjqueryhtml

What is the best way to utilize regex in converting this CSS block to LESS?

Currently undertaking the task of refining over 10,000 lines of CSS code. Instead of manually converting line by line, I aim to transform from this: -webkit-transition: .1s linear all; -moz-transition: .1s linear all; transition: .1s linear all ...

javascriptcssregexreplaceless

Mix up and present cards for a game of blackjack (Javascript)

Have you noticed why "card2" is randomly adding an object to the array? It should consistently add objects to the array. const cards=[ { card: '&#127137', value: '1' }, { card: '&#127138', valu ...

javascriptloopsblackjack

Access another page by clicking on a link within an HTML document

Is it possible to include an anchor tag in demo1.html that, when clicked, will take the user to the demo2.html page and automatically select a data filter on that page? Here is the code snippet for demo1.html: <li> <div><a href="urunli ...

javascripthtml

Internet Explorer experiencing issues with window resizing event

One common issue with Internet Explorer is that the window.resize event is triggered whenever any element on the page is resized. It doesn't matter how the element's size changes, whether it's through height or style attribute modification, ...

javascriptjqueryinternet-explorerresizejquery-events

Issue concerning the relative path of RequireJS optimizer

Currently, I am attempting to implement the require optimizer's browser example. My folder structure is set up as follows, with the "r.js" and "build.html" files located at the same level as the "js" folder. js lib | a.js | b.js | ...

javascriptnode.jsrequirejsgruntjsamd

Set tab navigation widget with a fixed height

I am struggling with setting a fixed height for my tabs widget so that when I add more content, it will display a scrollbar instead of expanding endlessly. I have checked the CSS and JS files but cannot figure it out. It is important for me to contain this ...

javascriptjqueryhtmlcssjquery-ui

Using jQuery to authenticate Ajax requests in CouchDB

Whenever I try to access a protected CouchDB database on localhost using $.ajax, an alert pops up requesting the username and password. If I cancel the prompt, CouchDB triggers an error and my $.ajax error function is not called. However, if I include auth ...

javascriptjquerycouchdb