HTML Tags not rendered properly when passing to view PHP-JS

Question

Hi i am using codeigniter framework ,

i am using an ajax request to get data from db and to show in view.

    var from_date = jQuery('#form_date').val();
    var to_date = jQuery('#to_date').val();

    jQuery.ajax({
        url:base_url+"index.php/eod_report/search_to_date",
        type:"POST",
        data:{from_date:from_date,to_date:to_date},
        //datatype:'json',
        success:function(data){

            jQuery("#report_container").html(data); 
        }

my controler is

public function search_to_date()
{
    $from_date = $this->input->post('from_date');
    $to_date = $this->input->post('to_date');

    $where_array = array('eod.created_time >='=>$from_date,'eod.created_time <='=>$to_date);

    $eod_report_data = $this->eod_data->get_eod_report_data($where_array);
    $eod_total_report_data = $this->eod_data->get_eod_total_report_data($where_array);

    $formated_eod_report_data = $this->format_eod_report_array($eod_report_data);
    krsort($formated_eod_report_data);

    $formated_eod_all_report_data= $this->format_all_eodreport_array($eod_total_report_data);
    krsort($formated_eod_all_report_data);

    $data = array('eod_data'=>$formated_eod_report_data,'eod_all_data'=>$formated_eod_all_report_data);

    $html = $this->load->view('eod-report-partial',$data,true);

    echo  json_encode($html);
}

eod-report-partial view

<table width="100%" align="center" border="1">
<thead>
    <tr>
     <td>ShopCode</td>
      <td>Submitted By</td>
      <td>RMS</td>
      <td>ORM</td>
      <td>ORM Profit</td>
      <td>Total</td>  
      <td>Cash</td>
      <td>Card</td>
      <td>Opening Balance</td>
      <td>Purchase Today</td>       
      <td>Final Total</td>
      <td>T.Till Cash</td>
      <td>Difference</td>      
      <td>Nxt Day Op&nbsp;Balance</td>
      <td>Petty Cash</td>
      <td>Banking</td>  
    </tr>
</thead>
<tbody>

<?php foreach($eod_data as $key=>$eods)  {?>
    <tr><td colspan="8""><?php echo $key; ?></tr>
    <?php foreach($eods as $eod) { ?>
    <tr>
     <td><?php echo $eod['shop_code']; ?></td>
      <td><?php echo $eod['first_name']; ?></td>
      <td><?php echo $eod['rms_sell'];?></td>
      <td><?php echo $eod['orm_repair']; ?></td>
      <td><?php echo $eod['orm_repair'];?></td>
      <td><?php echo $eod['total']; ?></td>
      <td><?php echo $eod['cash']; ?></td>  
      <td><?php echo $eod['card']; ?></td>
      <td><?php echo $eod['opening_bal']; ?></td>
      <td><?php echo $eod['purchases']; ?></td>
      <td><?php echo $eod['final_total']; ?></td>
      <td><?php echo $eod['till_total']; ?></td>       
      <td><?php echo $eod['difference']; ?></td>
      <td><?php echo $eod['nextday_opening_bal']; ?></td>
      <td></td>      
      <td><?php echo $eod['banking']; ?></td>
    </tr>

<?php  } ?>
    <tr>
     <td></td>
      <td>Total:</td>
      <td><?php echo $eod_all_data[$key]['sum_rms_sell'];?></td>
      <td><?php echo $eod_all_data[$key]['sum_orm_repair']; ?></td>
      <td><?php echo $eod_all_data[$key]['sum_orm_repair'];?></td>
      <td><?php echo $eod_all_data[$key]['total']; ?></td>
      <td><?php echo $eod_all_data[$key]['sum_cash']; ?></td>  
      <td><?php echo $eod_all_data[$key]['sum_card']; ?></td>
      <td><?php echo $eod_all_data[$key]['sum_opening_bal']; ?></td>
      <td><?php echo $eod_all_data[$key]['sum_purchases']; ?></td>
      <td><?php echo $eod_all_data[$key]['final_total']; ?></td>
      <td><?php echo $eod_all_data[$key]['sum_till_total']; ?></td>       
      <td><?php echo $eod_all_data[$key]['difference']; ?></td>
      <td><?php echo $eod_all_data[$key]['sum_next_day_bal']; ?></td>
      <td></td>      
      <td><?php echo $eod_all_data[$key]['sum_banking']; ?></td>
    </tr>
<?php } ?>

</tbody>
</table>

the problem is the view rendering to the page is

enter image description here

how to render my html properly , thanks in advance

ReX357 · Accepted Answer · 2013-12-16 03:56:12Z

1

You need to decode the json object before setting it as the html in the container.

var html_data = jQuery.parseJSON(data);
jQuery("#report_container").html(html_data);

Please note the use of jQuery.parseJSON function for backwards compatibility for browsers that don't have a JSON object.

Also you have a typo in your from_date variable. It reads #form_date where it should read #from_date.

EDIT

Here's a dirty way to deal with it for now:

 html_data = jQuery.parseJSON(data);
 html_data = html_data.replace("\r\n", "").replace("\", "");
 jQuery("#report_container").html(html_data);

edited Dec 16, 2013 at 3:56

answered Dec 16, 2013 at 3:38

ReX357

1,2293 gold badges20 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ReX357 Over a year ago

Can you update the question with the body of function format_eod_report_array()?

ReX357 Over a year ago

@KanishkaPanamaldeniya did you figure out the answer?

Collectives™ on Stack Overflow

HTML Tags not rendered properly when passing to view PHP-JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related