I have this button:
<button disabled="" id="btnGuardarPaso1" class="btn btn-primary" type="submit"><i class="fa fa-save"></i> Save</button>
And then through jQuery I change the text dynamically based on user selection on a select element. See the code:
if (tipoTramiteSolVal != 1 && tipoTramiteSolVal !== "" && tipoTramiteSolVal != undefined ) {
$("#btnGuardarPaso1").removeClass("btn-primary").text("Edit");
} else {
$("#btnGuardarPaso1").addClass("btn-primary").text("Save");
}
But, this code has a problem: the <i class="fa fa-save"></i> element is also removed/changed and I'll like to maintain it. How I can fix this?
Also since the button has a FontAwesome icon, can I change it dynamically too? For example fa-save will change for fa-edit and viceversa depending on the choice by user
You can place a span tag inside of the button and set the text of the span rather than the button. The italics would then be outside of the span.
<button disabled="" id="btnGuardarPaso1" class="btn btn-primary" type="submit"><i class="fa fa-save"><span id="textItem"></span></i> Save</button>
if (tipoTramiteSolVal != 1 && tipoTramiteSolVal !== "" && tipoTramiteSolVal != undefined ) {
$("#btnGuardarPaso1").removeClass("btn-primary");
$("#textItem").text("Edit");
} else {
$("#btnGuardarPaso1").addClass("btn-primary");
$("#textItem").text("Save");
}
[edit] also if you use jQuery to look up the italic tag (either directly by ID or by traversing the DOM) you can definitely set the class using:
$(this).attr('class','classname');
Related
I have a Javascript function that prints "like" and "Unlike" like this:
$(".liketoggle").click(function () {
$(this).text(function(i, v){
return v === 'Like' ? 'Unlike' : 'Like'
})
});
I have an HTML tag that shows a heart in an tag as:
<i class="fas fa-heart"></i>
How can I show the heart icon next to the like/unlike button. This is the HTML so far:
<button type="submit"
class="btn btn-custom btn-sm liketoggle"
name ="like">Like
</button>
<i class="fas fa-heart"></i>
How I can write to the JS to be included when toggling it?
Similar Function here: http://jsfiddle.net/dFZyv/ but same issue
Font awesome is not working for me when I try to change the value of an element using a javascript.
Javascript:
function onClick() {
document.getElementById("dicebutton").value='Rolling <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>';
}
HTML code for button:
<form>
Bet<br>
<input type="text" name="bet"><br>
Chance<br>
<input type="text" name="chance"><br>
<h3>Payout: 0.0000BTC</h3>
<input value = "Roll dice" id="dicebutton" onClick="onClick()" type="button" style="vertical-align:middle"></input>
</form>
Result:
Notice how the green button spits raw HTML while the top of the website correctly displays the fonts? How can I fix this?
Use the element.innerHTML = content; syntax if you want to add HTML. ".value" only passes data as a string.
So
document.getElementById("dicebutton").innerHTML='Rolling <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>';
Edit:
I just realized you are using an < input > field for your button. This wont work in that case. The only value for an < input > field that you can use to change the button text is value= as you tried. Unfortunately "value" treats anything assigned to it as a string.
Instead of an < input > field, you will need to use an element that you can attach HTML to - for example, an < a > tag, a < button > tag, or simply using a styled div as a button. This will allow you to pass the HTML to it without having to use "value".
Use a <button> tag instead of <input> and change
document.getElementById("dicebutton").value
to
document.getElementById("dicebutton").innerHTML
You must use button instead of input button, then update the content with innerHTML.
Example:
Javascript:
function onClick() {
// you can you "this.innerHTML" too
document.getElementById("dicebutton").innerHTML='Rolling <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>';
}
HTML:
<button id="dicebutton" onclick="onClick()" style="vertical-align:middle">Roll dice</button>
In my HTML I have a div that is repeated, it is something like this:-
<div class="col-md-3 SeccaoProduto">
<p class="productName"></p>
<p>Quantidade Atual: <span class="quantidadeProduto"></span></p>
<button class="btn btn-default btn-xs IncrementaProduto"><span class="glyphicon glyphicon-arrow-up"></span></button>
<button class="btn btn-default btn-xs DecrementaProduto"><span class="glyphicon glyphicon-arrow-down"></span></button>
</div>
When I click the button that has the DecrementaProduto class, I want to get the specific index of that class, in this case DecrementaProduto is the first time that it appears on my html, I want the index = 0;
In my JavaScript I tried this:-
$(".DecrementaProduto").click(function(){
console.log($(".SeccaoProduto").index(this));
});
But I always get the value = -1 :S
How can I do this?
In your code $(this) refers to the clicked button but the collection does not include the button so the returned value would be -1.
Instead, you need to get the parent element .DecrementaProduto which contains the clicked element. Where you can use the parent() method to get the element.
$(".DecrementaProduto").click(function(){
console.log($(".SeccaoProduto").index($(this).parent()));
// ------------^^^^^^^---
});
I want to change the content of a span in my form
HTML:
<form action="javascript:submit()" id="form" class="panel_frame">
<label>Origin:</label>
<div class="input-group" id="input-group">
<input type="text" id="origin" name="origin" class="form-control">
<span class="input-group-btn">
<button id="btn-default" class="btn btn-default" type="button">
<span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
</button>
</span>
</div>
What I want change is che content of <span class="input-group-btn"> with
<button id="btn-default" class="btn btn-default" type="button">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
So what change is: the icon pushpin to remove and the action useCurrentPosition to clearPosition.
I' using jquery and despite I've read other answer about similar question on Stack like: How can I change the text inside my <span> with jQuery? and how to set a value for a span using JQuery I haven't solved the issue.
I tried:
$("#input-group span").html('
<button id="btn-default" class="btn btn-default" type="button" onclick="br_bus.useCurrentPosition()">
<span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
</button>
');
,giving an id to the span and also modify the full div, but none solved my problem.
What am I missing?
Here's a way to overcome the problem of changing the onclick attribute, which is bad practice, without storing a Global var, and using jQuery delegation (learn to use it, it's really good):
$(document).on('click','.btn', positionChange); // Give that button an id on his own and replace '.btn' with '#newId'
// Not using an anonymous function makes it easire to Debug
function positionChange(){
var $btn = $(this), // Caching jQuery elements is good practice
$span = $btn.find('span'), // Just caching
pushpinApplied = $span.hasClass('glyphicon-pushpin'); // Check which icon is applied
( pushpinApplied ) ? useCurrentPosition() : clearPosition();
$span.toggleClass( 'glyphicon-pushpin glyphicon-remove' );
}
Rather than changing the function called in the onclick attribute I suggest having a flag in one function to define the logic it should follow.
For example:
function positionChange(this){
var $this = $(this);
if(!$this.data("currentpositionused")){
//useCurrentPosition() code here
$this.data("currentpositionused", true);
}
else {
//clearPosition() code here
$this.data("currentpositionused", false);
}
Then change your HTML to:
<button class="btn btn-default" type="button" onclick="positionChange(this)">
If you want to change only the onclick attribute of the button inside the particular span you can use the following in your script.,
$(document).ready(function(){
$("span.input-group-btn button").attr("onclick","clearPosition()");
});
EDIT
$(document).ready(function(){
$("span.input-group-btn button").attr("onclick","clearPosition()");
$("span.input-group-btn button span").attr("class","Your_class");
});
And also learn about how to change/add/remove attribute values....
Try this:
$("span.input-group-btn").html('<button class="btn btn-default" type="button" onclick="clearPosition()">
<span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
</button>');
Is it like This ?
how to change onclick event with jquery?
$("#id").attr("onclick","new_function_name()");
jquery change class name
$("#td_id").attr('class', 'newClass');
If you want to add a class, use .addclass() instead, like this:
$("#td_id").addClass('newClass');
So I want to swap two div elements that have a CKEditor inside. I viewed some of the previous questions and tried to do it that way. It's all OK, the elements are swapped. But one of the elements loses its content and becomes non-editable.
<div id="sections">
<div id="apresentacao_div">
<label id="apresentacao_label" for="apresentacao">Apresentação</label>
<button class="btn btn-default">
<span class="glyphicon glyphicon-remove"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-arrow-up"></span>
</button>
<CKEditor:CKEditorControl ID="apresentacao"></CKEditor:CKEditorControl>
</div>
<div id="intro_div">
<label id="intro_label" for="intro">Introdução</label>
<button class="btn btn-default" onclick="remove(this)">
<span class="glyphicon glyphicon-remove"></span>
</button>
<button class="btn btn-default" onclick="upDiv(this)">
<span class="glyphicon glyphicon-arrow-up"></span>
</button>
<CKEditor:CKEditorControl ID="intro"></CKEditor:CKEditorControl>
</div>
</div>
I want to swap the two divs within the div with the id = "sections". And this is my code to swap:
function upDiv(ex) {
var div = document.getElementById("sections").getElementsByTagName("div");
for (i = 0; i < div.length; i = i + 4) {
if (div[i + 4].id.localeCompare(ex.parentNode.id) == 0) {
swapElements(div[i + 4], div[i]);
return false;
}
}
return false;
}
function swapElements(obj1, obj2) {
obj2.nextSibling === obj1 ? obj1.parentNode.insertBefore(obj2, obj1.nextSibling) : obj1.parentNode.insertBefore(obj2, obj1);
}
The for loop increments by 4 because of the transformation of the textarea into CKEditor adds a lot of new divs (4 in this case).
Can anyone help?
Not having too much familiarity with exactly what you are doing but i would try using a 'clone' method and then removing the original element off the page. It may be the values are not being copied, only the outline is but a clone should mean it duplicates as it is on the page and not how it is from the page source.
What about just swapping the data instead? Moving the DOM elements around is causing problems to me as well, but this works:
Replace your upDiv with this:
function upDiv()
{
var introData = CKEDITOR.instances['intro'].getData();
var presentacaoData = CKEDITOR.instances['apresentacao'].getData();
CKEDITOR.instances['intro'].setData(presentacaoData);
CKEDITOR.instances['apresentacao'].setData(introData);
return false;
}
This takes the data from one, and puts it in the other and vice versa.
Also, I noticed your controls don't have the runat server attribute set. You may want to change this:
<CKEditor:CKEditorControl runat="server" ID="intro"></CKEditor:CKEditorControl>
Finally, you call the function from your button like this:
<button class="btn btn-default" onclick="return upDiv();">
<span class="glyphicon glyphicon-arrow-up"></span>
</button>