I am currently developing a single page application using CodeIgniter and jQuery. The master page consists of the upper part of HTML including the CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>BGC</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/fontawesome.min.css';?>">
<!-- other css here -->
<!--[if lt IE 9]><script src="js/html5shiv.js"></script><![endif]-->
</head>
<body>
<div id="main-section">
</div>Then, there is a footer page to include the lower part of the HTML.
<script>
var BASE = "<?php echo site_url(); ?>";
</script>
<script src="<?php echo base_url().'assets/js/jquery.js';?>" type="text/javascript"></script>
<!-- other js scripts here -->
</body>
</html>The main-section div is where I plan to insert dynamic pages using jQuery and CodeIgniter views. However, when trying to fetch and load them into the container, the JS and CSS seem to be getting corrupted without any errors being thrown.
This is how I fetch them from CodeIgniter:
public function shop() {
$this->load->view('display/shop');
}
And this is how I use jQuery for AJAX request:
JQ("#btnshop").on('click', function(e) {
e.preventDefault();
JQ.ajax({
url: BASE + "/display/home/shop",
data: {},
success: function(result) {
JQ("#main-section").html(result);
}
});
return false;
});
The #shop refers to the ID of the navigation button, which I have not included here. Any suggestions or ideas on how to resolve this issue would be greatly appreciated. Thank you in advance!