What I'm trying to accomplish is add a tooltip to a container div that wraps an input I'm disabling. Basically, a tooltip on disabled. Seeing that I can't do it on the disabled input I'm doing it on the container element.
I'm trying to add the tooltip to the container dynamically using this:
$('.input-group date').tooltip({'container':'body','placement':'top', 'trigger' : 'hover', 'title':'maximize'});
But it's not working.
On document.ready I do this:
$('[rel="tooltip"]').tooltip() // Opt-in for tooltips
And the element itself looks like this:
<div class="input-group date" rel="tooltip">
<input type="text" class="form-control" id="dp1" style="width: 100px; vertical-align: middle" />
<button class="input-group-addon" id="dp1Icon" onclick="return false" style="outline-style:none"><img src="<%=context%>/images/calendar-glyph.png"></button>
</div>
What am I doing wrong? I think I have all the correct elements in place. Is there an easier way to assign a tooltip to a container element when its child input is disabled?
Am I making this more complicated?
This:
$('.input-group date')
means "select all <date> elements that are descendants of elements with the input-group class".
Given that you said your markup was:
<div class="input-group date" rel="tooltip">
you presumably instead want:
$('.input-group.date')
i.e. "select all elements that have both the input-group and date classes"
TL;DR: Use a dot instead of a space in your selector
I ended up with using the show.bs.tooltip handler and testing if the component was disabled; if not, I'd prevent the default action a la:
// Set the tooltip for a start date that can't be edited (when mtg is in progress)
$(".form-group.startDate").on("show.bs.tooltip",function(e){
if ( !$("#dp1").is(":disabled") )
e.preventDefault();
});
Related
I am having a difficult time targeting the closest div sitting on top of my button element. The markup is here:
<div class="row kennelEntry">
<label for="kennel-1">Name of Kennel</label>
<input type="text"
maxlength="50"
tabindex="1"
name="kennel-1"
id="kennel-1" />
</div>
<button class="duplicateKennel">New Kennel</button>
When .duplicateKennel is clicked, I want to grab the .kennelEntry element, so that I can add a new element directly underneath.
For full disclosure, the goal here is when button is clicked, I can duplicate that entire .row, to build a dynamic form where user can create as many entries and those are saved in my backend. When duplicated, I just need to alter the label and name properties for the label and input. I'm just having a hard time targeting the closest kennelEntry to the button being targeted.
You can use jQuery's .prev() for that :
$('.duplicateKennel').on('click', function(){
$(this).before($(this).prev().clone());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row kennelEntry">
<label for="kennel-1">Name of Kennel</label>
<input type="text" maxlength="50" tabindex="1" name="kennel-1" id="kennel-1" />
</div>
<button class="duplicateKennel">New Kennel</button>
I have problem with my jquery script. I have code like this and my script is deleting only input not label with it. How to delete also label?
<div class="input_fields_container">
#foreach($data->videoTags as $tag)
<div class="el">
<div class="form-group">
<label class="col-lg-2 control-label bold">#lang('main.position')</label>
<div class="col-lg-6 input-group">
<input type="text" placeholder="" name="tag[]" value="{{$tag->tag}}" class="form-control">
<div class="input-group-btn inup-group-addon">#lang('main.delete')
</div>
</div>
</div>
</div>
#endforeach
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.input_fields_container').on("click", ".remove_field", function(e) { //user click on remove text links
e.preventDefault();
$(this).parents().eq(1).remove();
x--;
})
});
</script>
You could use closest() to target the parent div that contain the label also :
$(this).closest('.form-group').remove();
//OR
$(this).closest('.form-group').html('');
NOTE : You could jump up to the el parent you need just to change the selector.
The use of the selector eq here is not very wise. You can check the doc to understand how to use it efficiently :
https://api.jquery.com/eq-selector/
You can read:
"They narrow the set down based on the order of the elements within this matched set. For example, if elements are first selected with a class selector (.myclass) and four elements are returned, these elements are given indices 0 through 3 for the purposes of these selectors."
By doing $(this).parent().eq(1).remove(), you will remove only one element of the array of element that match the selection of $(this).parent(). You can check what is in your array to try to understand what to remove.
I suggest that you can use your foreach to create a attribute like "data-input=y" on your <div class="el">, where y is a variable that you increment. Like that you can quickly know which input to delete and your selection is not depending of the structure of the DOM.
In this post about the angular text editor called textAngular.
I would like to find the textarea element of the directive text-angular. Because it uses bootstrap design and i would like to replace the element to angular-material textarea.
But i have no idea where did the developer place it inside the file.
UPDATE
I cant do an outside css or overriding it css attribute since angular-material textarea doesnt have a css styling approach.
Textarea elements are being referred to by using the value of the ng-model attribute.
Also you if you have unresolved problems you can always create a custom css and load that last which will override all others.
You can also use expressions if you do not want to override the bootstrap.
As such.
<input type="button" value="set color" ng-click="myStyle={color:'red'}">
<input type="button" value="set background" ng-click="myStyle={'background-color':'blue'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br/>
<span ng-style="myStyle">Sample Text</span>
<pre>myStyle={{myStyle}}</pre>
More can be read for all the different ways it can be used at Angulars Website https://docs.angularjs.org/api/ng/directive/ngStyle
Update: getting back to CSS overrides.
elements inside an AngularJS application are given certain classes. These classes can be used to style textarea elements according to their state.
The following classes are added:
ng-untouched The field has not been touched yet
ng-touched The field has been touched
ng-pristine The field has not been modified yet
ng-dirty The field has been modified
ng-valid The field content is valid
ng-invalid The field content is not valid
ng-valid-key One key for each validation. Example: ng-valid-required, useful when there are more than one thing that must
be validated
ng-invalid-key Example: ng-invalid-required
The classes are removed if the value they represent is false.
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
textarea.ng-invalid {
background-color:pink;
}
textarea.ng-valid {
background-color:lightgreen;
}
</style>
<body ng-app="">
<p>Try writing in the textarea field:</p>
<textarea ng-model="myName" required>
I would like to have an input text inside a button like this:
<a onclick="reply_click();" class="btn btn-app btn-app-spinner">
<input type="text" disabled class="form-control small-input">
Set Budget
</a>
this is the result:
The problem is that when the user clicks on the input text, the reply_click() is triggered. I would it to be triggered ONLY when he clicks on the a element (Set Bid).
How can I do it?
See jsfiddle
EDITED
As you can see I want to make it look similar to the buttons in the design as you can see in the JSfiddle
Putting an input inside an a element is invalid HTML. From the spec for a:
Content model:
Transparent, but there must be no interactive content descendant.
input is interactive content, so it cannot appear within an a. Browsers may well choose to rewrite your HTML to put the input after the a to try to make it valid.
So the solution here is not to put an input inside an a. Not only because HTML doesn't allow it (you could work around that with a click handler on a div), but because it's extremely unusual UX, which will be unfamiliar and likely uncomfortable to users.
Having said that, if a browser doesn't relocate the input (or if you replace the a with a div with click handler), you can stop the event from propagating to the a by hooking click on the input and using stopPropgation:
$("a input").on("click", function(e) {
e.stopPropagation();
}):
I'm not recommending it, though.
In theory you can achieve the effect you're looking for with something like this
$(".setBid").click(function(e){
var $input = $(this).find("input[type='text']");
if ($input.is(e.target)
{
//do action
}
})
here's the html
<a class="btn btn-app btn-app-spinner setBid">
<input type="text" disabled class="form-control small-input">
Set Budget
</a>
however, as #TJ said this is NOT valid HTML
This is invalid html! don't do that!
If you must, then just stop propagation by handling a click on the input:
function reply_click(e){
alert("clicked!");
}
function input_click(e)
{
e.stopPropagation();
return false;
}
<a onclick="reply_click();" class="btn btn-app btn-app-spinner">
<input type="text" class="form-control small-input" onclick="input_click(event)">
Set Budget
</a>
This snippet is not cross-browser safe (tested in chrome). Use jQuery, or handle the way other browsers deal with events.
you can do this:
<div class="btn btn-app btn-app-spinner">
<input type="text" class="form-control small-input">
<a onclick="reply_click();" >
Set Budget
</a>
</div>
In your fiddle replace your html with the html that I provide on the answer and you will have what you want.
The trick is that adding the same classes that you have in your a to another element they are going to look like similar.
Then if you want your action fired when user clicks on the "set budget", wrap it with the <a>
You can create a div and use the click on that div. That way you have valid HTML.
function bid(){
alert('bid');
}
function stop(e){
e.stopPropagation();
}
div {
width:200px;
height:60px;
background-color:#f93;
text-align:center;
padding-top:20px;
}
<div onclick="bid()">
<input type='text' onclick="stop(event)">
<p>bid</p>
</div>
You should not wrap the input element inside a link.
Instead, the input needs a label (for accessibility, especially screen reader users) and something that functions as a button (a real button element in the code below). Since you don't have a proper label element, I used WAI-ARIA described-by to link the input field with the button.
<form>
<input type="text" class="form-control small-input"
aria-describedby="ses-budget" />
<br />
<button type="submit" onclick="reply_click();"
class="btn btn-app btn-app-spinner" id="set-budget">Set budget</button>
</form>
I have a block of code with various tags but all within a set of div tags. I need to be able to search everything within the div block to replace a string with another. Here is the block.
<div class="form-group field-thoughts-cmh0-thought required">
<label class="control-label" for="thoughts-cmh0-thought">cmh0.</label>
<input type="text" id="thoughts-cmh0-thought" class="form-control" name="Thoughts[cmh0][thought]">
<button type="button" class="entAdd"> Add Above </button>
<button type="button" class="entDelete"> Delete </button>
<div class="help-block"></div>
</div>
What I'm trying to do is replace all of the 'cmh0' instances with another string. I know I can do this one by one, but there is a very good chance the above block is going to change and change multiple times as time goes on. Consequently, I'd like an elegant way to select and replace all of the 'cmh0' instances within the main div block.
How would I do this?
Thanks in advance.
You can do this with a quick select and replace:
var container = $('div[class*="cmh0"]').parent();
container.html(container.html().replace(/cmh0/g, 'someotherclass'));
the class*= reads as, "select any element where the class contanis"`.
Then just replace the html and reapply it.
jsFiddle