Board index JavaServer Faces General Page Refresh issue- Need Ajax suppport

Page Refresh issue- Need Ajax suppport

Components, Ajax Framework, Utilities and More.


Posts: 4
Hi All,

Below attached is the JSF page in my application. There are lot of buttons in the page upon clicking them, the data will be fetched from Database and page is getting refreshed as this attribute is there for all those buttons- oncomplete="javascript:location.reload(true)". Now, I would like to get rid of this reloading the page with Javascript and want Ajax to refresh the page automatically. Can any body help me providing solution for the same?

Here is the JSF page:-

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<h:outputStylesheet library="css" name="style.css" />

<style>
body {
font-size: 72.5%;
}
</style>

<script type="text/javascript">
var $j = jQuery;

$j(function() {

$j("#tabs").tabs().find(".ui-tabs-nav").sortable({
axis : "x"
});
});
</script>

</h:head>


<h:body>

<h:outputScript library="script" name="presence.js" />
<h:form prependId="false">
<div class="ui-widget ui-widget-header">
<div id="logo">
<h1>Contact Manager v1.0</h1>
</div>
</div>
<p:themeSwitcher initialText="Change Skin" buttonPreText="Skin: " />

<br />
<br />


<p:tabView id="tabs" event="mouseover">
<c:forEach items="#{contactdetailbean.lists}" var="tab"
varStatus="status">
<p:tab title="#{tab.name}" id="lsttab_#{tab.id}">
<p:menubar autoSubmenuDisplay="true">
<p:menuitem value="Delete List" icon="ui-icon ui-icon-close"
actionListener="#{contactdetailbean.deleteList}"
id="dltlst_#{tab.id}"
oncomplete="javascript:location.reload(true)" />
<p:menuitem value="Rename List" icon="ui-icon ui-icon-pencil"
id="rnmlst_#{tab.id}" onclick="dlgrnmlist.show()"
actionListener="#{contactdetailbean.renameList}" />
<p:menuitem value="Add Grop" icon="ui-icon ui-icon-circle-plus"
id="addgrp_#{tab.id}" onclick="dlgaddgroup.show()"
actionListener="#{contactdetailbean.addNewGroup}" />
<p:menuitem value="Add List" icon="ui-icon ui-icon-circle-plus"
id="addlst_#{tab.id}" onclick="dlgaddlist.show()"
actionListener="#{contactdetailbean.addList}" />
</p:menubar>
<br />


<h:panelGrid>
<p:accordionPanel autoHeight="false" dynamic="true" cache="true">
<c:forEach items="#{tab.contactGroupRecords}" var="group"
varStatus="status">
<p:tab title="#{group.name}" id="group#{group.id}">


<p:menubar autoSubmenuDisplay="true">
<p:menuitem value="Delete Group" icon="ui-icon ui-icon-close"
actionListener="#{contactdetailbean.deleteGroup}"
id="dltgrp_#{group.id}"
oncomplete="javascript:location.reload(true)" />
<p:menuitem value="Rename Group" icon="ui-icon ui-icon-pencil"
id="rnmgrp_#{group.id}" onclick="dlgrnmgroup.show()"
actionListener="#{contactdetailbean.renameGroup}" />
<p:menuitem value="Add Contact"
icon="ui-icon ui-icon-circle-plus" id="addcntct_#{group.id}"
onclick="confirmation.show()" />
</p:menubar>
<br />
<h:panelGrid columns="2">
<div id="groupdiv#{group.id}"><c:forEach
items="#{group.contactEntryRecords}" var="entry"
varStatus="rowCounter">
<div class="contact" id="item#{entry.id}"><span><img
class="contact_stat" id="imn#{entry.id}"
onload="IMNRC('#{entry.contact.email}')"
src="resources/images/blank.gif" /></span> <span
class="contact_name" id="contact_name#{entry.id}">#{entry.contact.name}</span>
<div class="contact_info" id="contact_info#{entry.id}">TES
Team Manager</div>
</div>
</c:forEach></div>
</h:panelGrid>

</p:tab>

</c:forEach>
</p:accordionPanel>
</h:panelGrid>
</p:tab>
</c:forEach>
</p:tabView>
<p:dialog header="Enter List Name" widgetVar="dlgrnmlist"
resizable="false" id="dlgrnmlistdrag" modal="true">
<h:panelGrid columns="2" style="margin-bottom:10px">
<h:outputLabel for="rnmlistname" value="New List Name:" />
<p:inputText id="rnmlistname"
value="#{transporter.renamedListtname}"
style="width:150px;height:20px;color:#000000" />
</h:panelGrid>
<p:commandButton value="Submit"
oncomplete="javascript:location.reload(true)"
action="#{contactdetailbean.renameList}" onclick="dlgrnmlist.hide()" />
</p:dialog>
<p:draggable for="dlgrnmlistdrag" containment="parent" />

<p:dialog header="Enter List Name" widgetVar="dlgaddlist"
resizable="false" id="dlgadddlistdrag" modal="true">
<h:panelGrid columns="2" style="margin-bottom:10px">
<h:outputLabel for="addlistname" value="New List Name:" />
<p:inputText id="addlistname" value="#{transporter.newListname}"
style="width:150px;height:20px;color:#000000" />
</h:panelGrid>
<p:commandButton value="Submit"
oncomplete="javascript:location.reload(true)"
action="#{contactdetailbean.addList}" onclick="dlgaddlist.hide()" />
</p:dialog>
<p:draggable for="dlgadddlistdrag" containment="parent" />

<p:dialog header="Enter Group Name" widgetVar="dlgrnmgroup"
resizable="false" id="dlgrnmgroupdrag" modal="true">
<h:panelGrid columns="2" style="margin-bottom:10px">
<h:outputLabel for="rnmgroupname" value="New Group Name:" />
<p:inputText id="rnmgroupname"
value="#{transporter.renamedGrouptname}"
style="width:150px;height:20px;color:#000000" />
</h:panelGrid>
<p:commandButton value="Submit"
oncomplete="javascript:location.reload(true)"
action="#{contactdetailbean.renameGroup}"
onclick="dlgrnmgroup.hide()" />
</p:dialog>
<p:draggable for="dlgrnmgroupdrag" containment="parent" />

<p:dialog header="Enter Group Name" widgetVar="dlgaddgroup"
resizable="false" id="dlgadddgroupdrag" modal="true">
<h:panelGrid columns="2" style="margin-bottom:10px">
<h:outputLabel for="addgroupname" value="New Group Name:" />
<p:inputText id="addgroupname" value="#{transporter.newGroupname}"
style="width:150px;height:20px;color:#000000" />
</h:panelGrid>
<p:commandButton value="Submit"
oncomplete="javascript:location.reload(true)"
action="#{contactdetailbean.addNewGroup}"
onclick="dlgaddgroup.hide()" />
</p:dialog>
<p:draggable for="dlgadddgroupdrag" containment="parent" />



<!-- Here starts the Add Contact

<p:dialog header="Add Contact" widgetVar="dlgaddcontact"
resizable="true" id="dlgadddcontactdrag" modal="true" width="300"
height="200">
<h:panelGrid columns="1" cellpadding="10"
styleClass="height:100%;width:500%;">
<p:inputText label="eMail:" id="email"
value="#{transporter.emailID}"
style="width:250px;height:20px;color:#000000" />
<br />
<br />
<p:commandButton value="Add" ajax="false" action="searchcontacts" />
<p:commandButton value="Add+All peers" ajax="false"/>
<p:commandButton value="Add+All Directs" ajax="false"/>
</h:panelGrid>
<p:commandButton value="Submit" onclick="dlgaddcontact.hide()" />
</p:dialog>
<p:draggable for="dlgadddcontactdrag" containment="parent" /> -->

<p:confirmDialog message="Click on the options below..." showEffect="bounce" hideEffect="explode" header="Need Confirmation" severity="alert" widgetVar="confirmation">
<p:commandButton value="Add Contact by eMail" oncomplete="confirmation.hide()" action="searchcontacts"/>
<p:commandButton value="Search Contact by Name" oncomplete="confirmation.hide()" type="button" action="searchcontacts"/>
</p:confirmDialog>


</h:form>


</h:body>

</html>

Thanks
Sriram

Return to General