I have markup like this:
<li data-id="1">
<button type="button" class="btn btn-default btn-md" style="margin: .25em; padding: .25em;">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
random text
<input type="hidden" name="global_filter[default_fields][][apple]" value="random text_again">
</button>
</li>
I want to change the text "random text" to "something else".
I am able to find the text node:
$li.find('button').first().contents().filter(function() {
return this.nodeType == 3;
}).text();
But how can I change the text? When I pass an argument to text like text('something else'), nothing changes.
I would probably put the text in its own container like
<div id='changeableText'>Random Text</div>
and then just access it directly with
$('#changeableText').text('New text!');
to accomplish this.
Updated
You can select Just the text() of the button and change it.
Note: This will not work if more that one non marked up texts exists. E.g.
<li data-id="1">
<button type="button" class="btn btn-default btn-md" style="margin: .25em; padding: .25em;">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
random text
<input type="hidden" name="global_filter[default_fields][][apple]" value="random text_again">
another random text
</button>
</li>
Otherwise her is a
working demo:
var getNonMarkedUpText = $('button').text().replace(/^\s+|\s+$|\s+(?=\s)/g, "");
$('button').html($('button').html().replace(getNonMarkedUpText, 'something else'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li data-id="1">
<button type="button" class="btn btn-default btn-md" style="margin: .25em; padding: .25em;">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
random text
<input type="hidden" name="global_filter[default_fields][][apple]" value="random text_again">
</button>
</li>
Try this:
<li data-id="1">
<button type="button" class="btn btn-default btn-md" style="margin: .25em; padding: .25em;">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
<span id="txt1">random text</span>
<input type="hidden" name="global_filter[default_fields][][apple]" value="random text_again">
</button>
</li>
That way, you can go:
document.getElementById("txt1").innerText = "txet modnar";
Or
$("#txt1").text("tandom rext");
Related
I have run into an issue I hope you can help solve.
I have a button group which when the browser expanded 100% wraps around the label. What is the best method to stop this happening. As I do not want the button group wrapping the label.
see html below.
<div class="form-group">
<label for="selectme" class="form-control-label">add and remove me</label>
<div class="btn-group btn-group-sm" role="group">
<input name="selectme" id="selectme" placeholder="add and remove me" class="form-control" type="text">
<button onclick="addItem()" type="button" class="btn btn-success btn-sm">
<i class="fa fa-plus-circle"></i> Add
</button>
<button onclick="removeItem()" type="button" class="btn btn-secondary btn-sm">
<i class="fa fa-minus-circle"></i> Remove
</button>
</div>
<ul class="list-group" id="my-list">
</ul>
</div>
Does simply adding <br> after your input solve your issue? like this:
<div class="form-group">
<label for="selectme" class="form-control-label">add and remove me</label>
<div class="btn-group btn-group-sm" role="group">
<input name="selectme" id="selectme" placeholder="add and remove me" class="form-control" type="text"><br>
<button onclick="addItem()" type="button" class="btn btn-success btn-sm">
<i class="fa fa-plus-circle"></i> Add
</button>
<button onclick="removeItem()" type="button" class="btn btn-secondary btn-sm">
<i class="fa fa-minus-circle"></i> Remove
</button>
</div>
<ul class="list-group" id="my-list">
</ul>
</div>
Plunker.
In this plunker I want to keep lable names on top of textboxes. How can I keep lables for the textboxes.
<a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
<input type="text" ng-model="item.rowId"> <input type="text" ng-model="item.name">
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span><span class="glyphicon glyphicon-plus" style='margin-left:4px'></span></a>
<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="addParentRow(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span></a>
I guess you're trying to prevent changes on rowId element.
In that case just add ng-disabled="true" to that input:
<input type="text" ng-model="item.rowId" ng-disabled="true">
I hope this will help u
Demo
CSS
label {display:block;}
textarea { display:block;}
HTML
<label for="title">Title: </label><textarea rows="5" id="title" name="title"></textarea>
This snippet of code I am using as template:
<div class="input-group input-group-sm date-time-with-arrows" style="width:100%">
<span class="input-group-btn">
<button class="btn btn-default" ng-click="prevDay()"> <i class="fa fa-angle-left "></i></button>
</span>
<div id="input" class="input-group input-group-sm nested-group" ng-model="model">
<input class="form-control input-sm" ng-disabled="disabled" type="text" ng-attr-placeholder="{{configuration.noSelectionLabel}}" />
<span class="input-group-btn after-date-input">
<button class="btn btn-default pick-cal" ng-disabled="isDisabled" type="button">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div>
<span class="input-group-btn after-date-input">
<button class="btn btn-default" ng-click="nextDay()"> <i class="fa fa-angle-right"></i></button>
</span>
</div>
Note functions in tags button prevDay() and nextDay(). When I change date in input and press enter, prevDay() function is called and I have no idea why.
If you don't specificy a type="button" for a <button>, it will default as a submit button.
The button with function prevDay() on it is the first one, which will be used when you hit enter.
Just add type="button" to your <button>s and it will work.
I almost got insane for this just a couple of days ago...
The reason is that angular submits form on click of every button that is not of type="button".
If you change to <button type="button" class="btn btn-default" ng-click="nextDay()"> <i class="fa fa-angle-right"></i></button> it should work.
I'm trying the access the input field value using ng-model searchQuerybut it's not getting set. After removing typehead and typeahead-editable it works fine.
<div class="col-md-3">
<div class="input-group" class="pull-right" style="margin: 10px">
<input type="text" name="input" class="form-control"
placeholder="Get quote..." ng-model="searchQuery"
ng-controller="TypeaheadController"
typeahead="script as script.symbol for script in getSymbols($viewValue)"
typeahead-editable="false">
Value - {{searchQuery}}
<span
class="input-group-btn"> <a class="btn btn-default"
type="button" data-toggle="modal" data-target="#search-popup">
<span
class="glyphicon glyphicon-chevron-down">
</span>
</a>
<a class="btn btn-default" type="button"
ng-href="#/show-details/{{searchQuery}}"> <span
class="glyphicon glyphicon-search"></span>
</a>
</span>
</div>
</div>
Thanks for your help.
Move your ng-controller="TypeaheadController" statement to parent div, it will work fine.
When I move cursor on a camera, button is pulling. Why? Can I solve this problem?
http://jsfiddle.net/uDj9p/
<div class="input-group-btn advanced-group">
<button class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Отправить картинку">
<span class="glyphicon glyphicon-camera"></span>
</button><button class="btn btn-default">
<span class="glyphicon glyphicon-file"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-facetime-video"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-bullhorn"></span>
</button>
</div>
Try adding the following CSS:
.btn {
margin: 0 !important;
}
http://jsfiddle.net/uDj9p/15/
Sometimes there is a little flicker but not sure what's causing that yet.