Changed the dynamic div generation to occur under PHP instead of directly under Javascript. This allows us to create a div on the server side making it directly part of the page (which is how we'll populate it with existing values).

git-svn-id: file:///svn-source/pmgr/branches/invoice_receipt_20090629/site@211 97e9348a-65ac-dc4b-aefc-98561f571b83

views/contacts/edit.ctp

@@ -1,135 +1,175 @@
 <?php /* -*- mode:PHP -*- */
 
+/**********************************************************************
+ * Because we make use of functions here,
+ * we need to put our top level variables somewhere
+ * we can access them.
+ */
+$this->varstore = compact('methodTypes', 'methodPreferences',
+			  'contactPhones', 'phoneTypes');
+
 /**********************************************************************
  **********************************************************************
  **********************************************************************
  **********************************************************************
  * Javascript
  */
+
+function contactMethodDiv($obj, $type, $legend, $values = null) {
+
+  $div = 
+    // BEGIN type-div
+    '<DIV>' . "\n" .
+    // BEGIN type-fieldset
+    '<FIELDSET CLASS="'.$type.' subset">' . "\n" .
+    '<LEGEND>'.$legend.' #%{id} (%{remove})</LEGEND>' . "\n" .
+
+    // BEGIN source-div
+    '<DIV ID="'.$type.'-%{id}-source-div">' . "\n" .
+    // BEGIN source-fieldset
+    '<FIELDSET>' . "\n" .
+    //'<LEGEND>Source</LEGEND>' . "\n" .
+    ''
+    ;
+
+  if (!isset($values)) {
+    foreach (array('Existing', 'New') AS $sname) {
+      $stype = strtolower($sname);
+      $div .=
+	'<INPUT TYPE="radio" ' . "\n" .
+	' NAME="data[Contact'.ucfirst($type).'][%{id}][source]"' . "\n" .
+	' ONCLICK="switchMethodSource(%{id}, '."'{$type}', '{$stype}'".')"' . "\n" .
+	' CLASS="'.$type.'-method-%{id}-source" ' . "\n" .
+	' ID="'.$type.'-method-%{id}-source-'.$stype.'"' . "\n" .
+	' VALUE="'.$stype.'"' . "\n" .
+	//' CHECKED' . "\n" .
+	' />' . "\n" .
+	' <LABEL FOR="'.$type.'-method-%{id}-source-'.$stype.'">'.$sname.'</LABEL>' . "\n" .
+	' ';
+    }
+  }
+
+  if (isset($values)) {
+    $div .= contactMethodTypeDiv($obj, $type, 'edit', $values);
+  }
+  else {
+    $div .= contactMethodTypeDiv($obj, $type, 'existing');
+    $div .= contactMethodTypeDiv($obj, $type, 'new');
+  }
+
+  $div .=
+    // END source-fieldset
+    '</FIELDSET>' . "\n" .
+    // END source-div
+    '</DIV>' . "\n" .
+
+    // BEGIN method-div
+    '<div id="'.$type.'-%{id}-method-div"' . "\n" .
+
+    $obj->element
+    ('form_table',
+     array('class'  => "item contact-{$type} entry",
+	   'field_prefix' => 'Contact'.ucfirst($type).'.%{id}.Method',
+	   'fields' => array
+	   ('type' => array('opts' => array('options' => $obj->varstore['methodTypes'])),
+	    'preferences' => array('opts' => array('options' => $obj->varstore['methodPreferences'])),
+	    'comment' => null,
+	    ))) . "\n" .
+    
+    // END method-div
+    '</div>' . "\n" . 
+
+    // END type-fieldset
+    '</FIELDSET>' . "\n" . 
+    // END type-div
+    '</DIV>'
+    ;
+
+  return $div;
+}
+
+function contactMethodTypeDiv($obj, $type, $stype, $values = null) {
+
+  if ($type === 'phone') {
+    if ($stype === 'existing') {
+      $fields = array
+	('id' => array('name' => 'Phone/Ext',
+		       'opts' => array('options' => $obj->varstore['contactPhones'])),
+	 );
+    }
+    elseif ($stype === 'new' || $stype === 'edit') {
+      $fields = array
+	('type' => array('opts' => array('options' => $obj->varstore['phoneTypes'])),
+	 'phone' => null, //array('opts' => array('value' => )),
+	 'ext' => array('name' => "Extension"),
+	 'comment' => null,
+	 );
+    }
+    else {
+      die("Invalid stype ($stype)");
+    }
+
+  }
+  else {
+    die("Invalid type ($type)");
+  }
+
+  return
+    // BEGIN sourcetype-div
+    '<div ' . "\n" .
+    ' class="'.$type.'-%{id}-div"' . "\n" .
+    ' id="'.$type.'-%{id}-'.$stype.'-div"' . "\n" .
+    ' STYLE="display:none;">' . "\n" .
+
+    $obj->element
+    ('form_table',
+     array('class'  => "item contact-{$type} {$stype}",
+	   'field_prefix' => 'Contact'.ucfirst($type).'.%{id}',
+	   'fields' => $fields)) . "\n" .
+
+    // END sourcetype-div
+    '</div>' . "\n" .
+    '';
+}
+
+
+//pr($this->data);
 ?>
 
 <script type="text/javascript"><!--
 
   function addPhone(flash) {
-    addDiv('phone-id', 'phone', 'phones', flash,
+    addDiv('phone-entry-id', 'phone', 'phones', flash, <?php
-	   // HTML section
+	   echo FormatHelper::phpVarToJavascript(contactMethodDiv($this,
-	   '<DIV>' + // BEGIN phone-div
+								  'phone',
-	   '<FIELDSET CLASS="phone subset">' + // BEGIN phone-fieldset
+								  'Phone Number'),
-	   '<LEGEND>Phone Number #%{id} (%{remove})</LEGEND>' +
+						 null,
-
+						 '           ');
-	   '<DIV ID="phone-%{id}-source-div">' + // BEGIN source-div
-	   '<FIELDSET>' + // BEGIN source-fieldset
-	   //'<LEGEND>Source</LEGEND>' +
-
-	   '<INPUT TYPE="radio" NAME="data[ContactPhone][%{id}][source]"' +
-	   ' ONCLICK="switchPhoneSource(%{id}, '+"'existing'"+')"' +
-	   ' CLASS="phone-%{id}-source" ID="phone-%{id}-source-existing"' +
-	   //' VALUE="existing" CHECKED/>' +
-	   ' VALUE="existing" />' +
-	   ' <LABEL FOR="phone-%{id}-source-existing">Existing</LABEL>' +
-	   ' ' +
-	   '<INPUT TYPE="radio" NAME="data[ContactPhone][%{id}][source]"' +
-	   ' ONCLICK="switchPhoneSource(%{id}, '+"'new'"+')"' +
-	   ' CLASS="phone-%{id}-source" ID="phone-%{id}-source-new"' +
-	   ' VALUE="new"/>' +
-	   ' <LABEL FOR="phone-%{id}-source-new">New</LABEL>' +
-
-	   '<div id="phone-%{id}-existing-div"' + // BEGIN existing-div
-	   ' STYLE="display:none;">' +
-	   <?php
-	   echo ("'" .
-		 preg_replace
-		 ("/\n/", "",
-		  $this->element
-		  ('form_table',
-		   array('class'  => 'item contact-phone existing',
-			 'field_prefix' => 'ContactPhone.%{id}',
-			 'fields' => array
-			 ('id' => array('name' => 'Phone/Ext',
-					'opts' => array('options' => $contactPhones)),
-			  ))))
-		 . "' +");
 	   ?>
-	   '</div>' + // END existing-div
-
-	   '<div id="phone-%{id}-new-div"' + // BEGIN new-div
-	   ' STYLE="display:none;">' +
-	   <?php
-	   echo ("'" .
-		 preg_replace
-		 ("/\n/", "",
-		  $this->element
-		  ('form_table',
-		   array('class'  => 'item contact-phone entry',
-			 'field_prefix' => 'ContactPhone.%{id}',
-			 'fields' => array
-			 ('type' => array('opts' => array('options' => $phoneTypes)),
-			  'phone' => null,
-			  'ext' => array('name' => "Extension"),
-			  'comment' => null,
-			  ))))
-		 . "' +");
-	   ?>
-	   '</div>' + // END new-div
-
-	   '</FIELDSET>' + // END source-fieldset
-	   '</DIV>' + // END source-div
-
-	   '<div id="phone-%{id}-method-div"' + // BEGIN method-div
-	   <?php
-	   echo ("'" .
-		 preg_replace
-		 ("/\n/", "",
-		  $this->element
-		  ('form_table',
-		   array('class'  => 'item contact-method entry',
-			 'field_prefix' => 'ContactPhone.%{id}.Method',
-			 'fields' => array
-			 ('type' => array('opts' => array('options' => $methodTypes)),
-			  'preferences' => array('opts' => array('options' => $methodPreferences)),
-			  'comment' => null,
-			  ))))
-		 . "' +");
-	   ?>
-	   '</div>' + // END method-div
-
-	   '</FIELDSET>' + // END phone-fieldset
-	   '</DIV>' // END phone-div
 	   );
-
   }
 
   // Reset the form
   function resetForm() {
     $('#phones').html('');
-    $('#phone-id').val(1);
+    $('#phone-entry-id').val(1);
-    addPhone(false);
+
+/*     <?php foreach ($this->data['ContactPhone'] AS $phone): ?> */
+/*     addPhone(true); */
+/*     var id=$("#phone-entry-id").val(); */
+/*     $("#ContactPhone."+id+".phone').val(1); */
+/*     $('ContactPhone.%{id}', */
+      
+/*     <?php endforeach; ?> */
+
   }
 
-  // Reset the form
+  function switchMethodSource(id, type, source) {
-function switchPhoneSource(id, source) {
+    $("."+type+"-"+id+"-div")
-  <?php
+      .slideUp();
-  // REVISIT <AP>: 20090704
-  //  For reasons I don't yet understand, slideUp is NOT working for
-  //  new-div.  It works fine for existing-div, and show/hide work 
-  //  for both divs.  I'll defer figuring this out until later.
-  ?>
 
-  if (source == 'new') {
+    $("#"+type+"-"+id+"-"+source+"-div")
-      $("#phone-"+id+"-existing-div")
+      .slideDown();
-	.hide();
-	//.slideUp();
-      $("#phone-"+id+"-new-div")
-	.show();
-	//.slideDown();
-    } else {
-      $("#phone-"+id+"-new-div")
-	.hide();
-	//.slideUp();
-      $("#phone-"+id+"-existing-div")
-	.show();
-	//.slideDown();
-    }
   }
 
   $(document).ready(function(){
@@ -174,10 +214,10 @@ echo($this->element
 	     ))) . "\n");
 ?>
 
-<div>
+<div CLASS="dynamic-set">
 <fieldset CLASS="phone superset">
  <legend>Phones</legend>
- <input type="hidden" id="phone-id" value="0">
+ <input type="hidden" id="phone-entry-id" value="0">
  <div id="phones"></div>
   <fieldset> <legend>
    <a href="#" onClick="addPhone(true); return false;">Add a Phone Number</a>

views/helpers/format.php

@@ -220,7 +220,17 @@ class FormatHelper extends AppHelper {
 	return $prefix . $var;
 
       // OK, must just be a string after all
-      return $prefix . "'" . preg_replace("/'/", '\\\'', $var) . "'";
+      $str = '';
+      $first = true;
+      $lines = explode("\n", $var);
+      //pr(compact('var', 'lines'));
+      foreach ($lines AS $line) {
+	if (!$first)
+	  $str .= ' + "\n" +' . "\n";
+	$str .= $prefix . "'" . preg_replace("/'/", '\\\'', $line) . "'";
+	$first = false;
+      }
+      return $str;
     }
 
     // The only thing left that we know how to dump

webroot/css/layout.css

@@ -79,6 +79,15 @@ div.detail.supporting  { clear : both;
 			 padding-top: 1.5em; }
 
 
+/************************************************************
+ ************************************************************
+ * Item edit formats
+ */
+
+.edit table.detail     { width : auto;
+			 float : none;
+		       }
+
 
 /************************************************************
  ************************************************************
@@ -199,11 +208,18 @@ div.loading {
  * Forms
  */
 
+
 form {
 	margin-right: 20px;
 	padding: 0;
 	width: 80%;
 }
+
+div.dynamic-set {
+	margin-top: 1.5em;
+	width: 50%;
+}
+
 fieldset {
 	border: 1px solid #ccc;
 	margin-top: 4px;