Overlapping Date Boxes - javascript

I am trying to display multiple dates on a screen. Currently, when a user clicks on a date button, it will open a datepicker. If the user clicks out of the box, the datepicker closes as it normally should react. But if the user clicks on another datepicker button, the datepicker will not close but instead, will open another datepicker window and overlap it. [I tried uploading a picture]
I am using Angular-UI for this. http://angular-ui.github.io/bootstrap/
I believe this is a bug? Is there a quick hack to disable the first box when clicked on a different button?
Thank you!
EDIT:
code being used is here:
<div class="row">
<p class="input-group">
<input type="text" class="form-control dateTextField" datepicker-popup="{{format}}" ng-model="search.minOrderTime" is-open="minordertime" datepicker-options="dateOptions" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default dateButton" ng-click="openDate($event,'minordertime')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<b>Max Order Time:</b>
<div class="row">
<p class="input-group">
<input type="text" class="form-control dateTextField" datepicker-popup="{{format}}" ng-model="search.maxOrderTime" is-open="maxordertime" datepicker-options="dateOptions" min-date="minDate" date-disabled="disabled(date, mode)" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default dateButton" ng-click="openDate($event, 'maxordertime')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<b>min Last Modified:</b>
<div class="row">
<p class="input-group">
<input type="text" class="form-control dateTextField" datepicker-popup="{{format}}" ng-model="search.minLastModified" is-open="minlastmodified" datepicker-options="dateOptions" min-date="minDate" date-disabled="disabled(date, mode)" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default dateButton" ng-click="openDate($event, 'minlastmodified')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<b>Max Last Modified:</b>
<div class="row">
<p class="input-group">
<input type="text" class="form-control dateTextField" datepicker-popup="{{format}}" ng-model="search.maxLastModified" is-open="maxlastmodified" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default dateButton" ng-click="openDate($event,'maxlastmodified')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<b>Order Date:</b>
<div class="row">
<p class="input-group">
<input type="text" class="form-control dateTextField" datepicker-popup="{{format}}" ng-model="search.orderDate" is-open="orderdate" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default dateButton" ng-click="openDate($event,'orderdate')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
Javascript:
$scope.openDate = function ($event, opened) {
$event.preventDefault();
$event.stopPropagation();
$scope[opened] = true;
};

Use an object to store which datepicker is currently open instead of directly on the $scope. That way when you open a new picker you can easily clear them all by writing $scope.openPicker = {} and assigning the new open one $scope.openPicker[opened]
Working plunkr
Just remember to change your is-open to include the object: is-open="openPicker.yourPicker"

Related

How to iterate through input's content

As you guys can see, I have two columns: Name and Tickets.
So John has 15 tickets, bob 10 and so on...
Objective: I want to make some sort of "lottery" where each person has X tickets. More tickets the more chance you have to win the prize.
I was trying to get both column separated by its class and then create some sort of "main array/object" something like this:
lottery = {
John => 15
Bob => 10
Milla => 7
}
And then I would try to pick a winner randomly... Just don't know how to do it.
Here I'm getting the inputs but I don't know how to "connect" them.
$('#sort').click(function(){
let names = $('.names');
let tickets = $('tickets');
let size = Object.keys(names).length;
}
HTML Structure:
<section id="content">
<div class="container participant">
<div class="row">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Nome & Tickets</span>
</div>
<input type="text" aria-label="name" class="names form-control">
<input type="text" aria-label="tickets" class="tickets form-control">
<div class="input-group-append">
<button class="addUser btn btn-outline-secondary" type="button">
<i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add participante"></i>
</button>
</div>
</div>
</div>
</div>
</section>
Given that each user has multiple tickets in order to have more chance of winning it would make more sense to create an array with multiple instances of their names in which you then select from randomly.
To build the array you can use map() and then fill() to populate it with the names, before randomly selecting from it, something like this:
var arr = $('#content .container .row').map(function() {
var $row = $(this);
return new Array(parseInt($row.find('.tickets').val(), 10)).fill($row.find('.names').val());
}).get();
var winner = arr[Math.floor(Math.random() * arr.length)];
console.log('Winner: ', winner);
console.log(arr);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="content">
<div class="container participant">
<div class="row">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Nome & Tickets</span>
</div>
<input type="text" aria-label="name" class="names form-control" value="John">
<input type="text" aria-label="tickets" class="tickets form-control" value="15">
<div class="input-group-append">
<button class="addUser btn btn-outline-secondary" type="button">
<i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add participante"></i>
</button>
</div>
</div>
</div>
<div class="row">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Nome & Tickets</span>
</div>
<input type="text" aria-label="name" class="names form-control" value="Bob">
<input type="text" aria-label="tickets" class="tickets form-control" value="10">
<div class="input-group-append">
<button class="addUser btn btn-outline-secondary" type="button">
<i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add participante"></i>
</button>
</div>
</div>
</div>
<div class="row">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Nome & Tickets</span>
</div>
<input type="text" aria-label="name" class="names form-control" value="Milla">
<input type="text" aria-label="tickets" class="tickets form-control" value="7">
<div class="input-group-append">
<button class="addUser btn btn-outline-secondary" type="button">
<i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add participante"></i>
</button>
</div>
</div>
</div>
<div class="row">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Nome & Tickets</span>
</div>
<input type="text" aria-label="name" class="names form-control" value="Kurt">
<input type="text" aria-label="tickets" class="tickets form-control" value="3">
<div class="input-group-append">
<button class="addUser btn btn-outline-secondary" type="button">
<i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add participante"></i>
</button>
</div>
</div>
</div>
</div>
</section>

How to clear some forms fields on collapse

I have a form that includes a collapsing well with optional fields. I'm trying to figure out how to clear those optional fields if they choose to toggle the well shut or hit the cancel button which also toggles the well shut.
<form id="meeting">
<div class="form-group">
<label class="white" for="">Set Meeting Date & Time</label>
<input class="form-control" type="text" value="07/26/2017 09:05 pm" id="MeetingTime" name="MeetingTime" />
</div>
<button class="btn btn-primary" type="button" data-target="#offSiteMeeting" data-toggle="collapse" aria-pressed="false" autocomplete="off" aria-controls="offSiteMeeting">Offsite Meeting</button>
<div class="collapse" id="offSiteMeeting">
<div class="well">
<a class="btn btn-default pull-right" href="" data- toggle="collapse" data-target="#offSiteMeeting" aria-controls="offSiteMeeting">Cancel Offsite</a>
<div class="form-group">
<label class="" for="">Meeting Type</label>
<select id="meetingType" name="meetingType" class="form-control">
<option value="1">Meeting Type 1 </option>
<option value="2">Meeting Type 2 </option>
<option value="3">Meeting Type 3 </option>
</select>
</div><!-- close form-group -->
<div class="form-group">
<label class="" for="">Location Name</label>
<input class="form-control" type="text" value="" id="name" name="name" placeholder="ex. Jones Family Home" />
</div>
<div class="form-group">
<label class="" for="">Address</label>
<input class="form-control" type="text" value="" id="address" name="address" placeholder="1234 Some Street City, State Zip"/>
</div>
</div><!-- close well -->
</div><!-- close collapse -->
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
So the inputs I'd like to clear (in Form id="meeting") are
id=meetingType, id=name, id=address
when the well with id="offSiteMeeting" is collapsed
Here are the two buttons that collapse the well
<button class="btn btn-primary" type="button" data-target="#offSiteMeeting" data-toggle="collapse" aria-pressed="false" autocomplete="off" aria-controls="offSiteMeeting">Offsite Meeting</button>
<a class="btn btn-default pull-right" href="" data-toggle="collapse" data-target="#offSiteMeeting" aria-controls="offSiteMeeting">Cancel Offsite</a>
add this parameter to your buttons
onclick="function () { document.getElementById('meetingType').value = ''; document.getElementById('name').value = ''; document.getElementById('address').value = '';}"
or if you are into jquery
onclick="function () { $('#meetingType').val(''); $('#name').val(''); $('#address').val(''); }"

AngularJS UI-Bootstrap Datepicker is not working inside ng-repeat?

I have been trying to use date pickers inside ng-repeat but the datepicker is not working inside ng-repeat, can anyone help me solve this issue.
Here is my code,
<div ng-repeat="dt in dates">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
check this DEMO
<h1>Datepicker inside repeater demo</h1>
<div class="container content-body">
<div class="row" ng-repeat="dt in dates">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt.date" is-open="dt.opened" datepicker-options="dateOptions" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event,dt)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>

Uncheck a group of check buttons

I'm trying to uncheck a group of check buttons in an onclick event:
HTML:
</div>
<button onclick="getChart(); uncheck();" type="submit" class="btn btn-default" id="refreshChart">Request</button>
</div>
<form class="form">
<div class="btn-group btn-group-justified " data-toggle="buttons" name="chartSelect">
<label class="btn btn-info" id ="hide">
<input name="hide" type="checkbox" ><span>Hide</span>
</label>
<label class="btn btn-info">
<input name="total" id="total" type="checkbox">Total
</label>
<label class="btn btn-info">
<input name="max" id="max" type="checkbox">Max
</label>
<label class="btn btn-info">
<input name="mean" id="mean" type="checkbox">Mean
</label>
<label class="btn btn-info">
<input name="min" id="min" type="checkbox">Min
</label>
<label class="btn btn-info">
<input name="extrapo" id="extrapolation" type="checkbox">Extrapo
</label>
<label class="btn btn-info">
<input name="all" id="all" type="checkbox">All
</label>
</div>
</form>
I'm even just trying to just get one button to uncheck with no success.
JS:
function uncheck() {
if ($('[name=max]').is(':checked')) {
$('[name=max]').attr('checked', false);
}
}
It seems that calling filter is like this:
$("div[data-toggle='buttons'] input[type='checkbox']").is(":checked")
does not work. But if you put it with selector, it works. So this is fine:
$("div[data-toggle='buttons'] input[type='checkbox']:checked")
Now you can uncheck them all:
$("div[data-toggle='buttons'] input[type='checkbox']:checked").removeAttr("checked");
Try it in this fiddle
It looks like your code is working except that you have a call to a function getChart() that is not defined. When I remove that function call the checkbox is unchecked when clicking the button.
https://jsbin.com/yakiyopoye/edit?html,output

Nothing happening on clicking on close button in newly inserted variable- block

inserAfter is working fine but I also want to perform remove. On clicking the button with closequest id, nothing happening even alert-message not coming.
//for adding ques ans and comment
var qBlock = '<div class="newqandaBlock"><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-question"></i></span><input type="text" class="form-control" placeholder="Question Asked "><button type="button" id="closequest" class="btn btn-purple" style="position: absolute;top: 3px;"><span> <i class="fa fa-close"></i></span>close</button></div> <div class="input-group margin-bottom-20"> <span class="input-group-addon purple"><i class="fa fa-reply"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea> </div><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-comments"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea> </div></div>';
$("#addQuestion").on("click", function() {
$(qBlock).insertAfter(".qandaBlock");
});
$(document).ready(function() {
$("#closequest").on("click", function() {
alert("ok");
$('qblock').remove(".newqandaBlock");
});
}); < /script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 col-sm-12">`
<form id="resetblock" name="resetblock">
<div class="qandaBlock">
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-question"></i></span>
<input type="text" class="form-control" placeholder="Question Asked ">
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-reply"></i></span>
<textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea>
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-comments"></i></span>
<textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea>
</div>
</div>
<button type="button" class="btn btn-default" id="addcomment" onclick="resetform()">Reset</button>
<button type="button" class="btn btn-purple" id="addQuestion">
<i class="fa fa-plus-square-o"></i> Add Another Question
</button>
</div>
</form>
</div>
Issue here is that dynamic added elements have to be told to jQuery that they exists. Earlier we were using live but now jQuery supports on. On is delegation. It says look for all events that occur on this element or it's child i.e you can scope it to specific child. So pick the closest parent that exists and not body or document.
Also id's have to be unique so you cannot use id's in this case instead use class.
Put the script tag just before closing body
var qBlock='<div class="newqandaBlock"><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-question"></i></span><input type="text" class="form-control" placeholder="Question Asked "><button type="button" id="" class="btn btn-purple closequest" style=""><span> <i class="fa fa-close"></i></span>close</button></div> <div class="input-group margin-bottom-20"> <span class="input-group-addon purple"><i class="fa fa-reply"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea> </div><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-comments"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea> </div></div>';
$("#addQuestion").on("click",function(){
$(qBlock).insertAfter(".qandaBlock");
});
$("#resetblock").on("click",'.closequest', function(){
alert("ok");
$(this).closest(".newqandaBlock").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="col-md-12 col-sm-12">`
<form id="resetblock" name="resetblock" >
<div class="qandaBlock">
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-question"></i></span>
<input type="text" class="form-control" placeholder="Question Asked ">
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-reply"></i></span>
<textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea>
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-comments"></i></span>
<textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea> </div>
</div>
<button type="button" class="btn btn-default" id="addcomment" onclick="resetform()">Reset</button>
<button type="button" class="btn btn-purple" id="addQuestion">
<i class="fa fa-plus-square-o"></i> Add Another Question
</button>
</div>
</form>
</div>
You should delegate the event handler as shown below, so that your event handler works with dynamically added elements.
Other than that, don't use id in dynamically injected templates - use class names instead, otherwise it'll invalidate your HTML. Finally, you should keep a reference to the added block:
//for adding ques ans and comment
var qBlock = '<div class="newqandaBlock"><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-question"></i></span><input type="text" class="form-control" placeholder="Question Asked "><button type="button" class="btn btn-purple closequest" style="position: absolute;top: 3px;"><span> <i class="fa fa-close"></i></span>close</button></div> <div class="input-group margin-bottom-20"> <span class="input-group-addon purple"><i class="fa fa-reply"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea> </div><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-comments"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea> </div></div>';
$(document).ready(function() {
var latestBlock;
$("#addQuestion").on("click", function() {
latestBlock = $(qBlock).insertAfter(".qandaBlock");
});
$(document).on("click", ".closequest", function() {
alert("ok");
latestBlock.remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 col-sm-12">`
<form id="resetblock" name="resetblock">
<div class="qandaBlock">
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-question"></i></span>
<input type="text" class="form-control" placeholder="Question Asked ">
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-reply"></i></span>
<textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea>
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-comments"></i></span>
<textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea>
</div>
</div>
<button type="button" class="btn btn-default" id="addcomment" onclick="resetform()">Reset</button>
<button type="button" class="btn btn-purple" id="addQuestion">
<i class="fa fa-plus-square-o"></i> Add Another Question
</button>
</div>
</form>
</div>
$('qblock') is not valid a valid HTML element, this won't work, don't forget '.' or '#'.
Use something like $('.newqandaBlock').remove(), to remove the class.

Categories