PrimeFacesに慣れてしまって、通常のHTMLタグでの記述方法がわからなかったりする点があった…ので、メモ。

Ajaxでリクエスト送信のタイミングやレスポンスが戻るタイミングに何らか(JavaScriptなどで)処理を入れたいことがあります。

今回の自分の例では、テキストのフォーカスアウト時にAjaxで処理を開始してからレスポンスが戻るまでの間に画面操作をブロックしたい。というものでした。

リクエストの送信時にブロックUIを出して、レスポンス受信時にブロックUIを解除する、イメージです。

画面で説明すると

テキストがあって

文字を入力

フォーカスアウトするとAjaxで処理を呼び出して、その間は画面ブロック

Ajaxのレスポンスが戻った時点でブロックが消えて画面が操作できる流れです。

で、通常こうした処理ではAjaxタグにあるonevent属性を使うようです。
以下、実際にお試しで書いたビュー↓

<?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:h="http://java.sun.com/jsf/html"

      xmlns:p="http://primefaces.org/ui"

      xmlns:pe="http://primefaces.org/ui/extensions"

      xmlns:f="http://java.sun.com/jsf/core"

      xmlns:ui="http://java.sun.com/jsf/facelets">

    <h:head>

        <title>フォーカスブロックのサンプル</title>

    </h:head>

    <h:body>

        <h:form id="frm">

            <!-- PrimeFaces ExtensionのBlockUIコンポーネント -->

            <pe:blockUI target="frm" widgetVar="blc">

                <h:panelGrid columns="2">

                    <p:graphicImage id="imgLoaderBlc" library="images"

                       name="ajax-loader.gif" width="15px" height="15px"/>

                    <h:outputLabel id="lblBlcProcessing"

                       value="処理中だよー" style="font-size: 0.6em;"/>

                </h:panelGrid>

            </pe:blockUI>

            <!-- 入力テキストとAjaxによるチェンジイベント -->

            <h:inputText id="txtInput" value="#{indexBean.inputVal}">

                <f:ajax event="change" listener="#{indexBean.calc()}" render="@form"

                   onevent="focusBlock" />

            </h:inputText>

        </h:form>

        <!-- Block UIの呼出し -->

        <script type="text/javascript">

            function focusBlock(data){

                var ajaxStatus = data.status;

                //statusで処理を振り分ける

                switch(ajaxStatus){

                    //beginだったらブロックUIを表示

                    case "begin":

                        blc.block();

                        break;

                    //completeだったらブロックUIを解除

                    case "complete":

                        blc.unblock();

                        break;

                }

            }

        </script>

    </h:body>

</html>

ajaxタグのonevent属性でJavaScriptの処理を呼びますが、その中でstatusをみてbegin/completeの処理を書いてます。同じようにsuccessも使えるようです。

知らなかった…(^^;

ちなみにPrimeFacesを利用しているとJavaScriptの記述が不要でInputTextの部分が以下のように書けます。

<p:inputText id="pTxtInput" value="#{indexBean.inputVal}">

    <p:ajax event="change" listener="#{indexBean.calc()}" update="@form"

       onstart="blc.block();" oncomplete="blc.unblock();" />

</p:inputText>

PrimeFacesの拡張Ajaxタグだとupdate属性が通常のrender属性にあたり、さらに属性でonstart/oncompleteが指定できます。さらにonsuccessも存在します。

実行すると同じです。（ただし以下はテキストもPrimeFacesのコンポ）

JSFのAjaxタグのoneventでbegin/complete/successを使う的更多相关文章

  1. 【转】Ext.ajax.request 中的success和failure

    原文链接:Ext.ajax.request 中的success和failure Ajax request对象的success事件表示request过程中没有发生错误,和自己的业务逻辑无关, 如果访问不 ...

  2. 在jquery的ajax方法中的success中使用return要注意的问题

    jquery的ajax方法:在success中使用return:来结束程序的时候,结束的只是success这个方法,也就是说success中的return的作用范围只是success: 如果要想在su ...

  3. Ajax beforeSend和complete 方法与防止重复提交

    $.ajax({ beforeSend: function(){ // Handle the beforeSend event }, complete: function(){ // Handle t ...

  4. Ajax beforeSend和complete 方法

    http://blog.csdn.net/chenjianandiyi/article/details/52274591 .ajax({ beforeSend: function(){ // Hand ...

  5. Jquery ajax json 不执行success的原因 坑爹

    最近在看jQuery的API文档,在使用到jQuery的ajax时,如果指定了dataType为json,老是不执行success回调,而是执行了error回调函数,极度郁闷.后面改为1.2.6版本可 ...

  6. 超全table功能Datatables使用的填坑之旅--1: 无法渲染表格数据: ajax调用了参数 : success

    问题:Datatables: 无法渲染表格数据 原因:datatables的ajax 传了"success":function(){},导致无法渲染数据. ajax 删掉" ...

  7. 如何给JQ的ajax方法中的success()传入参数？

    当时在使用JQuery提供的Ajax技术的时候,我有个需求,就是要给它请求成功后调用的success()方法传入参数: 所以,我就直接这样子写了: <script> function ge ...

  8. shiro使用ajax登陆实现，success但页面无法跳转的问题

    首先:简述一下登陆的后台流程 页面提交——>对应controller中的方法——>对应Realm认证——>controller返回 json 这样,无论成功与否,都有返回值,可以用 ...

  9. JSF拦截ajax请求并传递参数方法

    我们可以利用f:ajax做一些简单的ajax操作,但是遇到复杂的逻辑,它不能简单的去实现,jsf提供了一种方法,可以调用它内部的js方法去实现复杂的逻辑. 首先要在页面引入jsf的js文件: < ...

随机推荐

  1. flash链接需要后台调用时的插入flash方法

    <!--<textarea id="syslink" style="display:none;">// 1:打宝塔 2:山寨玩法 3:跨服竞技 ...

  2. uc/os 任务删除

    问题描述:     uc/os 任务删除 问题解决: uc/os任务删除流程图 具体代码 注:     如上是关中断,以及取消优先级对应的就绪标志 关中断代码为: 取消就绪标志,实际上是将就绪表中指定 ...

  3. uva 437 hdu 1069

    dp  将石块按三个面存入队列  按底面积排序  dp就最大高度  按嵌套矩形最长路做做法 #include <iostream> #include <cstdio> #inc ...

  4. cocos2d-html5 onEnter init ctor构造函数 ----js特有特性(和c++有一点不一样)

    ctor 构造函数, new 一个对象的时候调用-----coco2d-js , 默认ctor,为对象的构造函数,其它也可以默认其它函数为构造函数. 说白了就是: ctor构造函数 new 对象后自动 ...

  5. [itint5]完全二叉树节点个数的统计

    http://www.itint5.com/oj/#4 这题是利用完全二叉树的性质计算节点数目.那么是通过比较左右子树的最左结点的高度来看那边是满的,然后递归计算. //使用getLeftChildN ...

  6. inflate方法与findViewById的区别

    LayoutInflater作用是将layout的xml布局文件实例化为View类对象. 对于一个没有被载入或者想要动态载入的界面,都需要使用LayoutInflater.inflate()来找 re ...

  7. 你想建设一个能承受500万PV/每天的网站吗？

    (如果感觉有帮助,请帮忙点推荐,添加关注,谢谢!你的支持是我不断更新文章的动力.本博客会逐步推出一系列的关于大型网站架构.分布式应用.设计模式.架构模式等方面的系列文章) 你想建设一个能承受500万P ...

  8. centos下apache+mysql+php安装及配置

    今天难得休闲,自从加盟当前公司以来好像就基本没有写过博客了.难得闲下来和前同事聊天,他们几个人合伙买了VPS在用.这对我们搞WEB开发的童鞋来说是非常重要的,我来这家公司有许久了,但是竟然到现在连一台 ...

  9. linux aio

    前几天nginx的0.8.x正式成为stable,然后看了下代码,发现0.8加入了linux native aio的支持,我们知道在linux下有两种aio,一种是glibc实现的aio,这个比较烂, ...

  10. ASP.NE的缓存技术提高Web站点的性能

    一:我们为什么要使用缓存? 先来理解一下asp.net缓存技术的基本原理:把访问频繁的数据以及需要花大量的时间来加载的数据缓存在内存中,那么用户在下次请求同样的数据时,直接将内存中的数据返回给用户,从 ...