Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Jayesh SonawaneJayesh Sonawane 

OuptputText value data rendering outside of OutputText parent container

Hi everyone,

I am generating the whole html table in the controller on basis of the paramerter from & to date & displaying it from outputtext inside table tag.

the Constructor is working properly, it is generating the table_data on basis of default from & to date & rendering in the outputtext inside a table like this
User-added image
but when i am applying the date filter & regenerating the table_data in updateResp() method  on click of a command link 
it is generating the whole table_data but showing it outside the table
User-added image
here the vfp code 
<apex:page sidebar="false" controller="misGeneratorController" showHeader="false" docType="html-5.0">
        <head>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"/>
        </head>
        <body>
          <div class="container">
              <div class="row">
                  <apex:form >
                  <div class="input-field col m5 s12">
                    <select multiple="multiple">
                      <option value=""  disabled="disabled">All City</option>
                        <apex:repeat value="{!cities}" var="city">
                            <option value="{!city}" selected="true"> {!city}</option>
                        </apex:repeat>
                   </select>
                  </div>                
                  <div class="input-field col m3 s12">
                      <apex:input value="{!fromDate}"  type="date" styleClass="datepicker" /> 
                  </div>    
                  <div class="input-field col m3 s12">
                      <apex:input value="{!toDate}" type="date" styleClass="datepicker"/> 
                  </div>
                  <div class="input-field col m1 s12">
                          <apex:commandLink value="Apply" styleClass="chip"  action="{!updateResp}" reRender="table_data"/>
                      
                  </div>
				</apex:form>
              </div>
              
              <table class="bordered">
                  <apex:outputText id="table_data" value="{!table_data}"  escape="false" ></apex:outputText>
              </table>   
              
          </div>
        </body>
</apex:page>
after the click on the command link  the output is showing outside the table in a span, the table data is not even changing
here's the controller 
public class misGeneratorController {
    public list<String> cities {get;set;}
    public date fromDate{get;set;}
    public date toDate{get;set;}
    public String thead {get;set;}
    public String tbody {get;set;}
    public String table_data {get;set;}
	 public misGeneratorController()
     {
          cities = new String[]{'Mumbai','Pune','Delhi','Banglore','Hyderabad','Ghaziabad','Faridabad','Gurgaon'};
          fromDate = date.today();
          toDate = fromDate.addDays(4);
          thead = makeHeader(fromDate, toDate);
          tbody = makeBody(fromDate, toDate);
          table_data = thead + tbody;
     }
    public PageReference updateResp()
    {
          table_data = '';
          thead = makeHeader(fromDate, toDate);
          tbody = makeBody(fromDate, toDate);
          table_data = thead + tbody;
          return null;
    }
    public String makeHeader(date from_date , date to_date)
    {
         String thead_str = '<thead>';
         thead_str += '<tr><th>Cities</th>';
         integer day_diff = from_date.daysBetween(to_date);
         for (integer i=0;i<=day_diff ;i++)
         {
             Date c_fd = from_date.addDays(i);
             c_fd = Date.newInstance(c_fd.year(),c_fd.month(),c_fd.day());
             thead_str += '<th >'+ c_fd.format()+'</th>';
         }
         thead_str += '</tr>';
         thead_str += '</thead>';
        return thead_str;
    }
    public String makeBody (date from_date , date to_date)
    {
        String tbody_str ='<tbody>';
        for (String city:cities)
        {
	         tbody_str += '<tr>';
             tbody_str += '<td>' + city + '</td>';
             integer day_diff = from_date.daysBetween(to_date);
             for (integer i=0;i<=day_diff;i++)
             {
                tbody_str += '<td >'+ from_date.addDays(i).day()+'</td>';
             }
             tbody_str += '</tr>';
         }
         
         tbody_str += '</tbody>';
		 return tbody_str;
    }
}
Please rectify me where i am going wrong.

Thanks