Click here to Skip to main content
15,115,667 members
Articles / jQuery
Article
Posted 20 Nov 2011

Tagged as

Stats

22.7K views
3 bookmarked

Show Message In jQuery Repeater When Validate Or Update

Rate me:
Please Sign up or sign in to vote.
4.50/5 (2 votes)
26 Dec 2011CPOL2 min read
This article will explain in detail how to prompt message in Repeater, such as data is downloaded successfully, the content of field does not meet the requirements

The original post can be found here.

Introduction/Catalog

Due to limited time, synchronization cannot be guaranteed in more than one blog article. At the following address, you can view up-to-date content, hope you understand:

Download sample: JQueryElementDemo-en.zip, the directory is /repeater/Default.aspx.

This article will explain in detail how to prompt message in Repeater, such as data is downloaded successfully, the content of field does not meet the requirements, the directory is as follows:

Prepare

Please view the prepare section at 30 Minutes Grasp ASP.NET jQuery Repeater.

Set TipTemplate

If you want the repeater to display some message, you first need to set the TipTemplate template:

XML
<TipTemplate>
 <tr>
  <td colspan="6" class="tip">
  @{tip,(++tipCount).toString() + ' :' + @}
  </td>
 </tr>
</TipTemplate>  

In code, use *`@{<attribute name>[,<attribute expression>]}`* to bind attribute tip, tip is text that you need to display. It's similar with binding field, except that # indicates that the field, and @ indicates that the attribute, you can refer to Binding And Handling JSON Field In jQuery Repeater. Contents of the tip may be from showtip method may also come from FieldMask property.

Method showtip

Use <repeater variable>.__repeater('showtip', '<message>') to display a message in repeater:

XML
<je:Repeater ID="orderList" runat="server"
 ...
Filled="
function(pe, e){
 orderList.__repeater('showtip', e.custom.message);
}
" PreUpdate="
function(pe, e){
 orderList.__repeater('showtip', 'Submit data...');
}
" Updated="
function(pe, e){

 if(e.issuccess)
  orderList.__repeater('showtip',
  'Has saved order which id is  ' + e.row.id.toString() +
  ' and sum is ' + e.row.sum.toString());
 else
  orderList.__repeater('showtip',
  'Fail to save order which id is ' + e.row.id.toString());
}
" PreInsert="
function(pe, e){
 orderList.__repeater('showtip', 'Submit data...');
}
" Inserted="
function(pe, e){

 if(e.issuccess)
  orderList.__repeater('showtip',
  'Has created order which id is ' + e.row.id.toString() +
  ' and sum is ' + e.row.sum.toString());
 else
  orderList.__repeater('showtip',
  'Fail to create order which id is ' + e.row.id.toString());
}
">
</je:Repeater>  

In the example above, showtip method is called, passing the string to display, but in Filled property, we pass e.custom.message, this is the message returned from the server.

Property FieldMask

FieldMask is used to validate the fields, but because FieldMask contains an error message, so the repeater will display the error message when there is a validation error:

XML
<script type="text/javascript">
 var mask = {
  amount: {
   type: 'number',
   need: true,
   max: 10,
   min: 1,
   tip: 'Amount required between 1-10'
  },
  price: {
   type: 'number',
   need: true,
   max: 10000,
   min: 1000,
   tip: {
    type: 'Please input a number for price',
    need: 'Please input price',
    max: 'Price cannot exceed 10,000',
    min: 'Price cannot be less than 1000'
   }
  },
  buyer: {
   type: 'string',
   need: true,
   max: 10,
   min: 3,
   tip: 'Length of buyer required between 3-10'
  },
  address: {
   type: 'string',
   min: 1,
   max: 100,
   tip: 'Length of buyer required between 1-100'
  },
  orderdate: {
   type: 'date',
   tip: 'Need a valid date'
  },
  iscompleted: {
   type: 'boolean',
   defaultvalue: false
  }
 };
</script>

<je:Repeater ID="orderList" runat="server"
 ...
 FieldMask="mask"
 ... >

</je:Repeater>  

In the code, FieldMask was assigned as variable mask and mask contains the rules for validation, you can refer to the Field Settings section to 30 Minutes Grasp ASP.NET jQuery Repeater.

Tip in the mask can be a string or an object that contains more specific message.

Message is done automatically by repeater, if set a valid TipTemplate.

Timeliness Of Messages

When you want to display a new message, or repeater to rebind the data, the original message is replaced or hidden. Edit a row, jump to the next page, call the fill method gives the repeater to rebind the data.

Comment

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

zoyobar
United States United States
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --