Problemas com jQuery e JSF 2

Front-end
#1

Prezados colegas

Tenho uma aplicação JSF que utiliza um mapa em js filtrando seus respectivos estados ao selecionar sua região.
O js mapa está funcionando e trazendo os estados selecionados, porém não sei como usá-lo no jsf para filtar e trazer no datatable os dados do respectivo estado.

Se alguém poder me dar uma orientação de como proceder. Ficarei grato.

Minha entidade

@Entity
@Table(name = "presenca_copy")
public class Presenca implements Serializable {

	private static final long serialVersionUID = 1L;

	@Id
	@GeneratedValue(strategy = GenerationType.IDENTITY)
	private int id;
	private String instituicao;
	private String assistidos;
	private String desassistidos;
	private String periodo;
	private int tipo;

        gets/sets
}

dao

	@SuppressWarnings("unchecked")
		public List<Object[]> BuscarUF(String siglaEstado) {
			EntityManager em = new JPAUtil().getEntityManager();
			Query query = em.createNativeQuery("SELECT * FROM presenca where UF ='" + siglaEstado+ "'");
			List<Object[]> estados = query.getResultList();			
			em.close();
			System.out.println(estados.get(0));
			return estados;
@ManagedBean
@SessionScoped
public class PresencaBean implements Serializable{
		
	private static final long serialVersionUID = 1L;
	
	private Presenca presenca = new Presenca();
	
	private List<Object[]> estados;
			
	public List<Object[]> getEstados(String siglaEstado) {
		if (estados == null) {
			estados = new PresencaDAO<Presenca>(Presenca.class).BuscarUF(siglaEstado);
		}
		System.out.println(estados);
		return estados;
	}

	public void setEstados(List<Object[]> estados) {
		this.estados = estados;
	}

	public void carregarEstados(String UF){
		
		Dao<Presenca> dao = new Dao<Presenca>(Presenca.class);
		if (UF != null ) {
			this.presenca = dao.buscaPorUF(UF);
			
		}
	}

	public Presenca getPresenca() {
		return presenca;
	}

	public void setPresenca(Presenca presenca) {
		this.presenca = presenca;
	}

js

setTimeout('carregaUfs()',1000);

function carregaUfs() {
	

	var i = j = k = l = m = 0;

	var D = document.getElementById('mapa');
	SVGDoc = D.contentDocument;
	SVGRoot = SVGDoc.documentElement;
	svgns = 'http://www.w3.org/2000/svg';
	var estados = SVGRoot.getElementsByTagName('path'); //array de estados
	var qdeEstados = estados.length; //quantidade de registros no array
	

	for (; i < qdeEstados; i++) {
		
		 
		
		estados[i].onclick = function(evt) {

			var siglaEstado = this.id; //siglaEstado recebe a UF
//			document.getElementById("formTeste:siglaEstado").value =siglaEstado;  
			document.location.href="rede.jsf?siglaEstado="+siglaEstado;

		};


	}
		
}

xhtml

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="resources/menus/_template1.xhtml">

	<ui:define name="corpo">

		<h:panelGrid columns="2" cellpadding="5" id="p1">

			<h:form id="mapabrasil">
				<object id="mapa" data="brasil.svg" type="image/svg+xml" width="350"
					height="350"></object>
				<script type="text/javascript"
					src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
				<script type="text/javascript"
					src="resources/js/jquery-1.7.2.min.js" />
				<script type="text/javascript" src="resources/js/mapa.js" />
			</h:form>
								
			
			<!-- 		<h:form id="formTeste"> -->
			<!-- 		<p:inputText id="siglaEstado"> -->
			<!-- 		</p:inputText> -->
			<!-- 		</h:form> -->
			<h:form id="siglaEstado" >
				<p:dataTable id="UF" var="presenca" value="#{presencaBean.presenca}"> 
					<p:column headerText="Instituição">
						<h:outputText value="#{presenca.instituicao}" rendered="true"/>
					</p:column>

					<p:column headerText="Assistidos">
						<h:outputText value="#{presenca.assistidos}" rendered="true"/>
					</p:column>

					<p:column headerText="Desassistidos">
						<h:outputText value="#{presenca.desassistidos}" rendered="true" />
					</p:column>

				</p:dataTable>
			</h:form>
		</h:panelGrid>
	
	</ui:define>

</ui:composition>

</html>

Não sei bem mas talvez o problema seja no xhtml, pois o map redeniza e filtra por ug.
Se alguém souber como proceder para utilizar essas duas tecnologias.

#2

Não entendi, pq vc não filtra pelo primefaces direto?

#3

Porquê uso um mapa para selecionar como se fosse um select. Não consegui fazer um para usando o primefaces por isso uso o jquery.

#4