Latest Tutorials| Questions and Answers|Ask Questions?|Site Map



Home Struts Struts2 Struts2uitags Div (Ajax Tag) tag Example

Related Tutorials


 
 

Share on Google+Share on Google+

Div (Ajax Tag) tag Example

Advertisement
In this section, you will learn about the div tag. The div tag is an Ajax component that is used with Ajax that refreshes the content of a particular section without refreshing the entire page.

Div (Ajax Tag) tag Example

     

In this section, you will learn about the div tag. The div tag is an Ajax component that is used with Ajax that refreshes the content of a particular section without refreshing the entire page.

The div tag when used with Ajax refreshes the content of a particular section without refreshing the entire page.

HTML <DIV /> tag created by Ajax div tag includes it's content and is used to obtain it's content through a remote XMLHttpRequest call through the dojo framework.

THE FOLLOWING ATTRIBUTES ARE VALID IF AJAX IS CONFIGURED

  • href: Set 'href' as a url tag reference value.
  • errorText: If a request makes any error then 'errorText' is displayed.
  • afterLoading: Use 'notifyTopics' since 'afterLoading' has been Deprecated.
  • executeScripts: Setting the value of 'executeScripts' to true allows the javascript sections to execute in the returned text. 
  • loadingText: On making the request the 'targets' element displays the text 'loadingText'.
  • listenTopics: The comma separated list 'listenTopics' is the list of topic names that is used to trigger a request.
  • handler: The function that takes care of any AJAX request is termed as 'handler'. The function uses Dojo's widget and dom node as parameters to be passed).
  • formId: The fields of the formId are used to serialize and pass as the parameters in the request.
  • formFilter: The function 'formFilter' is used to filter the fields that are to be serialized which receives the elements as parameters and returns true if the element is included.
  • targets: Here 'targets' is the list of ids to be updated with the text returned from request.
  • notifyTopics: 'notifyTopics' is nothing but the list of topic names separated by commas to be published. It takes three parameters.
    1. data: is the html or json object while type = 'error' or type = 'error'
    2. type: it should be of the type 'before' before requesting, 'load' whenever request succeeds and 'error' whenever the request fails.
    3. request: it requests for the javascript objects if type='error' or
      type='load'.
  • showErrorTransportText: 'showErrorTransportText' displays the errors on target.
  • indicator

The attribute 'updateFreq' refreshes after a certain time period, specified in miliseconds.

The attribute 'autoStart' starts the timer automatically while sets to true which is the default value.

The attribute 'startTimerListenTopics' is used to start the timer whenever 'startTimerListenTopic' is the comma-separated list of topics.

The attribute ''stopTimerListenTopics' is used to start the timer whenever ''stopTimerListenTopics' is the comma-separated list of topics.

'showLoadingText' displays the loaded text on targets while 'separateScript' runs each script in each scope that is unique for each Div.

Add the following code snippet into the struts.xml file.
strurts.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
  "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
  "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

  <!-- Rose India Struts Tutorials -->
  <constant name="struts.enable.DynamicMethodInvocation" value="false" />
  <constant name="struts.devMode" value="true" />
<include file="struts-default.xml"/>  

  <!-- Add packages here -->

  <package name="roseindia" namespace="/roseindia" extends="struts-default">

 <action name="div">
  <result>/pages/div.jsp</result>
 </action>

  </package>


</struts>

Create a jsp using the tag <s:div>.
       

div.jsp

<%taglib prefix="s" uri="/struts-tags" %>

<html>
  <head>
  <title>Enter first and last name</title>
  <s:head theme="ajax" debug="false"/>
  </head>
  <body>
  <s:url id="test" value="/pages/mask.jsp" />
  <s:div
  id="one"
  theme="ajax"
  href="%{test}">
  </s:div>
  </body>
</html>

mask.jsp

<%taglib prefix="s" uri="/struts-tags" %>

<html>
  <head>
  <title>Enter first and last name</title>
  <s:head theme="ajax" debug="false"/>

  </head>
  <body>
  <s:div id="maskValue" >
  <div style="position:absolute;top:10; left:20; width:300; 
height:175;background-color:#E5E5E5;"
>
  <h3>Enter first and last name:</h3>
  <s:form theme="ajax" action="doMask">
  <s:textfield name="firstname" label="Firstname" />
  <s:textfield name="lastname" label="Lastname" />
  <s:submit value="Submit" theme="ajax" targets="maskValue" />
  </s:form>
  </div>
  <br>
  
  <div id="8" style="position:absolute;top:10; left:350; 
width:300; height:160;background-color:#E5E5E5;"
>
  <h3>Output: </h3>
  Firstname : <s:property value="firstname" />
  <br><br>
  Lastname :  <s:property value="lastname" />
  </div>
  </s:div>
  </body>
</html>

Output:

     

Advertisements

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: March 18, 2008

Related Tutorials

Discuss: Div (Ajax Tag) tag Example   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:3
Royal
April 23, 2011
Feed

Good Tutorials
samip
March 26, 2012
div_tag sumurry

.subLink a:link { font-family: Arial; font-size:11px; color:#666666; text-decoration:none; } /* unvisited link */ .subLink a:visited { font-family: Arial; font-size:11px; color:#666666; text-decoration:none; } /* visited link */ .subLink a:hover { font-family: Arial; font-size:11px; color:#db0011; text-decoration:none; } /* mouse over link */ .subLink a:active { font-family: Arial; font-size:11px; color:#666666; text-decoration:none; } /* selected link */ .topnav_left_normal { font-family: Arial; font-size: 14px; background-image: url(images/open_link_1.jpg); text-align: right; vertical-align: bottom; color: #FFFFFF; padding-right: 10px; padding-bottom: 5px; cursor:hand; } .topnav_left_normal:visited { font-family: Arial; font-size: 14px; background-image: url(images/open_link_1.jpg); text-align: right; vertical-align: bottom; color: #FFFFFF; padding-right: 10px; padding-bottom: 5px; } .topnav_left_normal:hover { font-family: Arial; font-size: 14px; background-image: url(images/open_link_left_ro.jpg); text-align: right; vertical-align: bottom; color: #FFFFFF; padding-right: 10px; padding-bottom: 5px; } .topnav_left_selected { font-family: Arial; font-size: 14px; font-weight: 600; background-image: url(images/open_link_1.jpg); text-align: right; vertical-align: bottom; color: #000000; padding-right: 10px; padding-bottom: 5px; } .topnav_left_disabled { font-family: Arial; font-size: 14px; background-image: url(images/open_link_1.jpg); text-align: right; vertical-align: bottom; color: #FFFFFF; padding-right: 10px; padding-bottom: 5px; } .topnav_normal { font-family: Arial; font-size: 14px; background-image: url(images/link_bg.jpg); text-align: right; vertical-align: bottom; color: #FFFFFF; padding-right: 10px; padding-bottom: 5px; cursor:hand; } .topnav_normal:visited { font-family: Arial; font-size: 14px; background-image: url(images/link_bg.jpg); text-align: right; vertical-align: bottom; color: #FFFFFF; padding-right: 10px; padding-bottom: 5px; } .topnav_normal:hover { font-family: Arial; font-size: 14px; background-image: url(images/link_ro.jpg); text-align: right; vertical-align: bottom; color: #FFFFFF; padding-right: 10px; padding-bottom: 5px; } .topnav_selected { font-family: Arial; font-size: 16px; background-image: url(images/link_selected.jpg); text-align: right; vertical-align: bottom; color: #FFFFFF; padding-right: 10px; padding-bottom: 5px; } .topnav_disabled { font-family: Arial; font-size: 14px; background-image: url(images/link_bg.jpg); text-align: right; vertical-align: bottom; color: #FFFFFF; padding-right: 10px; padding-bottom: 5px; } .quotes { font-family: Arial; font-size: 12px; background-color: #ebf0fd; text-align: left; border: 1px solid #99a7cf; color: #000000; } /* middle index link */ .midnav_normal { font-family: Arial; font-size: 17px; text-align: center; vertical-align:top; color: #487501; padding: 25px 25px 25px 25px; cursor:hand; } .midnav_normal:visited { font-family: Arial; font-size: 17px; text-align: center; vertical-align:top; color: #487501; padding: 25px 25px 25px 25px; } .midnav_normal:hover { background-color:#c8e2a0; font-family: Arial; font-size: 17px; text-align: center; vertical-align:top; color: #487501; padding: 25px 25px 25px 25px; } .midnav_selected { font-family: Arial; font-size: 17px; text-align: center; vertical-align:top; color: #487501; padding: 25px 25px 25px 25px; } .midnav_disabled { font-family: Arial; font-size: 17px; text-align: center; vertical-align:top; color: #487501; padding: 25px 25px 25px 25px; }
kelly kitenge
July 24, 2013
Question

hot to write in jsp code for searching the name which is in the database and if you found it you can add it in an athor table in the database?
DMCA.com