The header.php has a <div id="content"></div> and then will load the page user.php
Q1: Is javascript coding on the header.php can not interact with the loaded content?
Therefore I put the js code on the loaded page, but i found a little bit strange.
Q2:
The paging function is working, suppose it is on page 4.
After I editting one of the row, the page go back to first page. I want to keep it on page 4.
< 1 2 3 4 5 6>
I want to store the current link as a text within a after i click the paging, however the link is stored first and then page will refresh and clear the data.
The href of the paging links will look like
localhost://blog/index.php/admin/users/show/10
localhost://blog/index.php/admin/users/show/20
localhost://blog/index.php/admin/users/show/30
Please point out the solution or suggest another better solution
$("input[name=submit]").click(function() {
$(this).parents('.alert-box').hide();
$form = $(this).parent('form');
$.post(
$form.attr('action'),
$form.find(':input').serializeArray(),
function(data) {
$("#content").html(data);
}
);
});
View:header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="<?= $css; ?>bootstrap.css" rel="stylesheet" type="text/css">
<link href="<?= $css; ?>basic/basic.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="<?= $js; ?>jquery.js"></script>
<script type="text/javascript" src="<?= $js; ?>jquery_validate.js"></script>
<script type="text/javascript" src="<?= $js; ?>form_control.js"></script>
<script type="text/javascript" src="<?= $js; ?>additional-methods.min.js"></script>
</head>
<body>
<style>
#content{
background-color: #D0D0D0;
float:left;
width:80%;
}
#main-frame{
width:100%;
}
#list{
width:18%;
float:left;
}
#delete-alert-box{
background-color: #269abc;
position: absolute;
z-index: 99999;
display: none;
}
#edit-alert-box{
background-color: #269abc;
position: absolute;
z-index: 99999;
display: none;
}
body{
font-size:2em;
}
</style>
<script language="javascript">
$(document).ready(function() {
init();
$('.open').click(function(e) {
e.preventDefault();
$.post($(this).attr('href'), function(data) {
$('#content').html(data);
});
});
});
function init() {
$.post(
"<?php echo site_url("admin/users/show");?>", function(data) {
$("#content").html(data);
}
);
}
</script>
<div id="header">
<div id="logo">
</div>
<?php if ($this->AuthModel->check_admin_log()) { ?>
Logout
<?php }
?>
</div>
<ul id="list">
<li>
Users Manage
</li>
<li>
Group Manage
</li>
<li>
Post Mange
</li>
<li>
System Setting
</li>
<li>
<a href="<?php echo site_url('logout/admin') ?>" >Logout</a>
</li>
</ul>
<div id="content" class="box"></div>
view:users.php
<table border="1">
<tr><th>User Id</th><th>User Name</th><th>Email</th><th>Registeration Date</th><th>Group</th><th>State</th><th>Operation</th></tr>
<?php foreach ($users as $user): ?>
<tr>
<td><?= $user->id; ?></td>
<td><?= $user->username; ?></td>
<td><?= $user->email; ?></td>
<td><?= mdate('%Y-%m-%d', $user->registeration_time); ?></td>
<td><?= $user->user_type; ?></td>
<td><?= $user->account_status; ?></td>
<td>
<button type="button" value="<?php echo $user->id; ?>" name="delete">X</button>
<button type="button" value="<?php echo $user->id; ?>" name="edit">edit</button>
</td>
</tr>
<?php endforeach; ?>
</table>
<?php echo $links ?>
<div id="delete-alert-box" class="alert-box">
<div class="cancel">X</div>
<h3>Are you sure to delete the account?</h3>
<form action="<?php echo site_url('admin/users/delete') ?>" id="deleteForm">
<input type="hidden" value="" name="user_id">
<input type="button" value="Yes" name="submit">
<input type="button" value="No" name="cancel">
</form>
</div>
<div id="edit-alert-box" class="alert-box">
<div class="cancel">X</div>
<h3>Edit User:<span id="username"></span></h3>
<form action="<?php echo site_url('admin/users/edit') ?>" id="editForm">
<table>
<tr>
<td>Group</td>
<td>
<select name="group" id="group">
<option value="1">Nomal User</option>
<option value="2">Amin</option>
</select>
</td>
</tr>
<tr>
<td>State</td>
<td>
<select name="state" id="state">
<option value="1">Activated</option>
<option value="2">Non-Activated</option>
<option value="3">Blocked</option>
</select>
</td>
</tr>
</table>
<input type="hidden" value="" name="user_id">
<input type="button" value="Yes" name="submit">
<input type="button" value="No" name="cancel">
</form>
</div>
<script>
$(document).ready(function() {
$(".cancel").click(function() {
$(this).parent('.alert-box').hide();
});
$("input[name=cancel]").click(function() {
$(this).parents('.alert-box').hide();
});
$("button[name=delete]").click(function() {
var $user_id = $(this).attr('value');
if ($user_id !=<?php echo $this->session->userdata('user_id') ?>) {
$("#delete-alert-box").show();
$('#delete-alert-box').find('input[type=hidden]').attr('value', $user_id);
}
});
$("button[name=edit]").click(function() {
var $user_id = $(this).attr('value');
if ($user_id !=<?php echo $this->session->userdata('user_id') ?>) {
$("#edit-alert-box").show();
var $tr = $(this).parents('tr');
var $tds = $tr.find('td');
$('#edit-alert-box').find('input[type=hidden]').attr('value', $user_id);
$('#group').find('option').each(function(index) {
$(this).removeAttr('selected');
});
$('#group').find("option[value=" + get_group_code($($tds[4]).html()) + "]").attr('selected', 'selected');
$('#state').find("option[value=" + get_account_code($($tds[5]).html()) + "]").attr('selected', 'selected');
}
});
$("input[name=submit]").click(function() {
$(this).parents('.alert-box').hide();
$form = $(this).parent('form');
$.post(
$form.attr('action'),
$form.find(':input').serializeArray(),
function(data) {
$("#content").html(data);
}
);
});
$('.paging a').click(function(e) {
e.preventDefault();
$.post($(this).attr("href"), function(data) {
$("#content").html(data);
});
});
});
function get_group_code(name) {
switch (name) {
case "Normal User":
return 1;
case "Admin":
return 2;
}
}
function get_account_code(name) {
switch (name) {
case "Activated":
return 1;
case "Non-Activated":
return 2;
case "Blocked":
return 3;
}
}
</script>
Controller: admin/users.php
function pagination() {
$this->load->library('pagination');
$config['base_url'] = site_url('admin/users/show');
$config['total_rows'] = $this->UsersModel->get_num_rows();
$config['per_page'] = '10';
$config['uri_segment'] = 4;
$config['full_tag_open'] = '<p class="paging">';
$config['full_tag_close'] = '</p>';
$this->pagination->initialize($config);
return $this->pagination->create_links();
}
public function show() {
$data['users'] = $this->UsersModel->get_users(10, $this->uri->segment(4, 0));
$data['links'] = $this->pagination();
$this->load->view('admin/users', $data);
}
public function delete() {
$user_id = $this->input->post('user_id');
if (!$this->UsersModel->delete_user($user_id)) {
echo "Unknown error";
}
$this->show();
}
public function edit() {
$user_id = $this->input->post('user_id');
$state = $this->input->post('state');
$group = $this->input->post('group');
$data = array(
'id' => $user_id,
'account_status_code' => $state,
'group_status_code' => $group
);
if (!$this->UsersModel->edit_user($data)) {
echo "Unknown error";
}
$this->show();
}
The paging function is working, suppose it is on page 4. After I
editting one of the row, the page go back to first page. I want to
keep it on page 4.
When opening that 4-th page in a browser, you can save its number in session and then after editing you can read that value you stored in session i.e - 4.
#session_start();
function indexAction()
{
$_SESSION['curr_page'] = 4; // or take it from $_GET
}
function saveAction(){
// .... do stuff....
header('location: page.php?page=' . $_SESSION['curr_page']);
}
first the best way to do paging is via get, to get the url friendly and rotating the User in case it needs to pass it on.
you need set data in console.log(), for view if data this value,
if the expected values are coming up to the date, try switching by append html:
example.
$ ("# content") html ('.');
$ ("# content") append (date).;
Related
after I post it use ajax,the value of radio disappear,but I want the radio part to remember the selection. I need the page to remember the radio button selections when I leaves and returns. Would this require database? If so, how do i implement it? I try to add the select =selected ,but it do not help.
<input value="<?php echo $key; $key++;?>" type="radio" class="radioOrCheck" name="answer<?php echo $num_select;?>"
id="0_answer_<?php echo $num_select;?>_option_<?php echo $key;?>"
below it is the full code
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/iconfont.css" rel="stylesheet" type="text/css" />
<link href="css/test.css" rel="stylesheet" type="text/css" />
<style>
.hasBeenAnswer {
background: #5d9cec;
color:#fff;
}
</style>
</head>
<body>
<p>
</p>
<div class="main">
<!--nr start-->
<div class="test_main">
<div class="nr_left">
<div class="test">
<form action="" method="post">
<div class="test_title">
<!--
<p class="test_time">
<i class="icon iconfont"></i><b class="alt-1">01:40</b>
</p>-->
<font><?php echo "<input type='button' name='test_jiaojuan' value='sub' onClick='getinput($ans_json,$id_json)'>";?>
</font>
</div>
<div class="test_content">
<div class="test_content_title">
<h2>word</h2>
<p>
<span>has</span><i class="content_lit"><?php echo $cnt_sel;?></i><span>title</span><span>sum</span><i class="content_fs"><?php echo $cnt_sel*10;?></i><span>min</span>
</p>
</div>
</div>
<div class="test_content_nr">
<ul>
<!--begin select-->
<?php
foreach($results as $temp){
$sql_2="SELECT `description`,`input`,`select_id` FROM `select` WHERE `select_id`=?";
$res_2=pdo_query($sql_2,$temp[0]);
$row = $res_2[0];
?>
<li id="qu_0_<?php echo $num_select;?>">
<div class="test_content_nr_tt">
<i><?php echo $num_select;?></i><font>
<p>
<?php
echo $row[0];
?>
</p>
</font>
</div>
<div class="test_content_nr_main">
<ul>
<?php
if ($row[1]) {
$arr = rtrim($row[1],"<br />");
$arr = explode('<br />', $arr);
foreach($arr as $key => $a){
?>
<li class="option">
<input value="<?php echo $key; $key++;?>" type="radio" class="radioOrCheck" name="answer<?php echo $num_select;?>"
id="0_answer_<?php echo $num_select;?>_option_<?php echo $key;?>"
/>
<label for="0_answer_<?php echo $num_select;?>_option_<?php echo $key;?>">
<p class="ue" style="display: inline;"><?php echo strip_tags($a,"<img>");//echo trim($a); ?></p>
</label>
</li>
<?php
}
}
if ($row['hint']) {
?><h4><?php echo $MSG_HINT;?></h4><?php
echo $row['hint'];
}
?>
</ul>
</br></br>
</div>
</li>
<?php
$num_select=$num_select+1;
}
?>
<p>
<?php
?>
</p>
<!--end select-->
</ul>
</div>
</form>
</div>
</div>
<div class="nr_right">
<div class="nr_rt_main">
<div class="rt_nr1">
<div class="rt_nr1_title">
<h1>
<i class="icon iconfont"></i>answer
</h1>
<!-- <p class="test_time">
<i class="icon iconfont"></i><b class="alt-1">01:40</b>
</p>-->
</div>
<div class="rt_content">
<div class="rt_content_tt">
<h2>chose</h2>
<p>
<span>sum</span><i class="content_lit"><?php echo $cnt_sel;?></i><span>answer</span>
</p>
</div>
<div class="rt_content_nr answerSheet">
<ul>
<?php
$temp=1;
for($temp=1;$temp<=$cnt_sel;$temp++){
?>
<li><?php echo $temp;?></li>
<?php
}
?>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--nr end-->
<div class="foot"></div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.easy-pie-chart.js"></script>
<script src="js/jquery.countdown.js"></script>
<script>
$(function() {
$('li.option label').click(function() {
debugger;
var examId = $(this).closest('.test_content_nr_main').closest('li').attr('id');
var cardLi = $('a[href=#' + examId + ']');
if(!cardLi.hasClass('hasBeenAnswer')){
cardLi.addClass('hasBeenAnswer');
}
});
});
$(function() {
$('li.option').click(function() {
debugger;
var examId = $(this).closest('.test_content_nr_main').closest('li').attr('id');
var cardLi = $('a[href=#' + examId + ']');
if(!cardLi.hasClass('hasBeenAnswer')){
cardLi.addClass('hasBeenAnswer');
}
});
});
/*window.onbeforeunload = function(event){
var msg = '';
msg +='do not like?\n';
//msg += '';
return msg;
};*/
function getinput(ans_json,results_json) {
var sum=<?php echo $cnt_sel;?>;
var blank_cnt=0;
var well_cnt=0;
for (var i = 1; i <= sum; i++) {
var radio_name = new String("answer" + i.toString());
var ans_s = $('input:radio[name=' + radio_name + ']:checked').val();
if(!(ans_s)){
blank_cnt++;
}}
//var json = getjson();
var msg = "ok";
if (confirm(msg) == true) {
var radio = new Array();
for (var i = 1; i <= <?php echo $cnt_sel;?>; i++) {
var radio_name = new String("answer" + i.toString());
var ans_s = $('input:radio[name=' + radio_name + ']:checked').val();
if(!(ans_s)){
ans_s=-1;
}
var judge=0;
var answer_true= parseInt(ans_json[i-1]);
var id_true=parseInt(results_json[i-1]);
if(ans_s == answer_true){
judge=1;
}
$.ajax({
type: "GET",
url: "select_ajax.php",
data: {
select_id: id_true,
contest_id:<?php echo $cid;?>,
result:judge
},
success: function(msg){
well_cnt++;
}
});
}
if(well_cnt==5){
alert('success');
}
setTimeout(function (){
window.location.href = "contest.php?cid="+<?php echo $cid;?>;
}, 1000);
} else {
return false;
}
}
</script>
</body>
</html>
You can do it by storing your radio button value in javascript localStorage and then set that localStorage value to your radio button again.
I am building a CI application. here i show the Login and Logout of Employees. now i have a drop down where i fetch all the users from database and below that i have a table that shows the all users and their relevant login logout. Now i want to do something like when i select a user from drop down i can seen only his information and not all others.
The Controller:
public function index()
{
$this->data['attendances'] = $this->attendance_m->join_data();
$this->data['attendance_dropdown'] = $this->attendance_m->get_emp_list();
$this->data['subview'] = 'admin/attendance/index';
$this->load->view('admin/_layout_main', $this->data);
}
The Model:
function get_emp_list() {
$q = $this->db->select('name')
->from('users')
->get();
return $q->result_array();
}
Below is my code to fetch the users:
<script type="text/javascript" src="<?php echo site_url('js/bootstrap.min.js');?>"></script>
<h2>Upload CSV To Import Users</h2>
<!-- in the action you need to place /controller/function in our case #Attendance, #upload -->
<form method="post" action="<?php echo site_url('admin/attendance/upload');?>" enctype="multipart/form-data">
<input type="file" name="file" id="file">
<br>
<input type="submit" name="submit" value="UPLOAD" class="btn btn-primary">
</form>
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<h1><label for="sel1">Select list:</label></h1>
<select name="attendance-list" id="attendance-list" class="form-control" >
<?php foreach($attendance_dropdown as $value) { ?>
<option value="<?php echo $value['name'];?>"><?php echo $value['name']; ?> </option>
<?php } ?>
</select>
</div>
<h1 class="page-header">Attendance Details</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
All Calls Records
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Emp_ID</th>
<th>Name</th>
<th>Date</th>
<th>Entry</th>
</tr>
</thead>
<tbody>
<?php if(count($attendances)): foreach($attendances as $attendance): ?>
<tr class="odd gradeX">
<td><?php echo trim($attendance->emp_id,'">'); ?></td>
<td><?php echo trim($attendance->name.$attendance->last_name,'">'); ?></td>
<td><?php echo trim($attendance->date_data,'">'); ?></td>
<td><?php trim($attendance->entry,'">'); ?> <?php if($attendance->entry >100)
{
echo "Logged In";
}
else
{
echo"Logged Out";
}?>
</tr>
<?php endforeach; ?>
<?php else: ?>
<tr>
<td colspan="3">We could not find any Data.</td>
</tr>
<?php endif; ?>
</tbody>
</table>
</div>
<!-- /.table-responsive -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<!-- /.row -->
<!-- jQuery -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- DataTables JavaScript -->
<script src="../bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="../bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
<!-- Page-Level Demo Scripts - Tables - Use for reference -->
<script>
$(document).ready(function() {
$('#dataTables-example').DataTable({
responsive: true
});
});
</script>
You have to bind on change event for given dropdown if value is not empty the call ajax and get info of that particular user
in you js :
<script>
site_url="http://localhost/ci_root/index.php/";
$('#attendance-list').on('change', function () {
var select_emp_name=$(this).val();
if(select_emp_name!=""){
var params={};
params["name"]= select_emp_name;
$.ajax({type: 'POST', url: site_url + 'employee/getUserInfo', data: params,success: function (response) {
//write on response logic/set employee details
var user_data=JSON.parse(response);
}, async: true});
}
})
</script>
in Controller function
public function getUserInfo()
{
$name=$this->input->post("name",true);
$data = $this->attendance_m->get_emp_data($name);
echo json_encode( $data);
exit;
}
in Model Function:
function get_emp_data($name) {
$q = $this->db->select('*')//required fields
->from('users')
->where('name',$name) // considering name is unique field
->get();
return $q->result_array();
}
Suggestion : Its better practice to send user id or unique field for dropdown values instead of name like user_id=>1,name=>sanjay
and we can set user_id as value at dropdown and name as label for option
it will look like
<?php foreach($attendance_dropdown as $value) { ?>
<option value="<?php echo $value['user_id'];?>"><?php echo $value['name']; ?> </option>
<?php } ?>
according your where clause also change
let me know if you need more support
here is your display code for Scipt only
<script>
site_url = "http://127.0.01/project/admin/";
$('#attendance-list').on('change', function() {
var select_emp_id = $(this).val();
if (select_emp_id != "") {
var params = {};
params["id"] = select_emp_id;
$.ajax({type: 'POST', url: site_url + 'attendance/getUserInfo', data: params, success: function(response) {
//write on response logic/set employee details
var user_data = JSON.parse(response);
var row = '<tr class="odd gradeX"><td>' + user_data.emp_id + '</td><td>' + user_data.name + ' ' + user_data.last_name'</td><td>' + user_data.date_data + '</td><td>' + user_data.entry + ' ' + (user_data.entry > 100?"Logged In":"Logged Out") + '</td> </tr>';
$("#dataTables-example tbody").find('tr').remove();
$("#dataTables-example tbody").append(row);
}, async: true});
}
});
</script>
Here is how to grab data in codeigniter with a post:
Controller
function catchPost(){
$this->form_validation->set_rules("nametage", "something", "required");
if($this->form_validation->run() == TRUE){//Formvalidation worked
$this->load->model("model_name");
$data['userInfo'] = $this->model_name->function();
$this->load->view("view", $data);
}else{
redirect("prevUrl", "refresh");
}
}
Model:
function getData(){//No parameters because we work directly with the post. You should filter the post before you actually use it.
$query = $this->db-select("*")
->from("users")
->where("username", $this->input->post("username"))
->get()
->result_array();
return $query
}
This is a general way of grabbing specific data.
I am new to PHP and JEasy UI.
I am actually running the demo application of JEasy UI Grid.
Whereas I am not getting the data from Php file to Grid.
Any Idea or suggestion please...!!
Below is My Code:
index.php
<html>
<head>
<meta charset="UTF-8">
<title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"> </div>
</div>
<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"
url="http://www.jeasyui.com/tutorial/app/crud/get_users.php"
toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="firstname" width="50">First Name</th>
<th field="lastname" width="50">Last Name</th>
<th field="phone" width="50">Phone</th>
<th field="email" width="50">Email</th>
</tr>
</thead>
</table>
<div id="toolbar">
New User
Edit User
Remove User
</div>
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">User Information</div>
<form id="fm" method="post" novalidate>
<div class="fitem">
<label>First Name:</label>
<input name="firstname" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>Last Name:</label>
<input name="lastname" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>Phone:</label>
<input name="phone">
</div>
<div class="fitem">
<label>Email:</label>
<input name="email" class="easyui-validatebox" validType="email">
</div>
</form>
</div>
<div id="dlg-buttons">
Save
Cancel
</div>
<script type="text/javascript">
var url;
function newUser(){
$('#dlg').dialog('open').dialog('setTitle','New User');
$('#fm').form('clear');
url = 'save_user.php';
}
function editUser(){
var row = $('#dg').datagrid('getSelected');
if (row){
$('#dlg').dialog('open').dialog('setTitle','Edit User');
$('#fm').form('load',row);
url = 'update_user.php?id='+row.id;
}
}
function saveUser(){
$('#fm').form('submit',{
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(result){
var result = eval('('+result+')');
if (result.errorMsg){
$.messager.show({
title: 'Error',
msg: result.errorMsg
});
} else {
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user data
}
}
});
}
function destroyUser(){
var row = $('#dg').datagrid('getSelected');
if (row){
$.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
if (r){
$.post('destroy_user.php',{id:row.id},function(result){
if (result.success){
$('#dg').datagrid('reload'); // reload the user data
} else {
$.messager.show({ // show error message
title: 'Error',
msg: result.errorMsg
});
}
},'json');
}
});
}
}
</script>
<style type="text/css">
#fm{
margin:0;
padding:10px 30px;
}
.ftitle{
font-size:14px;
font-weight:bold;
padding:5px 0;
margin-bottom:10px;
border-bottom:1px solid #ccc;
}
.fitem{
margin-bottom:5px;
}
.fitem label{
display:inline-block;
width:80px;
}
</style>
</body>
</html>
PHP Code URL
http://www.jeasyui.com/tutorial/app/crud/get_users.php
to get the data from datagrid you need to code like this
public function get_user(){
/*Default request pager params from jeasyUI*/
$offset = isset($_POST['page']) ? intval($_POST['page']) : 1;
$limit = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
$search = isset($_POST['search']) ? $_POST['itemid'] : '';
$offset = ($offset-1)*$limit;
//change this line to yours
$data = $this->user_model->get_user($offset,$limit,$search);
$i = 0;
$rows = array();
foreach ($data ['data'] as $r) {
$rows[$i]['first_name'] = $r->first_name;
$rows[$i]['last_name'] = $r->last_name;
$rows[$i]['phone'] = $r->phone;
$rows[$i]['email'] = $r->email;
$i++;
}
//keys total & rows is required on jEasyUI
$result = array('total'=>$data['count'],'rows'=>$rows);
echo json_encode($result);
}
more complete example here
Hi I'm doing a chat script that I've gotten somewhere that needs quite modifications. The function I need to achieve is after successful loading of user to chat with the view should go to bottom directly. I have done things which failed on several occasions, it does automate to bottom but when I tried scrolling the content it still goes back to bottom which should not happen.
This is what I have so far.
<?php
$ctr = 0;
if (is_array($buddies)) {
foreach ($buddies as $buddy) {
?>
<span style="float: right;"><?php echo $buddy->unreadMsgCtr; ?></span>
<b><?php echo humanize($buddy->fullName) ?></b> <br />
<?php
++$ctr;
}
}
?>
<script type="text/javascript">
$(document).ready(function() {
<?php for ($ctrjs = 0; $ctrjs < $ctr; $ctrjs++) {?>
$('#friend' + <?php echo $ctrjs; ?>).live('click', function() {
$('#buddies').hide();
var chattingWith = $(this).attr('chattingID');
startrefresh();
$('#chatroom').show();
$('#chatmessage').html('<img src="<?php echo site_url('/images/ajax-loader.gif');?>" width="16" height="16" />');
$.post("<?php echo site_url('chats/chatbuddy');?>",{
username: $("#friend"+<?php echo $ctrjs; ?>).html(),
recipientID: chattingWith
});
});
<?php } ?>
});
</script>
//chats.php when a particular buddy has been clicked.
<script type="text/javascript">
var autoScrollEnabled = true;
$(document).ready(function() {
toggleAutoScroll();
if(autoScrollEnabled == true) {
$(".messages").animate({ scrollTop: $('.messages')[0].scrollHeight}, 1000);
//return false;
toggleAutoScroll();
}
function toggleAutoScroll() {
autoScrollEnabled = !autoScrollEnabled; //! reverses the value, true becomes false, false becomes true
if (autoScrollEnabled == true) { //scroll down immediately if a.s. is reenabled
$(".messages").animate({ scrollTop: $('.messages')[0].scrollHeight}, 9999999999);
}
}
$('#closechat').live('click', function() {
$('#chatroom').hide();
//scrolled = 0;
stoprefresh();
});
});
</script>
<div class="headerchat" style="width: 217px;"><div class="buddycontainer"> Chatting</div>
<div class="closecontainer">✖ </div>
<br class="breaker" />
</div>
<?php
if (is_array($chat)) {
foreach ($chat as $item){ ?>
<div class="conversation" style="width: 215px;">
<b><span class="username"><?php echo $item['username']; ?></span></b>
<span class="gray" style="float: right;" title="<?php echo date('M d, Y g:i A', $item['time']);?>"> <?php echo date('g:i A', $item['time']);?></span>
<br /><?php echo $item['message']; ?>
</div>
<?php } ?>
<?php }?>
BTW here is the jsfiddle I don't understand it's working properly in jsfiddle. http://jsfiddle.net/STQnH/3/
I'm not sure if I am heading on the right track. I just want to achieve that. Thank you guys.
Try wrapping your code in:
$(document).ready(function(){ //your code here
});
or
$( window ).load(function() {//your code here
});
If it works in jsFiddle but not on the live site this is likely what's missing. jsFiddle adds it for you. You can change this option in the drop down menu indicated by my freehand circle.
jQuery faq for $(document).ready()
I am developing a simple students information application. I have student list in my index.phtml and I can edit student information form there. It's working nice but I want to use modal for edition student info. But I don't know how to do this.Below I have posted my current codes :
/// indexController.php
public function editAction()
{
$modelStudents = new Application_Model_DbTable_Students();
$id = (int) $this->_getParam('id');
$student = $modelStudents->fetch($id);
$form = new Application_Form_Student($student->email);
$form->submit->setLabel('Save');
$this->view->form = $form;
if ($this->getRequest()->isPost()) {
$formData = $this->getRequest()->getPost();
if ($form->isValid($formData)) {
$id = (int)$form->getValue('id');
$name = $form->getValue('name');
$email = $form->getValue('email');
$phone = $form->getValue('phone');
$students = new Application_Model_DbTable_Students();
$students->updateStudent($id, $name, $email, $phone);
$this->_helper->redirector('index');
} else {
$form->populate($formData);
}
} else {
$id = $this->_getParam('id', 0);
if ($id > 0) {
$form->populate($modelStudents->getStudent($id));
}
}
}
/// index.phtml
<html>
<head>
<style type="text/css" rel="stylesheet">
</style>
<script type="text/javascript" src="jQuery.js"> </script>
<script type ="text/javascript" src="jquery.simplemodal-1.4.2.js" ></script>
<script>
<?php
echo "Student List";
?>
<p><a href="<?php echo $this->url(array('controller'=>'index',
'action'=>'add'));?>">Add new student</a></p>
<table border="1">
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Action</th>
</tr>
<?php foreach($this->students as $student) : ?>
<tr>
<td><?php echo $student->name;?></td>
<td><?php echo $student->email;?></td>
<td><?php echo $student->phone;?></td>
<td>
<a href="<?php echo $this->url(array('controller'=>'index',
'action'=>'edit', 'id'=>$student->id));?>">Edit</a>
<a href="<?php echo $this->url(array('controller'=>'index',
'action'=>'delete', 'id'=>$student->id));?>">Delete</a>
<p id="delete" > Delete </p>
</td>
</tr>
<?php endforeach; ?>
</table>
</center>
</html>
////edit.phtml
<center>
<?php
echo "Edit Student List ";
echo $this->form ;
?>
</center>
Please let me know how to use jQuery simple modal plugin to preform this task.
Thanks in advance
Start by editing your index.phtml file to add a class and the student id to your edit link:
<a href="<?php echo $this->url(array('controller'=>'index',
'action'=>'edit', 'id'=>$student->id));?>" class="editBtn" studentId="<?=$student->id?>">Edit</a>
Then, in an included js file:
$(document).ready(function() {
$(function() {
//Event triggered when clicking on the edit btn
$('.editBtn').click(function(event) {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
//Get the page and add it to the modal
studentId = $(this).attr('studentId');
var data={};
data['id'] = studentId;
url = "/index/edit/";
$.get(url, data, function(resp) {
$.modal(resp);
});
});
});
});
This should help you get started...