First, i need to explain you what am i doing :
Note : This project is using codeigniter framework
I have a view for the header and the tabs :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Backend-Vihara Dharma Bhakti</title>
<link href="../../../style/style_backend.css" rel="stylesheet" type="text/css">
<link href="<?php echo base_url(); ?>style/style_backend.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="<?php echo base_url(); ?>jquery/jquery-ui-1.10.2.custom/css/ui-lightness/jquery-ui-1.10.2.custom.min.css" />
<script language="javascript" type="text/javascript" src="<?php echo base_url(); ?>jquery/jquery-ui-1.10.2.custom/js/jquery-1.9.1.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo base_url(); ?>jquery/jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.min.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
$(function() {
$( "#tabs" ).tabs();
});
</script>
<div id="header"><h1>HEADER</h1></div>
<div id="tabs">
<ul>
<li>Daftar Umat</li>
<li>Daftar Pengurus</li>
<li>Absensi</li>
</ul>
</div>
</head>
Notice that i use the tabs to load different content(controller) below the header and tabs.
And the controller for the header and the tabs :
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Backend_home extends CI_Controller {
public function index()
{
$this->load->view('template/header_v');
}
}
Then, i have another view to show the content (i will use the first link(backend/umat) for the example)
<body>
<link rel="stylesheet" href="<?php echo base_url(); ?>jquery/jquery-ui-1.10.2.custom/css/ui-lightness/jquery-ui-1.10.2.custom.min.css" />
<script language="javascript" type="text/javascript" src="<?php echo base_url(); ?>jquery/jquery-ui-1.10.2.custom/js/jquery-1.9.1.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo base_url(); ?>jquery/jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.min.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div id="form_search">
<?php echo form_open('backend/index') ?>
<!--<p>
<?php echo form_dropdown('ddl_search', $data_search, 'id="ddl_search"');?>
</p>-->
<p>
Kelas :
<?php echo form_dropdown('ddl_kelas1', $list_kelas, 'id="ddl_kelas1"');?> -
<?php echo form_dropdown('ddl_kelas2', $list_kelas, 'id="ddl_kelas2"');?>
</p>
<p>
Nama : <?php echo form_input('txt_nama');?>
Alamat : <?php echo form_input('txt_alamat');?>
Tanggal Lahir : <input type="text" id="datepicker" />
</p>
<?php echo form_submit('btn_search', 'Search');?>
<?php echo form_close(); ?>
</div>
<div>
<?php echo $table ?>
<?php echo $pagination ?>
</div>
</body>
</html>
And its controller :
public function umat() {
//check authorization
if(!isset($_SESSION['username']))
redirect('backend');
//pagination
$config['base_url'] = site_url('/backend/umat/');
$config['total_rows'] = $this->backend_m->count_umat();
$config['per_page'] = 10;
$config['uri_segment'] = 3;
$config['full_tag_open'] = '<div id="pagination">';
$config['full_tag_close'] = '</div>';
$this->pagination->initialize($config);
$data['pagination'] = $this->pagination->create_links();
//table
$data_umat = $this->backend_m->get_umat();
$this->table->set_heading(
'No',
'Nama',
'Kelas',
'Alamat',
'Sekolah',
'Nomor Telepon',
'Keterangan'
);
$no = 1;
foreach($data_umat as $list_temp)
{
$this->table->add_row(
$no++,
$list_temp->nama,
$list_temp->kelas,
$list_temp->alamat,
$list_temp->sekolah,
$list_temp->no_tlpn,
$list_temp->keterangan
);
}
//masukkan data dari DB ke DDL
$data_kelas = $this->backend_m->get_kelas();
$data['list_kelas'][0] = 'Pilih Kelas';
foreach($data_kelas as $row)
{
$data['list_kelas'][$row->kelas_id] = $row->kelas;
}
/*$data_search = array('kelas' => 'Kelas',
'nama' => 'Nama',
'alamat' => 'Alamat',
'bulan' => 'Bulan Lahir');*/
$data['table'] = $this->table->generate();
$this->load->view('backend/umat_v', $data);
}
Note that i use pagination in this controller.
Main Problem
Because i use 2 different view(html) in my page, the url will follow the header(tabs) one.
Its url is http://localhost/ci_gabdb/index.php/backend_home
Everything works fine until i click the second page of my pagination's index. The url will change to http://localhost/ci_gabdb/index.php/backend/umat/10 and it makes my page lost its css and header(tabs).
Screen shoot
Before i click any pagination (the pagination index is below, i dont include it so you can see the header and tabs) : (http://localhost/ci_gabdb/index.php/backend_home)
After i click the second page of my pagination's index : (http://localhost/ci_gabdb/index.php/backend/umat/10)
Sorry for the long post :D Please kindly help me if you have any solution to this problem, i dont mind to change my code a lot.
You need to rethink how you're doing your templates. I use templates too, what you need to do is pass the view to the template.
Basic example.
Template page:
$this->load->view('header');
$this->load->view('content',$main_content);
$this->load->view('footer');
Then in your controllers for each page you do this:
$data['main_content'] = 'umat';
$this->load->view('template',$data);
So essentially what you're going to do is EVERY page you load is going to load the template file, the specific page is going to pass to the correct place in that template via $data.
This way you don't have to try and pass multiple views from every controller function and you don't have to worry about things like the issue you have now where pagination requires a single url.
If I'm understanding your issue correctly reworking your pages to load like this should solve your problem.
Related
So I have a main page named index.php, this contains the whole html page and the css and js assets as well.
<html>
<head>
<link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/main.css';?>">
<!-- this contains my other css -->
<head>
<body>
<div id="wrapper">
<div class="main-section">
<?= $home ?>
<!-- this is the section i want to replace using ajax -->
<!-- $home is a codeigniter view of the section for home -->
</div>
</div>
<script>
var BASE = "<?php echo site_url(); ?>";
</script>
<script src="<?php echo base_url().'assets/js/jquery.js';?>" type="text/javascript"></script>
<script src="<?php echo base_url().'assets/js/jquery.touchSwipe.min.js';?>" type="text/javascript"></script>
<!-- other js files -->
</body>
</html>
so when it is loaded like that, everything works fine. but when i use ajax function to change the content of main section like this,
JQ("#btnshop").on('click', function(e) {
e.preventDefault();
JQ.ajax({
url: BASE + "bhs/main/shop",
method: 'GET',
dataType: 'html',
data: {},
success: function(response) {
$(".bhs-main-section").empty().html(response);
}
});
});
and this is the code of the controller i'm getting my content
public function shop()
{
$data['tenants'] = $this->tenant->getTenants();
$data['tenants_categories'] = $this->tenant_category->find(1);
$this->load->view('bhs/shop', $data);
}
Any ideas why some of the css, and js are breaking? Thanks in advance
Ajax will never load the view
you need to echo the content in controller instead of loading view
public function shop()
{
$data['tenants'] = $this->tenant->getTenants();
$data['tenants_categories'] = $this->tenant_category->find(1);
$echo $this->load->view('bhs/shop', $data);
}
when your view content ge that time you give third parameter in $
$this->load->view('view name',$data,true);
true mean retrun content.
public function shop()
{
$data['tenants'] = $this->tenant->getTenants();
$data['tenants_categories'] = $this->tenant_category->find(1);
$content= $this->load->view('bhs/shop', $data,TRUE);
echo $content;
}
I am struggling with autocompletion via CodeIgniter. I followed a tutorial on http://www.codersmount.com/2012/09/jquery-ui-autocomplete-in-codeigniter-with-database/ .
I changed my database etc and the variables but when changing the database to one that not exists it doesn't gives any error so I guess it's something in the view itself but can't figure out what.
Thanks in advance
<?php
?>
<!DOCTYPE html>
<html lang="en-US">
<head>
<link href="<?php echo base_url() . 'resources/css/jquery-ui-1.10.3.custom.css' ?>" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="<?php echo base_url() . 'resources/js/jquery-1.9.1.js' ?>"></script>
<script type="text/javascript" src="<?php echo base_url() . 'resources/js/jquery-ui-1.10.3.custom.js' ?>"></script>
<script>
$(document).ready(function() {
alert('test');
$(function() {
$("#test").autocomplete({
source: "birds/get_birds"
});
});
});
</script>
<title>Add Project</title>
</head>
<body>
ID :<input type="text" id="test"> <br>
</body>
</html>
Here is my controller :
<?php
//birds.php
class Birds extends CI_Controller{
function index(){
$this->load->view('birds_view');
}
public function get_birds(){
$this->load->model('birds_model');
if (isset($_GET['term'])){
$q = strtolower($_GET['term']);
$this->birds_model->get_bird($q);
}
}
}
?>
Here is my Model :
<?php
//birds_model.php (Array of Strings)
class Birds_model extends CI_Model{
function get_bird($q){
$this->db->select('Code');
$this->db->like('Code', $q);
$query = $this->db->get('R_Projects');
if($query->num_rows > 0){
foreach ($query->result_array() as $row){
$row_set[] = htmlentities(stripslashes($row['Code'])); //build an array
}
echo json_encode($row_set); //format the array into json data
}
}
}
source: "birds/get_birds"
needs to be this :
source: "<?php echo site_url('birds/getbirds'); ?>"
This question already has an answer here:
Codeigniter include not working?
(1 answer)
Closed 9 years ago.
I just got a very frustating error. I always use require 'file_name' when i tried to load a view (ex : header).
Im using CI now and i tried to do something like this : <?php require 'header_v.php';?> in my home_v.php but it always give me the No such file or directory error.
This is header_v.php :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Backend-Vihara Dharma Bhakti</title>
<link href="../../../style/style_backend.css" rel="stylesheet" type="text/css">
<link href="<?php echo base_url(); ?>style/style_backend.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="<?php echo base_url(); ?>jquery/jquery-ui-1.10.2.custom/css/ui-lightness/jquery-ui-1.10.2.custom.min.css" />
<script language="javascript" type="text/javascript" src="<?php echo base_url(); ?>jquery/jquery-ui-1.10.2.custom/js/jquery-1.9.1.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo base_url(); ?>jquery/jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.min.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
$(function() {
$( "#tabs" ).tabs();
});
</script>
<div id="header"><h1>HEADER</h1></div>
<div id="tabs">
<ul>
<li>Daftar Umat</li>
<li>Daftar Pengurus</li>
<li>Absensi</li>
</ul>
</div>
</head>
And this is home_v.php (the one that require header_v.php) :
<body>
<link rel="stylesheet" href="<?php echo base_url(); ?>jquery/jquery-ui-1.10.2.custom/css/ui-lightness/jquery-ui-1.10.2.custom.min.css" />
<script language="javascript" type="text/javascript" src="<?php echo base_url(); ?>jquery/jquery-ui-1.10.2.custom/js/jquery-1.9.1.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo base_url(); ?>jquery/jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.min.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<?php require 'header_v.php';?>
<div id="form_search">
<?php echo form_open('backend/index') ?>
<p>
<?php echo form_dropdown('ddl_search', $data_search, 'id="ddl_search"');?>
</p>
<p>
Kelas :
<?php echo form_dropdown('ddl_kelas1', $list_kelas, 'id="ddl_kelas1"');?> -
<?php echo form_dropdown('ddl_kelas2', $list_kelas, 'id="ddl_kelas2"');?>
</p>
<p>
Nama : <?php echo form_input('txt_nama');?>
Alamat : <?php echo form_input('txt_alamat');?>
Tanggal Lahir : <input type="text" id="datepicker" />
</p>
<?php echo form_submit('btn_search', 'Search');?>
<?php echo form_close(); ?>
</div>
<div>
<?php echo $table ?>
<?php echo $pagination ?>
</div>
</body>
</html>
What am i missing?Does it has something to do with config.php, routes.php or other CI's settings?Because i have use this way so many time and its always working except now.
Thanks for your help :D
NOTE : The file name is right, header_v and home_v is in the same folder(views).
The correct way to load a view file is this:
$this->load->view('file-in-views-folder')
To use the require function in CI, you have to type the full path of that file.
Like:
<?php require '/var/www/main/application/views/header_v.php';?>
But, the correct way using CI, is to load the view in your controller.
$this->load->view("header_v");
and then
$this->load->view("home_v"); //remove the require function from your code.
Why don't you load in your controller file?
$this->load->view('header_v');
$this->load->view('home_v');
if you want to output somenthing use
echo $this->load->file('/path/to/myfile');
if it's a view
echo $this->load->view('myviewname');
if it's a php library or an helper (so you haven't to output somenthing but just require or include classes and methods):
$this->load->helper();
$this->load->library();
Remember
views has to stay under /application/views folder
libraries under /application/libraries
helpers under /application/helpers
general files types can stay where you want since you use to load them with the enteire path to them /path/to/my/file
I'm testing jquery.pjax.js and noticed a problem.
In my minimum test project, strange behavior like below happens:
Access to index.php in fireflx
Click a pjax link: location bar and page contents are changed
Click Firefox's back button: location bar is changed but contents remain
This behavior doesn't happen in GoogleChrome.
I want to know how to solve this.
My test project is:
http://karasunouta.com/php_test/pjax/
http://karasunouta.com/files/pjax.zip
index.php
<?php
$page = 1;
if (isset($_GET['page'])) {
$page = $_GET['page'];
}
$isPjax = false;
if (!empty($_SERVER['HTTP_X_PJAX'])) {
$isPjax = true;
}
if (!$isPjax):
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>page<?php echo $page; ?></title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.pjax.js"></script>
<script type="text/javascript">
$(function(){
// link
$(document).pjax('a.pjax', '#main');
// form
$(document).on('submit', 'form', function(event) {
$.pjax.submit(event, '#main')
})
});
</script>
</head>
<body>
<h1>pjax test</h1>
<ul class="links">
<li>page1</li>
<li>page2</li>
<li>page3</li>
</ul>
<form>
Pageļ¼<input name="page" type="text" value="1">
<input type="submit">
</form>
<div id="main" style="border: 3px double gray">
<?php endif; ?>
<?php include("page/{$page}.html") ?>
<?php if (!$isPjax): ?>
</div>
</body>
</html>
<?php endif; ?>
page/1.html
page1 contents
page/2.html
page2 contents
page/3.html
page3 contents
js/jquery-1.9.1.min.js
js/jquery.pjax.js
I could have found a solution by myself...
before:
$(function(){
// apply pjax
});
after:
$(document).ready(function() {
// apply pjax
});
Now firefox back button looks working fine.
I'm not sure about reason why.
Actual behaviors of them looks different though several texts says the two writing form meanings are exactly same...
i want to delete a record that are showing in while loop from the database but before deleting i want to display a confirmation box.The code i have written is below.it is working fine but to delete record i need to pass an id that i haave described in the code
------index.php starts
<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A jQuery Confirm Dialog Replacement with CSS3 | Tutorialzine Demo</title>
<link href='http://fonts.googleapis.com/css?family=Cuprum&subset=latin' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="jquery.confirm/jquery.confirm.css" />
</head>
<body>
<div id="page">
<?php
$sql = "SELECT * FROM tablename";
$result = db_query($sql);
while(db_fetch($result))
{
?>
//here we need to pass the fetched record id to script.js file,but i dont know how
<div class="item">
<div class="delete"></div> //here i have applied css i.e it displays wrong icon, when we click on that icon ,it is showing confirmation box. Everything is perfect in this.. but i wnat to pass and id.. im new to jquery
</div>
<?php
}
?>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="jquery.confirm/jquery.confirm.js"></script>
<script src="js/script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A jQuery Confirm Dialog Replacement with CSS3 | Tutorialzine Demo</title>
<link href='http://fonts.googleapis.com/css?family=Cuprum&subset=latin' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="jquery.confirm/jquery.confirm.css" />
</head>
<body>
<div id="page">
<?php
$sql = "SELECT * FROM tablename";
$result = db_query($sql);
while(db_fetch($result))
{
?>
<div class="item">
<div class="delete"></div>
</div>
<?php
}
?>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="jquery.confirm/jquery.confirm.js"></script>
<script src="js/script.js"></script>
</body>
</html>
----index.php ends
----jquery.confirm.js file starts
(function($){
$.confirm = function(params){
if($('#confirmOverlay').length){
// A confirm is already shown on the page:
return false;
}
var buttonHTML = '';
$.each(params.buttons,function(name,obj){
// Generating the markup for the buttons:
buttonHTML += ''+name+'<span></span>';
if(!obj.action){
obj.action = function(){};
}
});
var markup = [
'<div id="confirmOverlay">',
'<div id="confirmBox">',
'<h1>',params.title,'</h1>',
'<p>',params.message,'</p>',
'<div id="confirmButtons">',
buttonHTML,
'</div></div></div>'
].join('');
$(markup).hide().appendTo('body').fadeIn();
var buttons = $('#confirmBox .button'),
i = 0;
$.each(params.buttons,function(name,obj){
buttons.eq(i++).click(function(){
// Calling the action attribute when a
// click occurs, and hiding the confirm.
obj.action();
$.confirm.hide();
return false;
});
});
}
$.confirm.hide = function(){
$('#confirmOverlay').fadeOut(function(){
$(this).remove();
});
}
})(jQuery);
----jquery.confirm.js file ends
-----script.js file starts
$(document).ready(function(){
$('.item .delete').click(function(){
var elem = $(this).closest('.item');
$.confirm({
'title' : 'Delete Confirmation',
'message' : 'You are about to delete this item. <br />It cannot be restored at a later time! Continue?',
'buttons' : {
'Yes' : {
'class' : 'blue',
'action': function(){
elem.slideUp();
//sql delete query will be written here... in where condition i need to pass the fetched record id from index.php file in where condtion
}
},
'No' : {
'class' : 'gray',
'action': function(){} // Nothing to do in this case. You can as well omit the action property.
}
}
});
});
});
-----script.js ends
You can use the html data attribute and retrieve it with .data jQuery method
In your HTML:
<div class="delete" data-id="{$id}"></div>
In your Javascript
$('.item .delete').click(function(){
var elem = $(this).closest('.item');
var id = elem.data('id'); /* this is your db id */
});
Are you sure you want to send a query from Javascript? The usual way to do this is to send a request (via jQuery) with that specific id, to a script which runs the query (server side), and returns a response.
Now, since you add the item divs, using a while, why not add an id property to the divs, which contain the id from the database, something like
<div id="item<?php echo $row['id'];?>" class="item">
<div class="delete">
</div>
This way, the $('.item .delete').click handler has access to the item's id, by parsing the target's id property, and you don't need to pass it explicitly to jQuery.
Here you can use hidden field to save value for id and then use jquery to retrieve it from hidden field..
while(db_fetch($result))
{
?>
//here we need to pass the fetched record id to script.js file,but i dont know how
<input type="hidden" id="hid_id" value="<?php echo 'fetched id';?>" />
<div class="item">
<div class="delete"></div> //here i have applied css i.e it displays wrong icon, when we click on that icon ,it is showing confirmation box. Everything is perfect in this.. but i wnat to pass and id.. im new to jquery
</div>
<?php
}
?>
And then in jquery when using confirm box you can get value by id hid_id .