[Solved] Image Not Display With Javascript

[eluser]riwakawd[/eluser]
On my controller setting.php I have a function which should get image file. To work with my JavaScript function on my view but currently not working no image displaying the function is correct locations.

My configs library is autoloaded.

On Controller.

Code:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
    
class Setting extends MX_Controller {
    
public function __construct() {
parent::__construct();
$this->lang->load('admin/setting/setting', 'english');
$this->lang->load('admin/english', 'english');

if ($this->session->userdata('user_id') == true) {
  return true;
} else {
  redirect('admin');
}
}
    
public function index() {
$data = array();
    
$this->document->setTitle($this->lang->line('heading_title'));
    
$data['text_yes'] = $this->lang->line('text_yes');
$data['text_no'] = $this->lang->line('text_no');
    
// Website
$data['entry_meta_title'] = $this->lang->line('entry_meta_title');
$data['entry_meta_description'] = $this->lang->line('entry_meta_description');
$data['entry_meta_keyword'] = $this->lang->line('entry_meta_keyword');
$data['entry_template'] = $this->lang->line('entry_template');
      
// Buttons
$data['button_save'] = $this->lang->line('button_save');
$data['button_cancel'] = $this->lang->line('button_cancel');
    
// Links
$data['action'] = site_url('admin/setting');
$data['logout'] = site_url('admin/logout');
$data['cancel'] = site_url('admin/dashboard');
    
$this->load->model('admin/setting/model_setting');
    
// Website
    
if (empty($config_meta_title)) {
  $data['config_meta_title'] = $this->configs->get('config_meta_title');
}
    
if (empty($config_meta_description)) {
  $data['config_meta_description'] = $this->configs->get('config_meta_description');
}
    
if (empty($config_meta_keyword)) {
  $data['config_meta_keyword'] = $this->configs->get('config_meta_keyword');
}
    
if (empty($config_template)) {
  $data['config_template'] = $this->configs->get('config_template');
}
    
$data['templates'] = array();
    
$directories = glob(APPPATH . 'modules/catalog/views/theme/*', GLOB_ONLYDIR);
    
foreach ($directories as $directory) {
  $data['templates'][] = basename($directory);
}
    
$data['image'] = DIR_IMAGE . 'templates/' . $this->configs->get('config_template') . '.png';
    
if (empty($config_layout_id)) {
  $data['config_layout_id'] = $this->configs->get('config_layout_id');
}
    
$this->load->library('form_validation');
    
    
// Website Validation
    
$this->form_validation->set_rules('config_meta_title', 'Meta Title');
    
    
if ($this->form_validation->run() == FALSE) {
    
return $this->load->view('setting/settings', $data);
    
} else {
    
$config_meta_title = $this->model_setting->edit_website_meta_title($this->input->post('config_meta_title'));
    
$config_meta_description = $this->model_setting->edit_website_meta_description($this->input->post('config_meta_description'));
    
$config_meta_keyword = $this->model_setting->edit_website_meta_keyword($this->input->post('config_meta_keyword'));
    
$config_template = $this->model_setting->edit_website_template($this->input->post('config_template'));
    
$config_layout_id = $this->model_setting->edit_website_layout_id($this->input->post('config_layout_id'));
    
redirect('admin/dashboard');
    
}
      
}    
public function template() {
    
$this->load->helper('html');
if (file_exists(FCPATH . 'image/templates/' . $this->configs->get('config_template') . '.png') == FALSE) {
echo img('image/no_image.png');
} else {
echo img('image/templates/' . basename($this->configs->get('config_template')) . '.png');
  
}

}
  
}

On view

Need js to work with function on controller and the load display the img

Code:

<form >
<div class="form-group">
<label class="col-sm-2 control-label" for="input-template">&lt;?php echo $entry_template; ?&gt;</label>
<div class="col-sm-10">
<select name="config_template" id="input-template" class="form-control">
&lt;?php foreach ($templates as $template) { ?&gt;
&lt;?php if ($template == $config_template) { ?&gt;
<option value="&lt;?php echo $template; ?&gt;" selected="selected">&lt;?php echo $template; ?&gt;</option>
&lt;?php } else { ?&gt;
<option value="&lt;?php echo $template; ?&gt;">&lt;?php echo $template; ?&gt;</option>
&lt;?php } ?&gt;
&lt;?php } ?&gt;
</select>


// Should Work With Javascript
<div class="form-group">
<div class="col-lg-4">
<img src="" alt="" id="template" class="img-thumbnail"/>
</div>
</div>

</div>
</div>
</div>

&lt;/form&gt;
[removed]
$('select[name=\'config_template\']').on('change', function() {
$.ajax({
  url: &lt;?=base_url() .'admin/setting/template/' ?&gt; + encodeURIComponent(this.value),
  dataType: 'html';
  complete: function() {
   $('.fa-spin').remove();
  },
  success: function(html) {
      $('.fa-spin').remove();

   $('#template').attr('src', html);
  },
  error: function(xhr, ajaxOptions, thrownError) {
   alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
  }
});
});

$('select[name=\'config_template\']').trigger('change');
[removed]

[eluser]riwakawd[/eluser]
Thanks to Tim Brownlaw who helped me on Skype about this issue thought me a lot.

Problem is now fixed.

On view We added

Code:

[removed]
console.log('Jquery is working');
$('select[name="config_template"]').on('change', function () {
  var template_name;
  template_name = encodeURIComponent(this.value);
  $.ajax({
   type: 'POST',
   dataType: 'json',
   url: '<?php echo base_url('admin/setting/template');?>'  + '/',
   data: { config_template: template_name
   },
   complete: function () {
    $('.fa-spin').remove();
   },
   success: function (data) {
    $('.fa-spin').remove();
    $('#template').attr('src', data.image);
   },
   error: function (xhr, ajaxOptions, thrownError) {
    alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
   }
  });
})
[removed]

On controller added

Code:

public function template() {
  $this->load->helper('html');
  if (file_exists(FCPATH . 'image/templates/' . $this->configs->get('config_template') . '.png') == FALSE) {
   $img = base_url('image/no_image.png');
   echo json_encode(array('image'=>$img));
  }
  else
  {
   if($this->input->post('config_template') !== FALSE)
   {
    $img = base_url('image/templates/' . $this->input->post('config_template') . '.png');
    echo json_encode(array('image'=>$img));
   }
  }
}