I have a div which is supposed to behave like a JQuery dialog. In this div I input some data, trying to validate it, and save it to database as a result. The dialog opens when the user clicks There are 3 problems I've encountered:
1. Selectors for JQuery ID
Basically we know that if we try to find
<xp:div id="addingDialog">
</xp:div>
using a JQuery selector like this var dialog = $('#addingDialog') - it would give us no result since id's in XPages are computed dynamically. So I've decided to declare it using classes(styleClasses, if you like) like this
<xp:div styleClass="addingDialog">
</xp:div>
JQuery is like this : var dialog = $('.addingDialog'). Seems to work, not nice though.
2. Clicking on the button which is supposed to validate it and make all the backend stuff doesn't work :(
Unfortunately, when I click "Add" button (the button which saves) nothing happens - dialog closes, even if validation fails and doesn't save anything, even if the input was correct.
So I found a solution - Don't use dialog and JQuery.
But this is not the correct solution, at least not for this case. But even here another problem appears - validation
There are 2 dialogs: one is for adding and another for editing (JQuery doesn't allow to have only one dialog with different buttons function), both have validation and I have to input something into editing in order to add new! Initially I thought that validation in XPages works like this - when the user clicks corresponsing button (Add or Edit) all the inputText in corresponding div checks and if it's right - validation succeedes and backend action takes place. The question is - how can I make it work like this? It turned out that every inputText on a page checks. I don't want it to work like this(Screenshot without using JQuery) This is what I see on a page. If I input whatever values in editing dialog and click "+Add Part" everything works fine. Maybe exactly because of this saving actions in the dialog don't occur? Because I have only one dialog open, but validation "sees" that other hidden's inputs are empty so the validation fails? Here's my code
<xp:div styleClass="dialogAddPart">
<xp:table>
<xp:tr>
<xp:td><xp:label value="Title:" /></xp:td>
<xp:td>
<xp:inputText
styleClass="doc_field_textinput" id="input_part_title" type="text" size="40" disableClientSideValidation="true" required="true">
<xp:this.validators>
<xp:validateRequired
message="#{javascript:return('This field is required')}">
</xp:validateRequired>
</xp:this.validators>
</xp:inputText>
<xp:message id="message15" for="input_part_title"
rendered="true" showDetail="false" showSummary="true"
style="font-style:italic;background_field-color:rgb(217,234,235);border-color:rgb(102,102,102)">
</xp:message>
</xp:td>
</xp:tr>
<xp:tr>
<xp:td><xp:label value="Total:"/></xp:td>
<xp:td>
<xp:inputText id="input_tsnb_all"
disableClientSideValidation="true"
styleClass="doc_field_textinput" required="true" size="40" >
<xp:this.validators>
<xp:validateRequired
message="#{javascript:return('This field is required')}">
</xp:validateRequired>
</xp:this.validators>
<xp:this.converter>
<xp:convertNumber pattern="0.000"></xp:convertNumber>
</xp:this.converter>
</xp:inputText>
<xp:message id="message2" for="input_tsnb_all"
rendered="true" showDetail="false" showSummary="true"
style="font-style:italic;background_field-color:rgb(217,234,235);border-color:rgb(102,102,102)">
</xp:message>
</xp:td>
</xp:tr>
<xp:tr>
<xp:td><xp:label value="build-works"/></xp:td>
<xp:td>
<xp:inputText type="text" size="40" id="input_tsnb_build_work"
disableClientSideValidation="true"
styleClass="doc_field_textinput" required="true">
<xp:this.validators>
<xp:validateRequired
message="#{javascript:return('This field is required')}">
</xp:validateRequired>
</xp:this.validators>
<xp:this.converter>
<xp:convertNumber pattern="0.000"></xp:convertNumber>
</xp:this.converter>
</xp:inputText>
<xp:message id="message3"
for="input_tsnb_build_work" rendered="true" showDetail="false"
showSummary="true"
style="font-style:italic;background_field-color:rgb(217,234,235);border-color:rgb(102,102,102)">
</xp:message>
</xp:td>
</xp:tr>
<xp:tr>
<xp:td><xp:label value="equipment"/></xp:td>
<xp:td>
<xp:inputText id="input_tsnb_equipment"
disableClientSideValidation="true"
styleClass="doc_field_textinput" required="true" size="40" >
<xp:this.validators>
<xp:validateRequired
message="#{javascript:return('This field is required')}">
</xp:validateRequired>
</xp:this.validators>
<xp:this.converter>
<xp:convertNumber pattern="0.000"></xp:convertNumber>
</xp:this.converter>
</xp:inputText>
<xp:message id="message5" for="input_tsnb_equipment"
rendered="true" showDetail="false" showSummary="true"
style="font-style:italic;background_field-color:rgb(217,234,235);border-color:rgb(102,102,102)">
</xp:message>
</xp:td>
</xp:tr>
<xp:tr>
<xp:td><xp:label value="other costs"/></xp:td>
<xp:td>
<xp:inputText type="text" size="40" id="input_tsnb_other_costs"
disableClientSideValidation="true"
styleClass="doc_field_textinput" required="true" >
<xp:this.validators>
<xp:validateRequired
message="#{javascript:return('This field is required')}">
</xp:validateRequired>
</xp:this.validators>
<xp:this.converter>
<xp:convertNumber pattern="0.000"></xp:convertNumber>
</xp:this.converter>
</xp:inputText>
<xp:message id="message6"
for="input_tsnb_other_costs" rendered="true" showDetail="false"
showSummary="true"
style="font-style:italic;background_field-color:rgb(217,234,235);border-color:rgb(102,102,102)">
</xp:message>
</xp:td>
</xp:tr>
<xp:tr>
<xp:td><xp:label value="including tax"/></xp:td>
<xp:td>
<xp:inputText type="text" size="40" id="input_tsnb_pir"
disableClientSideValidation="true"
styleClass="doc_field_textinput" required="true">
<xp:this.validators>
<xp:validateRequired
message="#{javascript:return('This field is required')}">
</xp:validateRequired>
</xp:this.validators>
<xp:this.converter>
<xp:convertNumber pattern="0.000"></xp:convertNumber>
</xp:this.converter>
</xp:inputText>
<xp:message id="message7" for="input_tsnb_pir"
rendered="true" showDetail="false" showSummary="true"
style="font-style:italic;background_field-color:rgb(217,234,235);border-color:rgb(102,102,102)">
</xp:message>
</xp:td>
</xp:tr>
<xp:tr>
<xp:td><xp:label value="return sum"/></xp:td>
<xp:td>
<xp:inputText type="text" size="40"
id="input_tsnb_return"
disableClientSideValidation="true"
styleClass="doc_field_textinput" required="true">
<xp:this.validators>
<xp:validateRequired
message="#{javascript:return('This field is required')}">
</xp:validateRequired>
</xp:this.validators>
<xp:this.converter>
<xp:convertNumber pattern="0.000"></xp:convertNumber>
</xp:this.converter>
</xp:inputText>
<xp:message id="message8"
for="input_tsnb_return" rendered="true" showDetail="false"
showSummary="true"
style="font-style:italic;background_field-color:rgb(217,234,235);border-color:rgb(102,102,102)">
</xp:message>
</xp:td>
</xp:tr>
<xp:tr>
<xp:td colspan="2" style="padding-top: 15px">
<xp:button id="save_part_btn" value="+Add part" style="float:right;">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:
//Backend code
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
</xp:td>
</xp:tr>
</xp:table>
</xp:div>
The code for editing is just the same, expect values are retrieved using corresponding part (backend) and ids have prefix _edit. Save changes button doesn't have any backend action yet.
My JQuery is:
$(document).ready(function() {
/*
Ignore it
$('.partTableContent').hide();
$('.expandButton').click(function() {
// .parent() selects the A tag, .next() selects the P tag
$(this).closest('tr').next(' tr').find('div.partTableContent').slideToggle(750);
});
*/
var dialogAddPartDiv = $('.dialogAddPart');
$('.addButton').click(function()
{
dialogAddPartDiv.dialog('open');
});
dialogAddPartDiv.dialog(
{
create: function (event, ui) {
$(".ui-corner-all").css('border-bottom-right-radius','8px');
$(".ui-corner-all").css('border-bottom-left-radius','8px');
$(".ui-corner-all").css('border-top-right-radius','8px');
$(".ui-corner-all").css('border-top-left-radius','8px');
$(".ui-dialog").css('border-bottom-left-radius','0px');
$(".ui-dialog").css('border-bottom-right-radius','0px');
$(".ui-dialog").css('border-top-left-radius','0px');
$(".ui-dialog").css('border-top-right-radius','0px');
$('.ui-dialog-titlebar-close').css('margin', '-25px -20px 0px 0px').css('border', 'solid 2px').css('border-radius', '15px').css('border-color', '#05788d');
$('.ui-dialog-titlebar-close').css('width', '25px').css('height', '25px');
},
autoOpen: false,
modal: true,
beforeClose : function(event)
{
if(!confirm("Part won't be saved. Continue"))
{
return false;
}
else
{
}
},
width:600,
resizable: false
});
var dialogEditPartDiv = $('#dialogEditPart');
$('.editButton').click(function()
{
dialogEditPartDiv.dialog('open');
});
dialogEditPartDiv.dialog(
{
create: function (event, ui) {
$(".ui-corner-all").css('border-bottom-right-radius','8px');
$(".ui-corner-all").css('border-bottom-left-radius','8px');
$(".ui-corner-all").css('border-top-right-radius','8px');
$(".ui-corner-all").css('border-top-left-radius','8px');
$(".ui-dialog").css('border-bottom-left-radius','0px');
$(".ui-dialog").css('border-bottom-right-radius','0px');
$(".ui-dialog").css('border-top-left-radius','0px');
$(".ui-dialog").css('border-top-right-radius','0px');
$('.ui-dialog-titlebar-close').css('margin', '-25px -20px 0px 0px').css('border', 'solid 2px').css('border-radius', '15px').css('border-color', '#05788d');
$('.ui-dialog-titlebar-close').css('width', '25px').css('height', '25px');
},
autoOpen: false,
modal: true,
beforeClose : function(event)
{
if(!confirm("Changes won't be saved. Continue?"))
{
return false;
}
else
{
}
},
width:600,
resizable: false
});
});
Hope the question is clear. I just want the dialog open up, validate input and eventually execute backend code. Indeed I want it to be hidden and be dialog, instead of being just seeable ugly div on the page. Thanks
