Codeigniter Ajax Pagination Links Triggers Off-Canvas To Open - ajax

Question

On my ajax below I generate 2 lots of pagination results.
When I click on the pagination links for some reason it triggers my off canvas menu to open.
Question: How can I make sure that only when I click on the class
.navbar-brand will open off canvas?
<script type="text/javascript">
$(document).ready(function() {
var menuToggle = $('.navbar-brand');
var menuToggleIcon = menuToggle.find('.fa');
var offCanvas = $('.offcanvas');
var content = $('.content');
menuToggle.click(function() {
closeMenu(menuToggleIcon, offCanvas);
});
content.click(function() {
closeMenu(menuToggleIcon, offCanvas);
});
function closeMenu(menuToggleIcon, offCanvas) {
menuToggleIcon.toggleClass('fa-indent fa-outdent');
offCanvas.toggleClass('open');
}
});
</script>
<script type="text/javascript">
$(document).ready(function() {
function load_questions_data(page){
$.ajax({
url:"<?php echo base_url(); ?>dashboard/questions_pagination/" + page,
method:"GET",
dataType:"json",
success:function(data) {
$('#questions_table').html(data.questions_table);
$('#question_pagination_link').html(data.pagination1_link);
}
});
}
load_questions_data(1);
$(document).on("click", ".question-pag li a", function(event){
event.preventDefault();
var page = $(this).data("ci-pagination-page");
load_questions_data(page);
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
function load_users_data(page){
$.ajax({
url:"<?php echo base_url(); ?>dashboard/users_pagination/" + page,
method:"GET",
dataType:"json",
success:function(data) {
$('#users_table').html(data.users_table);
$('#user_pagination_link').html(data.pagination2_link);
}
});
}
load_users_data(1);
$(document).on("click", ".user-pag li a", function(event){
event.preventDefault();
var page = $(this).data("ci-pagination-page");
load_users_data(page);
});
});
</script>
Controller
<?php
class Dashboard extends MY_Controller {
public $data = array();
public function __construct() {
parent::__construct();
$this->load->model('user/user_model');
$this->load->model('forum/question_model');
$this->load->library('pagination');
}
public function index() {
$this->data['title'] = 'Dashboard';
$this->data['is_logged'] = $this->session->userdata('is_logged');
$this->data['navbar'] = $this->load->view('common/navbar', $this->data, TRUE);
$this->load->view('common/header', $this->data);
$this->load->view('common/dashboard', $this->data);
$this->load->view('common/footer', $this->data);
}
public function users_pagination() {
$config = array();
$config["base_url"] = "#";
$config["total_rows"] = $this->user_model->total_users();
$config["per_page"] = 2;
$config["uri_segment"] = 3;
$config["use_page_numbers"] = TRUE;
$config["num_links"] = 1;
$config["full_tag_open"] = '<ul class="pagination user-pag">';
$config["full_tag_close"] = '</ul>';
$config["first_tag_open"] = '<li>';
$config["first_tag_close"] = '</li>';
$config["last_tag_open"] = '<li>';
$config["last_tag_close"] = '</li>';
$config['next_link'] = '>';
$config["next_tag_open"] = '<li>';
$config["next_tag_close"] = '</li>';
$config["prev_link"] = "<";
$config["prev_tag_open"] = "<li>";
$config["prev_tag_close"] = "</li>";
$config["cur_tag_open"] = "<li class='active'><a href='#'>";
$config["cur_tag_close"] = "</a></li>";
$config["num_tag_open"] = "<li>";
$config["num_tag_close"] = "</li>";
$this->pagination->initialize($config);
$page = $this->uri->segment(3);
$start = ($page - 1) * $config["per_page"];
$output = array(
'pagination2_link' => $this->pagination->create_links(),
'users_table' => $this->user_model->get_ajax_users($config["per_page"], $start)
);
echo json_encode($output);
}
public function questions_pagination() {
$config = array();
$config["base_url"] = "#";
$config["total_rows"] = $this->question_model->total_questions();
$config["per_page"] = 2;
$config["uri_segment"] = 3;
$config["use_page_numbers"] = TRUE;
$config["num_links"] = 1;
$config["full_tag_open"] = '<ul class="pagination question-pag">';
$config["full_tag_close"] = '</ul>';
$config["first_tag_open"] = '<li>';
$config["first_tag_close"] = '</li>';
$config["last_tag_open"] = '<li>';
$config["last_tag_close"] = '</li>';
$config['next_link'] = '>';
$config["next_tag_open"] = '<li>';
$config["next_tag_close"] = '</li>';
$config["prev_link"] = "<";
$config["prev_tag_open"] = "<li>";
$config["prev_tag_close"] = "</li>";
$config["cur_tag_open"] = "<li class='active'><a href='#'>";
$config["cur_tag_close"] = "</a></li>";
$config["num_tag_open"] = "<li>";
$config["num_tag_close"] = "</li>";
$this->pagination->initialize($config);
$page = $this->uri->segment(3);
$start = ($page - 1) * $config["per_page"];
$output = array(
'pagination1_link' => $this->pagination->create_links(),
'questions_table' => $this->question_model->get_ajax_questions($config["per_page"], $start)
);
echo json_encode($output);
}
}
Full View
<!-- No Data is currently set inside offcanvas -->
<div class="offcanvas"></div>
<div class="wrap">
<?php echo $navbar;?>
<div class="container-fluid">
<div class="content">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h2>Dashboard</h2>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="content">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<div id="questions_table"></div>
<div id="question_pagination_link"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<div id="users_table"></div>
<div id="user_pagination_link"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
function load_questions_data(page){
$.ajax({
url:"<?php echo base_url(); ?>dashboard/questions_pagination/" + page,
method:"GET",
dataType:"json",
success:function(data) {
$('#questions_table').html(data.questions_table);
$('#question_pagination_link').html(data.pagination1_link);
}
});
}
load_questions_data(1);
$(document).on("click", ".question-pag li a", function(event){
event.preventDefault();
var page = $(this).data("ci-pagination-page");
load_questions_data(page);
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
function load_users_data(page){
$.ajax({
url:"<?php echo base_url(); ?>dashboard/users_pagination/" + page,
method:"GET",
dataType:"json",
success:function(data) {
$('#users_table').html(data.users_table);
$('#user_pagination_link').html(data.pagination2_link);
}
});
}
load_users_data(1);
$(document).on("click", ".user-pag li a", function(event){
event.preventDefault();
var page = $(this).data("ci-pagination-page");
load_users_data(page);
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
var menuToggle = $('.navbar-brand');
var menuToggleIcon = menuToggle.find('.fa');
var offCanvas = $('.offcanvas');
var content = $('.content');
menuToggle.click(function() {
closeMenu(menuToggleIcon, offCanvas);
});
content.click(function() {
closeMenu(menuToggleIcon, offCanvas);
});
function closeMenu(menuToggleIcon, offCanvas) {
menuToggleIcon.toggleClass('fa-indent fa-outdent');
offCanvas.toggleClass('open');
}
});
</script>

Answer 1

You need to use event.stopPropagation() when you click on a pagination link like,
$(document).on("click", ".question-pag li a", function(event){
event.preventDefault();
event.stopPropagation(); // it will prevent your content click function
var page = $(this).data("ci-pagination-page");
load_questions_data(page);
});
And, for users data
$(document).on("click", ".user-pag li a", function(event){
event.preventDefault();
event.stopPropagation(); // it will prevent your content click function
var page = $(this).data("ci-pagination-page");
load_users_data(page);
});

Answer 2

Thanks to #Rohan Kumar for the answer with pagination links part
I have fixed the problem main problem was here in the off canvas script
New Code
<script type="text/javascript">
$(document).ready(function() {
var menuToggleIcon = $('.navbar-brand').find('.fa');
$('.navbar-brand').on('click', function() {
menuToggleIcon.toggleClass('fa-indent fa-outdent');
$('.offcanvas').toggleClass('open');
});
});
</script>
Old Script
<script type="text/javascript">
$(document).ready(function() {
var menuToggle = $('.navbar-brand');
var menuToggleIcon = menuToggle.find('.fa');
var offCanvas = $('.offcanvas');
var content = $('.content');
menuToggle.click(function() {
closeMenu(menuToggleIcon, offCanvas);
});
content.click(function() {
closeMenu(menuToggleIcon, offCanvas);
});
function closeMenu(menuToggleIcon, offCanvas) {
menuToggleIcon.toggleClass('fa-indent fa-outdent');
offCanvas.toggleClass('open');
}
});
</script>