Problem with including css and js files in separate header file

i have this issue as well.

my case is:

let say i have master view page template.php -> here i declare the js + css required for my UI + my header, menu, content part, footer.

menu call the certain controller via ajax call, and show particular view in content part of template.php -> let's called it v_a.php

v_a.php only contain a datepicker textbox that will submitted to the controller via ajax too. this serve as $crud->where('db_table',value_from_datepicker);

the controller then will show the grid in partial view displayed just below datepicker in v_a.php. everything work perfectly.

until i realized when i go to another menu, the datepicker doesn't work anymore unless i refresh the page. this only happen after the grid is displayed. before it, datepicker work perfectly.

i don't know why.

please help.

here is my template.php

<html>
<head>
<!-- Loading JS File -->
<script src="<?php echo base_url();?>assets/grocery_crud/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="<?php echo base_url();?>assets/js/jquery-ui.js" type="text/javascript"></script>
<script src="<?php echo base_url();?>assets/js/tree.jquery.js" type="text/javascript"></script>
<!-- Loading CSS File -->
<link rel="stylesheet" type="text/css" media="all" href="<?php echo base_url();?>assets/css/style.css"/>
<link rel="stylesheet" type="text/css" media="all" href="<?php echo base_url();?>assets/css/jquery-ui-1.10.1.custom.min.css"/>
<link rel="stylesheet" type="text/css" media="all" href="<?php echo base_url();?>assets/css/jqtree.css">
<!-- Loading Custom JS -->
<script type="text/javascript">
$(document).ready(function(){
  $.ajax({
   url: "<?php echo base_url();?>Userpage/load_menu",
   type: "post",
   dataType: "json",
   success:function(results){
    // tree menu done!
    $('#tree1').tree({
     data: results,
     autoEscape: false
    });  
   }});
  $('#tree1').on('tree.click',function(event) {
    // The clicked node is 'event.node'
    var node = event.node;
    $.ajax({
      url: "<?php echo base_url();?>" + node.id,
      dataType: "json",
      type: "post",
      success:function(result){
       if(result){
        $('#main_content').empty();
        $('#main_content').append(result);
       }else{
        $('#main_content').empty();
       }
      }
     }); 
   }
  );
});
</script>
</head>
<body>
<div class='maincontainer'>
<div class='content_area'>
  <div class='sidebar_menu'>
   <div id="tree1"></div> --> this is the where menu will be displayed
  </div>
  <div class='content'>
   <div id='main_content'>
    <div>
     <?php echo $output; ?> --> this is where the content will be displayed
    </div>
   </div>
  </div>
</div>
</div>
</body>
</html>

then in v_a.php :

<script type="text/javascript">
function createPickers() {
  $("#datepicker1").datepicker({
    showAnim:'fadeIn',
    dateFormat:'dd-mm-y'
  });
}
$(document).ready(function(){
$("#show").click(function(e){
  var tgl1 = $("#datepicker1").val();
  e.preventDefault();
  $.ajax({
    url: "<?php echo base_url();?>atmprima/gridprima_st",
    type : "post",
    data: {
     tgl : tgl1
    },
    dataType: "json",
    success:function(html){
     var container = $('#grid1');
     if(html){
      container.empty();
      container.append(html);
      }
    }
   });
});
$(createPickers);
});
</script>
Tanggal :
<input type="text" id="datepicker1" />
<button id='show'>Show</button>
<br />
<div id='grid1'>
<?php echo $output; ?>
</div>

then in partial view of grid.php :

<?php
    if(isset($css_files)){
        foreach($css_files as $style){
            echo '<link href="'.$style.'" rel="stylesheet"/>';
        }
    }
    if(isset($js_files)){
        foreach($js_files as $script){
            echo '<script src="'.$script.'" type="text/javascript"></script>';
        }
    }
?>
<div>
    <?php echo $output; ?>
</div>

here is the image when datepicker work and grid already displayed

http://prntscr.com/25q9ho

then i click the same menu again / other menu that have datepicker, it wont work.

http://prntscr.com/25qa3l

ps: sorry for my bad english

Problem with including css and js files in separate header file

Tomislav

adityo01

Robert

adityo01