I want to make a modal with a select of day that the links are showed... Showing the 10 past days and paginate with scroll... How can I do it? Carbon? If yes, I don't know how, because I'm beginner.
VIEW:
<div class="white-balloon" id="selectday-balloon">
<ul id="selectday-scroll">
<!--current day = 19/02/2018-->
<!--past days-->
<li rel="18/02/2016"><h1>Yesterday</h1></li>
<li rel="17/02/2016"><h1>17/02/2018</h1></li>
<li rel="16/02/2016"><h1>16/02/2018</h1></li>
<li rel="15/02/2016"><h1>15/02/2018</h1></li>
<li rel="14/02/2016"><h1>14/02/2018</h1></li>
<li rel="13/02/2016"><h1>13/02/2018</h1></li>
<li rel="12/02/2016"><h1>12/02/2018</h1></li>
<li rel="11/02/2016"><h1>11/02/2018</h1></li>
<li rel="10/02/2016"><h1>10/02/2018</h1></li>
<li rel="09/02/2016"><h1>09/02/2018</h1></li>
<!--continue in paginate-->
</ul>
</div>
JQUERY LOAD MORE:
$('#selectday-scroll').bind('scroll', function () {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
var isLoading = false;
var last_day = $("#selectday-scroll li").last().attr("rel");
if (isLoading === false) {
var isLoading = true;
$.ajax({
url: window.location.origin + '/balloons/selectday/',
dataType: "HTML",
type: 'POST',
data: {last_day: last_day},
beforeSend: function () {
},
success: function (response) {
$('#selectday-scroll').append(response);
var isLoading = false;
}
});
}
}
});
you can use for loop for that, try below code. This code is controller code, you need to add lastDays in view return statement.
$today = Carbon::today();
$lastDays = array();
for ($i = 1; $i < 10; $i++) {
$day = $today->subDays(1)->format('d/m/Y');
$lastDays[] = $day;
}
Try this, at the end you have an array with the dates.
You can change de format like you wnat.
$today = Carbon::now();
$days = 10;
for($i = 0; $i <= $days; $i++)
{
$date = '';
// $date = $today->addDays($i); if you want add day
$date = $today->subDays($i);
$arrayDate[] = $date->format('Y-m-d') ;
}
Carbon Documentation
Related
I am display list of users in datatable based on 2 parameters through AJAX in codeigniter. I want to change the status of user in database and display in table. I have 3 status 0-> inactive, 1->active, -1->left. I want to change the status and display in datatable without reloading the page.
I have tried changing the status but the status is changing only once. After first AJAX call there is no change when i again change the status.
//view
<script>
$(document).ready(function()
{
$('#academicTable_wrapper').hide();
$('#studentTable').DataTable();
showStudents();
function showStudents()
{
$('#submitBtn').on('click',function(){
var courseId = $('#courseId').val();
var classId = $('#classId').val();
$.ajax({
type : 'POST',
url : "<?php echo base_url();?>Student/getStudentsList",
// async : true,
data : {courseId:courseId,classId:classId},
dataType : 'json',
success : function(data){
//alert(data);
var html = '';
var i;
for(i=0; i<data.length; i++){
var studentId = data[i].studentId;
if(data[i].status == 1)
var status = "Approved";
else if(data[i].status == 0)
var status = "Pending";
else
var status = "Left";
html += '<tr>'+
'<td>'+data[i].studentId+'</td>'+
'<td>'+data[i].studentName+'</td>'+
'<td>'+data[i].studentPhoneNum+'</td>'+
'<td>'+data[i].created_on+'</td>'+
'<td id="changeStatus">'+status+'</td>'+
'<td>'+
'View'+
' '+
'<a id="activateBtn" data-id="'+data[i].id+'" data-status="'+data[i].status+'" class="btn btn-primary btn-sm text-white">Activate/Deactivate</a>'+
' '+
'Delete'+
'</td>'+
'</tr>';
}
$('#studentTable').DataTable().destroy();
$('#showData').html(html);
$('#studentTable').DataTable();
$('#academicTable_wrapper').show();
}
});
});
}
$(document).on('click','#activateBtn',function()
{
var id = $(this).data('id');
var status = $(this).data('status');
$.ajax({
method: 'POST',
url: "<?php echo base_url();?>Student/approveStudent",
data:{id:id,status:status},
success : function(data)
{
alert(data);
$('#changeStatus').text('');
if(data == 0)
{
showStudents();
$('#changeStatus').html('Inactive');
}
else{
showStudents();
$('#changeStatus').html('Approv');
}
},
error:function(data)
{
console.log(data);
}
},1000);
});
});
</script>
//controller
function approveStudent()
{
$id = $this->input->post('id');
$status = $this->input->post('status');
$col = 'id';
$query = $this->Admin_model->activate($col,$id,$status,$this->studentDetail);
if($query){
$result = $this->Admin_model->getData($col,$id,$this->studentDetail);
}
$status = 1;
if ($result[0]->status == 0)
{
$status = 0;
}
echo $status;
}
I expect whenever I click activateBtn the status should change in database and also in datatable.
I am using jquery sortable plugin to drag and drop items and setting their order. But I am unable to get the response from Ajax. I want to call the controller action from the js so that when I drag the item and drop it, then a response should come. The drag and drop functionality is working fine.
I tried this:
My View:
<div class="status-index info">
<h1><?= Html::encode($this->title) ?></h1>
<?php // echo $this->render('_search', ['model' => $searchModel]); ?>
<p>
<?= Html::a('Create Status', ['create'], ['class' => 'btn btn-success']) ?>
</p>
<ul class="sortable_status">
<?php
$items = StatusType::find()->orderBy('order')->all();
//var_dump($items);exit;
//$content = array();
foreach ($items as $item) {
echo '<li class="text-items"><label for="item'.$item->order.'"><span class="items-number">'.$item->order.'</span></label>
<label id="item'.$item->order.'" />'.$item->title.'</label>
<br/>
</li>';
}
?>
</ul>
</div>
JS:
$(function () {
var LI_POSITION = 'li_position';
$("ul.sortable_status").sortable({
update: function(event, ui) {
//create the array that hold the positions...
var order = [];
//loop trought each li...
$('.sortable_status li').each( function(e) {
//add each li position to the array...
// the +1 is for make it start from 1 instead of 0
order.push( $(this).attr('id') + '=' + ( $(this).index() + 1 ) );
});
// join the array as single variable...
var positions = order.join(';')
//use the variable as you need!
alert( positions );
// $.cookie( LI_POSITION , positions , { expires: 10 });
}
/*handle : '.handle',
update : function () {
var order = $('.sortable_status').sortable('serialize');
$(".info").load("process-sortable.php?"+order);
} */
});
});
Controller:
public function actionSortable()
{
/* foreach ($_GET['text-items'] as $position => $item)
{
$sql[] = "UPDATE `status_type` SET `order` = $position WHERE `id` = $item";
}*/
if ( isset( $_COOKIE['li_position'] ) ) {
//explode the cockie by ";"...
$lis = explode( ';' , $_COOKIE['li_position'] );
// loop for each "id_#=#" ...
foreach ( $lis as $key => $val ) {
//explode each value found by "="...
$pos = explode( '=' , $val );
//format the result into li...
$li .= '<li id="'.$pos[0].'" >'.$pos[1].'</li>';
}
//display it
echo $li;
// use this for delete the cookie!
// setcookie( 'li_position' , null );
} else {
// no cookie available display default set of lis
echo '
empty
';
}
}
why don't use an ajax call on stop ?
$("ul.sortable_status").sortable({
stop: function(event, ui) {
$.ajax({
type: "POST",
url: myUrl
data: {my-data: "any-value"}
})
.success(function(data) {
//your logic here
})
.fail(function() {
//your logic here
});
}
});
I used to define in my layout on the head tag of my html my variables as following
<head>
<script>
var myUrl = "<?php echo Url::to(['controller/action']); ?>";
</script>
</head>
I have a dropdown menu created within Angular JS but I am having problem linking the menus internally to the pages.
The main problem is to know which parent menu we are in and then reaching out to the respective sub menu.
My HTML is:
<div id="menu">
<ul>
<li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
{{page.menuTitle}}
<ul>
<li ng-class="{$index==currMenu}" ng-repeat="smenu in data.subMenu[$index].list">
{{data.subMenu[$parent.$index].list[$index].heading}}
</li>
</ul>
</li>
</ul>
</div>
And my JS Code is:
function getPresentationData(){
var data = {};
data.title = 'My Site Title';
data.pages = [];
data.subMenu = [];
data.subMenu[0] = {};
data.subMenu[0].list = [];
data.subMenu[0].list[0] = {heading:'Profile', number: '1'};
data.subMenu[0].list[1] = {heading:'Background', number: '2'};
data.subMenu[0].list[2] = {heading:'What is KAM', number: '3'};
data.pages[0] = {};
data.pages[0].menuTitle = 'Introduction';
data.pages[0].slides = [];
data.pages[0].slides[0] = {heading:'profile', speaker: 'Me', title:'Expert ', img:'content/3.jpg', video:'content/videos/3.m4v'};
data.pages[0].slides[1] = {heading:'profile', speaker: 'Me', title:'Expert ', img:'content/4.jpg', video:'content/videos/3.m4v'};
...
data.subMenu[1] = {};
data.subMenu[1].list = [];
data.subMenu[1].list[0] = {heading:'2 Profile', number: '1'};
data.subMenu[1].list[1] = {heading:'2 Background', number: '2'};
data.subMenu[1].list[2] = {heading:'2 What is KAM', number: '3'};
data.pages[1] = {};
data.pages[1].menuTitle = 'Cases';
data.pages[1].slides = [];
data.pages[1].slides[0] = {heading:'profile', speaker: 'Me', title:'Expert ', img:'content/3.jpg', video:'content/videos/3.m4v'};
data.pages[1].slides[1] = {heading:'profile', speaker: 'Me', title:'Expert ', img:'content/4.jpg', video:'content/videos/3.m4v'};
...
data.pages[2] = {};
data.pages[2].menuTitle = 'Valdsff ns';
data.pages[2].slides = [];
data.pages[2].slides[0] = {heading:'asdf asdf asdfles', speaker: 'asdf asdfas', title:'Expert ', img:'casdf.jpg', video:'content/df3.m4v'};
return data;
}
function presentationController($scope, $location){
$scope.data = getPresentationData();
$scope.currPage = 0;
$scope.currSlide = 0;
$scope.currMenu = 0;
$scope.goToPage = function(pageIndex){
$('.slide-container').hide();
$scope.currSlide = 0;
$scope.currPage = pageIndex;
$('.slide-container').fadeIn(500);
};
}
Solved it.
Changed Menu as following:-
<div id="menu">
<ul>
<li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
{{page.menuTitle}}
<ul>
<li ng-class="{$index==currMenu}" ng-repeat="smenu in data.subMenu[$index].list">
{{data.subMenu[$parent.$index].list[$index].heading}}
</li>
</ul>
</li>
</ul>
</div>
and added this function:-
$scope.goToSpecificPage = function(pageIndex, slideIndex){
$('.slide-container').hide();
$scope.currSlide = slideIndex;
$scope.currPage = pageIndex;
$('.slide-container').fadeIn(500);
};
I'm using the CI Calendar. The db that I've connected it with has columns for: date, hours, category, and notes. I started out with the same format as in this tutorial from net tuts+. I can get the calendar to display the notes on the appropriate day, but I'm not sure how to split up the content section into hours, category and notes. I know I have to modify the generate calendar in the system file, but not sure how to do it.
Here's my code:
Controller:
function index($year = null, $month = null)
{
if (!$year) {
$year = date('Y');
}
if (!$month) {
$month = date('m');
}
$this->load->model('calendar_model');
if ($day = $this->input->post('day')) {
$this->calendar_model->add_calendar_data(
"$year-$month-$day",
$this->input->post('hours'),
$this->input->post('category'),
$this->input->post('notes')
);
}
$data['calendar'] = $this->calendar_model->generate($year, $month);
// Load a view in the content partial
$this->template->content->view('includes/user_navigation');
$this->template->content->view('dashboard', $data);
// Display the template
$this->template->publish();
}
Model:
<?php
class Calendar_model extends CI_Model {
var $conf;
function Calendar_model()
{
parent::__construct();
}
function get_calendar_data($year, $month) {
$query = $this->db->select()->from('calendar')
->like('date', "$year-$month", 'after')->get();
$cal_data = array();
foreach ($query->result() as $row) {
$cal_data[substr($row->date,8,2)] = $row->notes;
/* Testing purposes */
echo "<p>" . $row->date . "</p>";
echo"<p>" . $row->hours . "</p>";
echo "<p>" . $row->category . "</p>";
echo "<p>" . $row->notes . "</p>";
}
return $cal_data;
}
function add_calendar_data($date, $hours, $category, $notes) {
if ($this->db->select('date')->from('calendar')
->where('date', $date)->count_all_results()) {
$this->db->where('date', $date)
->update('calendar', array(
'date' => $date,
'hours' => $hours,
'category' => $category,
'notes' => $notes
));
} else {
$this->db->insert('calendar', array(
'date' => $date,
'hours' => $hours,
'category' => $category,
'notes' => $notes
));
}
}
function generate ($year, $month) {
$this->load->library('calendar');
$cal_data = $this->get_calendar_data($year, $month);
return $this->calendar->generate($year, $month, $cal_data);
}
}
Calendar template:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
/*
|--------------------------------------------------------------------------
| Calendar configuration
|--------------------------------------------------------------------------
| This file will contain the settings for the calendar template library.
|
*/
$config['day_type'] = 'long';
$config['show_next_prev'] = true;
$config['next_prev_url'] = base_url('index.php/calendar/display');
$config['template'] = '
{table_open}
<table class="calendar">
{/table_open}
{heading_row_start}<tr>{/heading_row_start}
{heading_previous_cell}<th><<</th>{/heading_previous_cell}
{heading_title_cell}<th colspan="{colspan}">{heading}</th>{/heading_title_cell}
{heading_next_cell}<th>>></th>{/heading_next_cell}
{heading_row_end}</tr>{/heading_row_end}
{week_day_cell}
<th class="day_header">{week_day}</th>
{/week_day_cell}
{cal_row_start}<tr class="days">{/cal_row_start}
{cal_cell_start}<td class="day">{/cal_cell_start}
{cal_cell_content}
<div class="day_num">{day}</div>
<div class="content">
<div class="category">{category}
<div class="hours">{hours}
<div class="notes">{notes}
{content}
</div>
</div>
</div>
</div>
{/cal_cell_content}
{cal_cell_content_today}
<div class="today"><div class="day_num">{day}</div>
<div class="content">{content}</div></div>
{/cal_cell_content_today}
{cal_cell_no_content}
<div class="day_num">{day}</div>
{/cal_cell_no_content}
{cal_cell_no_content_today}
<div class="today"><div class="day_num">{day}</div></div>
{/cal_cell_no_content_today}
';
js code in my view:
$(document).ready(function(){
var date;
// === Prepare calendar === //
$('.calendar .day').click(function() {
day_num = $(this).find('.day_num').html();
$("#activityModal").modal('toggle');
$('#add-event-submit').click(function(){
var hrs = document.getElementById('activityHrs').value;
var note = document.getElementById('activityNotes').value;
var cat = document.getElementById('activityCats');
var selectedCat = cat.options[cat.selectedIndex].text;
var message = "Date: " + date + "\n";
message += "hrs: " + hrs + "\n";
message += "category: " + selectedCat + "\n";
message += "note: " + note;
message += "day num: " + day_num;
//alert(message);
if (hrs != null && selectedCat !=null && note !=null) {
$.ajax({
url: window.location,
type: 'POST',
data: {
day: day_num,
hours: hrs,
category: selectedCat,
notes: note
},
success: function(msg) {
location.reload();
}
});
}
});
});
});
Ok, so my script tries to request from php results from mysql and load them into a div. The results are based on nid value which is has to send this value is extracted from id="record-#" the record- is removed and the # is left to be used by ajax as id for the nid.
here is the ajax data function
$(document).ready(function() {
$(".note").live('click',function() {
$("#note_utm_con").show();
$("#note_utm_nt").html("<img src='http://www.ajaxload.info/images/exemples/4.gif' />");
$.ajax({
type: "GET",
url: "_class/view.php",
data: "ajax=1&nid=" + parent.attr('id'),
success: function(html){
$("#note_utm").html(html);
$("#note_utm_nt").html("");
},
error: function (XMLHttpRequest, textStatus, errorThrown) {$("#note_utm_nt").html(errorThrown);}
});
});
$("#note_utm_con_cls").click(function() {
$("#note_utm_con").hide();
});
});
and here is the rest of the page
<div id="note_utm_con" style="display: none;">
<button id="note_utm_con_cls" style="width: 20px;float: right; padding: 2px;clear: both;">X</button>
<div id="note_utm"></div>
<div id="note_utm_nt"></div>
</div>
<?php
class notes {
var $host;
var $username;
var $password;
var $table;
public function display_notes() {
$q = "SELECT * FROM `notice` ORDER BY nid ASC LIMIT 12";
$r = mysql_query($q);
if ( $r !== false && mysql_num_rows($r) > 0 ) {
while ( $a = mysql_fetch_assoc($r) ) {
$nid = stripslashes($a['nid']);
$note = stripslashes($a['note']);
$type = stripslashes($a['type']);
$private = stripslashes($a['private']);
$date = stripslashes($a['date']);
$author = stripslashes($a['author']);
if($type == 1) {
$type = "posted a comment."; $icon = "http://cdn1.iconfinder.com/data/icons/Basic_set2_Png/16/megaphone.png";
} elseif($type == 2) {
$type = "raised a support ticket."; $icon = "http://cdn1.iconfinder.com/data/icons/basicset/help_16.png";
} elseif($type == 3) {
$type = "added new photo."; $icon = "http://cdn1.iconfinder.com/data/icons/Basic_set2_Png/16/photo.png";
} elseif($type == 4) {
$type = "updated profile details."; $icon = "http://cdn1.iconfinder.com/data/icons/Basic_set2_Png/16/user_info.png";
} else { }
$entry_display .= <<<ENTRY_DISPLAY
<ul class="list">
<li id="$nid">
<a href="javascript:;" id="$nid" onClick="retun false;" class="note">
<img src="$icon" />
$author,
$type
</a>
</li>
</ul>
ENTRY_DISPLAY;
}
} else {
$entry_display = <<<ENTRY_DISPLAY
<ul class="list">
<li>
<p>
<img src="http://cdn1.iconfinder.com/data/icons/basicset/monitor_16.png" />
Nothing to display
</p>
</li>
</ul>
ENTRY_DISPLAY;
}
return $entry_display;
}
public function connect() {
mysql_connect($this->host,$this->username,$this->password) or die("Could not connect. " . mysql_error());
mysql_select_db($this->table) or die("Could not select database. " . mysql_error());
return $this;
}
private function note_type() {
if($type == 1) { $type = "posted a comment!"; } elseif($type == 2) { $type = "raised a support ticket!"; } else { }
return $type;
}
}
?>
so when a LI with a class="note" is clicked it triggers AJAX call. The call then uses the ID in the href to extract the $nid from the id="record-
In my case it seems as AJAX is sending the request since view.php returns the fields where the data should be but it does not seem to pass much needed nid so PHP is uable to select proper nid from MySQL to use.
Can some one tell me whats wrong with it and how it can be fixed to get the id?enter code here
Your quotation marks are wrong. Try this:
data: "ajax=1&nid=" + parent.attr('id').replace('record-',''),
Edit: Unless you haven't posted the full code still, you don't actually set parent anywhere. This means that you will use the window.parent object, which surprisingly enough doesn't have an id. You should use this.parentNode.id instead:
data: "ajax=1&nid=" + this.parentNode.id,
From what you've written it looks as if you're passing the parent.attr("id") replace call as a string rather than extracting the variable:
data: "ajax=1&nid=" + parent.attr('id').replace('record-',''),