When i use PrimeFaces.cw..
PrimeFaces.cw("Dialog","checkoutDlg",{
id:"j_idt115",
draggable:false,
resizable:false,
modal:true,
width:"auto",
maxWidth: „1083“,
showEffect:"blind",
hideEffect:"blind",
closeOnEscape:true,
fitViewport:true,
onShow:function(){
styleDialogCheckoutBtn()
}
});
..to show a dialog, I just see the lightbox, but the content does not appear.
<p:commandButton id="btnCheckOut" styleClass="btn btn-block btn-success" value="Add to card" process="#this"
oncomplete="PrimeFaces.cw('Dialog','checkoutDlg',{ id:'checkoutDlg', draggable:false, resizable:false, modal:true, width:'auto', maxWidth: '1083', showEffect:'blind', hideEffect:'blind', closeOnEscape:true, fitViewport:true, onShow:function(){styleDialogCheckoutBtn()} }); PF('checkoutDlg').initPosition(); PF('checkoutDlg').show(); return false;"/>
Dialog content:
<p:dialog widgetVar="checkoutDlg" id="checkoutDlg">
<div class="cart-items">
<div class="row-fluid cart-head-row clearfix">
<div class="col-xs-4">
<p class="text-bold">#{msg['dashboard.cart.checkout.service']}</p>
</div>
<div class="col-xs-4">
<p class="text-bold">#{msg['dashboard.cart.checkout.details']}</p>
</div>
<div class="col-xs-3 text-right">
<p class="text-bold">#{msg['dashboard.cart.checkout.price']}</p>
</div>
<div class="col-xs-1"></div>
</div>
</div>
</p:dialog>
Can anyone tell me how to show the content of the dialog in the lightbox?
Related
I have seen several similar posts to my issue and have tried suggestions but none of them are working and I am hoping that someone can help me. I have a simple modal which contains 2 text input fields. I have a button which user presses to launch the modal - but when modal launches I can't click in either of the fields contained within the form.
My modal is as follows:
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-danger" id="resetModalLabel">Reset Plan Duration</h5>
</div>
<div class="modal-body" style="width: 375px;">
<form>
<p class="text-dark">Modify quantities below to reset plan duration:</p>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-info btnPrepend">Days Backward:</button>
</div>
<input id="planStart" name="planStart" tabindex=1 class="form-control" type="text" value="3" aria-describedby="prepend" />
</div> <!-- input-group.// -->
<div id="invalidstart" class="invalid-feedback pull-right">You must specify a valid number > 0.</div>
</div> <!-- form-group// -->
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-info btnPrepend">Days Forward:</button>
</div>
<input id="planEnd" name="planEnd" tabindex=1 class="form-control" type="text" value="2" aria-describedby="prepend" />
</div> <!-- input-group.// -->
</div> <!-- form-group// -->
</form>
</div>
<div class="modal-footer">
<button id="actionNo" type="button" class="btn btn-danger" data-dismiss="modal" onclick="resetPlanDuration('cancel')">Cancel <i class="fa fa-times" aria-hidden="true"></i></button>
<button id="actionYes" type="button" class="btn btn-success" data-dismiss="modal" onclick="resetPlanDuration('reset')">Reset <i class="fa fa-refresh" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>```
As I said, modal displays fine but I cannot modify values in form fields.
i am new to angular and typescript and i need to hide div section *ngIf="stu.notes != null" on save button click.
i can display the respective divs when clicked on the respective buttons, but i am not able to hide the other one.
Can anyone hep me out here.
Thanks in advance.
HTML File:
<nb-accordion-item-body>
<div class="row">
<div *ngIf="notes_area != null">
<h5> <span class="col-md-8" style="font-weight : bold; font-size : 16px;"
[innerHTML]="notes_area"></span>
</h5>
<br/>
</div>
<div class="col-md-3" *ngFor = "let stu of studentData">
<div *ngIf="stu.notes != null" >
<div class="row">
<div class="col-md-8">
<br/>
<h5 style="font-weight : bold;" > {{stu?.notes.slice(3,-4)}}
</h5>
<br/>
</div>
</div>
</div>
</div>
</div>
<br/>
<div class="row" *ngIf="addNote == true">
<div class="col-md-6">
<tinymce [(ngModel)] = "notes" ></tinymce>
</div>
<div class="col-md-6">
<button nbButton (click)="saveNotes()">Save</button>
</div>
</div>
</nb-accordion-item-body>
.ts File:
saveNotes() {
this.api.saveNotes(this.my_app_data[0].app_id,this.notes).subscribe(data => {
this.notes_area = data['data'];
console.log(this.app_id);
console.log('log',this.notes);
});
}
Hi maybe anybody with primeng experince can help ?
I use primeng in my angular project and dont understand this issue...
if I create buttons out of the Primeng docs they will be displayed wrong
<div class="d-flex flex-row ">
<div class="p-2 ml-auto">
<button type="button" pButton pRipple icon="pi pi-file-o" (click)="exportCSV()" class="p-mr-2"
pTooltip="CSV" tooltipPosition="bottom"></button>
</div>
<div class="p-2">
<button type="button" pButton pRipple icon="pi pi-file-excel" (click)="exportExcel()"
class="p-button-success p-mr-2" pTooltip="XLS" tooltipPosition="bottom"></button>
</div>
<div class="p-2">
<button type="button" pButton pRipple icon="pi pi-file-pdf" (click)="exportPdf()"
class="p-button-warning p-mr-2" pTooltip="PDF" tooltipPosition="bottom"></button>
</div>
<div class="p-2">
<button type="button" pButton pRipple icon="pi pi-filter" (click)="dt.exportCSV({selectionOnly:true})"
class="p-button-info p-ml-auto" pTooltip="Selection Only" tooltipPosition="bottom"></button>
</div>
</div>
Issue photo
I have this part of code:
<!-- /row -->
<div class="row" style="margin-top: 15px">
<div class="span8">
<div class="control-group">
<label class="hcg-control-label span5">Ημερομηνία Ανάκλησης Ποινής</label>
<div class="controls span7">
<p:calendar id="recallDate" styleClass="hcg-full-width cursor-pointer" pattern="dd/MM/yyyy"
value="#{penaltiesView.penalty.recallDate}" disabled="true"/>
<i class="fa fa-calendar hcg-input-icon"></i>
</div>
</div>
</div>
<!-- /span -->
</div>
<!-- /row -->
<div class="row" style="margin-top: 15px">
<div class="span8">
<div class="control-group">
<label class="hcg-control-label span5">Σχόλια Ανάκλησης Ποινής</label>
<div class="controls span7">
<p:inputTextarea rows="6" id="recallComments" styleClass="hcg-full-width" value="#{penaltiesView.penalty.recallComments}" disabled="true"/>
</div>
</div>
</div>
<!-- /span -->
</div>
<!-- /row -->
<div class="row">
<div class="span8">
<div class="control-group">
<label class="hcg-control-label span5">Ανάκληση - Ολοκλήρωση Πειθαρχικής Ποινής</label>
<div class="controls span7">
<p:selectBooleanCheckbox id="RevocationOrCompletion" styleClass="hcg-checkbox margin-bottom-10" value="#{penaltiesView.penalty.revocationOrCompletion}" disabled="#{!penaltiesView.canEdit()}" >
<p:ajax event="change" update="recallDate,recallComments"/>
</p:selectBooleanCheckbox>
</div>
</div>
</div>
<!-- /span -->
</div>
which produces the following components:
Now, what I want to do, is to make the calendar component and the Textarea to get enabled when I check the checkBox and if I uncheck it, they must be disabled again. The use of javascript due to requirements is not a valid way. I am having some difficulties on how to make this happen.
Any suggestions are appreciated.
Thank you in advance.
Your elements can't be updated because you have in your code disabled=true for calendar and textArea. If you want to change disable parameter depending on boolean checkbox than disabled value needs to be a value of boolean checkbox. Your boolean field also needs to have geters and setters.
<p:calendar id="recallDate" styleClass="hcg-full-width cursor-pointer" pattern="dd/MM/yyyy"
value="#{penaltiesView.penalty.recallDate}" disabled="#{penaltiesView.penalty.revocationOrCompletion}"/>
<p:inputTextarea rows="6" id="recallComments" styleClass="hcg-full-width" value="#{penaltiesView.penalty.recallComments}" disabled="#{penaltiesView.penalty.revocationOrCompletion}"/>
<p:selectBooleanCheckbox id="RevocationOrCompletion" styleClass="hcg-checkbox margin-bottom-10" value="#{penaltiesView.penalty.revocationOrCompletion}" disabled="#{!penaltiesView.canEdit()}" >
<p:ajax update="recallDate recallComments" process="#this"/>
</p:selectBooleanCheckbox>
I am new to Primefaces and I am working on a requirement to open a dialog box when we click on the button.
I could able to open the dialog and submit the form. But here I am facing a new that form behind the modal dialog also get submitted when I am trying to submit the form in the modal. The form behind the modal is a pure html code and modal dialog form is written in primefaces.
Is there any chances to submit the form that is existing in the dialog and skip the form behind the dialog. Could anyone tell me the solution for this?
For clear understanding, I am submitting the code below
<form class="form-horizontal" action="${request.contextPath}/appLogin" role="form" method="POST" h:rendered="true">
<div class="form-group">
<div class="col-sm-12" align="center">
<font color="red"> <h:outputLabel
value="${SPRING_SECURITY_LAST_EXCEPTION.message}" />
</font>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<label for="username">Username</label> <input type="text"
class="form-control" name="username" id="username"
placeholder="Enter your username" />
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<label for="pwd">Password</label> <input type="password"
class="form-control" name="password" id="password"
placeholder="Enter password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6">
<input type="checkbox" name="remember" id="remember" />
<h:outputText value=" Remember Me" />
</div>
<div class="col-sm-6" align="right">
<p:commandLink value="Forgot Password?" id="loginforgotpasswordlink"
onclick="clearEmailForgotPasswordPopUp();" />
</div>
</div>
</div>
</div>
</form>
<p:dialog id="emailIdDialog" modal="true" widgetVar="emailIdDialog" width="400"
header="Email Id" appendTo="#(body)" resizable="false">
<ui:include src="/faces/validateEmailId.xhtml" />
</p:dialog>
<div class="form-group">
<p:outputLabel for="emailid1" value="Email" class="col-sm-3 control-label align-right" style="border: 0px solid green;padding-right: 0px;text-align: right;"></p:outputLabel>
<div class="col-sm-9" style="border: 0px solid red;padding-left:0px;">
<p:inputText type="text" id="emailid1"
name="emailid1" required="true" requiredMessage="Please enter an email address"
placeholder="Enter your email id" style="width:100%"/>
</div>
<p:spacer height="10px"></p:spacer>
<div class="text-right" style="padding-left: 0px;">
<p:commandButton value="Submit" update="messages,:emailIdValidation" style="float: right; margin-right: 15px;">
<f:actionListener binding="#{someClassBean.validateEmail()}" />
</p:commandButton>
</div>
</div>
</h:form>
When I am clicking the form submit button in modal dialog the other form also getting submitting.