Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>It would be wise to set and return the date from the server as well so you get one central authority on when things happened. It's generally a good idea to package as UTC in milliseconds because this gives client-side developers a lot of options and makes things much easier to manage in regards to time-zones etc. So, let's say you've handed off the following JSON to the client-side:</p> <pre><code>{ responseDate:1386181171730, userId:'2013-testCERTv36LBQB' } </code></pre> <p>Here's how I typically handle the HTML formatting using {{}} to tokenize variables for replacement.</p> <pre><code>function createPhm(ajaxSuccessObject){ var //var block phm =[ //array/whitespace format so we can still view/edit in an HTML-ish format '&lt;div id="package-header-message"&gt;', '&lt;p&gt;Your incident was submitted on {{DATE}}. Your test-CERT Incident ID number is:&lt;/p&gt;', '&lt;span class="bold left-indent"&gt;{{USER_ID}}&lt;/span&gt;', '&lt;/div&gt;' ].join(''), //converted to string injectedValues = { DATE = Date( ajaxSuccessObject.date ), USER_ID = ajaxSuccessObject.userId } ;//end var block return ( injectValues( injectedValues, phm ) ); } //broke this out for more generic handling of HTML function injectValues(valuesObj, targetString){ for(var x in valuesObj){ var globalRegExMatcher = new RegExp('\\{\\{'+ x +'\\}\\}','g'); targetString = targetString.replace( globalRegExMatcher, valuesObj[x] ); } return targetString; } </code></pre> <p>So your ajax success function might look like:</p> <pre><code>... success: function(jsonObj){ $( createPhm(jsonObj) ).appendTo('#frm'); //or prependTo for putting at top }, ... </code></pre> <p>Quick note: Don't use .html like you have been. That replaces all the html in the container. It's just innerHTML basically.</p> <p>Also, if you have HTML that will never change, put it in your HTML file. I would normally just have an empty <code>&lt;div id="package-header-message"&gt;&lt;/div&gt;</code> in my HTML file and .html directly into that but wanted to keep html similar to avoid confusion.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload