Develop Reference

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")

Unable to change Span text using JQuery

I am using bootstrap and JQuery.
HTML
<div>
<ul>
<li><strong> Status : </strong><span id="monitorStatusSpan">1111</span></li>
</ul>
</div>
<button type="button" id="disableButton"
class="btn btn-primary" onclick="changeSpan();">Change</button>
JavaScript
function changeSpan() {
$('#monitorStatusSpan span').text('disssssssssssssssssss');
}
Here is the fiddle. http://jsfiddle.net/alamzeeshan/5bw8d2ta/7/
But still the span text is not getting changed.
Does anyone know what am I missing?

Currently, you're looking for a span inside your #monitorStatusSpan (#monitorStatusSpan span).
function changeSpan() {
$('#monitorStatusSpan span').text('disssssssssssssssssss');
}
It's enough to only look for the ID like this:
function changeSpan() {
$('#monitorStatusSpan').text('Your text here');
}

You have incorrect selector. Selector you have used finds #monitorStatusSpan element and then span element in it. which do not exist.
As IDs are unique, you can simply use id selector to target the required element:
function changeSpan() {
$('#monitorStatusSpan').text('disssssssssssssssssss');
}
working demo

HTML
<div>
<ul>
<li><strong> Status : </strong><span id="monitorStatusSpan">1111</span></li>
</ul>
</div>
<button id="disableMonitorButton" class="btn btn-primary">Change</button>
JS
$("#disableMonitorButton").click(function() {
$('#monitorStatusSpan').html('disssssssssssssssssss');
});
PS. DONT USE inline JS!

Try this
function changeSpan() {
$('#monitorStatusSpan').text('disssssssssssssssssss');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li><strong> Status : </strong><span id="monitorStatusSpan">1111</span></li>
</ul>
</div>
<button type="button" id="disableButton" class="btn btn-primary" onclick="changeSpan();">Change</button>
Your current selector selects all span's inside element with id #monitorStatusSpan but in this element there are not any span's.
For your current selector html should look like this
<span id="monitorStatusSpan"><span>TEST</span></span>

How to change html inside a span

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

Bootstrap Popover with textarea resetting text value

I have an issue where hiding a bootstrap popover just resets the text content of my textarea within the popover. There are many of these in my page and they are created dynamically in a loop (with int i being the counter). Here is my html:
<button class="btn btn-sm" data-toggle="popover" data-container="body" data-title="FOR EVALUATOR'S ATTENTION" type="button" data-html="true" #*id="commentPopOver-#i"*# #*onclick="getAttention(#i)"*#>
<span class="glyphicon glyphicon-pencil"></span>
</button>
<div class="popoverContent" style="display: none !important">
<div class="form-group">
<input name="values[#i].AttentionComment" id="comment-#i" hidden />
<textarea class="form-control" onchange="updateText(#i)" id="commentText-#i" rows="3">someText</textarea>
</div>
</div>
and my JS:
$(function () {
$("[data-toggle=popover]").popover({
html: true,
content: function () {
return $('.popoverContent').html();
}
});
})
Now I understand that it's just recreating the popover with it's default text on load, but it should at least be keeping the changes and the value of the textarea after it is closed/hidden. I wrote this JS to try and make it populate a separate hidden input to contain the value even after reset but it didn't work:
function updateText(id) {
var newtext = $('#commentText-' + id).val();
$('#comment-' + id).val(newtext);
}
Any ideas?

When you use content: function () {return $('.popoverContent').html();} the set the content of your tooltips, the tooltips content a copy of the HTML code return by $('.popoverContent').html(); The textarea is also a copy and not reference to the original textarea in your DOM.
When a tooltips opens the plugin inserts its HTML (including the copy mentioned above) in the DOM with a random unique ID. The plugin also insert a aria-describedby attribute to the elements that trigger the tooltip (the button in your case). The aria-describedby holds the same unique ID set for the tooltip.
Now you can use the 'hide.bs.popover` event. When the tooltips close you should copy the content of the textarea inside your tooltip to the (hidden) textarea in your DOM
Example
HTML:
<button type="button" id="po1" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-html="true">
Popover on right
</button>
<div class="popoverContent" style="display: none !important">
<div class="form-group">
<textarea class="form-control" rows="3">someText 1</textarea>
</div>
</div>
<br>
<button type="button" id="po2" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-html="true">
Popover on right
</button>
<div class="popoverContent" style="display: none !important">
<div class="form-group">
<textarea class="form-control" rows="3">someText 2</textarea>
</div>
</div>
javascript:
$("[data-toggle=popover]").each(function( index ) {
var that = $(this);
$(this).popover({
html: true,
content: function () {
return $('#' + $(this).attr('id') + ' + .popoverContent').html();
}
});
});
$('[data-toggle=popover]').on('hide.bs.popover', function () {
$('#' + $(this).attr('id') + ' + .popoverContent textarea').html( $('#' + $(this).attr('aria-describedby') + ' .popover-content textarea').val());
});
Demo: http://www.bootply.com/DvOYV12bHg

Javascript alert only initiating for top row in a table

I'm trying to make an alert set off every time a button is clicked on, which is a column in a table.
However, the alert is only working when the user clicks the button in the top row. All rows below it does not work. Why?!
<span class="inline" id="part-name" style="font-size:20px;font-weight:bold;"> {{unipart.part}}</span>
<td id ="Buy">
<a class="btn btn-warning" href="{{offer.buynow_url}}">BUY NOW </a>
</td>
<script type="text/javascript">
$('#Buy').click(function() {
var myPart = $('#part-name').text();
alert (myPart);
});
</script>
Note I have tried with id="Buy" in both the td tag, and also the a tag.

If you want to bind to multiple DOM elements, bind to a class that they share instead (make a new class and use that class on each element).
Your DOM structure seems somewhat confusing, but if I understand it correctly, this should work.
<span class="inline" id="part-name" class="part-name" style="font-size:20px;font-weight:bold;"> {{unipart.part}}</span>
<td class="buy" id ="Buy">
<a class="btn btn-warning" href="{{offer.buynow_url}}">BUY NOW </a>
</td>
<script type="text/javascript">
$('.buy').click(function() {
var myPart = $(this).closest('tr').children('.part-name').text();
alert (myPart);
});
</script>

Instead of ID "Buy", give class name 'Buy' then use the below code
$('.Buy').on('click',function(){
alert($('#part-name').text());
});

This is because you're selecting the s by their ids. Id's are supposed to be unique, so jQuery is grabbing the first one. If you use classes it will work better.
<span class="inline" id="part-name" style="font-size:20px;font-weight:bold;"> {{unipart.part}}</span>
<td class='Buy'>
<a class="btn btn-warning" href="{{offer.buynow_url}}">BUY NOW </a>
</td>
<script type="text/javascript">
$('.Buy').click(function() {
var myPart = $('#part-name').text();
alert (myPart);
});
</script>

Perhaps you might want to do something like this:
<span class="inline" id="part-name-{{partID}}" style="font-size:20px;font-weight:bold;"> {{unipart.part}}</span>
<td class ="Buy">
<a class="btn btn-warning" href="{{offer.buynow_url}}" partId="{{partID}}">BUY NOW </a>
</td>
<script type="text/javascript">
$('.Buy').click(function() {
var myPart = $("#part-name-"+$(this).attr("partId")).text();
alert (myPart);
});
</script>
This will break validation unless you are using HTML5.