p.selectOneMenu p:ajax give javascript error

malavock82 · 23 Mar 2015, 13:20

Hi,

I'm trying to create a dynamic player with Primefaces 5.1, JSF 2.2.3 and Spring 4.1.1. The component should possibly work for both a normal and a mobile web page.

A p:selectOneMenu component let the user select the song he wants to play, plus he has a next and prev button. A listener updates a backing bean and then an ajax event refresh the html5 audio component that will play the chosen song.

Code: Select all

<h:panelGroup >
	<div id="playlist_audio_title">
		<h:commandButton id="playlist_audio_prev" actionListener="${playListManager.playListNextPrev(-1)}" process="@this" update="playlist_audio_panel" value="prev"/>
		<h:outputText value="${playListManager.currentFile.title}"/>
		<p:selectOneMenu id="playlist_audio_select" 
			value="#{playListManager.currentFile}" 
			effect="fade" 
			required="true"
			converter="uploadedFileConverter">
				<f:selectItems value="#{playListManager.currentPlayList.uploadedFiles}" var="uf" itemLabel="#{uf.title}" itemValue="#{uf}" />
			<p:ajax update="@this playlist_audio_panel" process="@this" listener="${playListManager.selectFile()}"/>
		</p:selectOneMenu>
		<h:commandButton id="playlist_audio_next" actionListener="${playListManager.playListNextPrev(1)}" process="@this" update="playlist_audio_panel" value="next"/>
	</div>
	<h:panelGroup id="playlist_audio_panel">
		<audio id="playlist_audio" 
			   controls="controls" 
			   src="${playListManager.currentFile.fullPath}"
			   onended="fireLink('contentForm:playlist_audio_next')"/>
	</h:panelGroup>
	
</h:panelGroup>

Everything works perfectly when I use the component in a normal web page. When I use it from a mobile web page the next and prev buttons work properly, but the selectOneMany doesn't work. The action listener is called correctly and the right file is selected, but then a javascript error occurs:

NotFoundError: Node was not found jquery.js?ln=primefaces line 25

and the component is not refreshed correctly.

The java code of the listener is very simple, it just changes an index on a list and work correctly on every case.

Please have you any idea of what I'm doing wrong with the mobile version? should I change the component structure? let me know if you need more informations, thanks.

smithh032772 · 24 Mar 2015, 19:08

share your entire xhtml, so we can look at your f:view, h:head, h:body, h:form, etc...

malavock82 · 26 Mar 2015, 12:50

Thanks for the reply, the full code of the page is:

Code: Select all

<!DOCTYPE composition 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:p="http://primefaces.org/ui"
  xmlns:c="http://java.sun.com/jsp/jstl/core"
  xmlns:sv="http://www.synaptic.com/sb"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:sf="http://www.springframework.org/tags/faces" 
  xmlns:pm="http://primefaces.org/mobile"
  xmlns:sf="http://www.springframework.org/tags/faces"
  xmlns:t="http://myfaces.apache.org/tomahawk">
  <h:head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <link href="${request.contextPath}/static/css/screen.css" rel="stylesheet" type="text/css" />
    <link href="${request.contextPath}/static/css/mobile.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="${request.contextPath}/static/scripts/utils.js"></script>
  
  </h:head>

  <f:view xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:pm="http://primefaces.org/mobile"
      xmlns:sv="http://www.synaptic.com/sb"
      contentType="text/html"
      renderKitId="PRIMEFACES_MOBILE">
    <div style="display:none" id="hiddenErrorsDiv"><h:messages showDetail="true" showSummary="true"/></div>
    
    <pm:page id="page" title="Test">

      
        <pm:header swatch="a" title="Test" >
            <sv:articleGroup group="${headerGroup}"/>
            <sv:mobileMenu id="mobileMenu" rendered="${disableMenus != 'true'}"/>
        </pm:header>
        
        <pm:content swatch="a">
          <h:form id="testForm">
            
              <h:panelGroup id="playerPanel" name="playerPanel">            
                        
                <h:panelGroup rendered="${!empty playListManager.currentPlayList}">
                  <h:panelGroup rendered="${playListManager.currentPlayList.playListFileType == 'AUDIO'}">
                    <div id="playlist_audio_title">
                      <h:commandButton id="playlist_audio_prev" actionListener="${playListManager.playListNextPrev(-1)}" process="@this" update="playlist_audio_panel" value="prev"/>
                      <h:outputText value="${playListManager.currentFile.title}" rendered="${!playListManager.currentPlayList.itemSelectionEnabled}"/>
                      <p:selectOneMenu id="playlist_audio_select" 
                        value="#{playListManager.currentFile}" 
                        effect="fade" 
                        required="true" 
                        rendered="${playListManager.currentPlayList.itemSelectionEnabled}"
                        converter="uploadedFileConverter">
                          <f:selectItems value="#{playListManager.currentPlayList.uploadedFiles}" var="uf" itemLabel="#{uf.title}" itemValue="#{uf}" />
                        <p:ajax event="change" update="@this playlist_audio_panel" process="@this" listener="${playListManager.selectFile()}"/>
                      </p:selectOneMenu>
                      <h:commandButton id="playlist_audio_next" actionListener="${playListManager.playListNextPrev(1)}" process="@this" update="playlist_audio_panel" value="next"/>
                    </div>
                    <h:panelGroup id="playlist_audio_panel">
                      <audio id="playlist_audio" 
                           autoplay="${playListManager.currentPlayList.autoplayEnabled ? 'autoplay' : 'false'}" 
                           controls="controls" 
                           src="${playListManager.currentFile.fullPath}"
                           onended="fireLink('contentForm:playlist_audio_next')"
                           volume="30"/>
                    </h:panelGroup>
                    
                  </h:panelGroup>
                  

              </h:panelGroup>

          </h:form>
        </pm:content>
        
        <pm:footer rendered="${footerGroup != null}" >
          <sv:articleGroup group="${footerGroup}"/>
        </pm:footer>
      
      
    </pm:page>
    
  </f:view>
</html>

smithh032772 · 26 Mar 2015, 17:07

what happens when you remove p:ajax from selectOneMenu, replace it with non-AJAX commandButton/link?

you may need to use h:outputScript to include primefaces jquery.js (on every request).

29 Mar 2015, 16:50

smithh032772 wrote:what happens when you remove p:ajax from selectOneMenu, replace it with non-AJAX commandButton/link?

you may need to use h:outputScript to include primefaces jquery.js (on every request).

@smithh032772 Why you are always suggesting to use non-ajax when there is ajax available. And No,we don't need to include jquery.js manually.

@malavock82 You need to use pm:selectOneMenu from mobile renderkit to work properly on mobile device.

malavock82 · 31 Mar 2015, 10:49

Thanks for the replies.

I tried with pm:selectOneMenu but it doesn't exist in the tag library so it gave an error on page creation.

In the end I debugged the jquery code and found that after the refresh the error comes from the selectOneMany options list, I modified then the ajax call to include everything related to the selectOneMany wrapped into a new panel group and the refresh worked. (I had also to change to p:commandButtons)

In the code above the refresh should point ONLY to the panel <h:panelGroup rendered="${playListManager.currentPlayList.playListFileType == 'AUDIO'}">

Thanks for the help

07 Apr 2015, 06:28

malavock82 wrote:I tried with pm:selectOneMenu but it doesn't exist in the tag library so it gave an error on page creation.

You are right.There is no separate selectOneMenu for mobile environment.

malavock82 wrote:In the end I debugged the jquery code and found that after the refresh the error comes from the selectOneMany options list, I modified then the ajax call to include everything related to the selectOneMany wrapped into a new panel group and the refresh worked. (I had also to change to p:commandButtons)

In the code above the refresh should point ONLY to the panel <h:panelGroup rendered="${playListManager.currentPlayList.playListFileType == 'AUDIO'}">

Yes,we shouldn't update the rendered component directly and need to update parent wrapped component.

kukeltje · 09 Apr 2015, 08:21

@sudher: why should we NOT update the component in mobile and can we update it in non-mobile? Weird... shoukd not matter

13 Apr 2015, 08:20

kukeltje wrote:@sudher: why should we NOT update the component in mobile and can we update it in non-mobile? Weird... shoukd not matter

This point is not specific to mobile or non-moblie.The OP is trying to update the conditionally rendered component directly(as we know that we can't update the component which doesn't exist in DOM).So after wrapping with panel component then it works good.

kukeltje · 14 Apr 2015, 08:24

Accorxing to the opit WAS(/IS?) specific to milobile since as I understand, it works in non-mobile

p.selectOneMenu p:ajax give javascript error

Who is online