How to change html inside a span - javascript

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');

Related

jquery not find elements in button area

I have images list and need to select image for album cover.
HTML:
<button type="button" id="imageCover1" class="btn btn-sm btn-success btn-image-cover" data-id="1">
<i class="far fa-circle"></i> cover
</button>
<input type="hidden" name="is_cover[]" id="imageCover1" class="image-cover" value="">
<button type="button" id="imageCover2" class="btn btn-sm btn-success btn-image-cover" data-id="2">
<i class="far fa-circle"></i> cover
</button>
<input type="hidden" name="is_cover[]" id="imageCover2" class="image-cover" value="">
JS:
$(document).on('click', '.btn-image-cover', function () {
var item_id = $(this).attr('data-id');
$('.image-cover').val('');
$('#imageCover' + item_id).val('1');
$('#imageCover' + item_id).find('i').addClass('far fa-check-circle');
});
In action worked and change input value true But when i need to find i and change/add class jquery not find i. how to fix this problem?
It actually works.
The problem is that font awesome only renders one icon class. Change the addClass function to toggleClass like this:
$(document).on('click', '.btn-image-cover', function () {
var item_id = $(this).attr('data-id');
$('.image-cover').val('');
$('#imageData' + item_id).val('1');
$('.btn-image-cover').not(this).find('i').removeClass('fa-check-circle').addClass('fa-circle');
$(this).find('i').toggleClass('fa-circle fa-check-circle');
});
JSFiddle link
The toggleClass will remove the "fa-circle" class when it is present and add the "fa-check-circle" class if it is not present, and vice-versa.
As noted by #Teemu, you also have same ids with your (button + input:hidden) pairs. I've changed the id of the input:hidden to start with "imageData" instead.

How to focus next textarea on button click

I'm trying to do something like a social network, but I'm having problems with jquery, I want, by clicking the comment button, the user is taken to the comment field, but I'm not able to use $(this).
When the user click here
The code:
<button type="button" class="btn btn-default abreComentarios" >
<span class="fa fa-comments-o"></span>
</button>
The field:
The code:
<div class="comentar">
<textarea class="txtComentario form-control caixaComentario" placeholder="Seu comentário" onkeypress="comentarEnter()"></textarea>
</div>
My jquery:
$('body').on('click', '.abreComentarios', function() {
//console.log('entrou');
$(this).next('.caixaComentario').focus();
});
Remember, I'm using a foreach, so I have to use $(this)
Your next() isn't .caixaComentario but .comentar,
So use the next() but then you'll have to use find() (or children()) to focus the textarea
$('.abreComentarios').on('click', function() {
//console.log('entrou');
$(this).next('.comentar').find('.caixaComentario').focus();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-default abreComentarios">click</button>
<div class="comentar">
<textarea class="txtComentario form-control caixaComentario" placeholder="Seu comentário"></textarea>
</div>
Solved, i just did it:
1- Added a data-id with the id of the post in the button
<button type="button" class="btn btn-default abreComentarios" data-id="'.$post->id.'"><span class="fa fa-comments-o"></span></button>
2- Added the same id in the end of the name of class "caixaComentario"
<div class="comentar">
<textarea class="form-control caixaComentario'.$post->id.'" placeholder="Seu comentário" onkeypress="comentarEnter()"></textarea>
</div>
3- Call without $(this) on jQuery
$('body').on('click', '.abreComentarios', function() {
var id = $(this).data("id");
$('.caixaComentario'+id).focus();
});
and Worked :D
$(this) will be your <button>, but calling .next(".caixaComentario") will look for a sibling element to the button. If your <button> and <div class="comentar"> are siblings, the .next(".caixaComentario") will not match any elements as they aren't siblings. The would be a niece/nephew.
Try changing .next(".caixaComentario") to .next("div .caixaComentario")

Get the index of a specific class repeated on the DOM

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()));
// ------------^^^^^^^---
});

Swap 2 div elements Javascript

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>

jQuery selector with this reference

This is my HTML:
<div class="btn-group btn-group-justified">
<a id="option1" data-option="1" class="btn btn-default" href="#">3</a>
<a id="option2" data-option="2" class="btn btn-default" href="#">6</a>
<a id="option3" data-option="3" class="btn btn-default" href="#">9</a>
<a id="option4" data-option="4" class="btn btn-default" href="#">12</a>
<a id="option5" data-option="5" class="btn btn-default" href="#">15</a>
</div>
<p id="pp"></p>
And my jQuery:
$("[id^='option']").click(function () {
$("#pp").html(this.attr("data-option"));
});
The codes are simplified to point the problem easier.
What I want to do is getting data-option attribute value of clicked a element to the p element with id="pp".
Something is wrong with this reference I guess.
I do not want to write the same code 5 times, so I tried to use starts with operator I think this reference refers to something else.
inside the handler this refers to the dom element, it does not have .attr() method so you need to get the jQuery wrapper reference for that element using $(this).attr('data-option')
$("[id^='option']").click(function () {
$("#pp").html($(this).attr("data-option"));//since the attribute is `data-option` $(this).data("option") also will work
});
You can use the native JavaScript method getAttribute():
$("[id^='option']").click(function () {
$("#pp").html(this.getAttribute("data"));
});
However now that you made it into actual data attribute, simply use such code instead:
$("[id^='option']").click(function () {
var oClickedItem = $(this);
$("#pp").html(oClickedItem.data("option"));
});
Try:
$(document).ready(function(){
$("[id^='option']").click(function(){
$("#pp").html($(this).attr("data"));
});
});
DEMO FIDDLE

Categories

Resources