Control a Web Page Look and Feel Flow/Logic with JSON

Many a times I've had to create a UI that has a logical flow e.g. show section-1 if option-1 is selected, show section-2 if option-2 is selected. This logic could be complex based on dynamic content including AJAX. For such scenarios JSON can prove a very useful tool.

Static Data - If the data being used to make these decision loops is available at the time of page creation, this logic can be wired in through simple JavaScript

var whatif = document.getElementById("Option").value;
if (whatif == 'option-1') {
  document.getElementById("Section-1").style.display='table';
} else {
  document.getElementById("Section-1").style.display='none';
}

Dynamic Data (JSP) - What about dynamic data? JSP pages are generated on the fly with data refreshed from the database... the JavaScript can work if it is working on the data fetched at the time the page is generated. Another class of applications using dynamic data are AJAX based calls... 

Dynamic Data (using DoJo) - The most popular approach with DoJo, and the one I am referring to here, uses DoJo to replace the innerHTML of a HTML element.

dojo.byId(idname).innerHTML='Loading....';
 var ajaxArgs = {
  url: urlstrdojo+"&getBy="+getBy,
  error: function(type, data, evt){ .. },
  load: function(type, data, evt){
   dojo.byId(idname).innerHTML=data;
  },
  mimetype: "text/plain", preventCache: true
 }; 
dojo.io.bind(ajaxArgs);

Scenario - In a typical MVC application, the DoJo could be called to render a part of the web page. The resulting JSP returned by the action class would have an HTML which will replace a screen element/tag e.g. a Div. What about a case where you want to want to act on the data that was put in this element?

1.  Page.onLoad does not work since we're using DoJo
2.  We could force a script to run but that again is clumsy

<%
   response.setContentType("application/json");
   response.setHeader("Content-Disposition", "inline");
%>

{"option1":"<%=Var1%>", "option2":"<%=Var2%>", "aError":"<%=errorStr%>", 
 "aWarn":"<%=warnStr%>"}

load: function(type, data, evt){
 var jsonData = JSON.parse(data);
 var aError = jsonData.aError;
 var aWarn = jsonData.aWarn;
   
 // Return on Error etc
 if (aError != '' ) { alert (ERROR); return; }
   
 // Else other processing
}