We Keep Coding

Javascript Changing button inner text without chaning the icon

I created the following button, and want to change the inner text "test" to other word.
<button type="button" id="test"><i class="fa-2x fa-regular fa-floppy-disk"></i>test</button>
I tried below method it can change the word but also deleted the icon.
$('button#bkmarktest').on('click', function(e){
e.preventDefault();
$(this).text("other");
});
Is there any way that can only change the word, but keeping the icon, thanks!

like #Kunal Tanwar said, wrapping the text in a span solves it and using Jquery this is my approach.. assuming the button has an id of test
using the .find() method to find the span child
<button type="button" id="test">
<i class="fa-2x fa-regular fa-floppy-disk"></i>
<span>test<span>
</button>
$('#test').on('click', function(e){
e.preventDefault();
$(this).find('span').text("other");
});
and another option would be to use the decendant selector since the span is a direct child of the button
$('#test').on('click', function(e){
$('#test > span').text('other');
});

I haven't use jQuery since very long so here's an example in vanilla javascript.
const btn = document.querySelector('#test');
btn.addEventListener('click', (e) => {
e.preventDefault();
// selecting span tag -> you can also give it a specific id or class if you want
btn.children[1].innerText = 'other';
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
<button type="button" id="test">
<i class="fa-2x fa-regular fa-floppy-disk"></i>
<span>test</span>
</button>

What .text() method does is that it overwrites not only text but HTML as well. The easiest thing to do is move your text inside the <i> so it doesn't get overwitten only what's inside of it. Review the example below and notice that the icon remains -- it's because it's actually a CSS pseudo-element and is always ignored by methods and functions dealing with the DOM.
$('.test').on('click', function() {
$(this).find('i').text(' IT WORKS!')
});
<link href='https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>
<button class='test' type='button'>
<i class="fa fa-star-o"> TEST</i>
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You can also replace this using Regex without adding span or any other element in that button. Here is solution:
$('#test').on('click', function(e){
e.preventDefault();
const regex = /([^>]+)$/;
$(this).html($(this).html().replace(regex,'other'));
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="test"><i class="fa-2x fa-regular fa-floppy-disk"></i>test</button>
Another solution is to change text inside of <i> element:
$('#test').on('click', function(e){
$(this).find('i').text("Other");
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="test"><i class="fa-2x fa-regular fa-floppy-disk">test</i></button>

How to change submit value on click

I have a simple form
HTML
<form action="#Url.Action("Controler", "FES")" method="POST">
<button name="upload" type="submit" id="upload-fes-btn-control" class="btn btn-danger">Contrôler</button>
</form>
The request time when submitting may sometimes be long (more than 30s, bc of business logic on big file...)
I want to change the value of the button after user has clicked on it. The objective is to display a font-awesome loader instead of the initial text (<i class="fas fa-spinner fa-pulse"></i>). There is the jQuery snippet I use to achieve this...
jQuery
$("#upload-fes-btn-control").click(function () {
$(this).attr('value', '<i class="fas fa-spinner fa-pulse"></i>');
});
I'm facing an error due to this code in my Controller
A potentially dangerous Request.Form value was detected from the client
Controller
if (Request.Form["upload"] != null)
{
//Logic with ViewModel...
}
How can I change the text displayed in the button from text to fa image loader without throwing that error ?

use this code $(this).html('<i class="fa fa-spinner fa-pulse"></i>');
$("#upload-fes-btn-control").click(function (e) {
e.preventDefault();
$(this).html('<i class="fa fa-spinner fa-pulse"></i>');
//example after page load
setTimeout(function(){
$("#upload-fes-btn-control").html('');
$("#upload-fes-btn-control").html('Contrôler');
}, 5000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<form action="#Url.Action("Controler", "FES")" method="POST">
<button name="upload" type="submit" id="upload-fes-btn-control" class="btn btn-danger">Contrôler</button>
</form>

trigger AJAX action when click on button inside dropdown without closing it

As you probably know, any action inside twitter's bootstrap leads to the closing of the dropdown except when using :
$('.dropdown-menu').click(function(event){
event.stopPropagation();
})
Unfortunately, event.stopPropagation() stops the ajax query as well.
what I want to achieve is something like when you get a friend request on FB and you accept/decline inside the dropdown without it being closed.
Can you help me ?

Just put the ajax call after the event.stopPropagation call.
In this case, the click should be on $('.dropdown-menu > li > a') element. See example below.
/**** Ignore this command - just used to mock up an ajax response **/
$.mockjax({
url: '/likethis',
responseTime: 1000,
responseText: {
status: 'success',
fbStatus: 'liked'
}
});
$('.dropdown-menu > li > a').click(function(event){
event.stopPropagation();
$.ajax({ url: '/likethis',
success: function() {
$('#likelink').html('<span class="glyphicon glyphicon-ok"></span> Liked!');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.3/jquery.mockjax.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Like This <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Like</li>
</ul>
</div>

Refresh an element so its new tooltip shows (in jQuery/Javascript)

I have an html element which is using bootstrap tooltip to show a title when hovering over it. However, when you click this element I'm changing the tooltip, but the new tooltip isn't showing until I remove the mouse from it and re-hover over the element again.
I want the tooltip to be shown instantly when said button is clicked. How can I achieve this? Is there a way to "refresh", in lack of better words, an html element?

try this way
Demo :
http://jsfiddle.net/dreamweiver/9z404crn/
$(document).ready(function() {
$('#example').tooltip();
$('#example').on('click', function() {
$(this).attr('data-original-title', 'changed tooltip');
$('#example').tooltip();
$(this).mouseover();
});
});
h3 {
margin-top: 50px;
}
<h3>
Sensors Permissions
<i class="icon-info-sign" data-toggle="tooltip" title="first tooltip" id='example'></i>
</h3>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
Note:
Above logic works only with Bootstrap version 2.3.2 and below, however, the solution provided by #NabiK.A.Z's would work with the latest versions of Bootstrap lib.
Happy Coding:)

You can use this code:
var newTooltip = 'Changed this tooltip!';
$('#example').attr('data-original-title', newTooltip).parent().find('.tooltip-inner').html(newTooltip);
I test it with bootstrap 3.3.4
You can see it here:
http://jsfiddle.net/NabiKAZ/a4WwQ/1029/
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'bottom',
});
$('.mytooltip').hover(function() {
$('.mytooltip').tooltip('show');
});
$('.mytooltip').click(function() {
var newTooltip = 'Changed this tooltip!';
$(this).attr('data-original-title', newTooltip).parent().find('.tooltip-inner').html(newTooltip);
});
.cart {
overflow: hidden;
padding: 10px 3px;
background: yellow;
}
<div class="cart">
<a data-toggle="tooltip" title="add to cart" class="mytooltip">
<i class="icon-shopping-cart"></i>
</a>
</div>
<br>
<div>
<a data-toggle="tooltip" title="add to another cart" class="mytooltip">
<i class="icon-shopping-cart"></i>
</a>
</div>
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;
background:lightgray;width:100%;'>
About this SO Question: <a href='http://stackoverflow.com/q/19630749/1366033'>How to make bootstrap 3 tooltip work with parent div with overflow:hidden?</a><br/> Find documentation: <a href='http://getbootstrap.com/javascript/#tooltips'>Bootstrap 3.0 ToolTips</a><br/> Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/>
<div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

For me in bootstrap 4 this worked:
$("#xxx").tooltip("dispose").attr("title", "New Tooltip").tooltip()

It's 2021 and with Bootstrap 5(BS5) all answers on this here didn't help me. Most answers above updated the content of the $(element).parent().find('.tooltip-inner').html("This is a test"); generated by the tooltip plugin. However with BS5 the generated template for the tooltip has a unique ID which can be used to update the tooltip.
This example demonstrates a simple scenario: when the .copy_queue_id div is clicked, queue ID from its attribute is copied and hence the the tooltip is updated to notify the user
HTML Markup:
<div class="cursor-pointer text-primary copy_queue_id" data-queueid="123456" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Click to copy"> 123456</small>
JS - JQuery
$(document).on('click', '.copy_queue_id', function(){
let node = $(this);
let id = node.data('queueid');
navigator.clipboard.writeText(id);
let tooltipid = node.attr('aria-describedby');
$("#"+tooltipid).find('.tooltip-inner').html('ID Copied!!');
})
Tested & works in BS5
Hope this helps others :)

Sure you just have to change the tooltips text within the onclick event
$('.tooltip-inner').html("This is a test");
I've created a jsfiddle for you as a demonstration http://jsfiddle.net/a4WwQ/59/
Currently it will change all visible tooltips text which isnt really a problem since you arent going to show more than one at at a time. That being said, you should consider modifying the code to point to the closest tooltip.
hope it helps!

in case you are looking to refresh the contents;
$('#example').tooltipster('content', 'i am superman!');

2021, Bootstrap 5: update this property data-bs-original-title.
You can also use Razor / Blazor with this, like this:
var title = propExamples.FirstOrDefault(q => q.Key == selectedType.Id).Value;
<div class="col-sm-2">
<img class="zoom-on-hover cursor-pointer fit-image grayout"
src="/lib/bootstrap-icons-1.5.0/info-lg.svg"
data-bs-toggle="tooltip" data-placement="bottom"
data-bs-original-title="#title" />
</div>

Toolbar.js by Paul Kinzett Event handling

I'm wanting to use toolbar.js from http://paulkinzett.github.io/toolbar but even though I have the tool bar working the the handling of the events as documented I don't seem to be able to get identify which toolbar button/icon I clicked.
Below is the code snippit, which it pretty much lifted from the example site.
I'm no expert in JS, so if someone could enlighten me as to how to handle the toolbarItemClick event so that I can preform the correct action, that would be awesome.
Thanks
Lionel
<div id="user-options" class="toolbar-icons" style="display: none;">
<i class="icon-edit"></i>
<i class="icon-trash"></i>
</div>
<div class="tooltip-container normal">';
<section class="left">';
<div id="normal-button" class="settings-button"><img src="/3rdparty/paulkinzett-toolbar/documentation/img/icon-cog-small.png" /></div>';
</section>';
</div>
$('#normal-button').toolbar({content: '#user-options', position: 'top'});
$('#normal-button').on('toolbarItemClick',
function(event) {
console.log(event);
}
);

I was trying to figure out the same thing, eventually i deciphered the mechanism. A bit late to help you but maybe it will save someone else some time.
Firstly, I gave the button anchor tags IDs, though one could use data- attributes etc (note i am using img tags instead of the default glyph support)
<div id="user-toolbar-options">
<a id="menu-insert" href="#"><img src="add.png" width="18px" height="18px" /></a>
<a id="menu-remove" href="#"><img src="remove.png" width="18px" height="18px" /></a>
</div>
The key is to use a different function signature which isn't publicized in the documentation (function (event, buttonClicked){}, the 2nd parameter (buttonClicked) is the a element that was clicked on.
in the code below i also set targetBlock to the div that the button was in (as i have potentially dozens of articles and the button thats hows the toolbar appears on each) so i need to get the article in question to act on it.
$('#normal-button').on('toolbarItemClick',
function (event, buttonClicked) {
var targetBlock = $(event.target).parents('.article') // get article
var buttonClickedID = buttonClicked.id // get the id of the button click
switch (buttonClickedID) {
case 'menu-insert':
insertNewArticleBelow(targetBlock)
break;
case 'menu-remove':
removeArticle(targetBlock)
break;
}
}

$('#button').toolbar({
content: '#toolbar-options',
position: 'top',
style: 'primary',
event: 'click',
hideOnClick: true
});
$('#button').on('toolbarItemClick',
function( event,buttonClicked ) {
alert(buttonClicked.id);
}
);
<link href="https://paulkinzett.github.io/toolbar/css/documentation.css" rel="stylesheet"/>
<link href="https://paulkinzett.github.io/toolbar/css/jquery.toolbar.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://paulkinzett.github.io/toolbar/js/jquery.toolbar.min.js"></script>
<div id="toolbar-options" class="hidden">
<i class="fa fa-plane"></i>
<i class="fa fa-car"></i>
<i class="fa fa-bicycle"></i>
</div>
<div data-toolbar="toolbar-options" data-toolbar-animation="flip" class="btn-toolbar feature-toolbar btn-toolbar-primary text-center" data-toolbar-style="primary" id="button"><i class="fa fa-cog" style="position: relative"></i></div>