Dialog ajax update not working for mobile

javaone9 · 10 Sep 2014, 06:28

Does PF mobile use different ajax framework as non-mobile? Ajax update dialog does not work in mobile, which is working for non-mobile.

Code: Select all

<p:dialog id="dlg1">

   .....
</p:dialog>

The DOM is ajax updated, but the script for showing dialog seem not executed.

Code: Select all

<script id="dlg1_s" type="text/javascript">$(function(){PrimeFaces.cw("Dialog","dlg1",{id:"dlg1",widgetVar:"dlg1",visible:true,modal:true,closeOnEscape:true,behaviors:{close:function(event) {PrimeFaces.ab({s:'dlg1',e:'close',p:'dlg1'});}}});});</script>

If executed, the dialog element class name would have been changed.

Thanks,
Dave

kukeltje · 10 Sep 2014, 09:11

kukeltje · 10 Sep 2014, 09:12

Try with the latest mobile that works with PF 4(.0.x) or try 5(.0.x) or trunk and see if it still happens

javaone9 · 10 Sep 2014, 14:30

Actually I am using PF 5.0, updated signature.

javaone9 · 10 Sep 2014, 16:56

Code: Select all

<script type="text/javascript">$(function(){alert('make dialog visible: executed!!!');});</script>

I added the script inside dialog, for ajax request it is not executed in mobile, but executed for non-mobile.
any solution?

Does PF mobile know client is a mobile? the javascript generated does not tell it is for mobile.

Thanks.
Dave

kukeltje · 10 Sep 2014, 18:06

please create a full but minimalistic example...

javaone9 · 10 Sep 2014, 19:48

Code: Select all

<!DOCTYPE html>
          
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core" 
      xmlns:p="http://primefaces.org/ui"
      xmlns:pm="http://primefaces.org/mobile">
 
<f:view renderKitId="PRIMEFACES_MOBILE" >
	<h:head>
	</h:head>
	<h:body>
		<pm:page id="main">
			<pm:header title="Main Page"></pm:header>
							    
			<pm:content>
			
				<p:commandButton value="Open Dialog" 
					    onclick="PF('dlg').show();" type="button"/>
				
				<h:form>	   
					<p:commandButton
						ajax="true"
						value="ajax update dialog" 
						action="#{testBean.click}" 
						update=":main:dlg" 
						oncomplete="">
					</p:commandButton> 
							 
					<p:commandButton
						ajax="true"
						value="ajax update panel" 
						action="#{testBean.click}" 
						update=":main:panel" 
						oncomplete="">
					</p:commandButton>  
				</h:form>

				<p:panel id="panel" >
					<h:outputText value="This is a Panel: #{testBean.value}" />
					
					<script>$(function(){alert('alert inside panel');});
					</script>
				</p:panel>
						
				<p:dialog id="dlg" header="HEllO Dialog" 
				    visible="true" widgetVar="dlg">
					<h:outputText value="This is a Dialog: #{testBean.value}" />
					
					<script>$(function(){alert('alert inside dialog');});
					</script>
				</p:dialog>
		
			</pm:content>
		</pm:page>

	</h:body>
</f:view>

Code: Select all

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean(name="testBean")
@ViewScoped
public class TestBean {
	private String value;
	private int i = 0;
	
	public String getValue() {
		return value;
	}


	public void setValue(String value) {
		this.value = value;
	}


	public String click() {
		this.value =  String.valueOf(++i);
		return null;
	}
}

Ajax update panel: working, the script inside panel is executed.
but the dialog ajax update: failed.

Thanks.

kukeltje · 11 Sep 2014, 13:53

Several questions before I try this later tonight:
- does it work with the mobile renderer in a normal (desktop) browser?
- does it work when returning null from the action or use a void return type?
- does it work when using an actionListener instead of an action?
- does it work with a panel around the dialog and updating the panel?

javaone9 · 12 Sep 2014, 01:31

kukeltje wrote:Several questions before I try this later tonight:
- does it work with the mobile renderer in a normal (desktop) browser?
- does it work when returning null from the action or use a void return type?
- does it work when using an actionListener instead of an action?
- does it work with a panel around the dialog and updating the panel?

1. the mobile renderer is not working in a normal (desktop) browser

From browser console:

Code: Select all

Uncaught NotFoundError: Failed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node.

2/3: this issue is not related to page navigation since it is ajax.

4: I put <p:panel> around dialog as you suggested, it works.

The dialog is not visible even if I set visible=true. So need to use PF(dialog).show() to make it visible.

Thanks for help.

kukeltje · 12 Sep 2014, 12:25

1: Well, the mobile rederer itself should work normally. Do you get this error when actually trying to mimic the behaviour of the issue you see on mobile devices (please be specific in your responses). If so, this might be the actual cause of it not working...

2/3 yes it is ajax, but returning "" in an action might behave differently in a mobile page then in a normal web page, so please give it a try (we are trying to find the cause of the wrong behaviour).

4: Ok, you have a workaround then, I did not check myself since I had a nice bbq last night. Will check later today

Dialog ajax update not working for mobile

Who is online