Develop Reference

How to close the selected div when we click on the button

In my angular application I have on textarea and within the popup and when we enter any data in textarea the to be displayed in some div.
.component.html
<div class="form-group popover-form" >
<label>Enter Custom Trigger Habit: When I</label>
<textarea class="form-control" [(ngModel)]="Trigger" name="Trigger"></textarea>
</div>
<!-- the entered data of textarea will display in below code-->
<div class="col-sm-5 " >
<div class="content-text" >
<p>{{Trigger}}</p>
</div>
</div>
<button type="button"><i class="icon icon-close" type="button" aria-hidden="true"></i></button>
and I have the close button and my requirement is to close the div when we click on the close button .
Can anyone help me on tha same.

You can create a boolean flag to check when to show or hide the div and then create a click event handler on your button to set that showDiv boolean to false to hide that div;
For example:
showDiv: boolean = true;
closeDiv() : void {
this.showDiv = false;
}
<div class="col-sm-5 " *ngIf="showDiv">
<div class="content-text" >
<p>{{Trigger}}</p>
</div>
</div>
<button (click)="closeDiv()" type="button">
<i class="icon icon-close" type="button" aria-hidden="true"></i>
</button>

You can use *ngIf
Template:
<div *ngIf="display">Test Data</div>
<input type="button" value="click" (click)="update"/>
Component:
display = true;
update(){
this.display = !this.display;
}

You can do this by using JavaScript like this.
on Click it will display none. This is just an example
function show() {
var x = document.getElementById("tabi")
x.style.display = "none"
}
<div class="form-group popover-form" >
<label>Enter Custom Trigger Habit: When I</label>
<textarea class="form-control" [(ngModel)]="Trigger" name="Trigger"></textarea>
</div>
<!-- the entered data of textarea will display in below code-->
<div class="col-sm-5 " id='tabi' >
<div class="content-text" >
<p>{{Trigger}}</p>
</div>
</div>
<button type="button" onclick="show()"><i class="icon icon-close" type="button" aria-hidden="true">Button</i></button>

How to bind this within js nested object iteration within a function. Jquery

again, probably a terrible title - but what I'm trying to do is to make a simple search feature on my website. You click a nav button, which updates the search bar, whi in turn triggers an onchange event to update the current appended list.
function update() {
var list = $("#comic__modern-list");
list.empty();
$.each(Object.keys(comics), function() {
var currentObject = comics[this];
var filter = comics[this].type;
var publisher = comics[this].publisher;
if (search == "") {
if(filter == "modern") {
list.append(`
<div class="comic__box">
<div class="comic__image-box">
<img src="${currentObject['data-item-image']}" alt="${currentObject['data-item-description']}" class="img-fluid">
<div class="comic__desc-wrap">
<div class="comic__desc">${currentObject['data-item-description']}, issue #${currentObject['issue']} (${currentObject['year']})</div>
</div>
</div>
<div style="text-align:center; margin-top: 1rem">
<button
class="btn btn-warning snipcart-add-item comic__button"
data-item-id="${currentObject['data-item-id']}"
data-item-price="${currentObject['data-item-price']}"
data-item-url="${currentObject['data-item-url']}"
data-item-description="${currentObject['data-item-description']}"
data-item-image="${currentObject['data-item-image']}"
data-item-name="${currentObject['data-item-name']}">
<div class="comic__desc-desk">£${currentObject['data-item-price']}<br>Add to cart</div><div class="comic__desc-mob">BUY <br> ${currentObject['data-item-description']}, Issue: ${currentObject['issue']} (${currentObject['year']})</div>
</button>
</div>
</div>
`)
}
} else if (search == publisher) {
list.append(`
<div class="comic__box">
<div class="comic__image-box">
<img src="${currentObject['data-item-image']}" alt="${currentObject['data-item-description']}" class="img-fluid">
<div class="comic__desc-wrap">
<div class="comic__desc">${currentObject['data-item-description']}, issue #${currentObject['issue']} (${currentObject['year']})</div>
</div>
</div>
<div style="text-align:center; margin-top: 1rem">
<button
class="btn btn-warning snipcart-add-item comic__button"
data-item-id="${currentObject['data-item-id']}"
data-item-price="${currentObject['data-item-price']}"
data-item-url="${currentObject['data-item-url']}"
data-item-description="${currentObject['data-item-description']}"
data-item-image="${currentObject['data-item-image']}"
data-item-name="${currentObject['data-item-name']}">
<div class="comic__desc-desk">£${currentObject['data-item-price']}<br>Add to cart</div><div class="comic__desc-mob">BUY <br> ${currentObject['data-item-description']}, Issue: ${currentObject['issue']} (${currentObject['year']})</div>
</button>
</div>
</div>
`)
}
});
}
The current list is generated by this, which works fine:
$.each(Object.keys(comics), function() {
var currentObject = comics[this];
var currentObject2 = comics[this].type;
console.log(currentObject2);
if (search == "") {
if(currentObject2 == "modern") {
var list = $("#comic__modern-list");
list.append(`
<div class="comic__box">
<div class="comic__image-box">
<img src="${currentObject['data-item-image']}" alt="${currentObject['data-item-description']}" class="img-fluid">
<div class="comic__desc-wrap">
<div class="comic__desc">${currentObject['data-item-description']}, issue #${currentObject['issue']} (${currentObject['year']})</div>
</div>
</div>
<div style="text-align:center; margin-top: 1rem">
<button
class="btn btn-warning snipcart-add-item comic__button"
data-item-id="${currentObject['data-item-id']}"
data-item-price="${currentObject['data-item-price']}"
data-item-url="${currentObject['data-item-url']}"
data-item-description="${currentObject['data-item-description']}"
data-item-image="${currentObject['data-item-image']}"
data-item-name="${currentObject['data-item-name']}">
<div class="comic__desc-desk">£${currentObject['data-item-price']}<br>Add to cart</div><div class="comic__desc-mob">BUY <br> ${currentObject['data-item-description']}, Issue: ${currentObject['issue']} (${currentObject['year']})</div>
</button>
</div>
</div>
`)
}
}
});
From what I can gather, this has to do with the keyword "this" no longer meaning what it did when it was outside of the function, so I'm assuming the fix will be to do with bind(), but I can't make heads nor tails of it.
p.s, if there's an easier/simpler way to set up a search system, please enlighten me!

Custom Angular Validation based on a selection radio select button

I need some help in that i have validation working partially. When one selects a payment method called CC the user input needs validation to kick in instantly and wont allow one to input the wrong number or be able to pay(the button will be disabled). My issue is that validation isn't working in that when i input the first number is turns the button on and validation isn't working and i have used this resource as well Validation based on user input.
Here is my html/angular code:
<label for="phone_number" class="fund-project-personal-details-label">Phone Number</label>
<input placeholder="Phone Number" id="phone_number" type="text" ng-model="phone_number" ng-required="selected_payment_method === 'CC'"
ng-pattern="phoneNumberPattern">
<button type="submit"
class="waves-effect waves-light btn-large orange white-text proceed-payment"
ng-disabled="selected_payment_method == undefined || paymentForm.$invalid || selected_reward_total_amount == 0">
Next: Pay
<i class="fa fa-chevron-right" ng-if="!proccess_payment_spinner"></i>
<div class="preloader-wrapper small active right payment-loader" ng-if="proccess_payment_spinner">
<div class="spinner-layer spinner-white-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</button>
This is my JS code:
$scope.phoneNumberPattern = (function() {
let regexp = /^[07]{10,10}$/;
let requireNumber = "selected_payment_method === 'MPESA'"
return {
test: function(value) {
if( $scope.requireNumber === true) {
return true;
}
return regexp.test(vlue);
}
};
})();

JQuery Close Modal After Inactivity

I am creating a touch screen feedback kiosk that prompts users for their email address after they select a feedback option (good / bad).
Leaving their email address is optional, so the modal window should close after x seconds of inactivity.
How can I detect if a user is currently 'active' in the modal and close it if not (using JQuery)?
The countdown timer should be reset, and modal stay open if:
The user begins to type in the input.
The modal should be closed if;
The input has been inactive for x seconds (user leaves).
I have half of it complete, just need some help with the rest of it. Currently the timer only changes on each click of the input.
My current code is below;
Here's a link to a my fiddle.
HTML
<button type="button" class="btn btn-primary" id="feedbackFormBad">click</button>
<div aria-hidden="true" class="modal fade" id="memberNumberModal" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header modal-header-primary">
<h1>Hello</h1>
</div>
<div align="center" class="modal-body">
<p>Some text here.</p>
<p span id="countdown"></p>
<!-- show count down timer here -->
<form id="memberNumberForm" class="form-inline">
<div class="form-group mb-2">
<input type="text" name="Email" class="form-control" id="memberNumber" placeholder="enter email" required>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Send</button>
<button type="button" class="btn btn-secondary" id="closeModal" data-dismiss="modal">No Thanks</button>
</div>
</form>
</div>
</div>
</div>
</div>
JQuery
$(document).ready(function() {
$("#feedbackFormBad").on("touchstart, click", function(e) {
$('#memberNumberModal').modal('toggle');
var counter = 5;
var interval = setInterval(function() {
counter--;
$("#memberNumber").focus(function() {
$("#countdown").html('Window will close in ' + counter + ' seconds.');
});
if (counter == 0) {
$('#memberNumberModal').modal('hide');
clearInterval(interval);
}
}, 1000);
});
});
Any help is appreciated.

Try with the below javascript code
$(document).ready(function() {
$("#feedbackFormBad").on("touchstart, click", function(e) {
$('#memberNumberModal').modal('toggle');
var counter = 5;
var interval = setInterval(function() {
counter--;
$("#countdown").html('Window will close in ' + counter + ' seconds.');
if (counter == 0) {
$('#memberNumberModal').modal('hide');
clearInterval(interval);
}
}, 1000);
$('body').bind('mousedown keydown', function(event) {
counter = 5;
});
});
});
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<body>
<button type="button" class="btn btn-primary" id="feedbackFormBad">click</button>
<hr>
<p>The timer should be reset if:</p>
<ul>
<li>The user begins to type in the input.</li>
</ul>
<p>The modal should be closed if:</p>
<ul>
<li>The input has been inactive for x seconds (user leaves).</li>
</ul>
<div aria-hidden="true" class="modal fade" id="memberNumberModal" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header modal-header-primary">
<h1>Hello</h1>
</div>
<div align="center" class="modal-body">
<p>Some text here.</p>
<p span id="countdown"></p>
<!-- show count down timer here -->
<form id="memberNumberForm" class="form-inline">
<div class="form-group mb-2">
<input type="text" name="Email" class="form-control" id="memberNumber" placeholder="enter email" required>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Send</button>
<button type="button" class="btn btn-secondary" id="closeModal" data-dismiss="modal">No Thanks</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>

You could use a combination of setInterval and all of the events to achieve this. I've commented the code below.
Update
Originally, I'd posted an answer using the keyup function - missing the touchscreen part of the requirements. However, the below listens for any change to the text input. Let me know if this works.
The events were taken from this answer here
Best way to track onchange as-you-type in input type="text"?
// Keep track of if user is active
var active = true;
// keep track of how long since the user has typed
var timeElapsed = 0;
// check every second
setInterval(function(){
timeElapsed += 1;
// example
$("#timer").html(timeElapsed + " seconds inactive");
// a minute has passed since the user has typed
if(timeElapsed == 60){
// close modal
$('#memberNumberModal').modal('hide');
}
}, 1000);
// if the user types, reset the timer
$("#test").on('change keydown paste input propertychange click keyup blur', function(){
// user is active, has typed
timeElapsed = 0;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="test" type="text">
<span id="timer"></span>

Open next modal on keyboard arrow buttons click

I have created an modals system with jQuery.
//Open modal
$('.job_inside').on('click', function(){
var id = $(this).data('id');
$('#'+id).fadeIn(300);
});
//Close modal
$(".close_btn").click(function() {
$(".job_full").fadeOut(300);
});
html:
<!-- Open modal -->
<div class="job">
<div class="job_inside" data-id="job1"></div>
</div>
<!-- Modal -->
<div class="job_full" id="job1" style="display: none;">
<div class="job_full_inside">
<div class="close_btn">×</div>
<img src="resursai/img/sanfierro.jpg" alt="" />
<h2>SanFierro dizainas</h2>
</div>
</div>
I want to make, that if modal id job1 is opened, on right arrow key click it closes job1 ant opens job2, and on left arrow click backs to job1. Is it possible, and how I can make it?
Sorry for grammar.

You could do it like this :
HTML:
<div class="job">
<div class="job_inside" data-id="1">open</div> //notice change here data-id="job1" to "1"
</div>
<!-- Modal -->
<div class="job_full" id="job1" style="display: none;">
<div class="job_full_inside">
<div class="close_btn">×</div>
<h2>First</h2>
</div>
</div>
<div class="job_full" id="job2" style="display: none;">
<div class="job_full_inside">
<div class="close_btn">×</div>
<h2>Second</h2>
</div>
</div>
<div class="job_full" id="job3" style="display: none;">
<div class="job_full_inside">
<div class="close_btn">×</div>
<h2>Third</h2>
</div>
</div>
JS :
var currentId = null;
$(".job_inside").on("click", function () {
var id = $(this).data("id");
currentId = id;
$("#job" + id).fadeIn(300); //small change here
});
$(document).on("keyup", function (e) {
if (e.which === 37 && currentId > 1) {
currentId--;
$(".job_full").fadeOut(300);
$("#job" + currentId).fadeIn(300);
} else if (e.which === 39 && currentId < 3) {
currentId++;
$(".job_full").fadeOut(300);
$("#job" + currentId).fadeIn(300);
}
});

This the basic strategy you want to deploy(Live Preview http://codepen.io/larryjoelane/pen/YwJMPG?editors=1010). You really don't need to worry about the fading in and out the element with the right id if you use the class name you have already provided with JQuery's eq function and an index variable that you will have to increment when you press the left and right arrows. You will want to use the which property on the keyup event to capture the keycode of the arrows. Here are some links to the API if want to learn more about them.
Keyup Event(scroll down to see the event.which example): http://api.jquery.com/keyup/
HTML:
<!-- Open modal -->
<div class="job">
<div class="job_inside" data-id="job1">Click to load</div>
</div>
<!-- Modal 1-->
<div class="job_full" id="job1" style="display: none;">
<div class="job_full_inside">
<div class="close_btn">×</div>
<img src="resursai/img/sanfierro.jpg" alt="" />
<h2>SanFierro dizainas</h2>
</div>
</div>
<!--Modal 2-->
<div class="job_full" id="job2" style="display: none;">
<div class="job_full_inside">
<div class="close_btn">×</div>
<img src="resursai/img/sanfierro.jpg" alt="" />
<h2>United States</h2>
</div>
</div>
<!--Modal 3-->
<div class="job_full" id="job3" style="display: none;">
<div class="job_full_inside">
<div class="close_btn">×</div>
<img src="resursai/img/sanfierro.jpg" alt="" />
<h2>Canada</h2>
</div>
</div>
JavaScript/JQuery:
(function($) {
//store the index of the job
var index = 0;
//Open modal
$('.job_inside').on('click', function() {
$("#job1").fadeIn(300);
});
$(document).on("keyup", function(e) {
console.log(e.which);
switch (e.which) {
//left arrow
case 37:
console.log("left arrow");
//if the index is not 0
if (index !== 0) {
//decrement it
index--;
}
//close the next job
$(".job_full").eq(index + 1).fadeOut(200);
//load the previous job
$(".job_full").eq(index).fadeIn(300);
break;
//right arrow
case 39:
console.log("right arrow");
//if the index incremented by 1 is less than the length of
//collection
if ((index + 1) < $(".job_full").length) {
//increment the index
index++;
}
//close the previous job
$(".job_full").eq(index - 1).fadeOut(200);
//load the next job
$(".job_full").eq(index).fadeIn(300);
break;
}
});
//Close modal
$(".close_btn").click(function() {
$(".job_full").fadeOut(300);
});
})(jQuery);