My xhtml contains input fields, where user can input numeric or alphabet values. Using an ajax call I am validating the input value and throwing a validation error on the . But even after entering invalid characters and error message, user may still hit the 'Save' button. Once the user hits the Save button it triggers a method in the Controller. Is there a way I can check for validation errors on p:messages inside the controller using the FacesContext.getCurrentInstance().
xhtml code
<!-- Messages -->
<p:messages id="errorMessages" globalOnly="false" showDetail="true" showSummary="false" closable="true" />
<!-- Column input field-->
<p:column>
<f:facet name="header">
<h:outputText value="Input Amount" escape="false" />
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{row.amount}" escape="false">
<f:convertNumber maxFractionDigits="3" minFractionDigits="3"
maxIntegerDigits="5" />
</h:outputText>
</f:facet>
<f:facet name="input">
<p:inputText id="input" value="#{row.amount}" maxlength="10"
size="10">
<f:convertNumber maxFractionDigits="3" minFractionDigits="3"
maxIntegerDigits="5" />
<f:validator validatorId="hourlyValueValidator" for="input" />
<p:ajax event="change" partialSubmit="true" process="input"
update=":#{p:component('errorMessages')}" />
</p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<!-- Save Button -->
<p:commandButton id="btnSubmit" value="Save"
update=":#{p:component('tblScrollPnl')} :#{p:component('errorMessages')}"
action="#{controller.saveValues()}" ajax="true" />
Controller in ViewScope
public void saveValues() throws Exception {
FacesContext context = FacesContext.getCurrentInstance();
List<FacesMessage> errorMsgList = context.getMessageList("globalMessages");
......
......
......
}
You don't need to get messages from the bean side for validation, as you experienced, view side validation occur but doesn't block your action.
There is couple of thing wrongs in your view, to fix your problem you need to change the process attribute of your p:commandButton, ortherwise only the button is processed (by default process="#this", so the validation is skipped.
<p:commandButton id="btnSubmit" value="Save" process="#form" update=":tblScrollPnl :errorMessages" action="#{controller.saveValues()}" />
Also note that I've removed ajax="true" since it is by default and fixed major problems in update="".
You should also rearrange your validators :
<p:inputText id="input" value="#{row.amount}" maxlength="10" size="10" validator="hourlyValueValidator">
<f:convertNumber maxFractionDigits="3" minFractionDigits="3" maxIntegerDigits="5" />
</p:inputText>
Related
I have a complicate JSF that contain dataTable with filter in each one of the columns.
In order to make sure that the generate button will fetch all the data first I need to clear all the filters when the user press the button.
I try to do use onclick but then I couldn’t see the blockUI I also try on complete (ajax) but again it was not working properly with all the other items (blockUI ,message).
I decided to try to clear the filters via server side but only dataTable.reset() is working.
I have no more ideas how to clean the filters ???
Is this API working ?
Appreciate your help
Thanks
<h:panelGrid columns="1" style="width: 100%">
<p:panel id="vt-panel">
<h:panelGrid columns="5" cellpadding="2" >
<h:outputText value="Start Date" />
<p:calendar id="vt-start" value="#{vtRepBean.startDate}" binding="#{startDateComponent}" maxlength="9" size="9" pattern="dd-MMM-yy" title="dd-MMM-yy" required="true" maxdate="#{vtRepBean.endDate}">
<p:ajax event="dateSelect" listener="#{vtRepBean.handleStartDateSelect}" update=":mainForm:vt-end"/>
</p:calendar>
<h:outputText value="End Date" />
<p:calendar id="vt-end" value="#{vtRepBean.endDate}" maxlength="9" size="9" pattern="dd-MMM-yy" title="dd-MMM-yy" required="true" mindate="#{vtRepBean.startDate}">
<p:ajax event="dateSelect" listener="#{vtRepBean.handleEndDateSelect}" update=":mainForm:vt-start"/>
</p:calendar>
<p:commandButton
id="genVtBtn"
value="Generate"
actionListener="#{vtRepBean.handleVTGenerateButton}"
update=":mainForm:vt-panel,:mainForm:vt-panel-table">
</p:commandButton>
</h:panelGrid>
</p:panel>
</h:panelGrid>
<p:growl id="vt_message" showDetail="true" autoUpdate="true"/>
<h:panelGroup id="vt-panel-table">
<p:dataTable id="vtDataTable"
widgetVar="vtWidget"
var="reportObject"
value="#{vtRepBean.reportObjectsList}"
rendered="#{vtRepBean.renderVTReport}"
filteredValue="#{vtRepBean.filteredVTList}"
paginator="true"
paginatorPosition="bottom"
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
rowsPerPageTemplate="50,100,200"
rows="50"
style="width: 100%">
<p:columnGroup type="header">
<p:row>
<p:column colspan="5" headerText="VT request"/>
<p:column colspan="1" headerText="Dis" />
</p:row>
<p:row>
<p:column headerText="CREATE DATE" sortBy="#{reportObject.log.createDate}" filterBy="#{reportObject.log.createDate}" filterMatchMode="contains"/>
<p:column headerText="IP" sortBy="#{reportObject.log.ip}" filterBy="#{reportObject.log.ip}" filterMatchMode="contains"/>
</p:row>
</p:columnGroup>
<p:column >
<h:outputText value="#{reportObject.log.createDate}"/>
</p:column>
<p:column >
<h:outputText value="#{reportObject.log.ip}"/>
</p:column>
</p:dataTable>
<p:commandLink rendered="#{vtRepBean.renderVTReport}" ajax="false" onclick="PrimeFaces.monitorDownload(showStatus, hideStatus)">
<p:graphicImage value="resources/images/excel.png" title="excel" style="border-color: white"/>
<p:dataExporter id="xlsReport"
type="xls"
target="vtDataTable"
fileName="VTReport"
postProcessor="#{vtRepBean.postProcessXLS}"/>
</p:commandLink>
</h:panelGroup>
<p:blockUI widgetVar="blockVTPanel" trigger="genvtBtn" block="vt-panel">
<div class="disable-scroll">
<p:graphicImage value="resources/images/ajax-loader.gif"/>
</div>
</p:blockUI>
DataTable dataTable = (DataTable) FacesContext.getCurrentInstance().getViewRoot().findComponent("mainForm:vtDecomDataTable");
if (!dataTable.getFilters().isEmpty()) {
logger.info("dataTable.getFilters().isEmpty() :" + dataTable.getFilters().isEmpty());
dataTable.getFilters().clear();// not working
dataTable.getFilteredValue().clear();// not working
dataTable.setFilteredValue(null);// not working
dataTable.setFilters(null);// not working
dataTable.setFilterMetadata(null);// not working
dataTable.reset();// working
RequestContext requestContext = RequestContext.getCurrentInstance();
requestContext.update("mainForm:vtDecomDataTable");
}
To clear all the inputs of the filters you can do it by javascript:
<p:commandButton onclick="PF('vtWidget').clearFilters()" />
vtWidget is the widgetVar of the datatable.
Basically clearFilters() will clear the fields for you and call filter(), and the filter function would update your datatable, which in turns will empty the filtered list.
Note: This would work only if the filters were inputText. If you have custom components then you should implement your own clear based on the components that you have.
Sometimes if you have custom components, you need to empty the filtered list manually, as you did in the comments!
This is how i solved my problem.
RequestContext requestContext = RequestContext.getCurrentInstance();
requestContext.execute("PF('widget_orderDataTable').clearFilters()");
Hope its help.
For clearing custom filters you can use primefaces resetInput, along with clearFilters() discussed in other answers, and a custom actionListener method. See code snippets below:
<p:dataTable id="dataTable" widgetVar="dataTable"
value="#{bean.listOfObjects}" var="object">
<p:commandButton value="Clear All Filters"
onclick="PF('dataTable').clearFilters()"
actionListener="#{controller.clearAllFilters}"
update="dataTable">
<p:resetInput target="dataTable" />
</p:commandButton>
Controller.java
public void clearAllFilters() {
DataTable dataTable = (DataTable) FacesContext.getCurrentInstance().getViewRoot().findComponent("form:dataTable");
if (!dataTable.getFilters().isEmpty()) {
dataTable.reset();
RequestContext requestContext = RequestContext.getCurrentInstance();
requestContext.update("form:dataTable");
}
}
I hope this helps anyone looking to clear custom filters.
For Primefaces 7 and above, use the following:
public void clearAllFilters() {
DataTable dataTable = (DataTable) FacesContext.getCurrentInstance().getViewRoot().findComponent("form:dataTable");
if (!dataTable.getFilters().isEmpty()) {
dataTable.reset();
PrimeFaces.current().ajax().update("form:dataTable");
}
}
This question already has an answer here:
How to display dialog only on complete of a successful form submit
(1 answer)
Closed 6 years ago.
For my school project I have to realize a mini website where I use primefaces framework. In a form I want after pressing the Save button two things:
1 - Validate the data entered. that's why I put
<p:message for="date" /> and <p:message for="zone" />
As the values are not correct, the dialog box should not be displayed.
2 - When all data is correct, and I click Save, I want to display my dialog box.
Now I can not. Can you help me? I use version 4 primefaces.
<h:form>
<p:panel id="panel" header="Create" style="margin-bottom:10px;border-color:blueviolet" >
<p:messages id="messages" />
<h:panelGrid columns="3">
<h:outputLabel for="date" value="Date : *" />
<p:calendar locale="fr" id="date" value="#{newBusinessCtrl.exercice.debut}" required="true" label="date" showButtonPanel="true"/>
<p:message for="date" />
<h:outputLabel for="zone" value="Zone Monétaire: *" />
<p:selectOneMenu id="zone" value="#{newBusinessCtrl.exercice.zoneChoice}" >
<f:selectItem itemLabel="Choice " itemValue="" />
<f:selectItems value="#{newBusinessCtrl.exercice.zones}" var="azone"
itemLabel="#{azone}" itemValue="#{azone}" >
</f:selectItems>
<p:message for="zone" />
</p:selectOneMenu>
<p:message for="zone" />
</h:panelGrid>
</p:panel>
<p:commandButton update="panel" value="Save" icon="ui-icon-check" style="color:blueviolet" onclick="choice.show()"/>
<p:confirmDialog message="Would you like to create accounts automatically ?"
header="Account creation" severity="alert"
widgetVar="choice" appendTo="#(body)">
<p:button outcome="personalizeAccount" value="Personalize" icon="ui-icon-star" />
<p:button outcome="autoAccount" value="Continue" icon="ui-icon-star" />
</p:confirmDialog>
Just show the dialog in Backing Bean like this:
Page:
<p:commandButton update="panel" value="Save"
icon="ui-icon-check"
style="color:blueviolet"
action="#{newBusinessCtrl.showDlg('choice')}"/>
Backing Bean:
public void showDlg(String dlgName){
RequestContext.getCurrentInstance().execute(dlgName+".show()");
}
Once the validation failed, the action won't execute and thus the dialog will not show.
If validation hasn't failed. PrimeFaces puts a global args object in the JavaScript scope which in turn has a boolean validationFailed property. You can check it before showing the dialog So you can use it this way:
<p:commandButton value="save" oncomplete="if (args && !args.validationFailed) saveDialog.show()"/>
I am a newbie in JSF. I am using JSF 2 and there is a list being populated by my bean file. In my .xhtml file, I want to display this information as 2 columns.
In bean class
List modules;(Contains module.enable module.name)
The list has say 30 modules. I want to display all these modules information in 2 columns. For eg: I want to display first module information(module.enable module.name) in one column and the second in second column. Or it can be first 15 modules in first column and the remaining 15 in second column. Tried with both h:dataTable and h:panelGrid but couldn't get it working.
Any help would be highly appreciated.
Thanks
Shyju
This is my code to resolve the issue using the varStatus property of ui:repeat
<h:panelGrid id="moduleList" columns="2" border="1" >
<f:facet name="header">
<h:outputText value="Modules"/>
</f:facet>
<ui:repeat value="#{EnableCodeBean.modules}" var="modules" varStatus="status">
<h:panelGroup>
<h:selectBooleanCheckbox value="#{modules.enable}"/>
<h:outputText value="#{modules.name}"/>
</h:panelGroup>
<f:verbatim rendered="#{status.index mod 2 == 1}">
</td></tr><tr><td>
</f:verbatim>
<f:verbatim rendered="#{status.index mod 2 == 0}">
</td><td>
</f:verbatim>
</ui:repeat>
</h:panelGrid>
By playing with some <h:dataTable>'s attributes' values, we can make something like that:
The attribute first, idicates to the first index of the list to start displaying from, and the rows's one, indicates to the rows' number to be diplayed starting from the begining index designed if explicited, else, it displays from the 1st row and so on.
Here's a kickoff example of this, relying on 2 <h:dataTalbe> tags included in one <h:panelGrid coulmns="2">, and relying only on 4 modules for simplification's purpose, 2 per every column. Every <h:dataTable> tag must have different value of its first attribute :
The Backing-bean:
#ManagedBean
#RequestScoped
public class ModuleBacking{
private List<Module> modules = new ArrayList<Module>();
public ModuleBacking() {
}
#PostConstruct
public void insertion() {
Module m1 = new Module("math",true);
Module m2 = new Module("english",false);
Module m3 = new Module("physics",false);
Module m4 = new Module("chimics",true);
modules.add(m1);
modules.add(m2);
modules.add(m3);
modules.add(m4);
}
public List<Module> getModule() {
return modules;
}
public List<Module> displayModules(){
return modules;
}
}
The view :
<h:body>
<h:panelGrid columns="2" cellspacing="3" cellpadding="3" style="border-style: solid" rules="all" >
<f:facet name="header">
<h:outputText value="First 2 modules" style="padding-right:80px "/>
<h:outputText value="Second 2 modules"/>
</f:facet>
<h:dataTable value="#{moduleBacking.displayModules()}" var="m" rules="all" first="0" rows="2">
<h:column>
<f:facet name="header" ><h:outputText value="Module's name" /></f:facet>
<h:outputText value="#{m.name}" />
</h:column>
<h:column>
<f:facet name="header" ><h:outputText value="Module's enabling" /></f:facet>
<h:outputText value="#{m.enable}" />
</h:column>
</h:dataTable>
<h:dataTable value="#{moduleBacking.displayModules() }" var="m" rules="all" first="2" rows="2">
<h:column>
<f:facet name="header" ><h:outputText value="Module's name" /></f:facet>
<h:outputText value="#{m.name}" />
</h:column>
<h:column>
<f:facet name="header" ><h:outputText value="Module's enable" /></f:facet>
<h:outputText value="#{m.enable}" />
</h:column>
</h:dataTable>
</h:panelGrid>
</h:body>
In your case, the two <h:dataTable> seem to be like these :
<h:dataTable value="#{moduleBacking.displayModules()}" var="m" rules="all" first="0" rows="15">
<h:dataTable value="#{moduleBacking.displayModules()}" var="m" rules="all" first="15" rows="15">
I am working with Primefaces 3.5, Spring 3.2, JSF 2.2 and Apache is my server.
My problem is that whenever i click on the row, the row select event is never triggered in my backing bean and my store details panel is never updated.
My backing bean is in request scope and contains onRowSelect method.
However when i change my backing bean to sessions scope(it requires a few changes in backing bean), instant row selection works.
For the simplicity of my question i have modified my code to include only relevant part. In my param, for the sake of testing i just put existing customer with ID 35 in my test page.
Here is my dialog.xhtml
<h:form id="customerListingsForm">
<p:dialog id="manageStoresDialog"
header="Manage #{manageStoreBean.store.owner.name}'s Stores"
widgetVar="manageStoresDlg"
modal="true"
resizable="false">
<p:panelGrid id="storePanel" rendered="#{manageStoreBean.owner != null}">
<f:facet name="header">
<p:row>
<p:column>Store Details</p:column>
<p:column>Customer Store List</p:column>
</p:row>
</f:facet>
<p:row>
<p:column>
<p:panelGrid id="storeDetails">
<p:row>
<p:column>Name: </p:column>
<p:column>
<h:inputText value="#{manageStoreBean.store.name}" />
</p:column>
</p:row>
<p:row>
<p:column>Description: </p:column>
<p:column>
<h:inputText value="#{manageStoreBean.store.description}" />
</p:column>
</p:row>
<p:row>
<p:column>Short Code: </p:column>
<p:column>
<h:inputText value="#{manageStoreBean.store.shortCode}" />
</p:column>
</p:row>
<p:row>
<p:column>Owner name:</p:column>
<p:column>
<h:inputText value="#{manageStoreBean.store.owner.name}" readonly="true" />
</p:column>
</p:row>
<p:row>
<p:column>Store Type: </p:column>
<p:column>
<p:selectOneMenu
id="storeTypeSelected"
value="#{manageStoreBean.placeType}"
var="storeType"
style="height:25px"
converter="#{placeTypeConverter}">
<f:selectItems
value="#{manageStoreBean.typeList}"
var="storeTypeItem"
itemLabel="#{storeTypeItem.code}"
itemValue="#{storeTypeItem}"/>
<p:column>#{storeType.description}</p:column>
</p:selectOneMenu>
</p:column>
</p:row>
<p:row>
<p:column>Country: </p:column>
<p:column>
<p:selectOneMenu
id="storeCountrySelected"
value="#{manageStoreBean.country}"
var="country"
style="height:25px"
converter="#{countryConverter}">
<f:selectItems
value="#{manageStoreBean.countryList}"
var="countryItem"
itemLabel="#{countryItem.isoNumericCode}"
itemValue="#{countryItem}"/>
<p:column>#{country.isoNumericCode}</p:column>
</p:selectOneMenu>
</p:column>
</p:row>
<p:row>
<p:column>Localisation: </p:column>
<p:column>
<p:selectOneMenu
id="storeLocalisationSelected"
value="#{manageStoreBean.localisationData}"
var="storeLocal"
style="height:25px"
converter="#{localisationConverter}">
<f:selectItems
value="#{manageStoreBean.localisationList}"
var="local"
itemLabel="#{local.regionCode}"
itemValue="#{local}"/>
<p:column>#{storeLocal.id} - #{storeLocal.regionCode}</p:column>
</p:selectOneMenu>
</p:column>
</p:row>
</p:panelGrid>
</p:column>
<p:column style="width:250px">
<p:dataTable id="stores"
var="store"
value="#{manageStoreBean.storeList}"
rowKey="#{store.id}"
scrollHeight="240"
scrollable="true"
selectionMode="single"
selection="#{manageStoreBean.selectedStore}"
lazy="true">
<p:ajax event="rowSelect" immediate="true"
listener="#{manageStoreBean.onRowSelect}"
update=":customerListingsForm:storeDetails"/>
<p:column headerText="Salon Name">
<h:outputText value="#{store.name}" />
</p:column>
<p:column headerText="ID">
<h:outputText value="#{store.id}" />
</p:column>
</p:dataTable>
</p:column>
</p:row>
</p:panelGrid>
<p:commandButton
value="Save"
action="#{manageStoreBean.saveStore}"
oncomplete="manageStoresDlg.hide()">
<f:param name="storeCustomerId" value="#{manageStoreBean.owner.id}" />
</p:commandButton>
<h:outputText value=" " />
<p:commandButton
value="Close"
oncomplete="manageStoresDlg.hide()"/>
</p:dialog>
<p:commandButton value="Add Store"
oncomplete="manageStoresDlg.show()"
update=":customerListingsForm:manageStoresDialog"
process="#this">
<f:param name="storeCustomerId" value="35" />
</p:commandButton>
</h:form>
Also i'm new to primefaces and web dev, but did a lot of learning myself before i started this project.
I spent 2 days try to understand what's wrong and searched all web but could not find any solution. May be i'm missing something or doing wrong not sure.
Any help is much appreciated.
Try making your bean view scoped.
If you are making it request scoped, then you are telling JSF to throw out all of your existing data every time the user is done talking to your server. So it makes no sense to have JSF run a listener on an existing page. In particular, PrimeFaces has a tendency to malfunction when it encounters an odd set of scopes.
See also Difference between View and Request scope in managed beans
By searching a lot of stuff on the internet i came to conclusion that datatable does not work very well with backing bean in request scope when table is loaded using dynamic argument. That is very shame. I do not see any other option but to implement viewscope in spring for my beans.
I have a issue trying to open a second dialog from the first dialog. The first dialog opens fine but the second dialog does not seem to open at all. I have tried with the form tag inside and outside of the dialog but get neither seems to open the dialog. On clicking the OPen dialog button from the first nothing seems to happen. I am using PrimeFaces 3.5.
Code for dialog is as below
<p:dialog id="dialog" header="New Submission" widgetVar="dlg" resizable="false" modal="true" closable="true">
<h:form id="createDialogForm">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="projectDropDown" value="Project:" />
<h:selectOneMenu id="projectDropDown" value="#{newSubmissionBean.submission.project}" required="true">
<f:selectItem itemLabel="Choose project" noSelectionOption="true" />
<f:selectItems value="#{newSubmissionBean.projectEntities}" var="project" itemLabel="#{project.name}" itemValue="#{project}" />
</h:selectOneMenu>
<f:facet name="footer">
<p:commandButton id="createButton" value="Create" update=":newSubmissionForm :createDialogForm"
actionListener="#{newSubmissionBean.createSubmission}"
oncomplete="handleRequest(xhr, status, args)"
/>
<p:commandButton id="chooseBatchButton" value="OPen dialog" update=":batchChooserForm"
actionListener="#{newSubmissionBean.fetchAvailability}" />
</f:facet>
</h:panelGrid>
</h:form>
</p:dialog>
<p:dialog id="batchDialog" header="Batch Chooser" widgetVar="bdlg" resizable="false" modal="true" closable="true">
<h:form id="batchChooserForm">
<p:fieldset legend="#{messages['label.legend.sample.available']}">
<p:dataTable id="availableSamples" var="sample" value="#{newSubmissionBean.availableSamples}">
<p:column style="width:20px">
<h:outputText id="dragIcon"
styleClass="ui-icon ui-icon-arrow-4" />
<p:draggable for="dragIcon" revert="true" />
</p:column>
<p:column headerText="#{messages['label.sample.batch']}">
<h:outputText value="#{sample.sampleId}" />
</p:column>
</p:dataTable>
</p:fieldset>
<p:fieldset id="selectedSamples" legend="#{messages['label.legend.sample.selected']}" style="margin-top:20px">
<p:outputPanel id="dropArea">
<h:outputText value="#{messages['label.drop.text']}"
rendered="#{empty newSubmissionBean.selectedSamples}"
style="font-size:24px;" />
<p:dataTable var="sample" value="#{newSubmissionBean.selectedSamples}"
rendered="#{not empty newSubmissionBean.selectedSamples}">
<p:column headerText="#{messages['label.sample.batch']}">
<h:outputText value="#{sample.sampleId}" />
</p:column>
<!-- p:column style="width:32px">
<p:commandButton update=":carForm:display"
oncomplete="carDialog.show()"
icon="ui-icon-search">
<f:setPropertyActionListener value="#{car}"
target="#{tableBean.selectedCar}" />
</p:commandButton>
</p:column-->
</p:dataTable>
</p:outputPanel>
</p:fieldset>
<p:commandButton id="confirmBatch" value="Confirm Selection" update=":newSubmissionForm :createDialogForm"
actionListener="#{newSubmissionBean.confirmSelection}"
oncomplete="handleRequest(xhr, status, args)"/>
<p:droppable for="selectedSamples" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="availableSamples" onDrop="handleDrop">
<p:ajax listener="#{newSubmissionBean.onSampleDrop}" update="dropArea availableSamples" />
</p:droppable>
</h:form>
</p:dialog>
the javascript function for on complete is
<script type="text/javascript">
function handleRequest(xhr, status, args) {
if(args.validationFailed) {
dlg.show();
}
else {
dlg.hide();
}
}
</script>
And the code in the action listener where I try to open the second dialog. This method does get called as I have break pointed on it.
public void fetchAvailability(ActionEvent actionEvent) {
RequestContext.getCurrentInstance().execute("batchDialog.show()");
}
Can anyone advise what I have done wrong? Thanks in advance
You're using the id of the dialog in your javascript, you need to use the widgetVar as such:
public void fetchAvailability(ActionEvent actionEvent) {
RequestContext.getCurrentInstance().execute("bdlg.show()");
}
For future debuggning, try executing the javascript in your web browser console. In this case it should say "batchDialog is not defined" or something similar, giving you a hint.
Ok figured out what the issue was just in case anybody has the same thing. The Primefaces showcase example code has not defined the handledrop javascript function thus object undefined error is thrown. So I added the following to my code and now my pop up shows up.
function handleDrop(event, ui) {
var selectedSample = ui.draggable;
selectedSample.fadeOut('fast');
}
Thanks