I'm using Xoxco's plugin for tag input found here:
http://xoxco.com/projects/code/tagsinput/
In my modification, I've used JQuery's focus() function
<input id="tags_1" class="tag-holder" type="text" class="tags" /></p>
<div id="std" style="display:none;">
<span id='pdf' onmouseover="" style="cursor: pointer;">PDF</span>
<p id="reset" onmouseover="" style="cursor: pointer;">Reset Tags</p>
</div>
My JQuery for this is
$('#tags_1').focus(function(){
$('#std').css('display','block');
});
However, this doesn't seem to work when used with my modification of the plugin. It does work separately without using the plugin. Anything I'm missing here?
Because the issue is it adds a _tag in your elements id and that id is no more available so you have to target this id #tag_1_tag:
so your code should be like this:
order matters
$('#tags_1').tagsInput({width: 'auto'}); //<----tagInput applied
$('#tags_1_tag').focus(function(){ //<-----this id has to be the target now
$('#std').css('display','block');
});
Demo Fiddle
or even you can use attribute selectors:
$('[id^="tags_1"]').focus(function(){ //<-----this id has to be the target now
$('#std').css('display','block');
});
Demo with attribute selector
Related
I have a search input tag that is being added by a jQuery plug-in:
<input type="search" />
Note that this does not have an ID, CLASS, or NAME. I need the search input tag to look like this:
<input type="search" name="myname" />
A simple solution is for me to update the jQuery plug-in. However, I do not want to do this as it will cause challenges when I upgrade this plug-in in the future.
This JavaScript works properly and adds the name attribute:
$(document).ready(function() {
document.getElementsByTagName("input")[0].setAttribute("name", "myname");
});
The problem is that the "[0]" in this function relies on the search input being the first input field in the form. I do not think this solution is sustainable.
There are other inputs in the form. This is the only one with the type attribute equal to "search." Is there a way to identify it by this attribute? Or, is there another solution you propose?
Thank you for your time!
You can use the document.querySelector:
document.querySelector("input[type='search']")
Below is an example (you can inspect the output to see name attribute):
document.querySelector("input[type=search]").setAttribute("name", "myname");
<input type="search" value="foo" />
<input type="bar" value="bar" />
You can target a selection by anything. So, the selector input[type="search"]' will work.
If you want to apply this to all input's of type search, this is good enough, and you get all of them in here:
$('input[type="search"]')
This works without jQuery too:
document.querySelectorAll('input[type="search"]')
A more targeted approach would be
document.querySelectorAll('div.filter input[type="search"]')
I'm writing a CSS selector, which I have working so far:
input[placeholder*='mail']
but I'd like to ensure it's not finding invisible (ie: not visible) elements.
I've been trying :visible in various places in the pattern (because I couldn't find a good reference on the CSS selector lexer, but not luck with these:
input[placeholder:visible*='mail']
input:visible[placeholder*='mail']
input[placeholder*='mail']:visible
How do I do this? And anyone have a good reference on learning more complex selector formats?
:visible is a jQuery selector. Not a CSS one.
And you can't use it on an element's attribute like placeholder.
To check if there is an inputted value (which makes the placeholder "not visible"), you need to use some client-side code.
The jQuery would look like this:
$("input[placeholder*='mail']").each(function(){
if( $(this).val() != "" ){
// Do something.
// ...
}
});
To "filter out invisible elements" and keep only the visible ones:
var visible = $("input[placeholder*='mail']:visible").length;
console.log(visible+" elements are visible.");
.hidden{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="one" placeholder="My mail">
<input type="text" id="two" placeholder="Your mail">
<input type="text" id="three" class="hidden" placeholder="Junk mail">
<input type="hidden" id="four" placeholder="Cool mail">
There is no CSS selector for :visible. You sould then work with classes and target the elements which have the class .visible. (Or NOT have the class .visible.
The :visible selector is only available in jQuery for example, which uses the pseudo selector for finding elements visible in current scroll view.
You can't do it with only CSS.
But you can do it with jquery and most probably this answer can help you.
<input type="checkbox" name="AvatarfileSelected" value="image"
id="AvatarfileSelected" onclick="$('#extra').hide('slow')"/>
<span style="color:#538f05;">Change Image</span>
<div id="extra">
<input type="file" name="avatarfile" id="avatarfile"></input>
</div>
The above code doesn't work. Could someone show me the mistakes?
You probably didn't include jQuery...
Use vanilla javascript:
onclick="document.getElementById('extra').style.display = 'none'";
Instead of:
onclick="$('#extra').hide('slow')"
(Or include jQuery if you want to use it.)
BTW, <input> doesn't have a closing tag: </input>
Replace:
<input type="file" name="avatarfile" id="avatarfile"></input>
With:
<input type="file" name="avatarfile" id="avatarfile" />
Take out the onclick event from the HTML markup and do it in unobutrusive way. Make sure you bind your event functionalities in document ready event.
Use it like this
$(function(){
$("#AvatarfileSelected").click(function(){
$("#extra").hide();
});
});
Jsfiddle sample : http://jsfiddle.net/p9tdf/1/
Stumped at this part. I have a simple html input, and a jquery ui icon. What I want to do is have the icon hidden untill a "keyup" event of some sort is fired on the html input. Currently have the css property of the icon set to display:none;, but how would I use javascript to display this after some text is put into the html input?
--Here's my code
<input id="solo1" /> <div id="saveButton" class="ui-state-default ui-corner-all" title="Save" style="float:left; display:none; height:20px;" ><span class="ui-icon ui-icon-disk"></span></div>
Try something like below
$("#solo1").keypress(function(){
$("#saveButton").show();
});
You could use Javascript, or jQuery...first, a Javascript example:
<input id="solo1" onKeyUp="document.getElementById('saveButton').style.display = 'block';" />
Preferably, in jQuery, and this is all Javascript now:
$("#solo1").keyup(function(){
$("#saveButton").show();
});
I have a form that I want to be used to add entries. Once an entry is added, the original form should be reset to prepare it for the next entry, and the saved form should be duplicated prior to resetting and appended onto a div for 'storedEntries.' This much is working (for the most part), but Im having trouble accessing the newly created form... I need to change the value attribute of the submit button from 'add' to 'edit' so properly communicate what clicking that button should do. heres my form:
<div class="newTruck">
<form id="addNewTruck" class='updateschedule' action="javascript:sub(sTime.value, eTime.value, lat.value, lng.value, street.value);">
<b style="color:green;">Opening at: </b>
<input id="sTime" name="sTime" title="Opening time" value="Click to set opening time" class="datetimepicker"/>
<b style="color:red;">Closing at: </b>
<input id="eTime" name= "eTime" title="Closing time" value="Click to set closing time" class="datetimepicker"/>
<label for='street'>Address</label>
<input type='text' name='street' id='street' class='text' autocomplete='off'/>
<input id='submit' class='submit' style="cursor: pointer; cursor: hand;" type="submit" value='Add new stop'/>
<div id='suggests' class='auto_complete' style='display:none'></div>
<input type='hidden' name='lat' id='lat'/>
<input type='hidden' name='lng' id='lng'/>
</form>
</div>
ive tried using a hundred different selectors with jquery to no avail... heres my script as it stands:
function cloneAndClear(){
var id = name+now;
$j("#addNewTruck").clone(true).attr("id",id).appendTo(".scheduledTrucks");
$j('#'+id).filter('#submit').attr('value', 'Edit');
$j("#addNewTruck")[0].reset();
createPickers();
}
the element is properly cloned and inserted into the div, but i cant find a way to access this element... the third line in the script never works.
Another problem i am having is that the 'values' in the cloned form revert back to the value in the source of the html rather than what the user inputs.
advice on how to solve either of these issues is greatly appreciated!
I think you want to use find not filter
$j('#'+id).find('#submit')
That should work in practice, though you've got problems there because there are multiple elements with the same id. I'd change your HTML to use classes, or in this specific case, you don't need either:
$j('#' + id).find(":submit")
have you tried using .val()? and instead of .filter(), use .find()
$j('#'+id).find(':submit').val('Edit');
nickf solution works. (just wrote a piece of code to check that). Do check the definition of filter in jquery documentation.
Reduce the set of matched elements to those that match the selector or pass the function's test.
You have use find in this case. Also as nick mentioned having multiple elements with same id is troublesome, especially when you are doing dom manipulation. Better go with appropriate classes.