The functionality of Bootstrap tooltips becomes disabled as soon as any element on the page is clicked

When initializing Bootstrap tooltips on my page, I follow this approach

<script>
    $(document).ready(function () {
        $(function () {
            $('[data-toggle="tooltip"]').tooltip();
        });
    });
</script>

A question raised the issue of needing to reload tooltips every time an event occurs. With numerous ajax page updates happening, there could be over 50 events to consider. (This website uses asp.net web forms and ajaxcontroltoolkit)

Is there a way to universally reinitiate tooltips whenever an event happens, or is there a simpler solution to address this challenge?

javascriptjquerytwitter-bootstrapwebformsajaxcontroltoolkit

Answer №1

Don't forget to include a javascript reference for Sys.WebForms.PageRequestManager

Check out the beginRequest and endRequest events. When asp.net ajax replaces your html, make sure you rebind the bootstrap widgets once asp.net is done with its ajax.

Give this a try:

<script>
var prm = Sys.WebForms.PageRequestManager.getInstance();
//function to rebind tooltip
function reBind () { $('[data-toggle="tooltip"]').tooltip(); }
$(document).ready(function () {
    $(function () {
        reBind();            
        prm.add_endRequest(reBind);
    });
});
</script>

Just a heads up, some bootstrap widgets may malfunction if bound twice, so be cautious; keep an eye on certain elements to ensure they are not bound more than once.

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

The $() function in jQuery consistently yields 'undefined' when used in conjunction with AJAX requests

I've noticed that the popup shows up before the text in the textbox gets updated. It seems like the JavaScript is being called before the page is fully rendered, which may be causing the 'undefined' popup. How can I ensure that JavaScript is ...

asp.netjqueryajaxpagerequestmanager

Middleware that handles form post requests quickly became overwhelmed and resulted in a RangeError

Currently, I am working with a form using ejs templates to collect data. When accessing the "/" route, my application renders the "main" view and utilizes a middleware to handle the form data. However, I encountered an error stating "RangeError: Maximum ca ...

javascripthtmlexpress

Error occurred while attempting to run 'postMessage' on the 'Window' object within GoogleTagManager

Recently, I encountered an error stating "postMessage couldn't be cloned". This issue seems to be affecting most of the latest browsers such as Chrome 68, Firefox 61.0, IE11, and Edge. Error message: Failed to execute 'postMessage' on &ap ...

javascripterror-handlinggoogle-tag-manager

Issue with jQuery Ajax file upload in CodeIgniter

I am attempting to use AJAX to upload a file in the CodeIgniter framework, but I encountered an error message stating 'You did not select a file to upload.' Please review this code: View <form method="POST" action="" enctype="multipart/form- ...

javascriptphpjqueryajaxcodeigniter

Implementing beforeSend and complete in all instances of ajaxForm throughout the entire application as a universal

Is there a way to use the beforeSend and complete functions on all ajaxForms within a project without having to repeatedly insert the same code throughout the entire project? I have managed to achieve this by adding the following code for each form indivi ...

javascriptjqueryajaxajaxform

What steps need to be taken to set up Node.js to accommodate requests from external sources beyond just localhost?

After creating an application using NextJs, I successfully built it and ran it on a node server by executing 'npm run start' in Powershell. Everything works perfectly when accessing it locally through port 80. However, my Windows Server 2019 does ...

javascriptnode.jsnext.js

Attempting to fetch JSON information but encountering an error message stating "not a valid function."

I have been working on developing a programmer job board app and I am currently facing an issue with displaying JSON data on the main page. My goal is to eventually render the data, but for now, I just want to ensure that it appears in JSON format so that ...

javascriptnode.jspostgresqlexpresspg-promise

Bower downloads the identical package but arranges it in a distinct file structure

We operate a TeamCity build server that is utilizing three different buildusers all configured similarly. We have integrated an angular/grunt project using yeoman Update 6 Noted an issue with bower https://github.com/bower/bower/issues/1709 Why does bow ...

javascriptgruntjsnpmboweryeoman-generator-angular

Testing the ControllerAs syntax when dealing with forms in AngularJS

I am currently facing a situation with Angular that has left me quite puzzled. Controller function Controller () { // form used in template this.form ... } Template containing a form and utilizing the above controller Template <div ng-contr ...

javascriptangularjsformsunit-testingcontrolleras

What is the best way to link a newly created contact to the current user in Mongoose?

I'm faced with the challenge of creating a contact that is specifically added to the current user's contact array. Currently, my controller only creates a generic contact and doesn't cater to the individual user. Controller: function cont ...

javascriptnode.jsexpressmongoosemean-stack

Deleting object property within Angular ng-repeat loop

I have information structured like this: $scope.cart={"4": {"cost": 802.85, "description": "test", "qty": 1}, "5": {"cost": 802.85, "description": "test", "qty": 1}}; My goal is to iterate through this data and show it with a remove button. How can I s ...

javascriptangularjsangularjs-ng-repeat

Accessing the Parent Variable from a Function in JavaScript: A Guide

How can you properly retrieve the value of x? let x = 5 const f = (n:number) => { let x = "Welcome"; return x * n // Referring to the first x, not the second one } Also, what is the accurate technical term for this action? ...

javascripttypescript

Using Angular components to manipulate the CSS in the DOM

Struggling with dom manipulation in an angular/node.js environment using typescript for my visualcomponent.html The second inline styling works fine, showing the h1 in blue color. However, I run into issues when trying to embed strings within the innerHTM ...

javascripthtmlcssangulartypescript

Can anyone provide guidance on how to make slideToggle move upwards with jQuery?

<div class="row"> <div class="col-lg-2" ></div> <div class="head" style="background-color: #1c94c4; text-align: center; cursor: pointer;"> Connect</div> <div class="chat" style="display: none;width:a ...

javascriptjavaslidetoggle

Dilemma: Navigating the Conflict Between Context API and Next.js Routing in React

Recently, I was following a Material UI tutorial on Udemy and decided to set up a Context API in Create React App without passing down props as shown in the tutorial. Later on, when I tried migrating to Next JS with the same Context API, I started encounte ...

javascriptreactjsnext.js

Only implement $(document).on(...) for every JQuery request

As someone new to Jquery, I'm facing challenges in grasping its functionality. Specifically, my struggle lies in setting up an event listener on an i element with the class of .dataPickerIcon, which should respond to a click by inserting more HTML usi ...

javascriptjqueryhtml

Filter an array of objects based on a provided array

I have an array of objects that I need to filter based on their statuses. const data = [ { id:1, name:"data1", status: { open:1, closed:1, hold:0, block:1 } }, { id:2, name:"data2", ...

javascriptarraysobjectfilter

Retrieve the content of the 'div' element, but exclude certain text

I have a task to copy the content from a div into a textarea, allow for editing within the textarea, and ensure that any changes made are saved back to the original div. I also need to filter out an attribute, such as data-bind: "some stuff;", set for the ...

javascriptjqueryhtmlcss

Submitting forms using AJAX in Django

I am getting a 'Not Ajax' response every time I try to submit my form. There must be something small that I'm overlooking... class VideoLikeView(View): def post(self, request): if request.is_ajax(): message = 'Aj ...

javascriptjquerypython-3.xdjangoajax

During the Jasmine test, an error was encountered when trying to call a factory function that includes both a local and another function. The error message displayed

I have a factory with two functions and two local methods. I have written a Jasmine test case in which I expect the local method updateDetails and the factory function SavePref.savePref to be called when SavePref.saveDetails(values, prop); is invoked, as s ...

javascriptangularjsjunitjasmine