ng-show in this sample not working - javascript

What I want is to show a DIV when I click a button and hide it after 2s.
<div ng-show="alertMsg.show">{{alertMsg.text}}</div>
After triggering the click event, the DIV shows correctly, but cannot hide. It seems that the value of "alertMsg.show" has been changed to FALSE correctly after 2s, but the DIV still there in the view.
Click Event:
$scope.$apply(function(){
$scope.alertMsg.show = true;
});
$timeout(function () {
$scope.alertMsg.show = false;
}, 2000);
I want to know how to hide the DIV via $timeout

hide show with time limit
live code is here http://jsfiddle.net/dofrk5kj/4/
HTML
<div ng-controller="homeController">
<button ng-click="showAlert()"> Show alert </button>
<div ng-show="alertMsg.show">{{alertMsg.text}}</div>
</div>
controller.js
controller('homeController', function ($scope, $timeout) {
$scope.alertMsg = {
show: false,
text:"Alert message is ::show"
};
$scope.showAlert =function(){
$scope.alertMsg.show = true;
$timeout(function(){
$scope.alertMsg.show = false;
}, 2000);
}
});
but you can use separate flag to hide/show alert
<alert ng-repeat="alert in alerts" type="{{alert.type}}"
close="closeAlert($index)">{{alert.msg}} </alert>

Related

Bootstrap custom popover doesn't appear on first click

Actually i'm tying to show a custom popover after the user press on an anchor then he can choose an item and i'd do some server operations after it.
The issue is that after i press the first time on the anchor nothing happen but if i press again the pooper will be shown.
Then i would hide the popover if the user press on the background.
Here is the function which i hire from the anchor
<script>
function pop(id) {
$("#" + id).popover({
html: true,
content: function () {
return $('#popover-content').html();
}
});
}
</script>
While here is the code of the popover that i'm trying to show
<li id="popover-content" class="list-group" style="display: none">
CHIUSO
RISOLTO
IN ATTESA
SCADUTO
</li>
Have you tried this jQuery script?
$(function() {
$('[data-toggle="popover"]').popover()
})
As shown here.
Tell us if it works.
The $().popover({...}) method registers the popover but does not show it yet. So the first exectuion of your pop(id) function will just register the popover on the element.
When you want to show the popover on click you have to also programmatically show it after you register it so your function should look like this.
function pop(id) {
// register the popover
$("#" + id).popover({
html: true,
content: function () {
return $('#popover-content').html();
}
});
// show the popover
$("#" + id).popover('show');
}

How work with $(target) inside directive?

I build a directive for time selection with two blocks. Problem is to catch target event on some blocks inside directive template.
Directive template:
<div class='time-picker-container'>
<div class='block1' ng-click='show()'>1</div>
<div class='block2' ng-show='selectVisible'>2</div>
</div>
JS:
scope.selectVisible = false;
scope.show = function() {
scope.selectVisible = scope.selectVisible ? false : true;
}
$rootScope.$on('documentClicked', function(inner, target) {
//try to hide div.block2 if user make click outside block.
});
Basic idea: when user make click on document, outside div.block2, block disappear. When user click somewere inside div.block2 block stay visible.
On run function:
angular.element(document).on('click', function(e) {
$rootScope.$broadcast('documentClicked', angular.element(e.target));
});
In your template, add $event as an argument to the ng-click handler function.
<div class='time-picker-container'>
<div class='block1' ng-click='show($event)'>1</div>
<div class='block2' ng-show='selectVisible'>2</div>
</div>
Then in your ng-click handler use stopPropagation() to prevent the outsideClickHandler from getting called.
angular.module("myApp").controller("myVm", function($scope, $document) {
var vm = $scope;
vm.selectVisible = false;
vm.show = function(event) {
console.log("inside click");
event.stopPropagation();
vm.selectVisible = vm.selectVisible ? false : true;
}
function outsideClickHandler(e) {
console.log("outside click");
$scope.$apply("selectVisible = false");
}
$document.on("click", outsideClickHandler);
$scope.$on("destroy", function() {
$document.off("click", outsideClickHandler)
})
})
To prevent memory leaks, be sure to remove the $document click handler when the scope is destroyed.
The DEMO on JSFiddle.

Only open closest modal to button

I have a page which has a random number of items each of which has a button and a modal - as I do not know how many items there will be I am using classes for the button and modal.
When I click any button it loads all the modals whereas I only want it to load the next modal - I have tried to use closest and next but cannot get them to fire.
<div class="social-button-container">
<button type="button" class="social-button">Button</button>
</div>
<div class="socialModal modal fade">
<h2>123</h2>
</div>
<div class="social-button-container">
<button type="button" class="social-button">Button2</button>
</div>
<div class="socialModal modal fade">
<h2>234</h2>
</div>
$(document).ready(function () {
$('.social-button').click(function () {
$('.socialModal').modal();
return false;
});
});
The above code works in that the modals fire but they all do - I tried using:
$(document).ready(function () {
$('.social-button').click(function () {
$('.socialModal').next().modal();
return false;
});
});
but this does nothing at all (none fire)
Also tried:
$(document).ready(function () {
$('.social-button').click(function () {
$(this).next('.socialModal').modal();
return false;
});
});
with the same result - how can I get only the following modal to open on clicking the relevant button?
http://jsfiddle.net/0v0pg7fx/
Your selectors were a bit off, and you probably want to in initialize the modals first.
$('.socialModal').modal({show:false});
$('.social-button').click(function () {
$(this).closest('.social-button-container').next('.socialModal').modal('show');
});
Demo
$(document).ready(function () {
$('.button').click(function () {
$('.Modal').closest().modal();
return false;
});
});

Call a function when i click outside to the element like boot strap modal get closed

I have created a popup box of div. Which get shown when i click on an icon and get hide when i click on close button. But i want to get it closed if click out side of the popup. What i can do for that. I am using angular in my project and ng-show and ng-hide to show and hide the div. Any help is appreciable. Thanks in advance.
html code
<p ng-click="openPopUP()">openPopUp</p>
<div ng-show="popup">
<p>helo</p>
<p ng-click="closePopUp()">Close</p>
</div>
Java script
$scope.openPopUP = function(){
$scope.popup = true;
}
$scope.closePopUp= function(){
$scope.popup = false;
}
I just want to close if some one click out side the div
In your controller:
angular.element(document.body).on('click', function() {
$scope.$apply(function() {
$scope.closePopUp();
});
});
First of all read this post to get an idea how to close popups.
Fix for #pixelbits solution is to add $event.stopPropagation(); on popup div.
HTML
<p ng-click="openPopUP()">openPopUp</p>
<div ng-show="popup" ng-click="$event.stopPropagation();">
<p>helo</p>
<p ng-click="closePopUp()">Close</p>
</div>
JS
angular.element(document.body).on('click', function() {
$scope.$apply(function() {
$scope.closePopUp();
});
});
$scope.openPopUP = function(){
$scope.popup = true;
}
$scope.closePopUp= function(){
$scope.popup = false;
}

how to stop setInterval() on slidetoggle() then restart again?

I have looked at all the other answers similiar to this question but i can't make them fit my scenario.
i have a page that has a sidebar that contains 15 results that auto refreshes, which is fine.
There is a link that loads up an external page into a div with an overlay. then this new div with the FULL list of the results also auto refreshes whilst its open. (don't want both divs auto-refreshing in background uneccesarily)
in this full list div each result has a jquery slideToggle() function to display more information.
what i am TRYING(and failing) to do is make the auto refresh stop whilst this slideToggle is displaying information, cos otherwise when the page refreshes it goes back to display:none.
here is my latest attempt:
html
main page has div to load into...
<div id="full_list"> loading... </div>
external page with the full list
<div class="events_list"> <!--container for events -->
<ul><li>
<div class="full_event"> <!--each event in a list-->
#1<b> 500 m race </b> <!--this bit always seen -->
<div class="event_slide"> <!--this div is slideToggled() -->
<b>500m race </b><br>
<div class="evntdescription">
run 500mrun 500mrun 500mrun 500mrun 500mrun 500m
</div>
</div>
</div>
</li></ul>
</div>
now my attempted javascript
var refreshData;
var infodisplay = $('.event_slide').css('display');
function autoRefresh () {
if(infodisplay == 'none')
{
refreshData = setInterval(function() {
$('#full_list').load('eventlist.php');
}, 1000);
}
else
{
clearInterval(refreshData);
}
};
$("#view_events").click(function(){ //this opens up the div //
overlay.fadeIn(1000).appendTo(document.body);
$('#full_list').load('eventlist.php'); //loads external page//
$('#full_list').fadeIn(800, function() {
autoRefresh (); //start the auto refresh/
$("body").on("click",".full_event", function(e){
$(this).children('div.event_slide').slideToggle(300, function() {
autoRefresh (); //thought it might work if i add the function
//here as well //
});
});
});
$("body").on("click","#close", function(e){ //closes div//
overlay.fadeOut(300);
$("#full_list").fadeOut(300);
});
return false;
});
basically it doesnt do anything. i have made it work if i get rid of the second autoRefresh function, but it won't stop the function from going. just keeps on refreshing, also not sure how to stop the refresh when i close the div aswell.
let me know if you need more info.
thanx!
Try clearing the interval when the asynchronous loading has completed:
function autoRefresh () {
refreshData = setInterval(function() {
$('#full_list').load('eventlist.php', function() {
clearInterval(refreshData);
});
}, 1000); };
ok so i figured it out anyway. thanx for trying if you did tho.
put the if statement into a function after toggle is completed.
only downside is if it refreshes at same time that its still 'toggling' it will refresh. it won't clear the interval untill the toggle has completed. no idea how to get round that.
changed the code to this:
var refreshData;
function autoRefresh() {
refreshData = setInterval(function() {
$('#full_list').load('eventlist.php');
}, 10000);
};
$("#view_events").click(function(){ //this opens up the div //
overlay.fadeIn(1000).appendTo(document.body);
$('#full_list').load('eventlist.php'); //loads external page//
$('#full_list').fadeIn(800, function() {
autoRefresh (); //start the auto refresh/
$("body").on("click",".full_event", function(e){
$(this).children('div.event_slide').slideToggle(300, function() {
if($(this).css('display') == 'none')
{$('#full_list').load('eventlist.php');
autoRefresh();
}
else
{
clearInterval(refreshData);
};
});
});
});
$("body").on("click","#close", function(e){ //closes div//
overlay.fadeOut(300);
$("#full_list").fadeOut(300);
});
return false;
});

Categories