Cant open picture modal - angularjs

Pop up of my modal is not appearing and page routed to some other page, didn't seen any problem in code, same code is running perfectly in other module. Just want when click on HTML code only picture modal open.
//controller Code
'use strict';
angular.module('employer-company').controller('EmployerProfileController', ['$scope','$http', 'Countries', 'Authentication','Employers', '$location','$modal',
function($scope,Countries,$http, Authentication, Employers, $location, $modal) {
$scope.user = Authentication.user;
$scope.countries = Countries.getCountries();
$scope.isEditing = false;
$scope.openPictureModal = function() {
var modalInstance;
modalInstance = $modal.open({
templateUrl: '/modules/employer-company/views/picture-partial.html',
controller: 'PictureModalCtrl',
});
modalInstance.result.then(function(result) {
$scope.employer.picture_url = result.picture_url;
}, function() {
});
};
}
]).controller('PictureModalCtrl', [
'$scope', '$modalInstance', '$upload', function($scope, $modalInstance, $upload) {
var convert = function convertDataURIToBlob(dataURI, mimetype) {
var BASE64_MARKER = ';base64,';
var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var base64 = dataURI.substring(base64Index);
var raw = window.atob(base64);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
var bb = new Blob([uInt8Array.buffer], {type : mimetype});
return bb;
}
$scope.upload = function(image){
$scope.formData = convert(image.dataURL, image.type);
$scope.upload = $upload.upload({
url: '/uploadpicture', //upload.php script, node.js route, or servlet url
method: 'POST',
headers: {'Content-Type': 'undefined'},
data: {myObj: $scope.myModelObj},
file: $scope.formData, // or list of files ($files) for html5 only
}).progress(function(evt) {
console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
}).success(function(data, status, headers, config) {
$scope.response = data;
console.log(data);
$modalInstance.close({picture_url: data});
});
};
$scope.ok = function (action) {
$modalInstance.close({ action: action, picture_url: $scope.picture_url });
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
]);
//modal code
<div style="padding: 10px;">
<h2>Make sure you look good.</h2>
<div>
<span class="btn btn-default btn-file">
Browse
<input id="inputImage2"
type="file"
accept="image/*"
image="image2"
resize-max-height="300"
resize-max-width="250"
resize-quality="0.9" />
</span>
<hr />
<img width="250" ng-src="{{image2.resized.dataURL}}"/>
</div>
<br>
<div style="display: flex; align-items: center;">
<button class="btn btn-primary" ng-click="upload(image2.resized)">Upload</button>
<button class="btn btn-success" ng-click="cancel()">Cancel</button>
</div>
<hr />
</div>
// HTML code
<div class="col-md-3 text-center">
</i>
<img alt=""class="img180_180" src="{{employer.picture_url}}">
</div>

Related

print custom function response in modal popup angularjs

How to print my response in my modal popup.
I have a different function for open Modal & my custom function
I want to print my custom function response in modal popup
$scope.createUser = function() {
var modalInstance = $modal.open({
templateUrl: '/js/modal-popup.html',
controller: function ($scope, $modalInstance, $log) {
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
});
}
$scope.allTest = function() {
$http({
method: 'GET',
url: 'api/url'
}).success( function (data) {
$scope.data = data.data;
}).error(function (response){
console.log("error");
});
}
<button type="button" name="createUser" class="btn btn-primary pull-right" ng-click="createUser(); allTest()">Create User </button>
<div class="modal-header">
<h3 class="modal-title"><span class="glyphicon glyphicon-user"></span> Create User</h3>
</div>
<div class="modal-body">
{{data}}
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
Seems like you are using angularStrap for you modal, in this case you can use the resolve property
var modalInstance = $modal.open({
templateUrl: '/js/modal-popup.html',
controller: function ($scope, $modalInstance, $log) {
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {yourresult: $http({
method: 'GET',
url: 'api/url'
})}
});
Note: the modal only opens if the promise resolves
http://mgcrea.github.io/angular-strap/#/modals

Using AngularJS, how can I pass a clicked object property to a function?

Using AngularJS, I am creating a wizard. In order to navigate properly, the clicked wizardresult.Title needs to be passed into the function showpagetwo().
Here is the HTML:
<div ng-app="wizardApp">
<div ng-controller="MainCtrl">
<div ng-repeat="wizardresult in wizardresults">
<div id="initial" ng-if="wizardresult.RootItem =='Yes'">
<button type="button" class="btn btn-primary" ng-click="showpagetwo()">{{wizardresult.Title}}
...
</button>
</div>
<div id="pagetwo" style="display:none">
...
</div>
</div>
</div>
</div>
My JS:
function showpagetwo(){
console.log("Hello");
$("#pagetwo").fadeIn();
$( "#initial" ).hide()
}
var app = angular.module('wizardApp', []);
app.controller('MainCtrl', function($scope, $http, $q){
var supportList;
$(document).ready(function() {
$scope.getSupportList();
});
$scope.prepContext = function(url,listname,query){
var path = url + "/_api/web/lists/getbytitle('" + listname + "')/items" + query;
return path;
}
$scope.getSupportList = function() {
supportList = $http({
method: 'GET',
url: this.prepContext(siteOrigin+"/divisions/testing","SupportList","?$orderBy=Title"),
headers: {
"Accept": "application/json; odata=verbose"
}
}).then(function(data) {
//$("#articleSection").fadeIn(2000);
console.log(data.data.d.results);
$scope.wizardresults = data.data.d.results;
});
};
});
I have tried ng-click="showpagetwo(wizardresult.Title)" and just ng-click="showpagetwo()"but the function is not firing at all either way.
What is my issue here?
You just need to put your callback function in the $scope and pass the argument you want to receive.
Something like this:
HTML:
<div class="test" ng-controller="Ctrl">
<button ng-click="myFn(wizardresult.Title);">click me</button>
<div>
JS:
var app = angular.module('app', []);
function Ctrl($scope) {
$scope.wizardresult = {Title: 'myname'};
$scope.myFn = function(param){
alert("Param: " + param);
};
}
Check this jsfiddle: http://jsfiddle.net/m1q4q4cm/
Add the function showpagetwo() inside controller.
var app = angular.module('wizardApp', []);
app.controller('MainCtrl', function($scope, $http, $q){
var supportList;
$(document).ready(function() {
$scope.getSupportList();
});
$scope.prepContext = function(url,listname,query){
var path = url + "/_api/web/lists/getbytitle('" + listname + "')/items" + query;
return path;
}
$scope.showpagetwo= function(title){
console.log("Hello "+title);
$("#pagetwo").fadeIn();
$( "#initial" ).hide()
}
$scope.getSupportList = function() {
supportList = $http({
method: 'GET',
url: this.prepContext(siteOrigin+"/divisions/testing","SupportList","?$orderBy=Title"),
headers: {
"Accept": "application/json; odata=verbose"
}
}).then(function(data) {
//$("#articleSection").fadeIn(2000);
console.log(data.data.d.results);
$scope.wizardresults = data.data.d.results;
});
};
});
You cannot call a function outside your app directly with ng-click. The angular way of what you are trying to achieve will be like
Html
<div ng-app="wizardApp">
<div ng-controller="MainCtrl">
<div ng-repeat="wizardresult in wizardresults">
<div id="initial" ng-if="wizardresult.RootItem =='Yes'" ng-show="showThisDiv">
<button type="button" class="btn btn-primary" ng-click="showpagetwo(wizardresult.Title)">{{wizardresult.Title}}
...
</button>
</div>
<div id="pagetwo" ng-hide="showThisDiv">
...
</div>
</div>
</div>
</div>
Controller
app.controller('MainCtrl', function($scope, $http, $q){
$scope.showThisDiv = true
$scope.showpagetwo = function(wizardTitle){
$scope.showThisDiv = true
}
});
For the animation effects, you can use angular-animate library and add class="animate-show animate-hide" to divs for the fade effects.
For some reason if you want to use jquery, then just change the scope function to
$scope.showpagetwo = function(wizardTitle){
$("#pagetwo").fadeIn();
$( "#initial" ).hide()
}
Hope this will help.

Angular: data read is undefined when trying to use pagination

I am trying to paginate a potentially very long list of divs. I have things working fine without the pagination however when I try to implement pagination (using this as a sort of template: http://plnkr.co/edit/81fPZxpnOQnIHQgp957q?p=preview) I receive an error: TypeError: cannot read property 'slice' of undefined . As far as I can tell this is an issue involving the $scope.data variable since I am calling slice on $scope.data . I am not sure how to resolve this and get it working. I will post the working version without pagination followed by the erroneous version with pagination. The only differences in the controller are from the line filteredTodos onward. I am calling fetchAllSamples() which populated $scope.data before any other work is done with pagination so I'm not sure why it would be undefined. All help is much appreciated.
Erroneous pagination html:
<div>
<div>
<div class="col-md-12">
<div style="border: 1px solid #000000">
<div ng-repeat="item in filteredTodos" style="margin-left: 14px">
{{item.name}}
<br> <span style="font-size: 20px">{{item.description}}</span>
<br>
<hr>
</div>
</div>
</div>
<pagination ng-model="currentPage" total-items="data.length" max-size="maxSize" boundary-links="true"> </pagination>
</div>
</div>
and correct non-paginated:
<div>
<div>
<div class="col-md-12">
<div style="border: 1px solid #000000">
<div ng-repeat="item in data" style="margin-left: 14px">
{{item.name}}
<br> <span style="font-size: 20px">{{item.description}}</span>
<br>
<hr>
</div>
</div>
</div>
</div>
</div>
which use the following controller:
app.controller('SamplesQueryController','$scope','$http', function($scope, $http) {
$scope.newSampleName = {
sampleName: ''
};
$scope.attributes = [{
name: '',
value: ''
}];
$scope.sampleCount = 0;
$scope.addAttribute = function() {
var attribute = {
name: '',
value: ''
};
$scope.attributes.push(attribute);
}
$scope.showModal = false;
$scope.toggleModal = function() {
$scope.showModal = !$scope.showModal;
};
$scope.headerCount = 0;
$scope.headers = new Array("Id", "Name", "URL", "Description");
$scope.fetchAllSamples = function() {
$scope.response = null;
$scope.method = 'GET';
$scope.url = '/api/samples';
$http({
method: $scope.method,
url: $scope.url
}).then(function(response) {
$scope.data = response.data;
angular.forEach(response.data,function(value,key) {
$scope.sampleCount += 1;
});
},
function(response) {
$scope.data = response.data || "Request failed";
}
);
};
$scope.createSample = function() {
$scope.response = null;
$scope.method = 'POST';
$scope.url = '/api/samples';
$http({
method: $scope.method,
url: $scope.url,
data: JSON.stringify({
name: $scope.newSampleName.sampleName,
attributes: $scope.attributes
})
}).then(function(response) {
$scope.fetchAllSamples();
});
};
$scope.fetchAllSamples();
$scope.filteredTodos = [], $scope.currentPage = 1, $scope.numPerPage = 10, $scope.maxSize = 5;
$scope.$watch('currentPage + numPerPage', function() {
var begin = (($scope.currentPage - 1) * $scope.numPerPage),
end = begin + $scope.numPerPage;
$scope.filteredTodos = $scope.data.slice(begin, end);
});
}]);

Open angular ui modal on ajax loaded select

I'm loading the dropdown with jsonp, the dropdown is populated from the url, but when I select an option 1, it should open a dialog with some rules in it. I'm trying to make this work, but no luck.
I was following the ui-bootstrap modal code and this from stackoverflow
<div class="table-cell" ng-app="ui.bootstrap.demo" ng-controller="ModalDemoCtrl">
<select id="method" ng-change="open();" ng-model="selected">
<option>
--select--
</option>
<option ng-repeat="item in items" value={{item.id}}>{{item.value}} </option>
</select>
</div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Results <small>Total Records: <strong>{{allrecords.length}}</strong></small></h3>
</div>
<div class="modal-body">
<p>Your selection: {{selected}}</p>
<p>Displaying records: {{startval}} - {{endval}}</p>
<ol start="{{startval}}">
<li ng-repeat="record in allrecords.slice(startval-1, endval)">{{record.Name}}</li>
<ol>
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
Angular
// Code goes here
var app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']),
dropDown = angular.module('ui.bootstrap.demo', []);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function($scope, $uibModal, $log) {
console.log($scope);
$scope.animationsEnabled = true;
$scope.open = function(size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function() {
return $scope.items;
}
}
});
modalInstance.result.then(function(selectedItem) {
$scope.selected = selectedItem;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.toggleAnimation = function() {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function($scope, $uibModalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function() {
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
});
dropDown.controller('ModalDemoCtrl', function($scope, $http) {
$http({
method: 'JSONP',
url: 'URL?callback=JSON_CALLBACK',
withCredentials: true
}).then(function successCallback(response) {
console.log(response.data);
return response.data;
}, function errorCallback(response) {
console.log(response);
});
});

ng-click ng-keypress passing form data not working

Im trying to send data from user input to display on the screen when button click.
The problem is that if i click on the button it simply passes to the next value without gathering the information and displaying in the screen. If i press ENTER it works how it should. i have searched all over internet several examples but simply couldnt get it to work. im using at the moment :
<button class="btn btn-lg btn-default next bt_submits" type="button" ng-click="addData(newData)">
<span class="bt_arrow"></span>
</button>
full html:
<div class="boxContent col-md-12">
<h1>{{lang.sec101.h1}}</h1>
<div class="col-md-12 lineBorder noPad" >
<div class="box1">
<p>
{{lang.sec101.title}}
</p>
</div>
<!-- dynamic form -->
<div class="col-md-12 borderBox boxLeft bg_box">
<form novalidate name="addForm">
<div class="boxLeft" ng-show="Question != ''">
<div ng-show="Question.infotip != 'yes'">
<h1 class="heading_left">{{Question.ask}}</h1>
</div>
<div ng-show="Question.infotip == 'yes'">
<h1 class="heading_left info">{{Question.ask}}
<span class="infotip yourData" tooltip-placement="top" tooltip-trigger="click" tooltip="{{Question.infotipText}}"></span>
</h1>
</div>
</div>
<div class="boxRight" ng-show="Question != ''">
<button class="btn btn-lg btn-default next bt_submits" type="button" ng-click="addData(newData)">
<span class="bt_arrow"></span>
</button>
</div>
<div class="boxRejestracjaInput">
<!-- <div id="legg-select" ng-if="Question.type === 'select'">
<select ng-options="opt.val for opt in Question.options" name="{{Question.name}}" ng-model="value" ng-keypress="enter($event,value.val)"></select>
</div> -->
<div class="newSelect">
<label ng-if="Question.type === 'select'">
<select ng-options="opt.val for opt in Question.options" name="{{Question.name}}" ng-model="value" ng-keypress="enter($event,value.val)"></select>
</label>
</div>
<input
ng-if="Question.type === 'text'"
type="{{Question.type}}"
name="institutionName"
class="inputName"
value="{{Question.value}}"
ng-model="value"
ng-minlength="{{Question.min}}"
ng-maxlength="{{Question.max}}"
ng-keypress="enter($event,value)"
placeholder="{{Question.placeholder}}"
ng-pattern="{{Question.pattern}}" />
<!-- <div class="custom-error institution" ng-show="addForm.institutionName.$error.minlength || addForm.institutionName.$error.maxlength">
Minimum {{Question.min}} znaków
</div> -->
<!-- <div class="custom-error institution" ng-show="addForm.institutionName.$error.maxlength">
Max {{Question.max}} znaków
</div> -->
<div class="custom-error institution" ng-show="addForm.institutionName.$error.pattern || addForm.institutionName.$error.maxlength || addForm.institutionName.$error.minlength">
{{Question.copy}}
</div>
</div>
</form>
</div>
<p>
{{lang.sec101.title2}}
</p>
<a href="rejestracja_10edit.html" class="btn btn-lg btn-default bt_edit" type="button">
{{lang.sec101.title3}}<span class="btn_bg_img"></span>
</a>
</div>
<div class="col-md-12 noPad" ng-repeat="sek in formOut">
<h3 class="daneHeading">{{sek.name}}</h3>
<div class="row">
<div class="col-md-12" >
<div class="col-md-4 col-sm-6 boxContent3 boxes" ng-repeat="row in sek.data">
<span class="leftBoxContrnt">{{row.shortAsk}}</h4></span>
<h4 class="rightBoxContrnt">{{row.value}}</h4>
</div>
</div>
</div>
</div>
<!-- <div class="row col-md-12" >
<h3 class="daneHeading">Hasło</h3>
</div>
<div class="row">
<div class="col-md-12 " >
<div class="col-md-4 col-sm-6 boxContent3">
<span class="leftBoxContrnt">Test</h4></span><span class="blueTxt"> *</span>
<h4 class="rightBoxContrnt">Test</h4>
</div>
</div>
</div> -->
</div>
my controller:
var app = angular.module('app', ['ngAnimate', 'ngCookies', 'ui.bootstrap', 'ngSanitize', 'nya.bootstrap.select', 'jackrabbitsgroup.angular-slider-directive']);
// var rej10_Controller = function($scope, $http, $cookieStore, $timeout, limitToFilter) {
app.controller('rej10_Controller', ['$scope', '$http', '$cookieStore', '$sce', '$timeout', 'limitToFilter',
function($scope, $http, $cookieStore, $sce, $timeout, limitToFilter) {
var view = 10,
arr,
data,
counterSection = 0,
counterAsk = 0;
$scope.opts = {};
$scope.slider_id = 'my-slider';
$scope.opts = {
'num_handles': 1,
'user_values': [0, 1],
'slider_min': 0,
'slider_max': 1,
'precision': 0,
};
/* language */
if (!$cookieStore.get('lang'))
$cookieStore.put('lang', 'pl');
var lang = $cookieStore.get('lang');
$scope.language = lang;
$scope.setLang = function(data) {
$cookieStore.put('lang', data);
$http.get('../widoki/json/lang/' + data + '/rej_' + view + '.json').
success(function(data, status, headers, config) {
$scope.lang = data;
$scope.Question = $scope.lang.formIn.sekcja[counterSection].data[counterAsk];
console.log($scope.lang);
}).
error(function(data, status, headers, config) {
console.log('error load json');
});
$scope.language = data;
};
/* get language pack */
$http({
method: 'GET',
url: '../widoki/json/lang/' + lang + '/rej_' + view + '.json'
}).
success(function(data, status, headers, config) {
$scope.lang = data;
$scope.Question = $scope.lang.formIn[counterSection].data[counterAsk];
$scope.langLen = $scope.lang.formIn.length;
}).error(function(data, status, headers, config) {
console.log('error load json');
});
/* dynamic form */
$scope.enter = function(ev, d) {
if (ev.which == 13) {
$scope.addData(d);
}
};
$scope.addData = function(data) {
var newData = {};
/* latamy po id sekcji i po id pytania */
if (!$scope.formOut) {
$scope.formOut = [];
}
/* budowanie modelu danych wychodzcych */
newData = {
sekcja: counterSection,
name: $scope.lang.formIn[counterSection].name,
data: []
};
console.log(name);
if (!$scope.formOut[counterSection]) {
$scope.formOut.push(newData);
}
$scope.formOut[counterSection].data.push($scope.Question);
$scope.formOut[counterSection].data[counterAsk].value = data;
counterAsk++;
// zmieniamy sekcje
if (counterAsk == $scope.lang.formIn[counterSection].data.length) {
counterAsk = 0;
counterSection++;
}
if (counterSection == $scope.lang.formIn.length) {
$scope.Question = '';
/* zrobic ukrycie pola z formularza */
} else {
$scope.Question = $scope.lang.formIn[counterSection].data[counterAsk];
}
/* konwertowanie do jsona */
//var Json = angular.toJson($scope.formOut);
//console.log(Json);
};
$scope.submit = function() {
alert('form sent'); /* wysĹanie formularza */
};
$scope.getClass = function(b) {
return b.toString();
};
}
]);
app.directive('ngEnter', function() {
return function(scope, element, attrs) {
element.bind("keydown keypress", function(event) {
if (event.which === 13) {
scope.$apply(function() {
scope.$eval(attrs.ngEnter);
});
event.preventDefault();
}
});
};
});
app.config(['$tooltipProvider',
function($tooltipProvider) {
$tooltipProvider.setTriggers({
'mouseenter': 'mouseleave',
'click': 'click',
'focus': 'blur',
'never': 'mouseleave',
'show': 'hide'
});
}
]);
var ValidSubmit = ['$parse',
function($parse) {
return {
compile: function compile(tElement, tAttrs, transclude) {
return {
post: function postLink(scope, element, iAttrs, controller) {
var form = element.controller('form');
form.$submitted = false;
var fn = $parse(iAttrs.validSubmit);
element.on('submit', function(event) {
scope.$apply(function() {
element.addClass('ng-submitted');
form.$submitted = true;
if (form.$valid) {
fn(scope, {
$event: event
});
}
});
});
scope.$watch(function() {
return form.$valid
}, function(isValid) {
if (form.$submitted == false)
return;
if (isValid) {
element.removeClass('has-error').addClass('has-success');
} else {
element.removeClass('has-success');
element.addClass('has-error');
}
});
}
};
}
};
}
];
app.directive('validSubmit', ValidSubmit);
I cant figure out what is the problem.
Thanks in advance.
Try changing your ngClick button handler to an ngSubmit form handler and wiring that up. You didn't say what browser you're using, but most of them auto-submit forms on an ENTER keypress unless you trap it (which you aren't). Clicking a button won't do this.

Resources