I've created a modal service within my Angular app that I can inject into controllers or directives. I'm running into a problem where after opening/closing a modal multiple times, everything within the modal stops workings. The modal works by grabbing content from a hidden div on the page and popping it into the modal. I've been able to determine that at some point, the value of modal.settings changes. If I insert a debugger at the beginning of my modal.open function and save the value of var x = settings in my console, I can see that after a few cycles, x !== settings. I've also tried comparing modal.settings, but the same thing happens. Eventually, after a few cycles, modal.settings changes and things stop working.
I think I need to refactor this service, but I'm not sure where to start and could use some guidance.
Here is the service code:
app.service('modal', ['$compile', function($compile) {
var modal = this;
modal.settings;
modal.contents;
modal.overlay = $('<div id="overlay"></div>');
modal.modal = $('<div id="modal"></div>');
modal.content = $('<div id="content"></div>');
modal.closeBtn = $('<div id="close"><i class="fa fa-times"></div>');
modal.modal.hide();
modal.overlay.hide();
modal.modal.append(modal.content, modal.closeBtn);
$(document).ready(function(){
$('body').append(modal.overlay, modal.modal);
});
modal.open = function (settings) {
if(!modal.settings) {
modal.settings = settings;
}
modal.content.empty().append(modal.settings.content);
if(modal.settings.class) modal.modal.addClass(modal.settings.class);
if(modal.settings.height) modal.modal.css({ height: modal.settings.height });
if(modal.settings.width) modal.modal.css({ width: modal.settings.width });
if(modal.settings.content_height) modal.modal.css({ height: modal.settings.content_height });
if(modal.settings.content_width) modal.modal.css({ width: modal.settings.content_width });
if(modal.settings.fitToWindow) {
modal.settings.width = $(window).width() - 160;
modal.settings.height = $(window).height() - 160;
};
center(modal.settings.top);
$(window).bind('resize.modal', center);
modal.modal.show();
modal.overlay.show();
$(modal.closeBtn).add(modal.overlay).on('click', function(e) {
e.stopPropagation();
modal.close();
});
$(document).on('keyup', function(e) {
if (e.keyCode == 27) {
modal.close();
$(document).unbind('keyup');
}
})
};
modal.close = function() {
debugger;
modal.settings.elem.empty().append(modal.settings.content);
modal.modal.hide();
modal.overlay.hide();
modal.content.empty();
$(window).unbind('resize.modal');
};
function center(top) {
if(!top || !isInt(top)) top = 130;
var mLeft = -1 * modal.modal.width() / 2;
modal.modal.css({
top: top + 'px',
left: '50%',
marginLeft: mLeft
});
function isInt(n) {
return n % 1 === 0;
}
}
}]);
Here is how the modal is opened from the controller or directive:
modal.open({
content: $('#edit_story_' + story.id),
elem: $('#edit_story_' + story.id + '_container')
});
I also tried running my elem through the compiler first like so:
modal.open({
content: $compile($('#edit_story_' + story.id))($scope),
elem: $('#edit_story_' + story.id + '_container')
});
That solved my initial problem, but now after a few cycles my modal contents are duplicated. I get one form stacked upon another.
You shouldn't use DOM elements in controllers. A good idea would be implement a service following this approach or to make something like this. http://ionicframework.com/docs/api/service/$ionicModal/
Related
I manage a site that I did not build. The site features some links, where you can click the link, and a modal window opens with content from a different html file. It used to work, and now it doesn't.
I have compared all the relevant files between now and when I took over the site, but do not see any changes that would have affected this.
The popup windows are called thusly:
<?php bioLinkText('Daniel Jones', 'Read more about Dr. Jones'); ?></p>
The page it should open is /bios/daniel-jones.html
From the functions.php file:
function bioLinkText($name,$text) {
$name = strtolower(str_replace(" ","-",$name));
echo ''.$text.'';}
This part functions OK. But it used to create a modal window, and now, it just opens the link like a regular link.
From the global.js file:
// AJAX Popups
function popUp(page,randId) {
$('body').append(
'<div id="'+randId+'" class="pWin" style="display:none;position:fixed">'+
'<span class="pHead">'+
'Open in new window'+
'<span class="pClose">X</span>'+
'</span>'+
'<div class="pBod"></div>'+
'</div>'
);
var top = (h/2) - 150;
var left = (w/2) - 300;
$('#'+randId+'.pWin').addClass('large').css({top:top+'px',left:left+'px'});
$('#'+randId+' .pBod').html('<img src="/images/loading.gif" alt="loading"/>').load(page+' #content', function() {
$('.pWin').show(300);
$('.pBod #content').find('img').filter('#portrait').attr('src', function(index, src) {
return '/bios/' + src;
});
});
}
$('.popUp').click(function() {
var randId = randomString();
var num = $('.pWin').length;
if (num < 5) {
var page = $(this).attr('href');
popUp(page,randId);
$('#'+randId+'.pWin').draggable({handle:'.pHead'}).resizable({alsoResize:'#'+randId+' .pBod', minWidth: 320, minHeight: 280, maxWidth: 800, maxHeight: 600});
}
return false;
});
function pClose(btn) {
var pWin = btn.closest('.pWin');
pWin.hide(200, function() { pWin.remove(); });
}
$('.pClose').live('click',function() {
var btn = $(this);
pClose(btn);
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$('.pWin').hide(200, function() { $('.pWin').remove(); });
}
});
From the style.css file:
.popUp, .pHead a { padding-right: 16px; background: url(/images/external.gif) 100% 50% no-repeat; }
.popUp.noBg { background:none; padding-right:0; }
I have been trying to figure this out for 10+ hours. Any help would be greatly appreciated. The one thing is...I don't understand how the javascript function popUp would be invoked. Is that the missing ingredient?
Try this:
//Make sure the DOM is ready (If you call this function before '.popUp' exists, it wont be matched, and the '.click' handler wont be added.
$(document).ready(function() {
$('.popUp').click(function(e) {
//Prevent the default action (Clicking the button)
e.preventDefault();
//..Your code here
});
});
Well, I figured it out. I changed the function, adding an onclick="popup()" property to the a href, and now it works:
function bioLinkText($name,$text) {
$name = strtolower(str_replace(" ","-",$name));
echo ''.$text.'';
}
I have small angular SPA with couple routes. What I wanted is to have fadein effect only on #/welcome/ page. My jquery works ok but the problem is - its running on all pages and in another pages elements what should be animated just doesnt exist and thats the reason I have errors on my console when user scroll... I tried run script only when route changed and than check if location is /#/welcome but it always running even if not... I tried to put code only to controller which should scoped it to section with animating elements but it also run in another pages... Im confused please help
$scope.$on('$routeChangeSuccess', function() {
if (window.location.hash == '#/welcome') {
function check(element , fadeEffect ) {
$(window).on('scroll' , function(){
var position = $(document).scrollTop() + $(window).innerHeight() ;
var elem = $(element).offset().top + ($(element).innerHeight()) / 2;
if (elem <= position) {
$(element).addClass(fadeEffect);
}
else {
$(element).removeClass(fadeEffect);
}
});
}
check('.tablet' , 'fadeInRight');
check('.padding' , 'fadeInLeft');
}
else {
console.log('another page');
}
});
Your app is SPA, so once you add event to window it will keep until you close the browser tab.
You have to remove the event on destroying welcome page, so remove all those codes and add these to your welcome page controller:
//in welcome page controller
var onScroll = function(){
var queries = [
{elm: '.tablet', effect: 'fadeInRight'},
{elm: '.padding', effect: 'fadeInLeft'}
];
for (var i=0, j=queries.length; i<j; i++) {
var position = $(document).scrollTop() + $(window).innerHeight() ;
var elem = $(queries[i].elm).offset().top + ($(queries[i].elm).innerHeight()) / 2;
if (elem <= position) {
$(queries[i].elm).addClass(queries[i].effect);
}
else {
$(queries[i].elm).removeClass(queries[i].effect);
}
}
}
$(window).on('scroll' , onScroll);
$scope.$on('$destroy', function() {
$(window).off('scroll' , onScroll);
});
I am trying to combine these two functions into one. I know there has to be a really simple way to do it, but everything I have tried so far has not worked. Essentially there are two icons and two menus. When you click one icon a menu either drops down (or raises) depending on the state they are in. Everything after the variables is the same, so it seems to make sense to consolidate them into one shared function. Any help would be greatly appreciated. Thanks!
$(function(){
///Manage Icon 1
$('.ecGlobalNavStudentIcon').click(function(e){
var n = 'hideme'
var m = $('#ecGlobalNavStudentPanel')
var p = $('#ecGlobalNavStaffPanel')
e.preventDefault(); //just prevent the default behavior of the hyperlink
if(m.hasClass(n)) {
console.log($(m).attr('id') + " Has 'hideme' gonna open up");
$(m).show().removeClass(n);
$(m).animate({
height:'49px'
},
500, // Duration
function() { // Callback when the animation is finished
console.log($(m).attr('id') + " Opened!");
});
} else {
console.log($(m).attr('id') + " didn't have 'hideme' gonna try and
close. ");
$(m).animate({
height:'0px'
},
500, // Duration
function() { // Callback when the animation is finished
$(m).hide().addClass(n);
console.log($(m).attr('id') + " Closed!");
});
}
if(!$(p).hasClass(n)) {//open
console.log($(p).attr('id') + " panel open! Gonna close.");
$(p).animate({//close
height:'0px'
},//close
500, // Duration
function() { // Callback when the animation is finished /open
console.log($(p).attr('id') + " Closed by animation!");
$(p).hide().addClass(n);
});//close
}
});
///Manage Icon 2
$('.ecGlobalNavStaffIcon').click(function(e){
var n = 'hideme'
var m = $('#ecGlobalNavStaffPanel')
var p = $('#ecGlobalNavStudentPanel')
e.preventDefault(); //just prevent the default behavior of the hyperlink
if (m.hasClass(n)) {
console.log($(m).attr('id') + " Has 'hideme' gonna open up");
$(m).show().removeClass(n);
$(m).animate({
height: '49px'
},
500, // Duration
function () { // Callback when the animation is finished
console.log($(m).attr('id') + " Opened!");
});
} else {
console.log($(m).attr('id') + " didn't have 'hideme' gonna try and close. ");
$(m).animate({
height: '0px'
},
500, // Duration
function () { // Callback when the animation is finished
$(m).hide().addClass(n);
console.log($(m).attr('id') + " Closed!");
});
}
if (!$(p).hasClass(n)) {//open
console.log($(p).attr('id') + " panel open! Gonna close.");
$(p).animate({//close
height: '0px'
},//close
500, // Duration
function () { // Callback when the animation is finished /open
console.log($(p).attr('id') + " Closed by animation!");
$(p).hide().addClass(n);
});//close
}
});
});
If you want to handle same event for multiple selectors, use the selectors as comma separated.. In your case
$('.ecGlobalNavStudentIcon, .ecGlobalNavStaffIcon').click(function(){
//Your common event handler
});
Always remember, repeating code is evil, a sign of some mistake you've made. And you have done a great job finding it :) Happy coding
It is always good to separate DOM event handling and actual logic.
icon1 click and icon2 click triggers event A
on event A do action A'
consider this example:
$(body).on('togglePanels.my', function (e, activePanel ) {
var panels = $('.panels')
panels.removeClass(cssClass)
activePanel.addClass(cssClass)
})
$(body).on('click','.panelHeader' function(e) {
var $this= $(this)
, panel = $('#' + $this.data('target'))
$(body).trigger('togglePanels.my', [panel])
})
This is pretty much all code you need for accordion you are building, with exception of animation effects
Notice that it requires you to slightly change markup:
common .panel class added for panels
another one .panelHeader for icons
icon has data-target attribute with ID of panel to open.
instead of hide-me class to hide panel, cssClass should hold name of css class to open active one
example markup:
<div>
<i class="panelHeader ecGlobalNavStudentIcon"
data-target="ecGlobalNavStudentPanel">Student</i>
<i class="panelHeader ecGlobalNavStuffIcon"
data-target="ecGlobalNavStaffPanel">Stuff</i>
</div>
<div id='ecGlobalNavStudentPanel'
class="panel ecGlobalNavStudentPanel">...</div>
<div id='ecGlobalNavStaffPanel'
class="panel ecGlobalNavStaffPanel">...</div>
Something like this would work:
$('.ecGlobalNavStudentIcon, .ecGlobalNavStaffIcon').click(function(e){
var n = 'hideme'
var m = $(e.target).hasClass('ecGlobalNavStudentIcon') ? $('#ecGlobalNavStudentPanel') : $('#ecGlobalNavStaffPanel');
var p = $(e.target).hasClass('ecGlobalNavStudentIcon') ? $('#ecGlobalNavStaffPanel') : $('#ecGlobalNavStudentPanel');
$('.ecGlobalNavStaffIcon, ecGlobalNavStaffIcon').click(function(e){
var n = 'hideme';
if this.hasClass('ecGlobalNavStaffIcon'){
var m = $('#ecGlobalNavStudentPanel')
var p = $('#ecGlobalNavStaffPanel')
}
else {
var m = $('#ecGlobalNavStaffPanel')
var p = $('#ecGlobalNavStudentPanel')
}
...
}
if you need, just apply a param and then use the same code (example: $('#'+myParamToSelect).function()
I am using this script from: http://pop.seaofclouds.com/
The problem is if you call the script multiple times it causes a cascading effect of a pop-out within a pop-out for as many times as you call the script.
I'm trying to figure out how to prevent it from executing when the popout has already been set. Here's the script:
//
// pop! for jQuery
// v0.2 requires jQuery v1.2 or later
//
// Licensed under the MIT:
// http://www.opensource.org/licenses/mit-license.php
//
// Copyright 2007,2008 SEAOFCLOUDS [http://seaofclouds.com]
//
(function($) {
$.pop = function(options){
// inject html wrapper
function initpops (){
$(".pop").each(function() {
var pop_classes = $(this).attr("class");
if ( $(this).find('.pop_menu').length) {
// do nothing
} else {
$(this).addClass("pop_menu");
$(this).wrap("<div class='"+pop_classes+"'></div>");
$(".pop_menu").attr("class", "pop_menu");
$(this).before(" \
<div class='pop_toggle'></div> \
");
}
});
}
initpops();
// assign reverse z-indexes to each pop
var totalpops = $(".pop").length + 100;
$(".pop").each(function(i) {
var popzindex = totalpops - i;
$(this).css({ zIndex: popzindex });
});
// close pops if user clicks outside of pop
activePop = null;
function closeInactivePop() {
$(".pop").each(function (i) {
if ($(this).hasClass('active') && i!=activePop) {
$(this).removeClass('active');
}
});
return false;
}
$(".pop").mouseover(function() { activePop = $(".pop").index(this); });
$(".pop").mouseout(function() { activePop = null; });
$("body").on("click", ".pop", function(){
closeInactivePop();
});
// toggle that pop
$("body").on("click", ".pop_toggle", function(){
$(this).parent(".pop").toggleClass("active");
});
}
})(jQuery);
now when i load this script on an ajax call the new pop-out menus work but the old ones do not react to the onclick event.
You shouldn't mess with the plugin. It works exactly like it should.
Better show us how you call this on elements that you already have.
Also I don't like this plugin. Better use something from JqueryUI
You can do such thing in much easier way.
[edit]
I tried your first code (the plugin) and it works correctly for me.
[edit]
OK. I get it. You call $.pop(); multiple times. You shouldn't! Calling $.pop(); will pin up the drop down menu to all elements that has class="pop". This is the reason why you have such funny stack.
Just use $.pop(); once.
Plugin doesn't give ability to connect NEW elements that was dynamically created on the page.
Removed pop from ajax call and just called this on success:
$(".pop").each(function() {
var pop_classes = $(this).attr("class");
if ( $(this).find('.pop_menu').length) {
// do nothing
} else {
$(this).addClass("pop_menu");
$(this).wrap("<div class='"+pop_classes+"'></div>");
$(".pop_menu").attr("class", "pop_menu");
$(this).before(" \
<div class='pop_toggle'></div> \
");
}
});
// assign reverse z-indexes to each pop
var totalpops = $(".pop").length + 100;
$(".pop").each(function(i) {
var popzindex = totalpops - i;
$(this).css({ zIndex: popzindex });
});
// close pops if user clicks outside of pop
activePop = null;
function closeInactivePop() {
$(".pop").each(function (i) {
if ($(this).hasClass('active') && i!=activePop) {
$(this).removeClass('active');
}
});
return false;
}
$(".pop").mouseover(function() { activePop = $(".pop").index(this); });
$(".pop").mouseout(function() { activePop = null; });
I have a lightbox with jwplayer inside of it and i also have links along with it, problem is that when I click one of the links it closes the light box and never goes to the link, almost as if there is a eventprevent function on the light box when there isnt... Any how this is my code I apprecaite any help I can get to to fixing this problem.
Thanks
jQuery.fn.center = function () {
this.css("position","fixed");
this.css("top", ( $(window).height() - this.outerHeight() ) / 2 + "px");
this.css("left", ( $(window).width() - this.outerWidth() ) / 2 + "px");
return this;
}
jQuery.jwbox = {
lightbox : null,
player : null,
toggle : function(context) {
if (!$.jwbox.lightbox) {
$.jwbox.lightbox = $(".jwbox_hidden", context);
$.jwbox.center();
$("#jwbox_background").fadeIn("fast");
$.jwbox.lightbox.css("display","block")
$.jwbox.center();
$("#jwbox_background").fadeTo(0, 0.8);
$("object", context).each(function(){
$.jwbox.player = document.getElementById(this.id);
});
} else if ((context.className == 'jwbox_content')) {
} else {
try {
$.jwbox.player.sendEvent("STOP");
$.jwbox.player = null;
} catch (err) {
}
$.jwbox.lightbox.css("display","none");
$.jwbox.lightbox = null;
$("#jwbox_background").fadeOut("fast");
}
},
center : function() {
if ($.jwbox.lightbox) {
$.jwbox.lightbox.center();
}
}
}
$(document).ready(function () {
$("body").append('<div id="jwbox_background"> </div>');
$(".jwbox").click(function () {$.jwbox.toggle(this); return false;});
$("#jwbox_background").click(function () {$.jwbox.toggle(this); return false;});
$(window).resize(function() {$.jwbox.center();});
});
I ran into a similar issue. I resolved it by switching to jQuery colorbox. See: http://jacklmoore.com/colorbox/#setting-overlayclose
Solution :
Use jquery.lightbox-0.5 file from the download package
Then in this file search for
// Assigning click events in elements to close overlay
$('#jquery-overlay,#jquery-lightbox').click(function() {
_finish();
});
and remove it all.