Laravel /Angularjs Modal Save / Delete code does nothing on submit - angularjs

I'm working on a laravel/angularjs app that uses a bootstrap modal to save/edit and delete records
I'm having a hard time understanding what i'm doing wrong, it does not save/edit the record and doesn't do anything when the submit button is clicked.
Below is my Modal code (I've shortened it), please tell me what you think is wrong?
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">#{{form_title}}</h4>
</div>
<div class="modal-body">
<form name="AccountsForm" class="form-horizontal" novalidate="">
<div class="form-group">
<label for="account_name"
class="col-sm-3 control-label">Account Name</label>
<div class="col-sm-9">
<input type="text"
class="form-control "
id="account_name"
name="#{{account_name}}"
placeholder="Account Name"
value="account_name"
ng-model="account_name"
required="true">
<span class="help-inline"
ng-show="AccountsForm.account_name.$invalid && AccountsForm.account_name.$touched">Account number field is required
</span>
</div>
</div>
</div>
</div>
</div>
UPDATE
Adding app.controller JS code for saving/editing
//save new record / update existing record
$scope.save = function(modalstate, id) {
var url = API_URL + "accounts";
//append account id to the URL if the form is in edit mode
$scope.id = id;
if (modalstate === 'edit'){
url = "accounts/" + id;}
$http({
method: 'POST'
}).success(function(response) {
console.log(response);
location.reload();
});
}

So the code should look like this:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">#{{form_title}}</h4>
</div>
<div class="modal-body">
<form name="AccountsForm" class="form-horizontal" novalidate="">
<div class="form-group">
<label for="account_name"
class="col-sm-3 control-label">Account Name</label>
<div class="col-sm-9">
<input type="text"
class="form-control "
id="account_name"
name="account_name"
placeholder="Account Name"
value="#{{account_name}}"
ng-model="account.account_name"
required="true">
<span class="help-inline"
ng-show="AccountsForm.account_name.$invalid && AccountsForm.account_name.$touched">Account number field is required
</span>
</div>
</div>
</div>
</div>
//save new record / update existing record
$scope.save = function(modalstate, id) {
var url = API_URL + "accounts";
//append account id to the URL if the form is in edit mode
$scope.id = id;
if (modalstate === 'edit'){
url = "accounts/" + id;}
$http({
method: 'POST',
url: url,
data: $.param($scope.account),
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function(response) {
console.log(response);
location.reload();
});
}

Related

how to insert the current url of the page in the database

if (ModelState.IsValid)
{
ip.patientname = fc["patientname"];
ip.patientmail = fc["patientmail"];
ip.patientcountry = fc["patientcountry"];
ip.patientquery = fc["patientquery"];
ip.SecurityCode = fc["SecurityCode"];
string url = Request.Url.AbsoluteUri;
dblayer.Add_data_pharma(ip);
TempData["msg"] = "Inserted";
}
else
{
TempData["msg"] = "Not Inserted";
}
ModelState.Clear();
return Redirect(Request.UrlReferrer.PathAndQuery);
}
string url = Request.Url.AbsoluteUri;
I want to know how to insert url name in the database using Request.Url.AbsoluteUri or any method.
public void Add_data_pharma(insert_askpharma_mar212019 ip)
{
SqlCommand com = new SqlCommand("insert_askpharma", con);
com.CommandType = CommandType.StoredProcedure;
com.Parameters.AddWithValue("#pharmaid", ip.pharmaid);
com.Parameters.AddWithValue("#patientname", ip.patientname);
com.Parameters.AddWithValue("#patientmail", ip.patientmail);
com.Parameters.AddWithValue("#patientcountry", ip.patientcountry);
com.Parameters.AddWithValue("#patientquery", ip.patientquery);
com.Parameters.AddWithValue("#SecurityCode", ip.SecurityCode);
com.Parameters.AddWithValue("#urlname", string.Empty);
com.Parameters.AddWithValue("#ipaddress", string.Empty);
con.Open();
com.ExecuteNonQuery();
con.Close();
}
I want to insewrt the current page url in the database using mvc
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-6">
<h3 style="color:#669900">Personal Information</h3>
#using (Html.BeginForm("AskOurPharmacist", "Basic", FormMethod.Post, new { #id = "kycFormTab5" }))
{
<div class="form-group">
<label for="email">Name*</label>
<input type="text" class="form-control" id="patientname" name="patientname">
</div>
<div class="form-group">
<label for="pwd">Phone*</label>
<input type="text" class="form-control" id="" name="">
</div>
<div class="form-group">
<label for="email">Email*</label>
<input type="email" class="form-control" id="patientmail" name="patientmail">
</div>
<div class="form-group">
<input type="hidden" class="form-control" id="patientcountry" name="patientcountry">
</div>
<div class="form-group">
<input type="hidden" class="form-control" id="patientquery" name="patientquery">
</div>
<div class="form-group">
<input type="hidden" class="form-control" id="SecurityCode" name="SecurityCode">
</div>
<div class="form-group">
<input type="hidden" class="form-control" id="urlname" name="urlname">
</div>
<button type="submit" class="btn btn-success">Email me When in Stock</button>
}
</div>
<div class="col-sm-6">
<div class="rbox">
<h4 class=" text-center"><strong>Why shop with Us?</strong></h4>
<ul class="list-unstyled">
<li><i class="fa fa-heart"> </i>Trusted for Quality and Price</li>
<li><i class="fa fa-heart"> </i>80-90% Savings - Lowest Prices</li>
<li><i class="fa fa-heart"> </i>Free Shipping WorldWide*</li>
<li><i class="fa fa-heart"> </i>360° Round View of Products</li>
<li><i class="fa fa-heart"> </i>No Hidden Cost</li>
<li><i class="fa fa-heart"> </i>Saving Rewards, Referral Discounts</li>
<li><i class="fa fa-heart"> </i>Quality-Assured Medications</li>
<li class="text-right">*T&C Apply</li>
</ul>
</div>
</div>
</div>
</div>
This is my view ,in one mehod i have inserted two forms in this form only i want to insert the url in the database all are in the same table
this is my database
you must have a column(if not add 1 with name url) in database let say url which also will be available(if not add a property with the name url) in Model class ip. You method dblayer.Add_data_pharma(ip) will do the rest.
ip.url = Request.Url.AbsoluteUri;

Editing data in Modal in AngularJS

I have a problem with editing data in the bootstrap modal.
The problem is that in the modal, only first record from the database is displayed.
Modal only displays the problem because it retrieves data from 1 record.
My code AngularJS:
$scope.editLink = function( link ){
var linkdId = $routeParams.id;
$scope.id = linkdId;
$http({
method: 'get',
url: 'api/admin/links/get/' + linkdId
}).then(function (response){
$scope.edlink = response.data.records;
},function (error){
console.log('Blad we wczytywaniu danych');
});
}
View.html
Edit
<div class="modal fade" id="edit-data" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form method="POST" name="editLinked" role="form" ng-submit="saveChanges( link )">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Edit Item</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" class="form-control" ng-model="edlink.login">
<input type="text" class="form-control" ng-model="edlink.password">
<input type="text" class="form-control" ng-model="edlink.links">
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" ng-disabled="editLinked.$invalid" class="btn btn-primary create-crud">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>

Data edit - modal Bootstrap

I have a problem with editing data in the bootstrap modal.
The problem is that in the modal, only first record from the database is displayed.
Modal only displays the problem because it retrieves data from 1 record.
Could it show me something wrong with the code, that it only gets 1 record for me?
My code AngularJS:
controllersAdmin.controller('linkEdit', function( $scope, $http, $routeParams, $timeout){
var linkID = $routeParams.id;
$scope.id = linkID;
$scope.link = function( link ){
$http({
method: 'GET',
url: 'api/admin/links/get/' + linkID,
}).then(function (response){
$scope.link = response.data.records;
},function (error){
console.log('Blad we wczytywaniu danych');
});
}
$scope.saveChanges = function( link ){
$http({
method: 'POST', url: 'api/admin/links/update/', data: {'link' : link}},
).then(function (){
$scope.success = true;
},function (error){
console.log('Blad we wczytywaniu danych');
});
}
});
<tr ng-repeat="link in link">
<td>{{$index+1}}</td>
<td>{{link.links | limitTo:50}}...</td>
<td>{{ link.login }}</td>
<td>{{link.password}}</td>
<td>{{link.date}}</td>
<td>
<button ng-click="deleteLink(link, $index)" class="btn btn-danger">×</button>
<button data-toggle="modal" ng-click="edtlnk(link)" data-target="#edit-data" class="btn btn-primary">Edit</button>
<div class="modal fade" id="edit-data" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form method="POST" name="editlinke" role="form" ng-submit="saveChanges( link )">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Edit Item</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" class="form-control" ng-model="link.login">
<input type="text" class="form-control" ng-model="link.password">
<input type="text" class="form-control" ng-model="link.links">
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</td>
</tr>

Angular object not binding

I have the following issue. I have 2 controllers defined for 2 separate functions.
The 1st controller handle my login and the second 1 handles forgot password.
Login controller binds well but forgot password controller does bind but not the object.
Controllers
var singlePageApp = angular.module('SinglePageApp',[]);
singlePageApp.controller('LoginController', function ($scope, $location, $window) {
$scope.isFormValid = false;
$scope.message = null;
$scope.login = null;
// Login object
$scope.Login = {
Email: '',
Password: '',
};
//check form validation
$scope.$watch('LoginForm.$valid', function (newValue) {
$scope.isFormValid = newValue;
});
$scope.submitForm = function () {
console.log('Form is submitted with:', $scope.login);
...
};
});
singlePageApp.controller('ForgotPasswordController', function ($scope, $location, $window) {
$scope.message = null;
$scope.password = null;
// Password object
$scope.Password = {
Email: '',
};
$scope.$watchGroup(['password', 'Password'], function (newValues, oldValues, scope) {
console.log(newValues);
});
$scope.forgotPassword = function () {
};
});
Login HTML
<div ng-controller="LoginController">
<form class="form-signin mt10" name="LoginForm">
<h2 class="form-signin-heading pwc">Please login</h2>
<div class="login-wrap">
<input ng-model="login.Email" id="tbEmail" name="Email" type="email" class="form-control" placeholder="Email" autofocus required>
<span class="error" ng-show="LoginForm.Email.$touched && LoginForm.Email.$error.required">Email is required</span>
<input ng-model="login.Password" id="tbPassword" name="Password" type="password" class="form-control" placeholder="Password" required>
<span class="error" ng-show="LoginForm.Password.$touched && LoginForm.Password.$error.required">Password is required</span>
<label class="checkbox">
<span class="pull-right">
#* Forgot Password?*#
Forgot Password?
</span>
</label>
<div class="clearfix"></div>
<button id="btnloginAdmin" type="button" ng-click="submitForm()" ng-disabled="LoginForm.$invalid && !!LoginForm.$error.email" class="btn btn-success btn-block">Login</button>
<div class="text-center">
<label style="color: red;" id="lblError" class="hasError-label clearfix">{{message}}</label>
<div class="error error-red"></div>
</div>
</div>
</form>
</div>
HTML Modal
<div ng-controller="ForgotPasswordController">
<div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="modalForgotPassword" class="modal fade">
<div class="modal-dialog">
<div class="modal-content" ng-form="fgForm">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Forgot Password ?</h4>
</div>
<div class="modal-body">
<p>Enter your e-mail address below to reset your password.</p>
<input type="email" name="Email" ng-model="password.Email"
placeholder="Email" autocomplete="off"
class="form-control placeholder-no-fix" required>
<span class="error" ng-show="fgForm.Email.$touched && fgForm.Email.$error.required">Email is required</span>
<div class="text-center">
<label style="color: red;" id="fError" class="hasError-label clearfix">{{message}}</label>
<div class="error error-red"></div>
</div>
</div>
<div class="modal-footer">
<a href="javascript:;" class="btn btn-success" ng-disabled="fgForm.$invalid && !fgForm.$error.email" ng-click="forgotPassword();">
<i class="fa fa-check"></i> | Submit
</a>
<a href="javascript:;" class="btn btn-danger" data-dismiss="modal">
<i class="fa fa-times"></i> | Cancel
</a>
</div>
</div>
</div>
</div>
I have tried changing to bind to a single object 'password' but it states its undefined. Then I changed it to 'Password.Email' but then it stays empty.
The 2 controllers are bind on the same page so not sure if that is the issue.
Thank you in advance.

Unable to fetch form data in controller using angularjs?

I am new to angularjs. So from YouTube, I am trying to develop my first angularjs application. But I was stuck at the 25th minute of the video where the tutor basically trying to bind the Save user button with the controller and he is able to do so. The data is submitted to the controller in form of array. But when I am trying to do the exact same thing, I am getting an empty array. Why?
JS version:- bootstrap-3.3.7 with angularjs 1.6.4
index.html
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">New Users Registration</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2">Username</label>
<div class="col-sm-10">
<input type="email" class="form-control" ng-model="newuser.username">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" ng-model="newuser.email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Full Name</label>
<div class="col-sm-10">
<input type="email" class="form-control" ng-model="newuser.fullname">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" ng-click="saveuser()" data-dismiss="modal">Save</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
my app.js is
var myApp = angular.module('myApp',[]);
myApp.controller('myController',function($scope){
console.log("My controller");
$scope.newuser = {};
$scope.users = [
{username:"Satya",fullname:"Satya",email:"satya#gmail.com"}
];
$scope.saveuser = function(){
$scope.users.push($scope.newuser);
$scope.newuser = {};
};
});
You can try to pass the user as an argument to the function:
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" ng-click="saveuser(newuser)" data-dismiss="modal">Save</button>
</div>
var myApp = angular.module('myApp',[]);
myApp.controller('myController',function($scope){
$scope.newuser = {};
$scope.users = [
{username:"Satya",fullname:"Satya",email:"satya#gmail.com"}
];
$scope.saveuser = function(newuser){
$scope.users.push(newuser);
$scope.newuser = {};
};
});
Okay, it's my mistake. Apparently, the input type should be text type. In my HTML file, I kept it as email type. Changing that resolve the problem. I am not sure but this might be bootstrap which validates the form data before processing.

Resources