title: Script on AJAX Post response isn't executing just giving erroe unexpected token {
body: <p>I am trying to generate morris js chart in bootstrap dynamically using AJAX. But I couldn't figure out the issue and why I couldn't do it. Console.log saya "Uncaught SyntaxError: Unexpected token {". </p>
  
  <p>Here is the html code and the javascript where user will click on a button to load ajax content.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$( "#report_form" ).submit(function( event ) {
   
                                    // Stop form from submitting normally
                                    event.preventDefault();
                                    alert('test');
                                    if($('#cb').is(':checked')){
                                        cb=true;
                                    }else{
                                        cb=false;
                                    }
                                    if($('#cheque').is(':checked')){
                                        cheque=true;
                                    }else{
                                        cheque=false;
                                    }
                                    if($('#tr').is(':checked')){
                                        tr=true;
                                    }else{
                                        tr=false;
                                    }
                                    if($('#especes').is(':checked')){
                                        especes=true;
                                    }else{
                                        especes=false;
                                    }
                                    
                                    var start_d=document.getElementById("start_date").value;
                                   var end_d=document.getElementById("end_date").value;
                                    
                                    $.post( "reporting/generate_graph", { 
                                       cb: cb,
                                       cheque: cheque,
                                       tr: tr,
                                       especes: especes,
                                       start_date: start_d,
                                       end_date: end_d
                                      })
                                    .done(function(chart) {
                                        $( "#chart" ).html(chart);
                                        console.log(chart);
  //                                        $.globalEval( "draw_graph();" );
  //                                      eval(chart);
                                    });
                                  }); </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id="report_form" action="&lt;?php echo base_url(); ?&gt;reporting/generate_graph" method="post" class="form-horizontal" role="form"&gt;
                            
                                  &lt;div class="form-group"&gt;
                                      &lt;label for="" class="col-sm-3 control-label"&gt;Time Period- from:&lt;/label&gt;
                                      &lt;div class="col-sm-3"&gt;
                                          &lt;input name="date_start" id="start_date" type="date" name="" id="input" class="form-control" value="" required="required" title="" &gt;
                                      &lt;/div&gt;
                                      &lt;label for="" class="col-sm-3 control-label"&gt;To:&lt;/label&gt;
                                      &lt;div class="col-sm-3"&gt;
                                          &lt;input name="date_end" id="end_date" type="date" name="" id="input" class="form-control" value="&lt;?php echo date('Y-m-d'); ?&gt;" required="required" title=""&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label for="" class="col-sm-3 control-label"&gt;CB:&lt;/label&gt;
                                      &lt;div class="col-sm-3"&gt;
                                          &lt;div class="checkbox"&gt;
                                              &lt;label&gt;
                                                  &lt;input name="cb" type="checkbox" value="cb" id="cb"&gt;
                                              &lt;/label&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;label for="" class="col-sm-3 control-label"&gt;Cheque:&lt;/label&gt;
                                      &lt;div class="col-sm-3"&gt;
                                          &lt;div class="checkbox"&gt;
                                              &lt;label&gt;
                                                  &lt;input name="cheque" type="checkbox" value="cheque" id="cheque"&gt;
                                              &lt;/label&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label for="" class="col-sm-3 control-label"&gt;TR:&lt;/label&gt;
                                      &lt;div class="col-sm-3"&gt;
                                          &lt;div class="checkbox"&gt;
                                              &lt;label&gt;
                                                  &lt;input name="tr" type="checkbox" value="tr" id="tr"&gt;
                                              &lt;/label&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;label for="" class="col-sm-3 control-label"&gt;ESPECES:&lt;/label&gt;
                                      &lt;div class="col-sm-3"&gt;
                                          &lt;div class="checkbox"&gt;
                                              &lt;label&gt;
                                                  &lt;input name="especes" type="checkbox" value="especes" id="especes"&gt;
                                              &lt;/label&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt;
                                    &lt;div class="col-sm-9 col-sm-offset-3"&gt;
                                        &lt;button type="submit" class="btn btn-warning" &gt;Genarate&lt;/button&gt;
                                    &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/form&gt;
  
  
  &lt;div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"&gt;
                          &lt;div class="hidden-xs hidden-sm col-md-2 col-lg-2"&gt;&lt;/div&gt;
                          &lt;center&gt;
                            &lt;!-- The Div for Charts --&gt;
                              &lt;div class="col-xs-12 col-sm-12 col-md-8 col-lg-8" id="chart"&gt;
                               
                              &lt;/div&gt;
                          &lt;/center&gt;
                          &lt;div class="hidden-xs hidden-sm col-md-2 col-lg-2"&gt;&lt;/div&gt;
                           
                      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here is the html response that the above page will have</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body &gt;
      &lt;div id="chart_div"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  
  //function draw_graph() {
      alert('graph');
      Morris.Bar({
  
       element: 'chart_div',
       data: [
           &lt;?php foreach ($graph_data as $bars) { ?&gt;
               
           {y: 
               &lt;?php echo $bars['date']; ?&gt; , 
                  &lt;?php if($cb==true) { ?&gt;
                      a: &lt;?php echo $bars['cb']; ?&gt;,
                  &lt;?php } ?&gt;                                                
                  &lt;?php if($cheque==true) { ?&gt;
                      b: &lt;?php echo $bars['cheque']; ?&gt;,
                  &lt;?php } ?&gt;                                                
                  &lt;?php if($tr==true) { ?&gt;
                      c: &lt;?php echo $bars['tr']; ?&gt;,
                  &lt;?php } ?&gt;                                                
                  &lt;?php if($especes==true) { ?&gt;
                      d: &lt;?php echo $bars['especes']; ?&gt;,
                  &lt;?php } ?&gt;                                                
          }
          &lt;?php
              } 
          ?&gt;
       ],
       xkey: 'y',
       ykeys: ['a', 'b','c','d'],
       labels: ['CB', 'Cheque','TR','ESPECES'],
       resize:true
      });
  //}
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But Nothing happens. I want to generate the above graph. $graph_data is an array of a record set and it is fine. I have var_dump it and it gives a result array without any issue.</p>