1 Problem Definition 2 Ajax helps us 3 Writing Ajax Action 4 Writing JSP for content of dialog

Problem Definition

Imagine that you want get some info from users using jQuery dialog and you want content of dialog to be dynamic. If it were static, we could use a statement such as following:

jQuery("#dialogDiv").dialog({modal: true, title: 'Confirmation',show: 'slide', hide: 'slide', width : '370px', height : 'auto', resizable: true, closeOnEscape:true, focus:true});

In this case, content of a div element named dialogDiv appear in the dialog and this is static, not dynamic.

Ajax helps us

For dynamic content, we need to use Ajax to generate content of the dialog, first. We can write the following:

jQuery.ajax(
    { 
        url: '<%= themeDisplay.getPathMain() %>/enterprise_admin_users/get_confirmation_status',
        data: {
                  confirmUserIds: confirmUserIds,
                  command: cmd
                  },
        success: function (dlg){
                  $dialogVar = jQuery("#dialogDiv").html(dlg).dialog({modal: true,
					title:'Confirmation',show: 'slide', hide: 'slide', width : 
					'370px',height : 'auto', resizable:true, closeOnEscape:true,
					focus:true});
                  }
        }
 );

In this approach, content of the dialog is in dlg variable that is result of ajax execution. Now, this question appears: How to make content of dlg?

Writing Ajax Action

We need to specify path of execution of Ajax action as you see below (add it to struts-config.xml:

<action path="/enterprise_admin_users/get_confirmation_status" type="com.rose.idlp.struts.action.GetConfirmationStatusAjaxAction" />

Now we write action class:

public class GetConfirmationStatusAjaxAction extends AJAXAction {
	public String getText(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response)
			throws Exception {
		// reading input parameters
		long[] confirmUserIds = StringUtil.split(
				ParamUtil.getString(request, "confirmUserIds"), 0L);
		String cmd = ParamUtil.getString(request, "command");
 		//logic code
		//render JSP
		StringBuilder result= new StringBuilder();
		PortalUtil.renderPage(result, getServlet().getServletContext(),
		request,response, "/html/portlet/enterprise_admin/confirmation_status.jsp");
		return result.toString();		
	}
 }

Writing JSP for content of dialog

As you saw in previous section, we did not write some html code in Ajax action, but we used code written in a jsp file named confirmation_status.jsp and using PortalUtil.renderPage() method made a StringBuiler object that contained the content that we liked be displayed in the dialog. This is code of that jsp:

 <script type="text/javascript">
     function getRadioValue(radioObj){
   	  if(!radioObj)
   	        return "";
   	    var radioLength = radioObj.length;
   	    if(radioLength == undefined)
   	        if(radioObj.checked)
   	            return radioObj.value;
   	        else
   	            return "";
   	    for(var i = 0; i < radioLength; i++) {
   	        if(radioObj[i].checked) {
   	            return radioObj[i].value;
   	        }
   	    }
   	    return "";
     }     
     function getSelectValue(selectObj){
   	  for(var i = 0; i < selectObj.options.length; i++) {
             if(selectObj.options[i].selected) {
                 return selectObj.options[i].value;
             }
         }
     }
     function setConfirmationStatus(){
         document.<portlet:namespace />fm.method = "post";
         document.<portlet:namespace />fm.<portlet:namespace/><%=Constants.CMD%>
             .value='<%=cmd%>';
         document.<portlet:namespace />fm.<portlet:namespace />confirmUserSt.value =
         getRadioValue(document.getElementsByName('<portlet:namespace/>
             confirmStatus'));
         document.<portlet:namespace />fm.<portlet:namespace />confirmEmail.value =
             getSelectValue(document.getElementById('<portlet:namespace/>emailStatus'));
         $dialogVar.dialog('close');
         submitForm(document.<portlet:namespace />fm, "<portlet:actionURL 
             windowState="<%= WindowState.MAXIMIZED.toString() %>"><portlet:param 
             name="struts_action" value="/enterprise_admin/edit_user" 
             /></portlet:actionURL>");
     }
</script>
           <label for="not-confirmed">
           <input type="radio" name="<portlet:namespace/>confirmStatus"  value="3"
                  id="not-confirmed" <%= status[0].equals("3") ? "checked" : "" %>/>
                  <liferay-ui:message key="not-confirmed" />
           </label>
          <label for="user-confirmed">
           <input type="radio" name="<portlet:namespace/>confirmStatus"  value="1" 
                 id="user-confirmed" <%= status[0].equals("1") ? "checked" : "" %> />
                 <liferay-ui:message key="user-confirmed" />
           </label>
           <label for="local-only">
           <input type="radio" name="<portlet:namespace/>confirmStatus"  value="2" 
                 id="local-only" <%= status[0].equals("2") ? "checked" : "" %> />
                 <liferay-ui:message key="local-only" />
           </label>
           <select id="<portlet:namespace/>emailStatus" name="
                       <portlet:namespace/>emailStatus" >
                 <option value="-1"></option>
                 <option value="1" <%= status[1].equals("1") ? "selected" : "" %> >
                       <liferay-ui:message key="email-verified" /> </option>
                 <option value="0" <%= status[1].equals("0") ? "selected" : "" %> >
                       <liferay-ui:message key="email-not-verified" /></option>
           </select>
<input type="button" onclick="setConfirmationStatus()" value='OK' ></input>
<input type="button" onclick="$dialogVar.dialog('close');" value='Cancel' ></input>

Consider setConfirmationStatus() javascript function that performs after user clicks OK button. document.<portlet:namespace />fm refers to a form in a jsp named view_user.jsp that the dialog appears on it (contains dialogDiv). For submitting information that user specified in the dialog, we used some <input> fields that defined in view_user.jsp:

   <input name="<portlet:namespace />confirmUserSt" id="<portlet:namespace
        />confirmUserSt" type="hidden" value="" />
   <input name="<portlet:namespace />confirmEmail" id="<portlet:namespace
        />confirmEmail" type="hidden" value="" />

So, the method property of the form must be set to post. Then values of required fields must be set. Finally, function submitForm submits the form and the struts_action that is performed after form submitted.