Как я могу предотвратить исчезновение внешнего вида jQuery UI после отправки / обратной передачи формы?
У меня есть JSF (Mojarra) v2.1.11, Primefaces v3.4.2, веб-приложение Java 6, использующее средство выбора даты jQuery. Я использую селектор, который выглядит примерно так:
$('#form1\\:dp').datepicker({showOn: 'button', buttonText: "Choose"});
Это позволяет пользователю нажать кнопку, чтобы вызвать средство выбора даты. У меня проблема в том, что «кнопка» исчезаетпосле пользователь отправляет форму. Судя по всему, «кнопка» загружается только один раз при начальной загрузке страницы. Я хотел бы знать, как(что такое лучшая практика) сохранить "кнопку" выбора даты в JQuery между отправкой / обратной передачей.
index.xhtml<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<title>testcal - index.xhtml</title>
<meta charset="utf-8" />
</h:head>
<h:body>
<h:form id="queryForm">
<f:event type="postValidate" listener="#{testBean.validate}" />
<p:panel id="queryPanel" header="Test p:calendar, datepicker, validation, etc..." style="width:100%;">
<p:focus context="queryPanel"/>
<h:panelGroup id="msgs">
<p:message id="lastName_msg" for="lastName" style="display:none;"/>
<p:message id="birthDate_msg" for="birthDate" style="display:none;"/>
<p:message id="startDate_msg" for="startDate" style="display:none;"/>
<p:message id="endDate_msg" for="endDate" style="display:none;"/>
<p:message id="drpdwn_msg" for="drpdwn" style="display:none;"/>
</h:panelGroup>
<br/>
<br/>
<h:panelGroup id="querypanelgroup" style="display:inline-block;">
<p:focus context="querypanelgroup"/>
<h:panelGroup>
<h:panelGroup style="text-align:right;vertical-align:middle;display:inline-block;width:150px">
<p:outputLabel style="margin-right: 5px;" value="Last Name:" for="lastName"/>
</h:panelGroup>
<h:panelGroup style="margin-left: 4px; vertical-align:middle;display:inline-block;width:250px;">
<p:inputText
id="lastName"
value="#{testBean.parmMap['lastName']}"
requiredMessage="last name required"
size="95"
maxlength="95"
onfocus="$('#queryForm\\:msgs > div').hide();$('#queryForm\\:msgs > div').eq(0).show();return false;" >
</p:inputText>
</h:panelGroup>
</h:panelGroup>
<br/>
<br/>
<h:panelGroup>
<h:panelGroup style="text-align:right;vertical-align:middle;display:inline-block;width:150px">
<p:outputLabel style="margin-right: 5px;" value="Birth Date:" for="birthDate"/>
</h:panelGroup>
<h:panelGroup style="margin-left: 4px; vertical-align:middle;display:inline-block;width:250px;">
<p:inputText
id="birthDate"
value="#{testBean.parmMap['birthDate']}"
requiredMessage="birth date required"
converter="dpConverter"
styleClass="datePicker"
onfocus="$('#queryForm\\:msgs > div').hide();$('#queryForm\\:msgs > div').eq(1).show();$(this).mask('99/99/9999');return false;">
<p:ajax event="change" process="@this" update="@this"/>
</p:inputText>
</h:panelGroup>
</h:panelGroup>
<br/>
<br/>
<h:panelGroup>
<h:panelGroup style="text-align:right;vertical-align:middle;display:inline-block;width:150px">
<p:outputLabel style="margin-right: 5px;" value="Start Date:" for="startDate"/>
</h:panelGroup>
<h:panelGroup style="margin-left: 4px; vertical-align:middle;display:inline-block;width:250px;">
<p:inputText
id="startDate"
value="#{testBean.parmMap['startDate']}"
requiredMessage="start date required"
converter="dpConverter"
styleClass="datePicker"
onfocus="$('#queryForm\\:msgs > div').hide();$('#queryForm\\:msgs > div').eq(2).show();$(this).mask('99/99/9999');return false;">
<!-- optional to populate another field with same value...
onchange="$('...hashSymbolHere...queryForm\\:endDate').val($(this).val());">
-->
<p:ajax event="change" process="@this" update="@this"/>
</p:inputText>
</h:panelGroup>
</h:panelGroup>
<br/>
<br/>
<h:panelGroup>
<h:panelGroup style="text-align:right;vertical-align:middle;display:inline-block;width:150px">
<p:outputLabel for="endDate" value="Enter a date:"/>
</h:panelGroup>
<h:panelGroup style="margin-left: 4px; vertical-align:middle;display:inline-block;width:250px;">
<p:inputText
id="endDate"
value="#{testBean.parmMap['endDate']}"
requiredMessage="endDate required"
converter="dpConverter"
styleClass="datePicker"
onfocus="$('#queryForm\\:msgs > div').hide();$('#queryForm\\:msgs > div').eq(3).show();$(this).mask('99/99/9999');return false;">
<p:ajax event="change" process="@this" update="@this"/>
</p:inputText>
</h:panelGroup>
</h:panelGroup>
<br/>
<br/>
<h:panelGroup>
<h:panelGroup style="text-align:right;vertical-align:middle;display:inline-block;width:150px">
<p:outputLabel for="drpdwn" value="Choose from drop down selction:">
<h:panelGroup rendered="false" style="margin-left: 2px;" id="drpdwnRequired" styleClass="requiredInd">*</h:panelGroup>
</p:outputLabel>
</h:panelGroup>
<h:panelGroup style="margin-left: 4px; vertical-align:middle;display:inline-block;width:250px;">
<p:autoComplete
id="drpdwn"
style="overflow: hidden"
maxResults="200"
scrollHeight="150"
dropdown="false"
value="#{testBean.parmMap['drpdwn']}"
completeMethod="#{testBean.drpdwnListComplete}"
var="entry"
itemLabel="#{entry.split(':')[1]}"
itemValue="#{entry.split(':')[0]}"
minQueryLength="1"
forceSelection="true"
onfocus="$('#queryForm\\:msgs > div').hide();$('#queryForm\\:msgs > div').eq(4).show();" >
</p:autoComplete>
</h:panelGroup>
</h:panelGroup>
<br/>
<br/>
<p:commandButton id="submit" value="Submit" oncomplete="applyDatePicker();" type="submit" update="@form" process="@form" action="#{testBean.submitQuery}" style="width:150px;" styleClass="button"/>
<p:commandButton value="Reset" update="@form" onclick="location.reload();return true;" process="@this" actionListener="#{testBean.reset}" immediate="true" ajax="false"/>
</h:panelGroup>
</p:panel>
</h:form>
<h:outputStylesheet library="styles" name="query.css" />
<h:outputScript library="primefaces" name="/jquery/jquery.js" />
<h:outputScript library="primefaces" name="/jquery/plugins/ui/jquery-ui.custom.js" />
<h:outputScript library="primefaces" name="/jquery/plugins/inputmask/maskedinput.js" />
<h:outputScript library="js" name="testcal2.js" target="head" />
</h:body>
</f:view>
</html>
TestBean.javapackage aaa.bbb.ccc.war;
import java.io.IOException;
import java.io.Serializable;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Collections;
import java.util.Date;
import java.util.LinkedHashMap;
import java.util.List;
import javax.faces.application.FacesMessage;
import javax.faces.component.UIForm;
import javax.faces.component.UIInput;
import javax.faces.component.UIPanel;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import javax.faces.event.ComponentSystemEvent;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Component;
@Component("testBean")
@Scope("view")
public class TestBean implements Serializable
{
private static final List<String> drpdwnListOrig;
private static final String[] prfx = {"aaa","bbb","ccc", "ddd", "eee", "fff","ggg","hhh","iii","jjj","kkk","lll","mmm","nnn","ooo","ppp","qqq","rrr","sss","ttt","uuu","vvv","www","xxx","yyy","zzz"};
//////////////////////////// [static initializer] ///////////////////////////////
//////////////////////////// [static initializer] ///////////////////////////////
//////////////////////////// [static initializer] ///////////////////////////////
static
{
//drpdwnListOrig...
List<String> l = getListOfStrings();
drpdwnListOrig = Collections.unmodifiableList(null == l ? new ArrayList<String>() : l);
FacesContext.getCurrentInstance().getExternalContext().getSessionMap().put("drpdwnListOrig", drpdwnListOrig);
List<String> testList = (List<String>) FacesContext.getCurrentInstance().getExternalContext().getSessionMap().get("drpdwnListOrig");
}
public TestBean()
{
parmMap = this.getParmMap();
FacesContext.getCurrentInstance().getExternalContext().getSessionMap().put("parmMap", parmMap);
}
public void reset(ActionEvent event)
{
LinkedHashMap<String, Object> m = new LinkedHashMap<String, Object>();
FacesContext.getCurrentInstance().getExternalContext().getSessionMap().remove("parmMap");
setParmMap(m);
}
public String submitQuery()
{
FacesContext.getCurrentInstance().getExternalContext().getSessionMap().remove("hitlistData");
if (this.getParmMap().isEmpty())
{
return "";
}
return "/page2.xhtml?faces-redirect=true";
}
private static LinkedHashMap<String, Object> parmMap;
public LinkedHashMap<String, Object> getParmMap()
{
LinkedHashMap<String, Object> map = (LinkedHashMap<String, Object>) FacesContext.getCurrentInstance().getExternalContext().getSessionMap().get("parmMap");
if (null == map)
{
map = new LinkedHashMap<String, Object>();
}
return map;
}
public void setParmMap(LinkedHashMap<String, Object> map)
{
parmMap = map;
FacesContext.getCurrentInstance().getExternalContext().getSessionMap().put("parmMap", parmMap);
}
private static SimpleDateFormat dateFormat = new SimpleDateFormat("MM/dd/yyyy");
public void validate(ComponentSystemEvent e) throws ParseException
{
LinkedHashMap parmMap = this.getParmMap();
UIForm queryForm = (UIForm) e.getComponent();
UIInput lastName_c = (UIInput) queryForm.findComponent("lastName");
String lastName = (String) (lastName_c.getValue());
UIInput birthDate_c = (UIInput) queryForm.findComponent("birthDate");
birthDate_c.setValid(true);
String birthDate = (String) birthDate_c.getValue();
FacesContext fc = FacesContext.getCurrentInstance();
if (null != lastName && lastName.trim().length() > 0)
{
birthDate_c.setRequired(true);
if (null == birthDate || birthDate.length() < 1)
{
birthDate_c.setValid(false);
fc.addMessage(birthDate_c.getClientId(), new FacesMessage(FacesMessage.SEVERITY_ERROR, "birth date is required", "birth date is required"));
fc.renderResponse();
}
else
{
birthDate_c.setValid(true);
}
}
else
{
birthDate_c.setValid(true);
birthDate_c.setRequired(false);
}
}
//////////////////////////// autocomplete ///////////////////////////////
//////////////////////////// autocomplete ///////////////////////////////
//////////////////////////// autocomplete ///////////////////////////////
private static List<String> drpdwnList;
public static List<String> getDrpdwnList()
{
if (null == drpdwnList)
{
drpdwnList = (null == drpdwnList ? (List<String>) FacesContext.getCurrentInstance().getExternalContext().getSessionMap().get("drpdwnListOrig") : drpdwnListOrig);
}
return drpdwnList;
}
public void setDrpdwnList(List<String> data) throws IOException
{
drpdwnList = data;
}
public static List<String> drpdwnListComplete(String s) //autocomplete "completeMethod"...
{
List<String> list = getDrpdwnList();
List<String> drpdwnSuggestions = new ArrayList<String>();
for (String ss : list)
{
if (ss.toLowerCase().contains(s.toLowerCase()))
{
drpdwnSuggestions.add(ss);
}
}
FacesContext.getCurrentInstance().getExternalContext().getSessionMap().put("drpdwnSuggestions", drpdwnSuggestions);
return drpdwnSuggestions;
}
//////////////////////////// get listbox values ///////////////////////////////
//////////////////////////// get listbox values ///////////////////////////////
//////////////////////////// get listbox values ///////////////////////////////
public static List<String> getListOfStrings() //(String sql)
{
List<String> list = new ArrayList<String>();
int ii=0;
String key=null;
String val=null;
for (int i=0;i< 3500; i++)
{
if (ii > 25)
{
ii=0;
}
key = (i + "").trim();
val = (i + prfx[ii]).trim();
list.add(key + ":" + val);
ii++;
}
return list;
}
}
testcal2.js$(document).ready(function()
{
applyDatePicker();
});
function applyDatePicker(){
$('.datePicker').datepicker(
{
showOn: 'button',
buttonText: "Choose",
showButtonPanel: true,
showOptions: {direction: 'up'},
changeYear: true,
changeMonth: true,
yearRange: "c-120:c+0"
});
}