We Keep Coding

Set jquery mask on a dynamically inserted input?

Set jquery mask on a dynamically inserted input?
I'm trying to do it in the down format, but I'm not succeeding.
The new input loses the mask.
Can someone help me with this please.?
<div class="control">
<input type="text" name="item_valor" placeholder="Valor" class="input valor" maxlength="255" id="id_item_valor">
</div>
.
$(document).ready(function(){
$('.valor').mask("#.##0,00", {reverse: true});
});
.
$(document).on('click', '#addItem', function () {
var newElement = $('.control:last').clone(true);
$('.control:last').after(newElement);
})

set the mask on focus of the input like this
$(document).on("focus", ".valor", function() {
$(this).mask("#.##0,00", {reverse: true});
});
you can probably remove it from document.ready function and also instead of cloning and appending in 2 lines you can shorten it to 1 line with this
$('.control:last').after($('.control:last').clone());
here is a working fiddle https://jsfiddle.net/tv7w3Lku/3/
Side note: cloning an element with ID will create multiple elements with same ID which is probably not the best way, you should just stick with class in this case

Just recall your mask function after each input is added to the DOM.
$(document).on('click', '#addItem', function () {
var newElement = $('.control:last').clone(true);
$('.control:last').after(newElement);
$('.valor').mask("#.##0,00", {reverse: true});
})

I was having this same problem, and discovered the .masked() function will apply the mask to a dynamic value. Hope this helps:
HTML:
<input name="phone" type="text">
<button>insert dynamic value</button>
JS:
$(function(){
$("input[name='phone']").mask("(000) 000-0000");
});
$("button").click(function(){
newPhoneNumber = "1231231234";
maskedValue = $("input[name='phone']").masked(newPhoneNumber));
$("input[name='phone']").val(maskedValue);
});
fiddle: https://jsfiddle.net/qcsf3z0j/4/
and docs: https://igorescobar.github.io/jQuery-Mask-Plugin/docs.html#getting-a-masked-value-programmatically

How do I remove all tags in an input field below with jQuery?

How do I remove all tags in an input field below with jQuery?
<input class="form-control" id="videotags" data-role="tagsinput" placeholder="Video Tags" type="text">
//what I tried:
<script>$("#videotags").remove();</script>

If you are using Bootstrap tagsinput try this:
$("#videotags").tagsinput('removeAll');
source

This work for me:
$('#videotags').tagsinput('removeAll');

$("#videotags").replaceWith(function () {
return $('<' + this.nodeName + '>').append($(this).contents());
});

Try this
$('#videotags').click(function() {
var input = $(this);
input.val('');
});
https://jsfiddle.net/joe_hart/7xrg242b/

Are the targets of removing not tags but attributes?
The input tag in your question does not include tags.
If you want to remove all attributes in the input tags, I think you can use the method introduced in the below question.
Remove all attributes

bootstrap-tags.js do not provide to delete All tags at once. I have tried some workarounds for this.
First I have fetch all the tags. Below is the code for that.
var tagData = $("#small").tags().tagData;
if (tagData.length > 0)
{
$.each( tagData, function( index, value ){
for(var tItem=0 ; tItem < tagData.length;)
{
$("#small").tags().removeTag(tagData[tItem]);
}
});
}
I have used 2 loops here as once you delete one record it will be reindex to 0.

Jquery - How to add text from attribute name from input into label attr for and that input ID?

I don't know how to add name from my input into label attr for and same input as ID. They are in same div. Do you guys know how to do it ? Thank you.
Jquery:
$('input[type="text"]').each(function () {
var name = $("input").attr("name");
})
HTML:
<div data-role="fieldcontain">
<label>Name:</label>
<input type="text" name="fname" value="" />
</div>

Just get the previous element of this input field and change its text with this.name:
$('input[type="text"]').each(function() {
$(this).prop('id', this.name) // set 'id' of input field
.prev('label') // get previous sibling element
.attr('for', this.name); // set 'for' attribute
});

Use $(this)
$('input[type="text"]').each(function () {
var name = $(this).attr('name');
$(this).prev('label').text(name);
})

Use .prop() instead of .attr() Since, attr() gives you
the value of element as it was defines in the html on page load. It is
always recommended to use prop() to get values of elements which is
modified via javascript/jquery , as it gives you the original value of
an element's current state dom element
$('input[type="text"]').each(function () {
var name = $("input").prop("name");
$(this).prev('label').text(name);
});

Transform input back into a div on button click

I am using the following code
$(document).on('click', '#editDetailBtn', function () {
var input = $('<input id="#detailprimaryDescription" type="text" />');
input.val($('#detailprimaryDescription').text());
$('#detailprimaryDescription').replaceWith(input);
$('#editDetailBtn').hide();
$('#detailPrimaryCancel').show();
$('#detailPrimarySave').show();
});
$(document).on('click', '#detailPrimaryCancel', function () {
var input = $('<div id="#detailprimaryDescription" ></div>');
//input.val($('#detailprimaryDescription').text());
$('#detailprimaryDescription').replaceWith(input);
$('#editDetailBtn').show();
$('#detailPrimaryCancel').hide();
$('#detailPrimarySave').hide();
});
what I am trying to achieve is to once cancel is clicked then it will turne the input field back into a div
http://jsfiddle.net/7XWAu/

I think this is what you're shooting for.
JS FIDDLE
you don't need to place '#' at the beginning of an id in the dom, its only used to reference elements.
so basically, every where you had something like:
var input = $('<input id="#detailprimaryDescription_input" type="text" />');
you shouuld be doing something like:
var input = $('<input id="detailprimaryDescription_input" type="text" />');
once I cleaned that up it worked as it does in the fiddle.
I do want to say, that it would be a muchhhhhhh better practice to just show and hide a div containing all those inputs rather than manipulating the DOM to create / destroy them constantly.

tag cloud filter

I have a div that contains many spans and each of those spans contains a single href.
Basically it's a tag cloud. What I'd like to do is have a textbox that filters the tag cloud on KeyUp event.
Any ideas or is this possible?
Updated question: What would be the best way to reset the list to start the search over again?

Basically, what you want to do is something like this
$('#myTextbox').keyup(function() {
$('#divCloud > span').not('span:contains(' + $(this).val() + ')').hide();
});

This can probably be improved upon and made lighter but this at least gives the functionality of being able to hide multiple tags by seperating your input by commas. For example: entering this, that, something into the input will hide each of those spans.
Demo HTML:
<div id="tag_cloud">
<span>this</span>
<span>that</span>
<span>another</span>
<span>something</span>
<span>random</span>
</div>
<input type="text" id="filter" />
Demo jQuery:
function oc(a){
var o = {};
for(var i=0;i<a.length;i++){
o[a[i]]='';
}
return o;
}
$(function(){
$('#filter').keyup(function(){
var a = this.value.replace(/ /g,'').split(',');
$('#tag_cloud span').each(function(){
if($(this).text() in oc(a)){
$(this).hide();
}
else {
$(this).show();
}
})
})
})