I am trying to read and insert excel file data to mysql database table using angularjs( front and) and codeigniter (back end).thanks in advance
included xlsx-reader.js
this is only the excel file read code it is not working.
HTML
<div ng-app="App">
<div ng-controller="PreviewController">
<div class='form-group'>
<label for='excel_file'>Excel File</label>
<button class="btn btn-link" type="file" ng-model="file"ngf-select ngf-change="importToExcel()">
<span class="glyphicon glyphicon-share"></span>ImportExcel
</button>
</div>
</div>
</div>
app.js
(function(undefined) {
App.factory("XLSXReaderService", ['$q', '$rootScope',
function($q, $rootScope) {
var service = function(data) {
angular.extend(this, data);
};
service.readFile = function(file, showPreview) {
var deferred = $q.defer();
XLSXReader(file, showPreview, function(data){
$rootScope.$apply(function() {
deferred.resolve(data);
});
});
return deferred.promise;
};
return service;
}
]);
}).call(this);
controller.js
angular.module('App').controller('PreviewController', function($scope, XLSXReaderService)
{
$scope.showPreview = false;
$scope.importToExcel= function(files) {
$scope.sheets = [];
$scope.excelFile = file[0];
XLSXReaderService.readFile($scope.excelFile, $scope.showPreview).then(function(xlsxData) {
$scope.sheets = xlsxData.sheets;
});
};
}
Related
Here's my code:
<div ng-controller="mainCtrl">
<button ng-click="onclick()"></button>
<button ng-click="onclick()"></button>
<button ng-click="onclick()"></button>
{{display}}
</div>
<div ng-controller="SecondController">{{display}}</div>
<div ng-controller="lastController">{{display}}</div>
I have to get some message in each div when the user clicks on the button.
I've tried the below code:
app.controller('mainCtrl',function($scope,$rootScope){
$scope.OnClick = function (msg) {
$rootScope.$broadcast("firstEvent",{});
}
$scope.$on("firstEvent", function (msg ) {
$scope.display = "hello world";
});
});
app.controller('SecondController',function( $scope){
$scope.$on("firstEvent", function (msg) {
$scope.display = "hello how Are you";
});
});
app.controller('lastController',function($scope) {
$scope.$on("firstEvent", function (msg) {
$scope.display = "this is my Query";
});
});
When the user clicks on each button, it should get data in each div.
How come its only possible with $on, $event and $broadcast?
$broadcast() sends an even downwards from parent to child controllers. The $emit() method, on the other hand, does exactly opposite. It sends an event upwards from the current controller to all of its parent controllers.
This is a simple example of communicating between controllers
angular.module("app", [])
.controller("mainCtrl", [
"$scope", "$rootScope",
function($scope, $rootScope) {
$scope.go = function(msg) {
if (msg == 1) {
$scope.display = "hello firstEvent";
} else if (msg == 2) {
$rootScope.$broadcast("showSomething", {});
} else {
$rootScope.$broadcast("showGoodBye", {});
}
};
}
]).controller("SecondController", [
"$scope", "$rootScope",
function($scope, $rootScope) {
$scope.$on("showSomething", function(msg) {
$scope.display = "hello Something";
});
}
]).controller("ThirdController", [
"$scope", "$rootScope",
function($scope, $rootScope) {
$scope.$on("showGoodBye", function(msg) {
$scope.display = "hello GoodBye";
});
}
]);
<div ng-app="app">
<div ng-controller="mainCtrl">
mainCtrl : {{display}}
<br>
<button ng-click="go(1)"> Show Hello </button>
<button ng-click="go(2)"> Show Something </button>
<button ng-click="go(3)"> Show GoodBye </button>
</div>
<hr>
<div ng-controller="SecondController">
SecondController : {{display}}
<hr>
</div>
<div ng-controller="ThirdController">
SecondController : {{display}}
<hr>
</div>
</div>
A complete Tour
Here is the solution:
I prefer not to use rootScope, you can use intermaeidate service to share data between two controllers
Solution with services:
Here is how service looks:
app.service('StoreService',function(){
var data;
this.save=function(data){
this.data=data;
};
this.getData=function(){
return this.data;
};
});
Using a service without rootScope
Demo without rootScope
Solution with rootScope
var app = angular.module('myApp', []);
app.controller('mainCtrl',function($scope,$rootScope){
$scope.buttonclick = function (msg) {
var object = {
data: msg
}
$rootScope.$broadcast("firstEvent",object);
}
$rootScope.$on("firstEvent", function (event, msg) {
$scope.display = msg.data;
});
})
app.controller('SecondController',function( $scope, $rootScope){
$rootScope.$on("firstEvent", function (event, msg) {
$scope.display = msg.data;
});
})
app.controller('lastController',function( $scope, $rootScope){
$rootScope.$on("firstEvent", function (event, msg) {
$scope.display = msg.data;
});
})
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp">
<div ng-controller="mainCtrl">
<button ng-click="buttonclick('button1')">button1</button>
<button ng-click="buttonclick('button2')">button2</button>
<button ng-click="buttonclick('button3')">button3</button>
<br>
{{display}}
</div>
<div ng-controller="SecondController">{{display}}</div>
<div ng-controller="lastController">{{display}}</div>
</div>
</body>
</html>
Please run the above snippet
Here is a Working DEMO
This is my main HTML file.
<div ng-controller="filterController">
<div class="quick-view" id="quickview" data-toggle="modal" data-target="#modal-bar"
ng-click="quickView(quickview)"><i class="fa fa-eye">
</i><span>Quick View</span></div>
</div>
This is my controller.js file
angular.module('myApp',[]).controller('filterController', function($scope) {
$scope.quickView = function quickView(id){
$.ajax({
type: 'GET',
url: 'assets/external/_modal.html',
data: id,
success: function (data) {
// Create HTML element with loaded data
$('body').append(data);
console.log('body append');
},
error:function(jqXHR,textStatus,exception){console.log('Exception:'+exception);}
});
}
$scope.venue = "India";
}
This is _modal.html
<div ng-controller="filterController">
<p>Hi. I live in {{venue}}</p>
</div>
How can I pass the controller scope to the external file _modal.html so that "I live in India" gets displayed instead of "I live in {{venue}}"?
Try angularjs way. Use uib modal. https://angular-ui.github.io/bootstrap
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope,$uibModal, $log, $document) {
$scope.animationsEnabled = true;
$scope.Venue = "India"; // declare venue
$scope.open = function (size, parentSelector) {
var parentElem = parentSelector ?
angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined;
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
appendTo: parentElem,
resolve: {
values: function () {
return $scope.Venue; //we are passing venue as values
}
}
});
modalInstance.result.then(function () {
$scope.msg = "Submitted";
$scope.suc = true;
}, function(error) {
$scope.msg = 'Cancelled';
$scope.suc = false;
});
};
});
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope,$uibModalInstance, values) { // inject that resolved values
$scope.Venue= values; // we are getting & initialize venue from values
$scope.ok = function () {
$uibModalInstance.close('ok');
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl" class="modal-demo">
<br>
<form name="form" novalidate>
Type your venue : <input type="text" style="width:200px" class="form-control" name="name" ng-model="Venue" required><br>
<button type="button" ng-disabled="form.$invalid" class="btn btn-default" ng-click="form.$valid && open()">See Venue</button>
</form><br>
<p ng-hide="!msg" class="alert" ng-class="{'alert-success':suc, 'alert-danger':!suc}">{{msg}}</p>
</div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">Your Details</h3>
</div>
<div class="modal-body" id="modal-body">
<p>The venue is <b>{{Venue }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">Submit</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
</body>
</html>
I created a common modal service in my application.
But it's not working somehow. Some small thing am missing on this plunker but am not able to figure out.
Based on passed parameter either it will open error-dialog or cancel-dialog.
Find PLUNKER here
Here is
JS
// create angular app
var validationApp = angular.module('validationApp', ['ui.bootstrap']);
// create angular controller
validationApp.controller('mainController', function($scope, ModalService) {
var vm = this;
// function to submit the form after all validation has occurred
vm.submitForm = function() {
// check to make sure the form is completely valid
if ($scope.userForm.$valid) {
alert('our form is amazing');
}
};
function openDialog() {
alert('why am not showing');
ModalService.openModal('Analysis Error', 'Complete Application Group configuration prior to running analysis.', 'Error');
}
});
//controller fot dialog
validationApp.controller('ErrorDialogCtrl',
function($uibModalInstance, message, title, callback) {
alert('sfdsfds');
var vm = this;
vm.message = message;
vm.onOk = onOk;
vm.onContinue = onContinue;
vm.onDiscard = onDiscard;
vm.callback = callback;
vm.title = title;
function onOk() {
$uibModalInstance.close();
}
function onContinue() {
$uibModalInstance.close();
}
function onDiscard() {
vm.callback();
$uibModalInstance.close();
}
});
// common modal service
validationApp.service('ModalService',
function($uibModal) {
return {
openModal: openModal
};
function openErrorModal(title, message, callback) {
$uibModal.open({
templateUrl: 'ErrorDialog.html',
controller: 'ErrorDialogCtrl',
controllerAs: 'vm',
backdrop: 'static',
size: 'md',
resolve: {
message: function() {
return message;
},
title: function() {
return title;
},
callback: function() {
return callback;
}
}
});
}
function openCancelModal(title, message, callback) {
$uibModal.open({
templateUrl: 'CancelDialog.html',
controller: 'ErrorDialogCtrl',
controllerAs: 'vm',
backdrop: 'static',
size: 'md',
resolve: {
message: function() {
return message;
},
title: function() {
return title;
},
callback: function() {
return callback;
}
}
});
}
function openModal(title, message, modalType, callback) {
if (modalType === "Error") {
openErrorModal(title, message, callback);
} else {
openCancelModal(title, message, callback);
}
}
}
);
Opening Dialog in HTML
<div class="col-sm-6">
<button type="submit" class="btn btn-primary" ng-click="openCancelDialog()">Open Cancel Dialog</button>
<button type="submit" class="btn btn-primary" ng-click="openErrorDialog()">Open Error Dialog</button>
</div>
Cancel Dialog HTML
<div>
<div class="modal-header">
<h3 class="modal-title">{{vm.title}}</h3>
</div>
<div class="modal-body">
<p ng-bind-html="vm.message"></p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="vm.onContinue()" id="continue">Continue</button>
<button class="btn btn-primary" ng-click="vm.onDiscard()" id="discard">Discard</button>
</div>
</div>
ErrorDiaog HTML
<div>
<div class="modal-header">
<h3 class="modal-title">{{vm.title}}</h3>
</div>
<div class="modal-body">
<p ng-bind-html="vm.message"></p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="vm.onOk()">ok</button>
</div>
</div>
wrong in your js file, you need to declare function like below. you just copy these code and put it in your file then it will work fine.
NOTE: not ModalService.showModal, it should be ModalService.openModal
check your code here
$scope.openCancelDialog = function() {
alert('why am not showing CAncel');
ModalService.openModal('Analysis Error', 'I am Error Type', 'Error');
}
$scope.openErrorDialog = function() {
console.log('why am not showing Error');
ModalService.openModal('Analysis Error', 'I am cancel Type', 'Cancel');
}
i've created a new PLNKR here:
https://plnkr.co/edit/3RBJneSt7RCClrJ5Hba2?p=preview
$scope.submitForm = function() {
//check to make sure the form is completely valid
if ($scope.userForm.$valid) {
alert('our form is amazing');
}
};
$scope.openCancelDialog = function(){
//alert('why am not showing CAncel');
ModalService.openModal('Analysis Error', 'I am Error Type', 'Error');
}
$scope.openErrorDialog = function(){
//alert('why am not showing Error');
ModalService.openModal('Analysis Error', 'I am cancel Type', 'Cancel');
}
I am making a test app on MEAN stack and whenever I try to update information in my database regarding the fields, Google chrome throws Connection refused to the Url where I am posting the stuff.
Code for the controller:
(function() {
angular.module('TimeSuck')
.controller('EditProfileController',['Upload','$scope','$state', '$http', function(Upload, $scope, $state, $http) {
$scope.user = localStorage['Userdata'] || undefined
$scope.$watch(function(){
return $scope.file
},function(){
$scope.upload($scope.file);
});
$scope.upload = function(file) {
if(file){
Upload.upload({
url:'api/profile/editPhoto',
method: 'POST',
data: {userId: $scope.user._id},
file: file
}).progress(function(event){
console.log("Uploaded");
}).success(function(data){
}).error(function(error){
console.log(error);
})
}
};
$scope.updateUsername = function() {
var request = {
userId: $scope.user[0]._id,
username: $scope.username
}
$http.post('api/profile/updateUsername', request).success(function(){
console.log("success");
}).error(function(error){
console.log(error);
})
}
$scope.updateBio = function() {
var request = {
userId: $scope.user[0]._id,
bio: $scope.bio
}
$http.post('api/profile/updateBio', request).success(function(){
console.log("success");
}).error(function(error){
console.log(error);
});
}
$scope.post = function() {
console.log("successfully Posted.");
}
and the code for the html is here:
<div class="jumbotron">
<div class="col-sm-8 col-sm-offset-2">
<div class="row"> <div class="button" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'"
ngf-accept="'image/*'" >Select</div> </div>
<div class="row">
<input class="form-control" ng-model="username" ng-blur="updateUsername()">
</div>
<div class="row">
<textarea class="form-control" ng-model="Bio" ng-blur="updateBio()"> </textarea>
<button type="submit" ng-click="post()"> Post </button>
</div>
</div>
</div>
I've looked for a couple hours now, hoping not to duplicate a question, and I just can't find what I'm looking for.
I am working on passing a complex object back from a form to a controller, and having it parse everything out. The problem I get is the controller shows a null input, despite the header post from Chrome showing the data going out. Can anyone give me a hand? I've included code below.
Model
public class QuizTakenObject
{
[NotMapped]
public QuizTakenComplete quizTakenComplete { get; set; }
[NotMapped]
public List<QuizSubmittedAnswers> submittedAnswers { get; set; }
[NotMapped]
public TopicList Topic { get; set; }
[NotMapped]
public QuizHeader QuizHeader { get; set; }
}
View/Script
#model App.Models.QuizTakenObject
#{
ViewBag.Title = "Take Quiz";
}
#section pageScripts{
<script type="text/javascript">
$(document).ready(function () {
//Highlight background of selected background for increased visibility
$("input[name^=QuizSubmittedAnswer]").change(function () {
$(this).parent().addClass("bg-primary");
$(this).parent().siblings().removeClass("bg-primary");
});
//Show save prompt on page after one answer is picked
var i = 0;
if (i == 0) {
$("input[name^=QuizSubmittedAnswer]").change(function () {
$("#quizSave").fadeIn('fast');
$("#quizSave").animate({ height: '125px' }, 'fast')
.animate({ width: '250px' }, 'fast', function () {
$("#quizSaveText").fadeIn('500');
});
});
}
//Prevent submitting before all answers have been selected
//Count all questions, one per form group
var questionsCount = $("form-group").length;
//Listen for answers to be selected
$("input[name^=QuizSubmittedAnswer]").change(function () {
//Check to see if all answers are selected
if ($("input[name^=QuizSubmittedAnswer]:checked").length >= questionsCount) {
$("#saveAndSubmitQuizButton").removeClass("disabled");
}
});
//Save and submit quiz
$("#saveAndSubmitQuizButton").click(function () {
event.preventDefault;
var complete = true;
saveQuizAttempt(complete);
});
//Save but not submit quiz
$("#saveQuizOnlyButton").click(function () {
event.preventDefault;
var complete = false;
saveQuizAttempt(complete);
});
//Create or update quiz attempt in DB
//saveQuizAttempt complete indicates if the record is to be marked as final
function saveQuizAttempt(complete) {
var array = $("#takeQuizForm").serializeArray();
//build JSON array
var json = {};
$.each(array, function () {
json[this.name] = this.value || '';
})
//array.push({ "IsComplete": complete });
//AJAX to post data
$.ajax({
type: "POST",
url: "SubmitQuiz",
data: JSON.stringify(array),
dataType: "json",
contentType:"application/json; charset=UTF-8",
success: function (data) {
console.log("Success!");
},
error: function () {
console.log("Error");
}
});
}
});
</script>
}
<style>
#quizSave {
display: none;
position: fixed;
z-index: 999;
height: 0;
width: 0;
bottom: 100px;
right: 0;
background-color: khaki;
border: 1px solid black;
border-radius: 2px 2px 2px 2px;
padding: .5em 1em .5em 1em;
}
</style>
<h2>#ViewBag.TopicName Quiz</h2>
<div class="row">
<div class="container col-xs-9 col-sm-9 col-md-9 col-lg-9">
<div class="well well-sm">
<strong>Directions:</strong> #Model.QuizHeader.QuizSummary
</div>
#using (Html.BeginForm("SubmitQuiz", "Quiz", FormMethod.Post, new { id = "takeQuizForm" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.HiddenFor(model => model.QuizHeader.QuizID)
#Html.HiddenFor(model => model.QuizHeader.TopicID);
<input type="hidden" name="QuizTakenComplete.UserID" id="QuizTakenComplete.UserID" value="#(ViewBag.UserID)" />
<input type="hidden" name="QuizTakenComplete.IsComplete" id="QuizTakenComplete.IsComplete" value="false" />
<!--Questions/Answers-->
for (int i = 0; i < #Model.QuizHeader.QuizQuestions.Count(); i++)
{
<div class="quizQuestionBlock#(i)">
<hr />
<h4>#Model.QuizHeader.QuizQuestions.ElementAt(i).Question</h4>
<form-group>
<input type="hidden" name="QuizSubmittedAnswers[#(i)].QuestionID" id="QuizSubmittedAnswers[#(i)].QuestionID" value="#(Model.QuizHeader.QuizQuestions.ElementAt(i).QuestionID)">
#{for (int j = 0; j < Model.QuizHeader.QuizQuestions.ElementAt(i).QuizAnswers.Count(); j++)
{
<!--answers via radio buttons-->
<div id="answer#(j)#(i)" class="quizAnswer#(j)">
<input type="radio" class="individualQuizAnswer" name="QuizSubmittedAnswers[#(i)].AnswerID" value="#Model.QuizHeader.QuizQuestions.ElementAt(i).QuizAnswers.ElementAt(j).AnswerID"> #Model.QuizHeader.QuizQuestions.ElementAt(i).QuizAnswers.ElementAt(j).Answer
</div>
}
}
</form-group>
</div>
}
<hr />
<button class="btn btn-success btn-block disabled" id="saveAndSubmitQuizButton" type="button">submit quiz</button>
<div style="text-align:center;">
<small> Submitting quiz will finalize this attempt and update your score records.</small>
</div>
<br />
<br />
}
</div>
<!--Sidebar-->
<div class="container col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div class="panel panel-default">
<div class="panel-heading collapsable">
<h5><span class="glyphicon glyphicon-cog"></span> Actions</h5>
</div>
<div class="panel-body">
<span class="glyphicon glyphicon-backward"></span> #Html.ActionLink("return to library", "Index", new { controller = "Library" })<br />
#Html.ActionLink("cancel/go home", "Index", new { controller = "Home" }, new { #style = "color:red;" })
</div>
</div>
</div>
<!--Quiz Save/Quit-->
<div id="quizSave">
<div id="quizSaveText" style="display:none;">
Save current answers and return to App training/quiz library?<br />
<button type="button" id="saveQuizOnlyButton" class="btn btn-success">yes</button>
<button type="button" data-toggle="tooltip" class="btn btn-danger" title="this will cancel all previous work without saving and return to the main menu">no</button>
<br />
<small>You will be able to return later to resume your work.</small>
</div>
</div>
</div>
Controller
//POST: Quiz/SubmitQuiz
[HttpPost]
public async Task<ActionResult> SubmitQuiz(string quizObject)
{
//Send false value for complete in AJAX call, just parse based on this
//Two starting JS scripts, which flow into a unified function
var input = new JavaScriptSerializer().Deserialize<QuizTakenObject>(quizObject);
var quizTakenComplete = new QuizTakenComplete
{
UserID = input.quizTakenComplete.UserID,
IsComplete = input.quizTakenComplete.IsComplete,
LastUpdate = DateTime.Now
};
//Parse if complete for purposes of updating records.
if (quizTakenComplete.UserID != null || quizTakenComplete.UserID != "")
{
db.QuizTakenComplete.Add(quizTakenComplete);
await db.SaveChangesAsync();
var quizAttemptID = quizTakenComplete.QuizAttemptID;
//Now Add Each Answer
var quizTaken = new QuizSubmittedAnswers();
quizTaken.QuizAttemptID = quizAttemptID;
quizTaken.TopicID = input.Topic.TopicID;
quizTaken.QuizID = input.QuizHeader.QuizID;
return Content("Saved");
}
else
{
return Content("Not Saved");
}
}
I think that the problem is in Ajax Call you didn't specify the attribute name
try with this
$.ajax({
type: "POST",
url: "SubmitQuiz",
data: {quizObject : JSON.stringify(array)},
dataType: "json",
contentType:"application/json; charset=UTF-8",
success: function (data) {
console.log("Success!");
},
error: function () {
console.log("Error");
}
});