JavaScript exception when updating selectOneMenu

UI Components for JSF
Post Reply
iranmarcius
Posts: 6
Joined: 17 Jul 2014, 21:50

28 Aug 2014, 15:25

I'm trying to update a selectOneMenu based on the value selected in another selectOneMenu and some problems are happening.

The code works perfectly using primefaces, but when it comes to primefaces mobile a JavaScript error occurs. I don't know if it's a bug or if I'm doing something wrong.

The following example is based on primefaces show case -> ajax core -> dropdown. I made some modifications so it can work with primefaces mobile.

dropdown.xhtml

Code: Select all

<!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:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pm="http://primefaces.org/mobile">
	<f:view renderKitId="PRIMEFACES_MOBILE" />
	<h:head />
	<h:body>
		<pm:page>
			<pm:content>
				<h:form>
					<p:growl id="msgs" showDetail="true" />
	
					<p:panel header="Select a Location" style="margin-bottom:10px;">
						<h:panelGrid columns="2" cellpadding="5">
							<p:outputLabel for="country" value="Country: " />
							<p:selectOneMenu id="country" value="#{dropdownView.country}"
								style="width:150px">
								<p:ajax listener="#{dropdownView.onCountryChange}" update="city" />
								<f:selectItem itemLabel="Select Country" itemValue=""
									noSelectionOption="true" />
								<f:selectItems value="#{dropdownView.countries}" />
							</p:selectOneMenu>
	
							<p:outputLabel for="city" value="City: " />
							<p:selectOneMenu id="city" value="#{dropdownView.city}"
								style="width:150px">
								<f:selectItem itemLabel="Select City" itemValue=""
									noSelectionOption="true" />
								<f:selectItems value="#{dropdownView.cities}" />
							</p:selectOneMenu>
						</h:panelGrid>
	
						<p:separator />
	
						<p:commandButton value="Submit" update="msgs"
							actionListener="#{dropdownView.displayLocation}"
							icon="ui-icon-check" />
					</p:panel>
				</h:form>
			</pm:content>
		</pm:page>
	</h:body>
</html>
DropdownView.java

Code: Select all


import java.io.Serializable;
import java.util.HashMap;
import java.util.Map;

import javax.annotation.PostConstruct;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@ViewScoped
public class DropdownView implements Serializable {
	private static final long serialVersionUID = -4038387186668939379L;
	
	private Map<String, Map<String, String>> data = new HashMap<String, Map<String, String>>();
	private String country;
	private String city;
	private Map<String, String> countries;
	private Map<String, String> cities;

	@PostConstruct
	public void init() {
		countries = new HashMap<String, String>();
		countries.put("USA", "USA");
		countries.put("Germany", "Germany");
		countries.put("Brazil", "Brazil");

		Map<String, String> map = new HashMap<String, String>();
		map.put("New York", "New York");
		map.put("San Francisco", "San Francisco");
		map.put("Denver", "Denver");
		data.put("USA", map);

		map = new HashMap<String, String>();
		map.put("Berlin", "Berlin");
		map.put("Munich", "Munich");
		map.put("Frankfurt", "Frankfurt");
		data.put("Germany", map);

		map = new HashMap<String, String>();
		map.put("Sao Paulo", "Sao Paolo");
		map.put("Rio de Janerio", "Rio de Janerio");
		map.put("Salvador", "Salvador");
		data.put("Brazil", map);
	}

	public Map<String, Map<String, String>> getData() {
		return data;
	}

	public String getCountry() {
		return country;
	}

	public void setCountry(String country) {
		this.country = country;
	}

	public String getCity() {
		return city;
	}

	public void setCity(String city) {
		this.city = city;
	}

	public Map<String, String> getCountries() {
		return countries;
	}

	public Map<String, String> getCities() {
		return cities;
	}

	public void onCountryChange() {
		if (country != null && !country.equals(""))
			cities = data.get(country);
		else
			cities = new HashMap<String, String>();
	}

	public void displayLocation() {
		FacesMessage msg;
		if (city != null && country != null)
			msg = new FacesMessage("Selected", city + " of " + country);
		else
			msg = new FacesMessage(FacesMessage.SEVERITY_ERROR, "Invalid",
					"City is not selected.");

		FacesContext.getCurrentInstance().addMessage(null, msg);
	}
}
When the second selectOneMenu is about to be updated the following JavaScript error occurs:

Code: Select all

Uncaught NotFoundError: Failed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node. 
Am I doing something wrong or is this a bug?

I would appreciate any help. Thanks.

smithh032772
Posts: 6144
Joined: 10 Sep 2011, 21:10

28 Aug 2014, 20:47

I have noticed that error and/or similar error, and some misbehaviors about PrimeFaces 5.0 Mobile, too. I spent some time on workarounds to force my PrimeFaces 5.0 Mobile xhtml pages to work as designed.

Anyway, a few observations/recommendations about the code below,

Code: Select all

                  <h:panelGrid columns="2" cellpadding="5">
                     <p:outputLabel for="country" value="Country: " />
                     <p:selectOneMenu id="country" value="#{dropdownView.country}"
                        style="width:150px">
                        <p:ajax listener="#{dropdownView.onCountryChange}" update="city" />
                        <f:selectItem itemLabel="Select Country" itemValue=""
                           noSelectionOption="true" />
                        <f:selectItems value="#{dropdownView.countries}" />
                     </p:selectOneMenu>
   
                     <p:outputLabel for="city" value="City: " />
                     <p:selectOneMenu id="city" value="#{dropdownView.city}"
                        style="width:150px">
                        <f:selectItem itemLabel="Select City" itemValue=""
                           noSelectionOption="true" />
                        <f:selectItems value="#{dropdownView.cities}" />
                     </p:selectOneMenu>
                  </h:panelGrid>
   
                  <p:separator />
   
                  <p:commandButton value="Submit" update="msgs"
                     actionListener="#{dropdownView.displayLocation}"
                     icon="ui-icon-check" />
1. cellpadding="..." in h:panelGrid may be ignored (based on my experience or minimal use/testing)

2. put p:outputLabel and p:selectOneMenu inside of pm:field
Howard

PrimeFaces 6.0, Extensions 6.0.0, Push (Atmosphere 2.4.0)
TomEE+ 1.7.4 (Tomcat 7.0.68), MyFaces Core 2.2.9, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

Java EE 6 Tutorial|NetBeans|Google|Stackoverflow|PrimeFaces|Apache

kukeltje
Expert Member
Posts: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

28 Aug 2014, 21:12

smithh032772 wrote:I spent some time on workarounds to force my PrimeFaces 5.0 Mobile xhtml pages to work as designed.
I usually try to find the real cause and create a patch and file an issue (at least in my internal/personal issue system and sometimes (if I think it will help) in the primefaces issuelist)

iranmarcius
Posts: 6
Joined: 17 Jul 2014, 21:50

28 Aug 2014, 21:31

Thanks guys. I'll do that. In the meantime I had to change my design specifications to get it to work.

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 51 guests