JS file not loading via ajax call

Question

So what I'm doing is that when someone clicks on search button it loads carousel's html code via ajax call, which is in another file and places under the <div id="filter_product"></div>. And it's css and js is linked in file's header and footer where I am making ajax call. I am calling only html of carousel. Let me show you my code

ajax call is

                function submit() {
              $.ajax({
                method: "POST",
                url: "<?php echo base_url() ?>public_controller/search_product",
                dataType:'html',
                data: {color:color, year:year, cat:cat, brand:brand, model:model},
                success: function(data){
                  console.log(data);
                    $('#filter_product').html(data);
                }
              });
            }
            $(document).on('click','#serch_btn',function(){
              submit();
            })

controller code is

  public function search_product(){
$data['cat'] = $this->input->post('cat');
$data = $this->load->view('public/result_product',$data,TRUE);
echo $data;}

If i don't call carousel code via ajax call and simply place that in index.php it is working fine. but when i call code via ajax call then it's js file is not working and display is scrambled but html is loading fine. is there any way to solve this. thanks in advance

Answer 1

Function name submit is reserved. You can't use it. Try to rename it.

Suggestion: in PHP method you don't need to echo and base_url() you can use in the next way

public function search_product(){
    $data['cat'] = $this->input->post('cat');
    $this->load->view('public/result_product',$data);
}
//////////////////////////////////////////////////////////
url: "<?= base_url('public_controller/search_product') ?>",

Put line $('#filter_product').owlCarousel(); after $('#filter_product').html(data); in your AJAX request success function.