RICO学习,innerhtml

原创 2006年06月10日 20:29:00
         prototype大家都知道了,是一个优秀的js库,rico也不例外,两者绑定使用效果更强大,具体两者之间的关系,我没有太关注,现在将RICO的innerhtml例子贴出来大家学习,后端使用jsp技术,当然使用asp,php亦可。
inner.html
         <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<link href="css/rico.css" media="all" rel="Stylesheet" type="text/css" />
<link href="css/openrico.css" media="all" rel="Stylesheet" type="text/css" />
<link href="css/rico_header.css" media="all" rel="Stylesheet" type="text/css" />
<link href="css/ricoTests.css" media="all" rel="Stylesheet" type="text/css" />
    <head>
        <title>lnner numberOne</title>
        <script src="script/prototype.js"></script>
        <script src="script/rico.js"></script>
    </head>
    <body>

<br>

   <div class="accordionTabContentBox">         
   </div>
  
   <div id="rolodexTabContent" class="accordionTabContentBox">
        <table cellspacing="5" cellpadding="5">
            <tr>
                <td valign="top">
                    <select id="listBox" size="10" onchange="getPersonInfo(this)" style="font-family:arial;font-size:11px;display:inline;border:1px solid red">
                        <option value="aa">
                            aa
                        </option>
                        <option value="bb">
                            bb
                        </option>
                        <option value="cc">
                            cc
                        </option>
                    </select>
                </td>
                     
                <td>
                    <div class="accordionTabContentBox">         
                       </div>
                    <div class="accordionTabContentBox" id="personInfo">
                        Select a name to the left to see the AJAX rolodex entry for the selected person.
                    </div>
                </td>
               
            </tr>
        </table>
</div>
        <script>
            ajaxEngine.registerRequest('getPersonInfo','getPerson.jsp');
            ajaxEngine.registerAjaxElement('personInfo');
            function getPersonInfo(selectBox){
                var firstName = selectBox.value;
                ajaxEngine.sendRequest('getPersonInfo',
                                       "firstName=" + firstName);
            }
    </script>
    </body>
</html>

getPerson.jsp

<%@ page language="java" import="java.util.*" contentType="text/xml; charset=ISO-8859-1"%>

<%String firstName = request.getParameter("firstName");
        %>

<ajax-response>
<response type="element" id="personInfo">
<div class="person">
    <span class="personName"><%=firstName%></span><span class="personAddress">1743 1st Avenue Boston,Boston 71204-2345</span><span class="personOccupation">Executive Vice President</span>
    <span calss="personPhoneNuember">
    Phone #: (972) 555-0293</span><span class="personMobile">Mobile #: (972) 555-0295</span><span class="personNotes">Notes: Spouse playes tennis at the country club with John.</span>
</div>
</response>
</ajax-response>

inner.html 中select标签的onChange动作调用getPersonInfo方法,该方法发送请求到已经注册到RICO提供的引擎种的getPerson.jsp,用于调用服务端JSP页面,出现显示效果,当然innerhtml效果是因为jsp中的
<ajax-response>标签,大家慢慢看吧,我要开始热身了,英格兰 VS  巴拉圭,哈哈...
       对了还要下载rico和  prototype库,和相应的一些CSS文件,css文件只是为了美化布局和美观,可以取掉!

版权声明:本文为博主原创文章,未经博主允许不得转载。

RICO BOARD驱动探索之旅_环境搭建与点亮LED

今天开始更新我的博客,一个专题: RICO BOARD驱动探索之旅 机缘巧合,我申请到了RICO BOARD,一直想自己玩玩,现在开播!!! 这款板的渊源我就不赘述了,它是以TI Sitara A...
  • jhyworkspace
  • jhyworkspace
  • 2017年01月16日 00:37
  • 392

E. Mike and Foam(容斥原理)

E. Mike and Foam Mike is a bartender at Rico's bar. At Rico's, they put beer glasses in a s...
  • ZSGG_ACM
  • ZSGG_ACM
  • 2015年06月10日 17:27
  • 966

关于IE8及更低版本使用innerHTML出现的问题

昨天,突然接到客户电话,说是他们使用的IE8浏览我们网站时无法正常显示。我当时随便应付了一声“应该是版本兼容问题” 但事后一想,得把这个问题解决了,毕竟客户至上。说正题 我把文档模式调到IE8 ...
  • u010607467
  • u010607467
  • 2015年12月17日 11:27
  • 1663

ajax异步刷新邂逅了你—innerHTML

innerHTML这个属性做过ITOO项目的应该都不陌生,用来设置或获取位于对象起始和结束标签内的HTML。(获取HTML当前标签的起始和结束里面的内容), 经常利用它实现信息的动态显示。在项目中进行...
  • Ljm15832631631
  • Ljm15832631631
  • 2016年12月19日 21:36
  • 516

利用javascript中innerhtml实现当页动态生成内容

开始接触javascript,找了很多小型的例子,其中一个就是用js实现在网页中文本框中输入表格的行数和列数,点击 生成表格按钮,即可生成相应的表格。在实现时使用如下js脚本:...
  • zhijiandiandi
  • zhijiandiandi
  • 2013年12月17日 20:13
  • 570

TI AM437X开发板 Rico Board --米尔科技

RicoBoard是米尔科技推出的一款以TI AM437X系列处理器为核心的嵌入式开发板,即AM437X开发板,该板Pin toPin兼容AM4379/AM4378/AM4377/AM4376(默认为...
  • u011837423
  • u011837423
  • 2015年02月11日 11:17
  • 897

在javascript中innerHTML和innerText的区别,以及innerHTML和innerText在各个版本浏览器的兼容性问题

innerHTML和innerText的区别,以及什么时候使用innerHTML,还有innerHTML和innerText的在各个版本的兼容性问题...
  • liwusen
  • liwusen
  • 2016年02月25日 18:34
  • 2333

用innerHTML创建元素

用.innerHTML偷懒创建元素
  • crazy_littlepig
  • crazy_littlepig
  • 2016年05月11日 18:23
  • 726

innerHTML与innerText区别

innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。 innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。 同时,innerHTML 是所有浏览...
  • magi1201
  • magi1201
  • 2015年03月08日 11:59
  • 30032

innerHTML问题!超级郁闷!

问题:做网站时发现一个问题(firefox没问题,IE有如下问题)      ...    function  setdiv()  {  var  divi=document.getElementBy...
  • superbirdxp
  • superbirdxp
  • 2006年03月14日 15:13
  • 2361
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:RICO学习,innerhtml
举报原因:
原因补充:

(最多只允许输入30个字)