I installed wdCalendar calendar (you can download it through this link: http://www.webappers.com/2010/06/08/wdcalendar-jquery-based-google-calendar-clone/
and you can see its demo through this link: http://www.web-delicious.com/jquery-plugins-demo/wdCalendar/sample.php), the problem is when I click on the button "New Event" (which exists at the left side in the top) a pop-pup window appears in which I see the following message error:
( ! ) Notice: Undefined index: id in C:\wamp\www\wdCalendar\edit.php on line 16
This is the script of the file "edit.php" :
<?php
include_once("php/dbconfig.php");
include_once("php/functions.php");
function getCalendarByRange($id){
try{
$db = new DBConnection();
$db->getConnection();
$sql = "select * from `jqcalendar` where `id` = " . $id;
$handle = mysql_query($sql);
//echo $sql;
$row = mysql_fetch_object($handle);
}catch(Exception $e){
}
return $row;
}
if($_GET["id"]){
$event = getCalendarByRange($_GET["id"]);
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Calendar Details</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/dp.css" rel="stylesheet" />
<link href="css/dropdown.css" rel="stylesheet" />
<link href="css/colorselect.css" rel="stylesheet" />
<script src="src/jquery.js" type="text/javascript"></script>
<script src="src/Plugins/Common.js" type="text/javascript"></script>
<script src="src/Plugins/jquery.form.js" type="text/javascript"></script>
<script src="src/Plugins/jquery.validate.js" type="text/javascript"></script>
<script src="src/Plugins/datepicker_lang_US.js" type="text/javascript"></script>
<script src="src/Plugins/jquery.datepicker.js" type="text/javascript"></script>
<script src="src/Plugins/jquery.dropdown.js" type="text/javascript"></script>
<script src="src/Plugins/jquery.colorselect.js" type="text/javascript"></script>
<script type="text/javascript">
if (!DateAdd || typeof (DateDiff) != "function") {
var DateAdd = function(interval, number, idate) {
number = parseInt(number);
var date;
if (typeof (idate) == "string") {
date = idate.split(/\D/);
eval("var date = new Date(" + date.join(",") + ")");
}
if (typeof (idate) == "object") {
date = new Date(idate.toString());
}
switch (interval) {
case "y": date.setFullYear(date.getFullYear() + number); break;
case "m": date.setMonth(date.getMonth() + number); break;
case "d": date.setDate(date.getDate() + number); break;
case "w": date.setDate(date.getDate() + 7 * number); break;
case "h": date.setHours(date.getHours() + number); break;
case "n": date.setMinutes(date.getMinutes() + number); break;
case "s": date.setSeconds(date.getSeconds() + number); break;
case "l": date.setMilliseconds(date.getMilliseconds() + number); break;
}
return date;
}
}
function getHM(date)
{
var hour =date.getHours();
var minute= date.getMinutes();
var ret= (hour>9?hour:"0"+hour)+":"+(minute>9?minute:"0"+minute) ;
return ret;
}
$(document).ready(function() {
//debugger;
var DATA_FEED_URL = "php/datafeed.php";
var arrT = [];
var tt = "{0}:{1}";
for (var i = 0; i < 24; i++) {
arrT.push({ text: StrFormat(tt, [i >= 10 ? i : "0" + i, "00"]) }, { text: StrFormat(tt, [i >= 10 ? i : "0" + i, "30"]) });
}
$("#timezone").val(new Date().getTimezoneOffset()/60 * -1);
$("#stparttime").dropdown({
dropheight: 200,
dropwidth:60,
selectedchange: function() { },
items: arrT
});
$("#etparttime").dropdown({
dropheight: 200,
dropwidth:60,
selectedchange: function() { },
items: arrT
});
var check = $("#IsAllDayEvent").click(function(e) {
if (this.checked) {
$("#stparttime").val("00:00").hide();
$("#etparttime").val("00:00").hide();
}
else {
var d = new Date();
var p = 60 - d.getMinutes();
if (p > 30) p = p - 30;
d = DateAdd("n", p, d);
$("#stparttime").val(getHM(d)).show();
$("#etparttime").val(getHM(DateAdd("h", 1, d))).show();
}
});
if (check[0].checked) {
$("#stparttime").val("00:00").hide();
$("#etparttime").val("00:00").hide();
}
$("#Savebtn").click(function() { $("#fmEdit").submit(); });
$("#Closebtn").click(function() { CloseModelWindow(); });
$("#Deletebtn").click(function() {
if (confirm("Are you sure to remove this event")) {
var param = [{ "name": "calendarId", value: 8}];
$.post(DATA_FEED_URL + "?method=remove",
param,
function(data){
if (data.IsSuccess) {
alert(data.Msg);
CloseModelWindow(null,true);
}
else {
alert("Error occurs.\r\n" + data.Msg);
}
}
,"json");
}
});
$("#stpartdate,#etpartdate").datepicker({ picker: "<button class='calpick'></button>"});
var cv =$("#colorvalue").val() ;
if(cv=="")
{
cv="-1";
}
$("#calendarcolor").colorselect({ title: "Color", index: cv, hiddenid: "colorvalue" });
//to define parameters of ajaxform
var options = {
beforeSubmit: function() {
return true;
},
dataType: "json",
success: function(data) {
alert(data.Msg);
if (data.IsSuccess) {
CloseModelWindow(null,true);
}
}
};
$.validator.addMethod("date", function(value, element) {
var arrs = value.split(i18n.datepicker.dateformat.separator);
var year = arrs[i18n.datepicker.dateformat.year_index];
var month = arrs[i18n.datepicker.dateformat.month_index];
var day = arrs[i18n.datepicker.dateformat.day_index];
var standvalue = [year,month,day].join("-");
return this.optional(element) || /^(?:(?:1[6-9]|[2-9]\d)?\d{2}[\/\-\.](?:0?[1,3-9]|1[0-2])[\/\-\.](?:29|30))(?: (?:0?\d|1\d|2[0-3])\:(?:0?\d|[1-5]\d)\:(?:0?\d|[1-5]\d)(?: \d{1,3})?)?$|^(?:(?:1[6-9]|[2-9]\d)?\d{2}[\/\-\.](?:0?[1,3,5,7,8]|1[02])[\/\-\.]31)(?: (?:0?\d|1\d|2[0-3])\:(?:0?\d|[1-5]\d)\:(?:0?\d|[1-5]\d)(?: \d{1,3})?)?$|^(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])[\/\-\.]0?2[\/\-\.]29)(?: (?:0?\d|1\d|2[0-3])\:(?:0?\d|[1-5]\d)\:(?:0?\d|[1-5]\d)(?: \d{1,3})?)?$|^(?:(?:16|[2468][048]|[3579][26])00[\/\-\.]0?2[\/\-\.]29)(?: (?:0?\d|1\d|2[0-3])\:(?:0?\d|[1-5]\d)\:(?:0?\d|[1-5]\d)(?: \d{1,3})?)?$|^(?:(?:1[6-9]|[2-9]\d)?\d{2}[\/\-\.](?:0?[1-9]|1[0-2])[\/\-\.](?:0?[1-9]|1\d|2[0-8]))(?: (?:0?\d|1\d|2[0-3])\:(?:0?\d|[1-5]\d)\:(?:0?\d|[1-5]\d)(?:\d{1,3})?)?$/.test(standvalue);
}, "Invalid date format");
$.validator.addMethod("time", function(value, element) {
return this.optional(element) || /^([0-1]?[0-9]|2[0-3]):([0-5][0-9])$/.test(value);
}, "Invalid time format");
$.validator.addMethod("safe", function(value, element) {
return this.optional(element) || /^[^$\<\>]+$/.test(value);
}, "$<> not allowed");
$("#fmEdit").validate({
submitHandler: function(form) { $("#fmEdit").ajaxSubmit(options); },
errorElement: "div",
errorClass: "cusErrorPanel",
errorPlacement: function(error, element) {
showerror(error, element);
}
});
function showerror(error, target) {
var pos = target.position();
var height = target.height();
var newpos = { left: pos.left, top: pos.top + height + 2 }
var form = $("#fmEdit");
error.appendTo(form).css(newpos);
}
});
</script>
<style type="text/css">
.calpick {
width:16px;
height:16px;
border:none;
cursor:pointer;
background:url("sample-css/cal.gif") no-repeat center 2px;
margin-left:-22px;
}
</style>
</head>
<body>
<div>
<div class="toolBotton">
<a id="Savebtn" class="imgbtn" href="javascript:void(0);">
<span class="Save" title="Save the calendar">Save(<u>S</u>)
</span>
</a>
<?php if(isset($event)){ ?>
<a id="Deletebtn" class="imgbtn" href="javascript:void(0);">
<span class="Delete" title="Cancel the calendar">Delete(<u>D</u>)
</span>
</a>
<?php } ?>
<a id="Closebtn" class="imgbtn" href="javascript:void(0);">
<span class="Close" title="Close the window" >Close
</span></a>
</a>
</div>
<div style="clear: both">
</div>
<div class="infocontainer">
<form action="php/datafeed.php?method=adddetails<?php echo isset($event)?"&id=".$event->Id:""; ?>" class="fform" id="fmEdit" method="post">
<label>
<span> *Subject:
</span>
<div id="calendarcolor">
</div>
<input MaxLength="200" class="required safe" id="Subject" name="Subject" style="width:85%;" type="text" value="<?php echo isset($event)?$event->Subject:"" ?>" />
<input id="colorvalue" name="colorvalue" type="hidden" value="<?php echo isset($event)?$event->Color:"" ?>" />
</label>
<label>
<span>*Time:
</span>
<div>
<?php if(isset($event)){
$sarr = explode(" ", php2JsTime(mySql2PhpTime($event->StartTime)));
$earr = explode(" ", php2JsTime(mySql2PhpTime($event->EndTime)));
}?>
<input MaxLength="10" class="required date" id="stpartdate" name="stpartdate" style="padding-left:2px;width:90px;" type="text" value="<?php echo isset($event)?$sarr[0]:""; ?>" />
<input MaxLength="5" class="required time" id="stparttime" name="stparttime" style="width:40px;" type="text" value="<?php echo isset($event)?$sarr[1]:""; ?>" />To
<input MaxLength="10" class="required date" id="etpartdate" name="etpartdate" style="padding-left:2px;width:90px;" type="text" value="<?php echo isset($event)?$earr[0]:""; ?>" />
<input MaxLength="50" class="required time" id="etparttime" name="etparttime" style="width:40px;" type="text" value="<?php echo isset($event)?$earr[1]:""; ?>" />
<label class="checkp">
<input id="IsAllDayEvent" name="IsAllDayEvent" type="checkbox" value="1" <?php if(isset($event)&&$event->IsAllDayEvent!=0) {echo "checked";} ?>/> All Day Event
</label>
</div>
</label>
<label>
<span> Location:
</span>
<input MaxLength="200" id="Location" name="Location" style="width:95%;" type="text" value="<?php echo isset($event)?$event->Location:""; ?>" />
</label>
<label>
<span> Remark:
</span>
<textarea cols="20" id="Description" name="Description" rows="2" style="width:95%; height:70px">
<?php echo isset($event)?$event->Description:""; ?>
</textarea>
</label>
<input id="timezone" name="timezone" type="hidden" value="" />
</form>
</div>
</div>
</body>
</html>
And the script below is the lines 16, 17 and 18 of the script above:
if($_GET["id"]){
$event = getCalendarByRange($_GET["id"]);
}
So my question is how to handle that error??...is there anyone who can help me??
Thanks in advance.
Sorry for the late reply here but I think the error is the $_GET['id'] is not set because you click the new event in the left side.
Try to use isset.
if(isset($_GET['id']) { }
The edit.php page is used to create new event and to edit an event.
Hope it helps. TH
Related
This is my AngularJS app. It is working alright and taking data from an array in a controller using ng-repeat, but now I want to connect it with Mongodb using NodeJS so that it fetches data from Mongodb collection. Also, when I edit, update or delete any row, it should reflect that in Mongodb.
My AngularJS index.html
var app = angular.module("app", ["xeditable", "ngMockE2E"]);
app.service('filteredListService', function() {
this.searched = function(valLists, toSearch) {
return _.filter(valLists,
function(i) {
/* Search Text in all 3 fields */
return searchUtil(i, toSearch);
});
};
this.paged = function(valLists, pageSize) {
retVal = [];
for (var i = 0; i < valLists.length; i++) {
if (i % pageSize === 0) {
retVal[Math.floor(i / pageSize)] = [valLists[i]];
} else {
retVal[Math.floor(i / pageSize)].push(valLists[i]);
}
}
return retVal;
};
});
app.run(function(editableOptions) {
editableOptions.theme = 'bs3';
});
app.controller('Ctrl', function($scope, $filter, filteredListService) {
$scope.users = [{
id: 1,
name: 'harry potter',
lName: "Pege",
passw1: "12/12/2012",
pages: "556"
},
{
id: 2,
name: 'narnia',
lName: "Pim",
passw1: "12/12/2012",
pages: "557"
},
{
id: 3,
name: 'panchtantra',
lName: "Smith",
passw1: "1/03/2009",
pages: "556"
},
{
id: 4,
name: 'atlas',
lName: "Jones",
passw1: "2/04/1995",
pages: "888"
},
{
id: 5,
name: 'science',
lName: "Doe",
passw1: "2/04/1995",
pages: "888"
},
{
id: 6,
name: 'guiness book',
lName: "Pan",
passw1: "2/04/1995",
pages: "888"
},
{
id: 7,
name: 'panchtantra1',
lName: "Smith",
passw1: "1/03/2009",
pages: "556"
},
{
id: 8,
name: 'atlas1',
lName: "Jones",
passw1: "2/04/1995",
pages: "888"
},
{
id: 9,
name: 'science1',
lName: "Doe",
passw1: "2/04/1995",
pages: "888"
},
{
id: 10,
name: 'guiness book1',
lName: "Pan",
passw1: "2/04/1995",
pages: "888"
},
];
$scope.checkName = function(data, id) {
if (id === 2 && data !== 'narnia') {
return "Username 2 should be `narnia(case sensitive)`";
}
};
$scope.saveUser = function(data, id) {
//$scope.user not updated yet
angular.extend(data, {
id: id
});
return $http.post('/saveUser', data);
};
// remove user
$scope.removeUser = function(index) {
var index1 = index + $scope.currentPage * 4;
$scope.users.splice(index1, 1);
$scope.pagination();
};
// add user
$scope.addUser = function($event) {
$scope.currentPage = 2;
$scope.id = $scope.users.length + 1
$scope.users.push({
id: this.id,
name: 'Enter Book Name',
lName: 'Author Name',
passw1: 'Date of Publish',
pages: 'Pages'
});
$scope.pagination();
alert(users.id);
$scope.resetAll();
}
//search
$scope.pageSize = 4;
$scope.allItems = $scope.users;
$scope.reverse = false;
$scope.resetAll = function() {
$scope.filteredList = $scope.allItems;
$scope.newEmpId = '';
$scope.newName = '';
$scope.newEmail = '';
$scope.searchText = '';
$scope.currentPage = 0;
$scope.Header = ['', '', ''];
}
//pagination
$scope.pagination = function() {
$scope.ItemsByPage = filteredListService.paged($scope.filteredList, $scope.pageSize);
};
$scope.setPage = function() {
$scope.currentPage = this.n;
};
$scope.firstPage = function() {
$scope.currentPage = 0;
};
$scope.lastPage = function() {
$scope.currentPage = $scope.ItemsByPage.length - 1;
};
$scope.range = function(input, total) {
var ret = [];
if (!total) {
total = input;
input = 0;
}
for (var i = input; i < total; i++) {
if (i != 0 && i != total - 1) {
ret.push(i);
}
}
return ret;
};
$scope.sort = function(sortBy) {
$scope.resetAll();
$scope.pagination();
};
$scope.sort('name');
$scope.search = function() {
$scope.filteredList =
filteredListService.searched($scope.allItems, $scope.searchText);
if ($scope.searchText == '') {
$scope.filteredList = $scope.allItems;
}
$scope.pagination();
}
$scope.resetAll();
});
function searchUtil(x, toSearch) {
/* Search Text in all 3 fields */
return (x.name.toLowerCase().indexOf(toSearch.toLowerCase()) > -1 || x.lName.toLowerCase().indexOf(toSearch.toLowerCase()) > -1 || x.id == toSearch) ?
true : false;
}
<html>
<head>
<style type="text/css">#charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<script type="text/javascript" src="https://underscorejs.org/underscore.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<link rel="stylesheet" type="text/css" href="https://vitalets.github.io/angular-xeditable/dist/css/xeditable.css">
<script type="text/javascript" src="https://code.angularjs.org/1.5.8/angular-mocks.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"/>
<style type="text/css">
div[ng-app] {
margin: 10px;
}
.table {width: 100%
}
form[editable-form] > div {margin: 100px 0;}
</style>
</head>
<body>
<h4>Book management</h4>
<div ng-app="app" ng-controller="Ctrl">
<div class="input-group">
<input class="form-control" ng-model="searchText" placeholder="Search" type="search" ng-change="search()" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
<br>
<br>
<table class="table table-bordered table-hover table-condensed" id="myTable">
<tr style="font-weight: bold">
<td style="width:5%">id</td>
<td style="width:15%">Book Name</td>
<td style="width:15%">Author Name</td>
<td style="width:15%">No Of Page</td>
<td style=width:30%>Date</td>
<td style="width:25%">Edit</td>
</tr>
<tr ng-repeat="x in ItemsByPage[currentPage] | orderBy:columnToOrder:reverse">
<td>{{x.id}}</td>
<td>
<!-- editable username (text with validation) -->
<span editable-text="x.name" e-name="name" e-form="rowform" onbeforesave="checkName($data, x.id)" e-required>
{{ x.name || 'empty' }}
</span>
</td>
<td>
<!-- editable status (select-local) -->
<span editable-text="x.lName" e-name="lName" e-form="rowform">
{{ x.lName || 'empty' }}
</span>
</td>
<td>
<!-- editable group (select-remote) -->
<span editable-text="x.pages" e-name="pages" e-form="rowform" >
{{ x.pages || 'empty' }}
</span>
</td>
<td>
<span editable-text="x.passw1" e-name="passw1" e-form="rowform" >
{{x.passw1 || 'empty'}}
</span>
</td>
<td style="white-space: nowrap">
<!-- form -->
<form editable-form name="rowform" ng-show="rowform.$visible" class="form-buttons form-inline">
<button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
save
</button>
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
cancel
</button>
</form>
<div class="buttons" ng-show="!rowform.$visible">
<button class="btn btn-primary" ng-click="rowform.$show()">edit</button>
<button class="btn btn-danger" ng-click="removeUser($index)">del</button>
</div>
</td>
</tr>
</table>
<button class="btn btn-default" ng-click="addUser()">Add row</button>
<br>
<ul class="pagination pagination-sm">
<li ng-class="{active:0}">First
</li>
<li ng-repeat="n in range(ItemsByPage.length)"> 1
</li>
<li>Last
</li>
</ul>
</div>
View Records
</body>
</html>
You can try learning nodejs and mongodb.
I'm asking if is possible to do something as that in angular
<div ng-app="app">
<div ng-controller="mainController">
<ul ng-repeat="movie in movies |searchFilter:Filter.genre | searchFilter:Filter.name |searchFilter:Filter.pic ">
<li>{{movie.name}}</li>
</ul>
<h2>genre</h2>
<div>
<label>Comedy </label><input type="checkbox" ng-model="Filter.genre.Comedy" ng-true-value="Comedy" data-ng-false-value=''/><br/>
</div>
<h2>PIC</h2>
<label>aa</label><input type="checkbox" ng-model="Filter.pic.aa" ng-true-value="ciao" data-ng-false-value=''/><br/>
<h2>Name</h2>
<label>Shrek</label><input type="checkbox" ng-model="Filter.name.Shrek" ng-true-value="The God" data-ng-false-value=''/><br/>
</div>
</div>
i'm creating a checkbox for filter on different fields (size,name,genre)
ill have a list of avaible sizes,names and genres .
The issue is on ng-model and i tried to write it as "Filter.genre.genre.name" or
"Filter["genre"+genre.name]" and also "Filter.genre[genre.name]" but still not work .
the js.file is
var app =angular.module('app', []);
app.controller('mainController', function($scope) {
$scope.movies = [{name:'Shrek', genre:'Comedy',pic:"cc"},
{name:'Die Hard', genre:'Comedy',pic:"aa"},
{name:'The Godfather', genre:'Drama',pic:"ciao"},
{name:'The Godher', genre:'Comedy',pic:"lel"}];
$scope.genres = [{name:"Comedy"},{name:"Action"},{name:"Drama"}];
});
app.filter('searchFilter',function($filter) {
return function(items,searchfilter) {
var isSearchFilterEmpty = true;
//searchfilter darf nicht leer sein
angular.forEach(searchfilter, function(searchstring) {
if(searchstring !=null && searchstring !=""){
isSearchFilterEmpty= false;
}
});
if(!isSearchFilterEmpty){
var result = [];
angular.forEach(items, function(item) {
var isFound = false;
angular.forEach(item, function(term,key) {
if(term != null && !isFound){
term = term.toLowerCase();
angular.forEach(searchfilter, function(searchstring) {
searchstring = searchstring.toLowerCase();
if(searchstring !="" && term.indexOf(searchstring) !=-1 && !isFound){
result.push(item);
isFound = true;
// console.log(key,term);
}
});
}
});
});
return result;
}else{
return items;
}
}
});
if i make 3 different labels for the field Comedy, Action and Drama with ng-models called as
ng-model="Filter.genre.Comedy" ; ng-model="Filter.genre.Action" and ng-model="Filter.genre.Drama"
it work but it doesnt work if i try to write it into ng-repeat . I hope to have been clearer
In this sample i try to handle your question by change the Model of your page.
we have:
list of movies array => $scope.movies = []
dynamic filters array => $scope.genres = [], $scope.years = [] or more
our target:
Create a dynamic filters to search in movies
what we do
$scope.filterHandler = function (key, value) {}
Run when user start searching on input or select, this function help us to create a filter as object by sending key and value which result is {key:value}
$scope.searchTypeHandler = function (type, dependTo) {}
Run when our filters has some array for example genre has genres as dropdown select, this function help us to return the array which depend to the filter.
var app = angular.module("app", []);
app.controller("ctrl", [
"$scope",
function($scope) {
//your options
$scope.movies = [{
name: 'Shrek',
genre: 'Comedy',
year: 2000
},
{
name: 'Die Hard',
genre: 'Action',
year: 2000
},
{
name: 'The Godfather',
genre: 'Drama',
year: 2015
},
{
name: 'The Godher',
genre: 'Comedy',
year: 2017
}
];
$scope.genres = [{
name: "Comedy"
},
{
name: "Action"
},
{
name: "Drama"
}
];
$scope.years = [{
name: 2000
},
{
name: 2015
},
{
name: 2017
}
];
//
$scope.filter = {}
$scope.filterHandler = function(key, value) {
var object = {};
object[key] = value;
$scope.filter["find"] = object;
};
$scope.searchTypeHandler = function(type, dependTo) {
$scope.filter = {};
$scope.filter.searchType = type;
$scope.filter.options = undefined;
if (dependTo != null) {
$scope.filter.options = $scope[dependTo];
}
};
//default
$scope.searchTypeHandler("name");
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container" ng-app="app" ng-controller="ctrl">
<div class="page-header">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<h4>Movies</h4>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pull-right">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
By {{filter.searchType}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-left">
<li><a ng-click="searchTypeHandler('genre', 'genres')">Filter By Genre</a></li>
<li><a ng-click="searchTypeHandler('name', null)">Filter By Name</a></li>
<li><a ng-click="searchTypeHandler('year', 'years')">Filter By Year</a></li>
</ul>
</div>
<input ng-hide="filter.options" type="text" class="form-control" ng-model="filter.query" ng-change="filterHandler(filter.searchType, filter.query)">
<select ng-show="filter.options" class="form-control" ng-model="filter.option" ng-change="filterHandler(filter.searchType, filter.option)" ng-options="option.name as option.name for option in filter.options"></select>
</div>
<!-- /input-group -->
</div>
</div>
</div>
</div>
<ul class="list-group">
<li class="list-group-item" ng-repeat="movie in movies | filter: filter.find">
{{movie.name}} - <label class="label label-info">Ggenre: {{movie.genre}}</label> - <label class="label label-default">Year: {{movie.year}}</label>
</li>
</ul>
</div>
i am using simple angular js select listbox with multiple selection, i used to add the elements into the select by clicking add button, which will dynamically add the server name in the listbox, also the select is multiple type, i can multi select and remove the item by clicking on the remove button.
The problem is that i cannot set the selected index to zero or first element upon removing the items... also i cannot able to select any items after that..
in simple after i remove the elements i need to set selected index to "NO SELECTION" or first element.
ServerPing.jsp
<!DOCTYPE html>
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%# taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="/LDODashBoard/js/scripts.js" language="JavaScript" type="text/javascript"></script>
<script src="/LDODashBoard/js/PingServerPage.js" language="JavaScript" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>
<link rel="stylesheet" type="text/css" href="/LDODashBoard/css/mystyle.css" />
<link rel="stylesheet" type="text/css" href="/LDODashBoard/css/ServerPing.css" />
<body>
<div ng-app="myApp" ng-controller="myCtrl" style="color:white" div align="left">
<br/><br/>
<form name = "ServerPing" novalidate>
<label for="marketArraySel" >Server Name:</label>
<input type = "text" id="serverName" name="serverName" ng-model="serverName"></input>
<input type="button" ng-click="addServerName()" value="Add"></input>
<br/><br/>
<span id="tab"></span>
<span id="tab"></span>
<select name="serverNameList" id="serverNameList" data-ng-model="serverNameList" data-ng-options="server.SERVER for server in serverListArray" multiple data-ng-multiple="true">
</select>
<input type="button" ng-click="remove(serverNameList)" value="Remove"></input>
<br/><br/>
{{serverNameList}}
<br/><br/>
<input type="reset" ng-click="reset()" value="RESET"></input>
<input type="button" ng-click="submitfunction()" value="SUBMIT"></input>
</form>
<br><br>
<span id="tab"></span><span id="tab"></span><span id="tab"></span><span id="tab"></span><span id="tab"></span><span id="tab"></span><span id="tab"></span><span id="tab"></span>
<c:url value="/L1OutputDisplayPage?gcmmLink2=true" var="messageUrl2" />
Click Here
to Close
</div>
</body>
</html>
PingServerPage
angular.module("myApp", ['angular.filter'])
.controller("myCtrl", function ($scope,$http,$compile)
{
$scope.serverListArray = [{COUNT:0,SERVER:"NO SELECTION"}];
$scope.count = 0;
$scope.addServerName = function() {
//window.alert("$scope.serverName:" + $scope.serverName);
//window.alert("length of array:" + $scope.serverListArray.length);
//this is to remove the first element which is dummy
/**
if ($scope.serverListArray.length == 1 && $scope.count == 0) {
//$scope.serverNameList.splice($serverNameList.COUNT, 1);
$scope.serverListArray.splice(searchpart($scope.serverListArray,""), 1);
}
**/
$scope.serverListArray.push({COUNT:$scope.count,SERVER:$scope.serverName});
$scope.count = $scope.count + 1;
//reset to the empty value in the text box
$scope.serverName = "";
};
$scope.reset = function() {
$scope.serverName = "";
$scope.serverListArray = [];
$scope.count = 0;
};
$scope.remove = function(arr) {
//$scope.serverName = "";
//$scope.serverListArray = [];
window.alert("INSIDE REMOVE2");
window.alert("serverNameList:" + arr.length);
for (var val = 0, len = arr.length; val < len; val += 1) {
window.alert(arr[val].COUNT);
var removeIndex = searchpart($scope.serverListArray,arr[val].SERVER);
$scope.serverListArray.splice(removeIndex, 1);
}
//set selection index to first element
window.alert("before set.")
$scope.serverNameList = {COUNT: 0};
window.alert("after set set.")
};
function searchpart(arr,serverTmp) {
for (var d = 0, len = arr.length; d < len; d += 1) {
if( arr[d].SERVER.toLowerCase().indexOf(serverTmp) >= 0 ) {
window.alert("return:"+ d);
return d;
}
}
}
});
You have a few problems with the code:
The function searchpart does not work correctly.
Initialize the first value after the removal of the elements are not working properly.
Live example on jsfiddle.
angular.module('ExampleApp', [])
.controller('ExampleController', function($scope) {
$scope.indexValue = "2";
$scope.serverListArray = [{
COUNT: 0,
SERVER: "NO SELECTION"
}, {
COUNT: 1,
SERVER: "First"
}, {
COUNT: 2,
SERVER: "Second"
}, {
COUNT: 2,
SERVER: "Third"
}];
$scope.remove = function(arr) {
for (var val = 0, len = arr.length; val < len; val += 1) {
var removeIndex = searchpart($scope.serverListArray, arr[val].SERVER);
console.log(removeIndex);
$scope.serverListArray.splice(removeIndex, 1);
}
$scope.serverNameList = [$scope.serverListArray[0]];
};
function searchpart(arr, serverTmp) {
for (var d = 0, len = arr.length; d < len; d += 1) {
if (arr[d].SERVER.toLowerCase().indexOf(serverTmp.toLowerCase()) >= 0) {
return d;
}
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
<div ng-controller="ExampleController">
<select name="serverNameList" id="serverNameList" data-ng-model="serverNameList" data-ng-options="server.SERVER for server in serverListArray" multiple data-ng-multiple="true">
</select>
<input type="button" ng-click="remove(serverNameList)" value="Remove" />
<div>
Selected: <pre>{{serverNameList|json}}</pre>
</div>
</div>
</div>
I have a list of categories where I want to use drag and drop for editing their order. So far, I have this code and it works, but I already lost a lot of time and I didn't figure it out how to update the database with their new order:
<ul id="categoryorder">
<?php foreach ($categories as $category) : ?>
<li id="<?php echo($category->order_id); ?>">
<form enctype="multipart/form-data" style="margin-bottom: 0;" action="<?php echo base_url();?>backend/cp/categories" method="post">
<input type="hidden" name="c_img" value="<?php echo($category->c_img); ?>" />
<input type="hidden" name="id" value="<?php echo($category->id); ?>" />
<input type="text" name="name" value="<?php echo($category->c_name); ?>" style="width:150px;" />
<input type="file" name="c_img" size="20" value="" />
<input type="checkbox" name="delete" value="1" />
<input type="submit" name="update_category" value="Save" />
</form>
</li>
<?php endforeach; ?>
</ul>
And the js:
<script type="text/javascript">
$(document).ready(function(){
$("ul#categoryorder").sortable({
opacity: 0.6,
cursor: 'move'
});
});
</script>
Thank you for your help!
$( "#categoryorder" ).sortable({
forcePlaceholderSize: true,
forceHelperSize: true,
dropOnEmpty: false,
scrollSensitivity: 100,
scrollSpeed: 0,
tolerance: "pointer",
zIndex: 9999,
stop: function(event,ui){
var i = 0;
var positions = '';
var ids = '';
$('#categoryorder li').each(function(){
positions += i++ + ',';
ids += $(this).attr('id') + ',';
});
$.ajax({
type:'POST',
data:'positions=' + positions + '&ids=' + ids,
url: 'your url',
async: false
});
}
});
and the php code:
$positions = explode(',', $_POST['positions']);
$ids = explode(',', $_POST['ids']);
if (!empty($positions) && !empty($ids)) {
foreach($positions as $value => $position_id) {
if ($ids[$value] != '' && $position_id != '') {
$id = $ids[$value];
$position_id;
}
}
}
I need to add a custom directive to my code, but every time I add it, it breaks my code. I checked the console and is giving me the following error
Error: Argument 'guessGameController' is not a function, got undefined
at Error (native)
Now I am not sure if I am not setting my code right or if I am not adding the directive where is supposed to go. Here is my code, I appreciate all the help.
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="guessGameApp">
<head>
<title>Word Game 2.0 - AngularJS</title>
<!--Encoding-->
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<!-- JQuery -->
<script src="js/jquery-1.11.0.min.js"></script>
<!--Scripts-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script src="js/controllers/app.js" type="text/javascript"></script>
<script src="js/controllers/maincontroller.js" type="text/javascript"></script>
<!--Styles-->
<link rel="stylesheet" type="text/css" href="css/magicWord.css">
<!--<script src="js/jquery-1.11.0.min.js"></script>-->
</head>
<body>
<div ng-controller="guessGameController">
<p>
<header id="masthead">
<h2 align="center">{{appTitle}}</h2>
</header>
</p>
<div ng-controller="wordController">
<p>
<table align="center" width="300px" height="150px" border="solid 2px">
<tr>
<td id="guessBox">
<p align="center">
<input value="" type="text" id="guestGuess" placeholder="Enter Guess" ng-model="guestGuess"/>
</p>
<p align="center"><button ng-click="addGuess()" id="guessButton">Click to Check</button></p>
</td>
</tr>
<tr>
<td>
<h3 align="center">Your guesses so far are: </h3>
<p align="center" ng-repeat="words in guesses">{{words}}</p>
</td>
</tr>
<tr>
<td>
<p align="center">You have guessed:<b>{{guessed}}</b> times out {{allowed}} chances.</p>
<p align="center">You have <b>{{allowed - guessed}}</b> guesses left.</p>
</td>
</tr>
<tr>
<td>
<a custom-button>Click me</a>
<br />
<button custom-button>Hello</button>
</td>
</tr>
</table>
</p>
</div>
</div>
</body>
</html>
app.js
var gameApp = angular.module('guessGameApp', []);
var gameTemplate = angular.module('guessGameApp', []);
maincontroller.js
gameApp.controller("guessGameController", function($scope)
{
$scope.appTitle = "WELCOME TO THE GUESS GAME!";
});
gameApp.controller('wordController', function($scope)
{
$scope.guess = '';
$scope.guesses = [];
$scope.guessed= '';
$scope.allowed = 6;
$scope.wordToGuess = "Just";
$scope.pushGuess = function () {
$scope.guesses.push($scope.guestGuess);
$scope.guessed = $scope.guesses.length;
$scope.resetGuess();
}
$scope.resetGuess = function() {
$scope.guestGuess = '';
}
$scope.addGuess = function()
{
if ($scope.guestGuess == null || $scope.guestGuess == '')
{
$("input[type=text]").ready(function () { $("#guestGuess").addClass("blur"); });
$scope.result = " Please enter a guess\n\nDon't leave the box empty.";
alert($scope.result);
}
else if ($scope.guestGuess.toLowerCase() == $scope.wordToGuess.toLowerCase())
{
$("input[type=text]").ready(function () { $("#guestGuess").removeClass("blur"); });
$scope.pushGuess(guestGuess);
$scope.result = "You have guessed the correct word. Way to go!\n\n\t\t The word was: ";
alert($scope.result + $scope.wordToGuess);
}
else if ($scope.guestGuess != $scope.wordToGuess & ($scope.allowed - $scope.guessed) > 1)
{
$("input[type=text]").ready(function () { $("#guestGuess").removeClass("blur"); });
$scope.pushGuess(guestGuess);
$scope.result = "Please try again!";
alert($scope.result);
}
else if (($scope.allowed - $scope.guessed) <= 1)
{
$("input[type=text]").ready(function () { $("#guestGuess").addClass("doneBlur"); });
$scope.guesses.push($scope.guestGuess);
$scope.guessed = $scope.guesses.length;
$scope.result = "Game over! The word was: ";
alert($scope.result + $scope.wordToGuess);
}
$scope.guess = '';
}
});
gameApp.directive('customButton', function ()
{
$scope.wordToGuess = "Just";
return {
restrict: 'A',
replace: true,
transclude: true,
templateUrl: '../../templates/customTemplate.HTML',
link: function (scope, element, attrs)
{
element.bind("click",function()
{
alert("The value of 'guessWord' is " + scope.wordToGuess);
})
}};
});
customTemplate.html
<a href="" class="myawesomebutton" ng-transclude>
<i class="icon-ok-sign"></i>
</a>
In app.js remove the second module declaration
var gameApp = angular.module('guessGameApp', []);
//var gameTemplate = angular.module('guessGameApp', []); --> remove this line
You are also modifying DOM from the controller, this is not the angular way. If you want to add classes when some condition occurs, then have a look at ng-class