I do have a problem with clicking button to display popup.
In my layout.jspx, I have following:
<div class="menuBtn">
<div class="search">
<span></span>
</div>
</div>
</header>
<tiles:insertAttribute name="body" />
</div>
<!-- USERINFO POPUP -->
<div class="popup accDetail user" id="userPopup" style="display: none;">
<div class="userInfo">
<img src="${img_user}" width="60" height="60"></img>
<div>
<p class="department"><security:authentication property="securityUser.department"/></p>
<p class="name"><security:authentication property="securityUser.userName"/></p>
<p class="email"><security:authentication property="securityUser.email"/></p>
</div>
<div class="btn clear cen floatNone">
<a class='blank' href="${url_logout}">Log Out</a>
</div>
</div>
</div>
When a user clicks icon, it will display userPopup.
It actually works well in other page. (On top-right side of the page)
Then in one of my jsp, I do have following:
HTML
<div class="mainarea">
<div class="dataTitle">
<h2 class='h2Title'>Annual Leave</h2>
</div>
<div class="searchParentOne">
<div>
<input type="image" class="addNewLetter" src="/ias/resources/images/leave.png"
style="height:128px;width:256px;">
<p class="temp-test" style="display:none;"><security:authentication property='securityUser.fullName'/></p>
</div>
</div>
</div>
<div class="popup accDetail" id="letterDialog" title="Leave Application" style="display: none;">
<div class="popupmainarea">
<div class="clear bttn" id="divSmallDate">
<div class="bttn rig floatNone">
<button type="button" class="ui-lngbutton edit_ui selectLine">Line</button>
<button type="button" class="ui-button up_ui btnSendDoc" style="display:none;">Submit</button>
<button type="button" class="ui-button cancel_ui btnCancelCon">Close</button>
</div>
</div>
<form id="formAddNewDoc" enctype="multipart/form-data">
<div class="data">
<div>
<p align="center"><font size="6">Annual Leave</font></p>
</div>
<table class="custbltwo">
<colgroup>
<col style="width: 40%;">
<col style="width: 60%;">
</colgroup>
<tbody>
<tr>
<td class="tbHead">Document No.</td>
<td class="tbContent" style="border-style: solid hidden solid solid;"><p id="documentId">Mobile C&C Cambodia-XX-XXXX</p></td>
</tr>
<tr>
<td class="tbHead">Department</td>
<td class="tbContent" style="border-style: solid hidden solid solid;"><p></p>
<input type="hidden" name="docDepartment" id="docDepartment"/>
</td>
</tr>
<tr>
<td class="tbHead">Approval Date</td>
<td class="tbContent" style="border-style: solid hidden solid solid;"><p id="docDisplayDate" class="today"></p>
<input type="hidden" name="docHideCDate" id="docHideCDate"/>
</td>
</tr>
<tr>
<td class="tbHead">Writer</td>
<td class="tbContent" style="border-style: solid hidden solid solid;">
<p class="temp-test">
<security:authentication property='securityUser.fullName'/>
</p>
<input type="hidden" name="docEmployee" id="docEmployee" value="<security:authentication property="securityUser.fullName"/>"/>
</td>
</tr>
</tbody>
</table>
<table class="custblthree">
<colgroup>
<col style="width: 12%;">
<col style="width: 17.6%;">
<col style="width: 17.6%;">
<col style="width: 17.6%;">
<col style="width: 17.6%;">
<col style="width: 17.6%;">
</colgroup>
<tbody>
<tr>
<td class="tbHead" rowspan="2">Approval<strong class="required">*</strong>
<input type="hidden" name="docApproval" id="docApproval">
</td>
<td class="tbContent" align="center" id="clickclick1"><input type="text" readonly="readonly" name="docApp0" id="docApp0" style="border:0; text-align:center;"></td>
<td class="tbContent" align="center" id="clickclick2"><input type="text" readonly="readonly" name="docApp1" id="docApp1" style="border:0; text-align:center;"></td>
<td class="tbContent" align="center" id="clickclick3"><input type="text" readonly="readonly" name="docApp2" id="docApp2" style="border:0; text-align:center;"></td>
<td class="tbContent" align="center" id="clickclick4"><input type="text" readonly="readonly" name="docApp3" id="docApp3" style="border:0; text-align:center;"></td>
<td class="tbContent" align="center" id="clickclick5"><input type="text" readonly="readonly" name="docApp4" id="docApp4" style="border:0; text-align:center;"></td>
</tr>
<tr>
<td class="tbContentTwo" align="center" id="clickclick6"><img id="docAppNumImg0"></img></td>
<td class="tbContentTwo" align="center" id="clickclick7"><img id="docAppNumImg1"></img></td>
<td class="tbContentTwo" align="center" id="clickclick8"><img id="docAppNumImg2"></img></td>
<td class="tbContentTwo" align="center" id="clickclick9"><img id="docAppNumImg3"></img></td>
<td class="tbContentTwo" align="center" id="clickclick10"><img id="docAppNumImg4"></img>
<input type="hidden" readonly="readonly" name="docAppNum0" id="docAppNum0" value="0">
<input type="hidden" readonly="readonly" name="docAppNum1" id="docAppNum1" value="0">
<input type="hidden" readonly="readonly" name="docAppNum2" id="docAppNum2" value="0">
<input type="hidden" readonly="readonly" name="docAppNum3" id="docAppNum3" value="0">
<input type="hidden" readonly="readonly" name="docAppNum4" id="docAppNum4" value="0">
</td>
</tr>
<tr>
<td class="tbHead" rowspan="2">Agreement
<input type="hidden" name="docSettlement[]" id="docSettlement">
</td>
<td class="tbContent" align="center" id="clickclick11"><input type="text" readonly="readonly" name="docAgg0" id="docAgg0" style="border:0; text-align:center;"></td>
<td class="tbContent" align="center" id="clickclick12"><input type="text" readonly="readonly" name="docAgg1" id="docAgg1" style="border:0; text-align:center;"></td>
<td class="tbContent" align="center" id="clickclick13"><input type="text" readonly="readonly" name="docAgg2" id="docAgg2" style="border:0; text-align:center;"></td>
<td class="tbContent" align="center" id="clickclick14"><input type="text" readonly="readonly" name="docAgg3" id="docAgg3" style="border:0; text-align:center;"></td>
<td class="tbContent" align="center" id="clickclick15"><input type="text" readonly="readonly" name="docAgg4" id="docAgg4" style="border:0; text-align:center;"></td>
</tr>
<tr>
<td class="tbContentTwo" align="center" id="clickclick16"><img id="docAggNumImg0"></img></td>
<td class="tbContentTwo" align="center" id="clickclick17"><img id="docAggNumImg1"></img></td>
<td class="tbContentTwo" align="center" id="clickclick18"><img id="docAggNumImg2"></img></td>
<td class="tbContentTwo" align="center" id="clickclick19"><img id="docAggNumImg3"></img></td>
<td class="tbContentTwo" align="center" id="clickclick20"><img id="docAggNumImg4"></img>
<input type="hidden" readonly="readonly" name="docAggNum0" id="docAggNum0" value="0">
<input type="hidden" readonly="readonly" name="docAggNum1" id="docAggNum1" value="0">
<input type="hidden" readonly="readonly" name="docAggNum2" id="docAggNum2" value="0">
<input type="hidden" readonly="readonly" name="docAggNum3" id="docAggNum3" value="0">
<input type="hidden" readonly="readonly" name="docAggNum4" id="docAggNum4" value="0">
</td>
</tr>
</tbody>
</table>
<table class="custbleone">
<colgroup>
<col style="width: 10.8%;">
<col style="width: 14.5%;">
<col style="width: 4%;">
<col style="width: 14.5%;">
<col style="width: 56.2%;">
</colgroup>
<tbody>
<tr>
<td class="tbHead" style="border-style: hidden solid solid solid;">Reference</td>
<td class="tbContent" id="clickclick21" colspan="4" valign="middle" style="border-style: hidden solid solid solid;">
<input type="text" readonly="readonly" name="docReference[]" id="docReference" placeholder="Reference"></td>
</tr>
<tr>
<td class="tbHead">Implement<strong class="required">*</strong></td>
<td class="tbContent" colspan="4" valign="middle">
<input type="text" readonly="readonly" name="docEnforcement" id="docEnforcement" style="border:0;"value="<security:authentication property="securityUser.fullName"/>"/></td>
</tr>
<tr>
<td class="tbHead">Period<strong class="required">*</strong></td>
<td class="tbContent" valign="middle" style="border-style: solid hidden solid solid;"><input type="text" readonly="readonly" class='ihalf dateOne' id="sDate" name="sDate"
placeholder="2016-01-01" style="display:inline;"><input type="hidden" name="docStartDate" id="docStartDate"></td>
<td class="tbContent" style="border-style: solid hidden solid hidden;"><p class="ptilde" style="display:inline;">  ~</p></td>
<td class="tbContent" valign="middle" style="border-style: solid hidden solid hidden;"><input type="text" readonly="readonly" class='ihalf dateTwo' id="eDate" name="eDate" placeholder="2016-01-01" style="display:inline;">
<input type="hidden" name="docEndDate" id="docEndDate"></td>
<td class="tbContent" style="border-style: solid solid solid hidden;"></td>
</tr>
<tr>
<td class="tbHead" style="border-style: solid solid hidden solid;">Title<strong class="required">*</strong></td>
<td class="tbContent" valign="middle" colspan="4" style="border-style: solid solid hidden solid;"><input type="text" id="docTitle" name="docTitle" placeholder="Title" maxlength="80"/></td>
</tr>
</tbody>
</table>
<table class="custbleone">
<colgroup>
<col style="width: 20%;">
<col style="width: 20%;">
<col style="width: 20%;">
<col style="width: 20%;">
<col style="width: 20%;">
</colgroup>
<tbody>
<tr>
<td class="tbContent" style="text-align:center;">Annual Info Year</td>
<td class="tbContent" style="text-align:center;">Total Annual Leave</td>
<td class="tbContent" style="text-align:center;">Used Annual Leave</td>
<td class="tbContent" style="text-align:center;">Remain Annual Leave</td>
<td class="tbContent" style="text-align:center;">Request Annual Leave<strong class="required">*</strong></td>
</tr>
<tr>
<td class="tbContent"><input type="number" readonly="readonly" name="docAnnualYear" id="docAnnualYear" style="border:0; text-align:center;"></td>
<td class="tbContent"><input type="number" readonly="readonly" id="docTotalLeave" style="border:0; text-align:center;"></td>
<td class="tbContent"><input type="number" readonly="readonly" id="docUsedLeave" style="border:0; text-align:center;"></td>
<td class="tbContent"><input type="number" readonly="readonly" name="docRemainLeave" id="docRemainLeave" style="border:0; text-align:center;"></td>
<td class="tbContent"><input type="number" name="docRequestLeave" id="docRequestLeave" step="0.5" style="text-align:center;"></td>
<!-- step attribute does not work -->
</tr>
</tbody>
</table>
<table class="custbleone">
<tbody>
<tr>
<td class="tbContentTwo" valign="top" style="border-style: hidden solid solid solid;">
<textarea class="ckeditor" id="docText" name="docText"></textarea></td>
</tr>
</tbody>
</table>
<table class="custbleone">
<colgroup>
<col style="width: 10%;">
<col style="width: 10%;">
<col style="width: 70%;">
<col style="width: 10%;">
</colgroup>
<tbody>
<tr>
<td class="tbContent" rowspan="3" valign="middle" style="border-style: hidden solid solid solid;">
Attachment</td>
<td class="tbContent" valign="middle" style="border-style: hidden solid solid solid;">
<input type="file" id="docFile1" name="docFile1" size="50" style="width:85px;"/></td>
<td class="tbContent" valign="middle" style="border-style: hidden solid solid hidden;">
<input type="text" readonly="readonly" id="test1" class="test1" style="border:0;"/></td>
<td class="tbContent" valign="middle" style="border-style: hidden solid solid hidden;">
<button type="button" id="clearDocFile1" style="display:none;">Delete</button></td>
</tr>
<tr>
<td class="tbContent" valign="middle" style="border-style: hidden solid hidden solid;">
<input type="file" id="docFile2" name="docFile2" size="50" style="display:none; width:85px;"/></td>
<td class="tbContent" valign="middle" style="border-style: hidden solid solid hidden;">
<input type="text" readonly="readonly" id="test2" class="test2" style="border:0;"/></td>
<td class="tbContent" valign="middle" style="border-style: hidden solid solid hidden;">
<button type="button" id="clearDocFile2" style="display:none;">Delete</button></td>
</tr>
<tr>
<td class="tbContent" valign="middle" style="border-style: hidden solid solid solid;">
<input type="file" id="docFile3" name="docFile3" size="50" style="display:none; width:85px;"/></td>
<td class="tbContent" valign="middle" style="border-style: hidden solid solid hidden;">
<input type="text" readonly="readonly" id="test3" class="test3" style="border:0;"/></td>
<td class="tbContent" valign="middle" style="border-style: hidden solid solid hidden;">
<button type="button" id="clearDocFile3" style="display:none;">Delete</button></td>
</tr>
</tbody>
</table>
<input type="hidden" name="currentUser" id="currentUser" value="<security:authentication property="securityUser.fullName"/>"/>
<input type="hidden" name="docDisplayAllSum[]" id="docDisplayAllSet">
<input type="hidden" name="docDisplayApp[]" id="docDisplayApp">
<input type="hidden" name="docDisplaySet[]" id="docDisplaySet">
<input type="hidden" name="docDisplayAllApp[]" id="docDisplayAllApp">
<input type="hidden" name="docSum[]" id="docSum">
<input type="hidden" name="docDisplayAllSum[]" id="docDisplayAllSum">
<input type="hidden" name="docDisplaySum[]" id="docDisplaySum">
<input type="hidden" name="docAgreeType[]" id="docAgreeType">
<input type="hidden" value="Annual Leave" id="docType" name="docType"/>
<input type="hidden" value="" id="docAttachment" name="docAttachment"/>
<input type="hidden" value="" id="docDone" name="docDone"/>
<input type="hidden" value="Report" id="docStatus" name="docStatus"/>
<input type="hidden" value="false" id="docRejected" name="docRejected"/>
<input type="hidden" name="fileName1" id="fileName1"/>
<input type="hidden" name="fileName2" id="fileName2"/>
<input type="hidden" name="fileName3" id="fileName3"/>
</div>
</form>
</div>
JavaScript
$(".addNewLetter").on("click",function(e){
$("#letterDialog").dialog("open");
$(".floatNone :button").blur();
$('.today').text(parseDatetoString(new Date(),CONSTANT.YYYYMMDDHHMMSSFORMAT));
var currrentRemain = parseFloat($("#docRemainLeave").val());
if (currrentRemain <= 0) {
$(".btnSendDoc").hide();
} else {
$(".btnSendDoc").show();
}
$("#formAddNewDoc").validate({
onclick : false,
ignore : [],
onkeyup : function(element) {
return true;
},
onfocus : true,
rules : {
docTitle : {required : true, maxlength : 80},
docStartDate : {required : true},
docEndDate : {required : true},
docApproval : {required : true},
docEnforcement : {required : true},
docRequestLeave : {required : true, min: 0.5, max: currrentRemain}
},
invalidHandler : function(e, validator) {
if (!validator.numberOfInvalids()) {
return;
}
$('html, body').animate({
scrollTop: $(validator.errorList[0].element).offset().top -30
}, 1000, function(){
$(validator.errorList[0].element).focus();
});
}
});
});
initDialog : function(){
$( "#letterDialog" ).dialog({
autoOpen: false,
modal: true,
width : 1000,
resizable: false,
close: function( event, ui ) {
$(this).dialog("close");
}
});
}
In following page, if I click leave application icon, the annual leave popup shows up.
However, when I click a profile icon on top-right side, userPopup does not show up.
It looks like the clicking event does not fire because of jQuery UI modal dialog.
How should I fix this?
I checked this post, but I am not sure if setTimeout is right, proper method to use.
Please give me some advice.
EDIT:
Forgot to show initDialog so I just add it under JavaScript part.
I made modal option as false, but it only removes modal, but that icon is still does not fire when I click it.
