Advertisement
Guest User

Add element to a page using prototype

a guest
May 15th, 2010
809
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // this bit is important
  2. $w('a div p span img table thead td th tr tbody tfoot input').each(function(e) {
  3.     window['$' + e] = function() {
  4.         return new Element(e, arguments[0]);
  5.     }
  6. });
  7.  
  8. function addLocation(partId) {
  9.     // create the element  
  10.     newPart = $div({
  11.         id: 'partition-'+partId,
  12.         'class':'location'})
  13.         .insert( $div({
  14.             'class': 'partition',
  15.             'onmouseover': "$('hoverShow"+partId+"').show()",
  16.             'onmouseout': "$('hoverShow"+partId+"').hide()" })
  17.             .insert( $span()
  18.                 .insert($span({
  19.                     'class': 'eip partName',
  20.                     id: 'part-name-'+partId})
  21.                     .insert('Part')
  22.                 )
  23.                 .insert(' ')
  24.                 .insert( $span({
  25.                     'class': 'partId'})
  26.                     .insert('(')
  27.                     .insert( $span({
  28.                         id: 'part-id-'+partId,
  29.                         'class': 'eip'})
  30.                         .insert(partId)
  31.                     )
  32.                     .insert(')')
  33.                 )
  34.                 .insert( $a({
  35.                     href: "javascript:void(0)",
  36.                     onclick: "togglePart(this, "+partId+");"})
  37.                     .insert( $img({
  38.                         'src': "/images/down.png",
  39.                         alt: "open"})
  40.                     )
  41.                 )
  42.             )
  43.             .insert( $span({
  44.                 id: 'hoverShow'+partId,
  45.                 style: 'display:none;'})
  46.                 .insert( $a({
  47.                     href: "javascript:void(0);",
  48.                     onclick: "removePart("+partId+")" })
  49.                     .insert( $img({
  50.                         'src': "/images/delete_small.png",
  51.                         alt: "delete",
  52.                         style: "margin-bottom:-2px;"})
  53.                     )
  54.                 )
  55.             )
  56.         )
  57.         .insert( $table({
  58.             id: 'zonesForPart'+partId,
  59.             'class': 'zones',
  60.             style: 'display:none;'})
  61.             .insert( $thead()
  62.                 .insert( $tr()
  63.                     .insert( $th()
  64.                         .insert('ID')
  65.                     )
  66.                     .insert( $th({
  67.                         style: 'min-width: 200px;' })
  68.                         .insert('Name')
  69.                     )
  70.                 )
  71.             )
  72.             .insert( $tbody({
  73.                 id: "zoneListForPart"+partId})
  74.                 .insert( $tr()
  75.                     .insert( $td({
  76.                         colspan: 2,
  77.                         style: "text-align: center"})
  78.                         .insert( 'No zones found for this partition' )
  79.                     )
  80.                 )
  81.             )
  82.             .insert( $tfoot({
  83.                 id: "addZoneForPart"+partId})
  84.                 .insert( $tr()
  85.                     .insert( $td()
  86.                         .insert( $input({
  87.                             type: 'text',
  88.                             id: 'newZoneIdForPart-'+partId,
  89.                             name: 'id',
  90.                             maxlength: 3,
  91.                             'class': 'zoneIdField'})
  92.                         )
  93.                     )
  94.                     .insert( $td()
  95.                         .insert( $input({
  96.                             type: "text",
  97.                             id: "newZoneNameForPart-"+partId,
  98.                             name: 'name',
  99.                             'class': 'zoneNameField'})
  100.                             .observe('keypress', function(e){if(e.keyCode==13){addZone(partId);}})
  101.                         )
  102.                         .insert( $a({
  103.                             href: 'javascript:void(0);',
  104.                             onclick: "addZone("+partId+")"})
  105.                             .insert( $img({
  106.                                 'src': '/images/save_small.png',
  107.                                 alt: 'save'})
  108.                             )
  109.                         )
  110.                     )
  111.                 )
  112.             )
  113.         );
  114.  
  115.     // Put the element into the locations id
  116.     $('locations').insert(newPart);
  117.  
  118.     // Put the edit in place functions on it
  119.     eip.init(eip.init('/client/part/update','.partition .eip'));
  120. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement