Develop Reference

Input value changes after clicking in another div with Jquery mask and vue

I'm trying to use the jquery mask and vue plugin, my code:
HTML:
<div class="mb-2">
<label class="form-label">Salary</label>
<input v-model="newEmployeeSalary" class="form-control moneyMask" id="employeeSalary" required>
</div>
JS:
$(document).ready(function($){
$('.money').mask('000.000.000.000.000,00', {reverse: true});
});
The problem is that the inputed value changes after clicking in another div.
Example :
Here I'm adding a money value, and the mask works perfectly:
Then, here I just clicked on the next input of the form and the Salary input mask breaks:
My vue code:
data() {
return {
newContractTotalValue: '',
}
},
I noticed that if I remove the v-model the error dissapers, but I need to use it.
Can someone help me with that ?, I really have no idea what to do

Try like this:
$('#employeeSalary').mask('000.000.000.000.000,00', { reverse: true });

Editable Grid: Multiple datepickers

I'm constructing a view where the user can edit the date of each item for the model Store and I'm using JqueryUI datepicker JS.
This is the view (extract):
#model IEnumerable<Application.Models.Store>
#foreach (var item in Model)
{
<input type="text" class="datepicker form-control" asp-for="#item.DesignatedDate"
name="DesignatedDate" form="#(String.Format("{0}{1}","form",item.StoreID))" />
and this is the JS:
<script>
$(function () {
$(".datepicker").datepicker();
});
</script>
Since I'm showing multiple Stores in this grid, each one has it's own date to be picked.
The problem I'm having is that all the datepickers are linked between each other since each input has:
asp-for="#item.DesignatedDate"
which translates to:
id="item_DesignatedDate"
Note: I use asp-for="#item.DesignatedDate" in order to show the current date that the Store has registered when the pages loads.
And so, when I change the date of any Store, it will change the date of the first Store, always.
Any idea on how to fix this?
Thanks in advance!

Solved.
I just had to add an id to each in order to be differentiated:
id="#(String.Format("{0}{1}","any",item.StoreID))"
And now it works.

ASP MVC Bootstrap - Select2 DropDownListFor Displays Duplicate Boxes

I have an ASP.net MVC project. All of my DropDownListFor's display as 2 boxes instead of 1. This is what the view looks like currently:
This is what the view SHOULD look like:
Here is the code from the view:
<div class="col-xs-12 col-sm-6 col-md-4 ">
<div class="form-group select-280">
#Html.LabelFor(model => model.HoleID)
<br />
#Html.DropDownListFor(model => model.HoleID, (List<SelectListItem>)ViewData["HoleList"], new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.HoleID)
</div>
</div>
Javascript from the view to make the DropDownListFor Searchable (Select2):
$(document).ready(function () {
$("#HoleID").select2();
}
Why are all of my DropDownListFor's displaying as duplicates, and how can I correct this bug?
EDIT
Removing the .select2() fixes the bug and removes the duplicate dropdown... however that makes the remaining dropdown not searchable. how can I fix this while still maintaining the search functionality?

I've experienced this using Kendo, and it's all around the form-control. The issue is the dropdown gets transformed into something more dynamic; the original SELECT element might actually get hidden in the UI. Select2 is probably using multiple elements to represent the select, and the original form-control class gets applied to both elements, and forces them to show, instead of show and hide. Or the form-control class is forcing the original select to show.
I had to stop using form-control, and then create a special class just for kendo controls just to not cause one of the elements to always show...
The way to figure that all out is inspect the markup. You'll see the form-control class getting passed down to the internal elements.

This was determined to be a server error via the Visual Studio publish process. The bootstrap select2 files were not existing correctly in the server.

Datapicker binding with angular and bootstrap

I tried to make an datapicker and a time picker for a website, I found the solution on this site. I use angular and I don't know how can I do to take the value from the input. I tried with ng-model, but didn't work.
Here is the html code:
<div class="container">
<div class="row">
<div class='col-sm-6'>
<input type='text' class="form-control" id='datetimepicker4' />
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker();
});
</script>
</div>
How can I solve this issue?
Thanks.

I'd recommend looking into Bootstrap UI. It's a collection of Boostrap UI elements, converted into Angular.js directives. You'll find that using Angular.js Directives will have much better data-binding and support and then using the equivalent jQuery/Javascript plugins.
One of the Bootstrap UI components included in the link is the 'ui.bootstrap.datepicker Directive'. To give you an example of what this directive looks like, and what an Angular-friendly datepicker looks like:
<uib-datepicker ng-model="date" min-date="minDate"></uib-datepicker>

You should use a directive for DOM manipulation.
app.directive('datetimepicker', function() {
return {
restrict: 'A',
link: function(scope, element) {
$(element).datetimepicker();
}
}
});

How to add an onclick jquery function in an input area

I am a newbie in Javascript and jquery I have a jquery function
$('.input-group .date').datepicker({
});
for
<div class="input-group date" id="dp3">
<input class="form-control" type="text" placeholder="Date" name="date" value="">
</div>
I want to add this inside input tag using onclick="" can you please tell me how to do this ?

If I'm thinking what your thinking then it's wrong.
.datepicker() already assigns an onClick event so you don't have to create an extra one.
You have to make sure you are using jQuery and jQuery UI in order for datepicker to work.
Then you either have to put your script before you close body or in the head and use
$(document).ready(function(){ ... });
I also think you are using the wrong selector here.
. is class
# is ID
So it should be
$('.input-group .form-control').datepicker();
Example: http://jsfiddle.net/Spokey/AjRm3/

For those coming to this question because they want to know how to bind to the event that happens when someone clicks on an input box, then this is useful:
$('input.your-input-box-class').focus(function(e){
// do something
});
For those who want to use datepicker like the original question asks, then remember that jQuery UI abstracts away from these types of details. So just use the widgets like they were meant to be used. In this case, create the datepickers for all your input boxes that have a certain class (say date maybe) when the DOM is done loading:
$(document).ready(function(){
$('input.datepicker').datepicker({ /*... pass options here ...*/ });
});
And for options, you read the documentation, they include handling all the events you need:
http://api.jqueryui.com/datepicker/

Call a function:
onclick="someFunction(this);"
Set function:
function someFunction(this) {
$(this).prev('.input-group.date').datepicker({});
}

You bind datepicker to DOM element, not onClick.
$(document).ready(function(){
$('.form-control').datepicker({});
});
Or add it in function, so you can call it dynamically.

put the set of code inside a javascript function say clickMe()
function clickMe(){
$('.input-group .date').datepicker({
});
}
now call the function in click method.
<div class="input-group date" id="dp3">
<input class="form-control" type="text" placeholder="Date" name="date" value="" onclick="clickMe()">
</div>