Dialogs are generated with JSTL foreach tag.
The first time I try to open dialog (any of them), it opens normally, but the second time I try to open it, the background turns grey and is inaccessible due to dialog being modal, but dialog window is not shown.
There are a lot of questions with this problem and I read through a lot of them, but as far as I understand, none of them describes this situation.
This is my HTML:
<button id="buttonAddTask${category.id}" class="buttonAddTask">Add Task</button>
...
<div id="dialog${category.id}" title="Create new task" class="task-dialog">
<form:form id="taskForm${category.id}"
action="${contextPath}/someAction"
method="POST" modelAttribute="someAttribute">
<fieldset>
<form:input type="text" path="taskName" id="taskName"
class="text ui-widget-content ui-corner-all" />
<form:textarea rows="4" path="taskDescription"
id="taskDescription" name="taskDescription"
class="text ui-widget-content ui-corner-all">
</form:textarea>
</fieldset>
</form:form>
</div>
This is my js code:
$(function() {
var form;
var taskDialog = $(".task-dialog");
var buttonAddTask = $(".buttonAddTask");
taskDialog.dialog({
autoOpen : false,
height : 500,
width : 415,
modal : true,
buttons : {
"Create task" : addTask,
Cancel : function() {
taskDialog.dialog("close");
}
},
close : function() {
var form = $(this).find("form")[0].reset();
allFields.removeClass("ui-state-error");
}
});
function addTask() {
var thisId = $(this).attr("id").substring(6, 106);
$("#taskForm" + thisId).submit();
return true;
}
buttonAddTask.on("click", function() {
var thisId = $(this).attr("id");
var idNumber = thisId.substring(13, 14);
$("#dialog" + idNumber).dialog("open");
});
});
I open dialog with .dialog("open"), and close it after. Dialog is accessed via id selector, so it should be accassible after it is moved to the end of body tag. What am I doing wrong or what do I have to do to show dialog second time?
I'm using jQuery 2.1.1 and jQuery-ui 1.11.2.
I got it after a while.
This was copy/paste from some example, and it was modified to suit my needs. The trick was to remove undeclared variable "allFields" in close function.
Line to remove:
allFields.removeClass("ui-state-error");
If you have similar problem, check your close function for undeclared varibles, and remove them.
Related
I am currently working on an intranet solution for my company written in PHP using the Laravel framework, this requires me to do a lot of new things I have never done before, 1 of these is creating a popup that has dynamic html depending on a drop down list such as this:
I have a calendar (http://fullcalendar.io/)
When I click on a day in this calendar a popup should show that looks something like this:
After selecting a value from that dropdown list a different set of fields should be shown depending on the value selected for example:
OR
So I really need a lot of control over the popup, I have no previous experience with working with popups (unless a simple alert of a variable in javascript counts) and I need a whole deal of functionality, it also needs to be able to post to a database so I think it might even have to be a form element. I also need to be able to fire the popup from the onclick event from the fields in my calendar so that makes it extra hard for someone who has always written back end code up until now.
SO WHAT IS YOUR QUESTION?
Could anyone tell me what the easiest/fastest way to achieve this is without losing any functionality necessities, can I do this from php, does a feature like this exist in the Laravel framework?(if it does I coudldn't find it) or do I have to start using something like jquery?
I found a bunch of libraries such as Fancybox that claim to be able to do this but I can't make head nor tail out of their usage guide.
For everyone who thinks this doesn't belong here: my only question is not "Is it Possible?" I am also asking how do I do it, what do I write in my html, javascript, php to make it work?
EDIT: I just read something about jquery dialogs that seems interesting, seems like you can use jquery dialogs to create a popup from a form you have in your html (form is hidden) but I can't seem to get the code to fire off the popup (dialog) to work so far I have this:
$(document).ready(function() {
$('#calendar').fullCalendar({
//calendar options here
dayClick: function(date, jsEvent, view) {
//to get date use date.format());
//POPUPCODE START
$("#logform").dialog({ //Shows dialog
height: 250,
width: 450,
modal: true,
buttons: {
"Cancel": function() {
$( this ).dialog( "close" );
},
"Save": function() {
$.ajax({
url: "/url/to/submit", //
timeout: 30000,
type: "POST",
data: $('#modalform').serialize(),
dataType: 'json',
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("An error has occurred making the request: " + errorThrown)
},
success: function(data){
//Do stuff here on success such as modal info
$( this ).dialog( "close" );
}
}
}
}
}),
//POPUPCODE END
var myCalendar = $('#calendar');
myCalendar.fullCalendar();
var myEvent = {
title:"Work 7.6h",
allDay: true,
start: date,
end: date
};
myCalendar.fullCalendar( 'renderEvent', myEvent,true );
},
eventClick: function(calEvent, jsEvent, view) {
var myCalendar = $('#calendar');
myCalendar.fullCalendar('removeEvents',calEvent._id);
}
})
});
And for my html I have:
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">Calendar</div>
<div class="panel-body">
<div id='calendar'></div>
<a class='iframe' href='home.blade.php'>Click me</a>
</div>
<form id="logform" style="display:none">
<input type="text" name="something">
<input type="text" name="somethingelse">
</form>
</div>
</div>
</div>
</div>
The trouble started only after adding the code between //popupcode start and //popupcode end now my calendar won't even show and I get
SyntaxError: missing ) after argument list
The place it is pointing at is the 3rd line above my //popupcode end here:
}
}
} //this one
}
}),
//POPUPCODE END
But no matter what I add or remove there I keep getting the same error
I figured it out myself, instead of making things harder by learning all kinds of new things I got it to work by removing all the code I added previously and adding 1 line of code to create the popup by using jquery.
I removed all the code that I was using to create the popup and replaced it by this: $("#somediv").load().dialog({modal:true});
I created a div called 'somediv' around my form and now it's doing what I need it to do, seeing as my entire form is in the popup now I'm pretty sure I can add a button to it that can submit the form so I can catch that with php and then I'll be able to do whatever I want with the data in php (post to database or return error messages etc...)
Ok, first of all, i recommend to use Javascript.
It's possible with only PHP, HTML and CSS but you will have to refresh the page all the time for the next popup to appear.
You can just make divs that are positioned fixed or absolute and they will overlay the underlaying content. The overlaying div(popup) will be a normal div where you can make forms and whatever you want.
Here is a quick jsfiddle I threw toghether:
http://jsfiddle.net/0zvqm5nr/17/
Here is the code:
HTML
<div class="calendar">
<h1>Your calendar would be here</h1>
<button id="popupButton">13.05.2015</button>
</div>
<div class="popup">
<h2>13.05.2015</h2>
Activity:
<form action="site.php" method="post">
<select id="activity">
<option class="placeholder" selected disabled>Select</option>
<option>work</option>
<option>youth leave</option>
</select>
</form>
</div>
<div class="popup">
<h3>Work 13.05.2015</h3>
this will be the work popup
</div>
<div class="popup">
<h3>Youth leave 13.05.2015</h3>
this will be the youth leave popup
</div>
CSS
.calendar {
width: 500px;
height: 500px;
background: green;
}
.popup {
width: 500px;
height: 500px;
background: grey;
display: none;
position: fixed;
top: 0;
left: 0;
}
Javascript
document.getElementById("popupButton").onclick = function() {
document.getElementsByClassName("popup")[0].style.display = "block"
}
document.getElementById("activity").onchange = function() {
document.getElementsByClassName("popup")[0].style.display = "none"
var selectedValue = this.options[this.selectedIndex].innerHTML;
if (selectedValue == "work") {
document.getElementsByClassName("popup")[1].style.display = "block";
}
if (selectedValue == "youth leave") {
document.getElementsByClassName("popup")[2].style.display = "block";
}
}
I hope this helped.
I have tried to create a new modal window.But it shows an address bar and title is shown as about:blank.The code is shown # http://jsfiddle.net/visibleinvisibly/vhudmz5u/
<button id="mydiv" onclick="myFunction( )"> The content</button>
<script>
function myFunction() {
var childWin = window.open ("about:blank", "MyWindow", "height=150,width=200");
childWin.document.body.innerHTML = "<span style='color:red'>Hello World!</span>";
}
</script>
I guess in IE11 we cant hide the addressbar.Please let me know if you have any idea as to how to set the title for the modal popup..
Thanks in advance
Alex
If you want total control over the modal window, it may be a better idea to create your own. The idea is to create a div (the 'modal window' box) and a greyed out background layer between your page and the created div. This jsFiddle provides some code for that. It uses jQuery. The central function is:
function createModalBox(html,useCloser){
var box = $('#modalbox').length
? $('#modalbox')
: $('<div id="modalbox"></div>').appendTo('body');
var back = $('#modalback').length
? $('#modalback')
: $('<div id="modalback"/>').appendTo('body');
box.html(html);
if (useCloser){
$('<div id="modalclose" class="closer"/>').appendTo(box).show();
}
back.show();
setTimeout(function(){box.fadeIn(); center(box[0]);},100);
if (!back.attr('data-handled')){
var f = function(){
$('#modalback, #modalbox').fadeOut();
$('#modalbox').remove();
};
$('body').on('click','#modalclose',f);
back.attr('data-handled', true);
}
}
I want to display a AUI / YUI DatePicker (Tutorial) that only gets activated by a click on a corresponding icon, not on focus or click events as normal.
var AUI = YUI;
AUI().use('event', 'aui-datepicker', function(A) {
function createCalendar(calendarInputBox) {
var datumInputField = calendarInputBox.one('input.calendar');
var datumInputFieldSelector = '#' + datumInputField.get('id').replace(/:/g, '\\:');
var datepickerIcon = calendarInputBox.one('.calendarInputIcon');
var datepicker = new A.DatePicker({
container : datumInputFieldSelector,
mask : '%d.%m.%Y',
calendar : {
firstDayOfWeek : 1,
},
popover : {
zIndex : 1,
}
});
function updateDatepickerFromInputAndShowDatepicker() {
datumInputField.focus();
datepicker.show();
}
datepickerIcon.on('click', updateDatepickerFromInputAndShowDatepicker);
}
A.all('.calendarInputBox').each(createCalendar);
});
<link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>
<span class="calendarInputBox" id="generated-0">
<span class="calendarInputIcon">icon</span>
<input id="generated-1" name="generated-2:form:from" type="text" value="" maxlength="10" class="calendar calendarFrom" />
</span>
I tried to use
the icon as the container and read and write the date manually and the popup didn't appear any more
e.preventDefault() and e.stopPropagation() for focus and click events on the input, but it didn't supress the calender to be shown
It doesn't seem to be possible to connect the Datepicker with the input but seperate the showing/hiding from the usage of the input. Any ideas?
This is all inside a JSF 2.1 Portlet in Liferay 6.2, if it matters, the input is build by:
<span class="calendarInputBox">
<div class="calendarInputIcon"></div>
<h:inputText id="from" value="#{searchData.from}" maxlength="10" styleClass="calendar calendarFrom">
<f:convertDateTime pattern="dd.MM.yyyy" />
</h:inputText>
</span>
Unless I'm mistaken, it sounds like you want the icon to be the trigger for the DatePicker and you want it to update the input. If so, the following code should do the trick:
var AUI = YUI;
AUI().use('aui-datepicker', function(A) {
var input = A.one('#input');
var datePicker = new A.DatePicker({
trigger: '#div',
calendar: {
on: {
dateClick: function(event) {
input.set('value', A.Date.format(event.date,{format:datePicker.get('mask')}));
}
}
}
});
});
<script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script>
<link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link>
<input id="input" /><div id="div" class="icon-calendar">Click Me to Pop Up Calendar</div>
Side note: if you wanted the input to update the the DatePicker you could probably do something like what I'm doing in my initDatePickerShowOnButton method.
Also, the end result of this code looks very similar to the Liferay Faces Alloy <alloy:inputDate showOn="button" /> component (which uses the AlloyUI DatePicker). So you may want to check that out and see if we've already solved your problem in a more JSF-ish way.
Full Disclosure: I am part of the Liferay Faces team, and I personnally wrote alloy:inputDate.
I'm in the midst of creating my first 'real' website and try to add some responsiveness to my layout and navigation: www.dknytkom.dk/forside/
I use alot of addClass and removeClass to menu items as well as toggling corresponding to the width of the browser window. So far so good.
Problem is that my search field disappears upon focus when view on my iPhone. I have a vague suspicion it is to do when my jquery commands that make it go away when the document width is changed. But really I'm at a loss.
Also the toggling of the menu items tends to go awire when clicking on the menu elements even though I conditioned them to wait for the document to load. Any suggestions?
I've tried to create a jsfiddle from where the full code can be inspected:
$(document).ready(function() {
var $introbrowserwidth= $(window).width();
$soeg = $('a.soege-knap');
$mobnav = $('a.mob-nav');
$soegelist = $('div#search-table') ;
$searchtable = $('#search-table') ;
$soegefelt = $('ul.menu-item-holder > #searchfield');
$menuknap = $('li a.menu-knap');
$menu = $('div.menu')
$menulist = $('.menu li')
$emneoversigt = $('#emneoversigt')
$emneoversigtlistitem = $('#emneoversigt li')
$('.mob-nav').css('cursor','pointer');
$temamenu = $('#tema-menu');
if ($introbrowserwidth <=480) {
$soegelist.addClass('displaynone');
$soegefelt.addClass('displaynone');
$('#menudiv').removeClass('displayblock').addClass('displaynone');
$('#menudiv > ul').addClass('background-colour7 zebra');
$('#menudiv a').addClass('displayblock');
}
else{
$menulist.removeClass('listitem').addClass('inlineblock');
$menu.removeClass('displaynone').addClass('displayblock');
$soegefelt.removeClass('displaynone').addClass('inlineblock');
};
$soeg.on("click",function(e) {
e.preventDefault();
$soegelist.toggleClass('displayblock');
$soegefelt.toggleClass('displayblock');
$emneoversigt.removeClass().addClass('displaynone');
$soeg.toggleClass('soege-knap-aktiv');
$('#menudiv').removeClass('displayblock').addClass('displaynone');
$('#menudiv > ul').removeClass('background-colour7 zebra');
$menuknap.removeClass('menu-knap-aktiv');
$('ul.menu-item-holder').toggleClass('expandheight');
});
$menuknap.on("click",function(e) {
e.preventDefault();
var $menutilstand = $(window).width();
$menulist.addClass('padding5');
$menuknap.toggleClass('menu-knap-aktiv');
$soeg.removeClass('soege-knap-aktiv');
$soegelist.removeClass().addClass('displaynone');
$('ul.menu-item-holder').removeClass('height expandheight')
$('#menudiv > ul').addClass('background-colour7 zebra');
if($soeg.hasClass('soege-knap-aktiv')) {
$soeg.removeClass('soege-knap-aktiv');
$('ul.menu-item-holder').removeClass('height expandheight');
};
if ( ($menutilstand <=480) && ($('#menudiv').hasClass('displaynone')) ) {
$('#menudiv').removeClass('displaynone').addClass('displayblock');
$($menulist).removeClass('displayblock').addClass('padding5 listitem');
$soegefelt.removeClass('displayblock');
} else { $('#menudiv').removeClass('displayblock').addClass('displaynone');}
if ($('ul#menu-item-holder').hasClass('expandheight')){
$('ul#menu-item-holder').removeClass('expandheight').addClass('height')
}
});
$('#indexbtn').on("click",function(e) {
$('#emneoversigt').toggleClass('displayblock');
e.preventDefault(); })
$( window ).resize(function()
{
var browserwidth= $(window).width();
$emneoversigt.removeClass('listitem').addClass('displaynone');
$('.menu').removeClass('padding5');
$emneoversigt.removeClass('displayblock').addClass('displaynone');
$menuknap.removeClass('menu-knap-aktiv');
$('*').removeClass('height expandheight')
$('#menudiv > ul').removeClass('background-colour7 zebra');
$soeg.removeClass('soege-knap-aktiv');
if(browserwidth <= 480 ) {
$soegefelt.addClass('displaynone');
$temamenu.addClass('displaynone');
$soegelist.removeClass('inlineblock displayblock').addClass('displaynone');
$menu.addClass('displaynone');
$menulist.removeClass('inlineblock').addClass('listitem');
$('ul.menu-item-holder').removeClass('height');
$menulist.removeClass('listitem displayblock').addClass('displaynone');
$('#menudiv').removeClass('displayblock');
$('ul#menu-item-holder').addClass('height');
}
else { $('li#searchfield').removeClass().addClass('inlineblock');
$soegelist.removeClass('displaynone').addClass('inlineblock');
$menu.addClass('displayblock'); $temamenu.removeClass('displaynone'); $menulist.removeClass('listitem stroke displayblock ').addClass('padding5 inlineblock');
$('ul.menu-item-holder').addClass('height');
}
})
});
This is the div with your search:
<div id="search-table">
<span>
<form id="soege_form" action="<?=$grundsti;?>sider/soegning.php" method="post">
<input name="portal_id" type="hidden" value="<?=$valgt_portal_id;?>" />
<input placeholder="Søg i alle artikler" name="soegeterm" border="none" id="soegeterm" type="text" size="30" maxlength="100" class="loginfelter venstrefloat boxshadow" />
<button id="submit" style="cursor: pointer;" class="sendknap venstrefloat button_bg">Søg</button>
</form>
</span>
</div>
This is where you assign the div to the variable:
$soegelist = $('div#search-table') ;
This line makes it dissapear:
if ($introbrowserwidth <=480) {
$soegelist.addClass('displaynone');
...
Found out that when typing in the input it affected the width of the document and thus activating my js-resize functions.
Strange thing that it only did so on iOS though.
The solution was to add an !$('input:focus').length to the conditions, meaning as long as someone is using any form input the conditions for toggling are not met.
Problem now though is: how to distinguish between wanted and unwanted doc resizing?
I'm creating a website and on one page of the site (it's .php) I have two links. The first reads register and the next reads login. I am using jquery to create a popup and which form pops up depend on the link clicked. (I am trying to do this but not able to). I have 2 files in total (logReg.php) and (popup.css).
When I click on login the login form pops up as expected, but when i click on register nothing pops up. And if I reverse these that if I put the jquery code for register first then... the register box pops up but the login doesn't. I have read the click() function's jquery API but it seems to me i'm doing everything right but obviously not. Any help would be greatly appreciated. BTW This code is not 100% mine I modified the code that I found for a single popup window.
Content of logReg.php
<html>
<head>
<!-- Typical stuff here. link to the popup.css & jquery.js -->
<title>MyPage</title>
<script type="text/javascript">
$(document).ready(function () {
$("a.login-window").click(function () {
//Getting the variable's value from a link
var loginBox = $(this).attr("href");
//fade in the popup
$(loginBox).fadeIn(300);
//set the center alignment padding
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Add the mask to body
$('body').append('<div id="mask"></div>');
$('mask').fadeIn(300);
return false;
});
//When clicking on the button close the pop closed
$('a.close, #mask').live('click', function() {
$('#mask, .login-popup').fadeOut(300, function() {
$('#mask').remove();
});
return false;
});
$("a.register-window").click(function () {
//Getting the variable's value from a link
var registerBox = $(this).attr("href");
//fade in the popup
$(registerBox).fadeIn(300);
//set the center alignment padding
var popMargTop = ($(registerBox).height() + 24) / 2;
var popMargLeft = ($(registerBox).width() + 24) / 2;
$(registerBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Add the mask to body
$('body').append('<div id="mask"></div>');
$('mask').fadeIn(300);
return false;
});
//When clicking on the button close the pop closed
$('a.close, #mask').live('click', function() {
$('#mask, .register-popup').fadeOut(300, function() {
$('#mask').remove();
});
return false;
});
});
</script>
</head>
<body>
<div id="links>
Login
Register
</div>
<div id="login-box" class="login-popup">
<form method="post" class="signin" action="">
<!-- All form stuff here -->
</form>
</div>
<div id="#register-box" class="register-popup">
<form method="post" class="signin" action="">
<!-- All form stuff here -->
</form>
</div>
</body>
</html>
first don't use .live, upgrade jquery and use
$(document.body).on({event:function(){},...},"selector"
second don't use append, use
$('<div../>').appendTo($(document.body));
(i believe your bug comes from second)
also you could make a plugin of your open box code, then you bind the two at once using.on
For starters you are missing a double quote on this line:
<div id="links>
change to
<div id="links">
That should get your links fixed.
Then you should do what mikakun said about upgrading jquery and using .on as it is best to stay current.