I am trying to submit the form.I am using ng-submit.After clicking a particular user inside table i am calling modal popup with firstName.
Here is the code for html.
<form ng-submit="submitPunch()" class="form" ng-show="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Employee Punch In</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12 col-lg-12 form-group mgl15">
<label for="type">Employee</label><br>
<input type="hidden" ng-model="formData.employeeId">
{{firstName}} /* Here i want to show only firstName but i want to pass corresponding id of the employee with formData */
</div>
<div class="col-md-6 col-lg-6 form-group mgl15">
<label for="PIN">{{'label.Enter_Pin'|i18next}} <span
class="text-red">*</span></label>
<input class="form-control" id="pin" ng-model="formData.pin"
type="text" required>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" ng-
disabled="submitStatus==='success'">Submit</button>
</div>
</form>
Here is how i am passing firstName to modal
Controller.js
$scope.testpopup = function(employee){
$scope.firstName = employee.firstName;
$scope.employeeId=employee.id;
console.log($scope.employeeId);//Here i am getting id
$(".testmodal").modal("show");
}
Now i want to send employee id along with pin.But if i bind employeeId with formData it is not taking.I want to pass id along with pin for saving.Can anyone tell how to bind id with formData?If i put console($scope.formData) it is showing only pin entered but not employee id.
Here's a fiddle that I've made.
$scope.testpopup = function(employee){
$(".modal").modal("show");
$scope.selectedEmployee = employee;
}
If this does not match with your intent, please give me feedback.
But I recommend you to use uib-modal.
.
.
.
UPDATE
Another fiddle is here.
Is this more close with your purpose?
Related
I am using mbd material design angular7 template. I have a set of tasks that has an edit button each. When i click on the Edit button a modal opens up. I want this modal to have the existing values of the field. I can be done through formControlName. But it is not happening.I click on the edit button and on that click function , i assign the values before opening the edit Modal. However, they don't fill the text boxes in the modal. In console it appears before i click the modal button. Please help
app.component.ts
openEditModal(taskIdValue:number){
console.log("Task Id Value = ", taskIdValue)
for(var i = 0 ; i<this.result.length ; i++){
if(this.result[i].taskId == taskIdValue ){
console.log("this.result[i] = ", this.result[i])
localStorage.setItem('editTaskId',this.result[i].taskId);
localStorage.setItem('editTaskName',this.result[i]. taskName);
}
}
this.editTaskId = localStorage.getItem('editTaskId')
this.editTaskName = localStorage.getItem('editTaskName')
$('#editModal').click();
this.displayEdit = true;
}
editTask(){
console.log("this.result.taskId", )
}
app.component.html
<td>
<button class = "btn btn-primary waves-light"
(click)="openEditModal(data.taskId)">Edit</button>
<button type="button" id = "editModal" style =
"visibility:hidden" class="btn btn-primary waves-light" data-
toggle="modal" data-target="#EditExample"
(click)="centralLarge.show()" mdbWavesEffect>
Edit
</button>
<div mdbModal #centralLarge="mdb-modal" class="modal fade"
id="EditExample" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true"
[config]="{backdrop: true, ignoreBackdropClick: false}">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title w-100" id="myModalLabel">Edit
Data</h4>
<button type="button" class="close" data-
dismiss="modal" aria-label="Close" (click)="centralLarge.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" *ngIf = "displayEdit">
<div>
<div>
<form (ngSubmit)="editTask(editTaskForm.value)"
[formGroup]="editTaskForm">
<div class="form-group">
<label>Task Id : </label>
<input type="text" maxlength="100"
class="form-control" placeholder="Enter Task Id "
formControlName="editTaskId"
[formControl]="editTaskForm.controls['editTaskId']"
required>
</div>
<div class="form-group">
<label>Task Name : </label>
<input type="text" maxlength="1000"
class="form-control" placeholder="Enter Task Name "
formControlName='editTaskName'
[formControl]="editTaskForm.controls['editTaskName']"
required>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-
secondary btn-sm waves-light" data-dismiss="modal"
(click)="centralLarge.hide()"
mdbWavesEffect>Close</button>
<button type="submit"
[disabled]="!editTaskForm.valid" class="btn btn-primary btn-sm
waves-
light"
(click)="centralLarge.hide()"
mdbWavesEffect>Save </button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
You'd better use [(ngModel)] with your object maybe, your typescript code is not clear enough with the way you build editTaskForm, so I suggest to organize the code clearly, and step by step, you will get it working.
Greetz!
you can set the previous value by using this.formGroupname.patchValue({}), For example
this.form.patchValue({ fullname1: this.fullname1, });
I am using laravel and I have an update bootstrap modal. When I clicked the update button, update modal showed up but all the fields are empty like in this picture below
It happened because there is an Enter space in address data from the database. This below is the code of the update button which I copied from inspect element.
<a type="button" class="btn btn-warning btn-circle" data-toggle="modal" data-target="#delivery_update_modal" onclick="delivery_update_modal(
'A9C55478-0BDE-428D-96CA-784A2349F0C7'
, 'packlaring'
, 'pe-ps-18-017'
, 'Document'
, 'Kota Balikpapan'
, 'Perum BDS2, Jl. Merpati Blok S no 14C, RT 33,
Kel. Sungai Nangka, Kec. Balikpapan Selatan,
Kota Balikpapan'
, '2019-05-31 15:00:00.000'
)"><i class="fa fa-edit"></i>
</a>
If I remove the space into one line, it working well.
I tried to remove the space when the user input the data, but it become one row, make the address is difficult to read.
Do you know how to resolve this?
okay. the problem is on this data
'Perum BDS2, Jl. Merpati Blok S no 14C, RT 33,
Kel. Sungai Nangka, Kec. Balikpapan Selatan,
Kota Balikpapan'.
if this is an address. what you need to do is output it using {!! $record->address !!}
you can try this piece of code: apply it to your case and it will work.
//modal form to show all the required inputs and make one field hidden
<div id="updateFormID" class="modal fade" >
<div class="modal-dialog box box-default" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Bank</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form class="form-horizontal" action="{{ url('/update') }}" method="post" role="form">
{{ csrf_field() }}
<div class="modal-body">
<div class="form-group" style="margin: 0 10px;">
<input type="hidden" class="form-control" id="recordid" name="recordid" value="">
<label> Name </label><input type="text" class="form-control" id="name" name="fname" value="">
<label>UserName: </label><select required class="form-control" id="username" name="userName">
<label>Email: </label><select required class="form-control" id="email" name="email">
<label>Address: </label><input type="text" class="form-control" id="address" name="address" value="">
<label>Phone: </label><input type="text" class="form-control" id="phone" name="phone" value="">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success btn-xs">Update</button>
<button type="button" class="btn btn-secondary btn-xs" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</div>
//link on your view to trigger popup the modal. this link displays record fetch from db. the $record is a array of variable from your controller assign to your view(blade)
<a onclick="updateForm('{{$record->userid}}','{{$record->name}}','{{$record->username}}','{{$record->email}}','{{$record->address}}','{{$record->phone}}')" style="cursor: pointer;"><i class="fa fa-edit"></i>Edit</a>
//javascript function to load modal and assign the record to inputes
function updateForm(r,x,y,z,w,s)
{
document.getElementById('recordid').value = r;
document.getElementById('name').value = x;
document.getElementById('username').value = y;
document.getElementById('email').value = z;
document.getElementById('address').value = w;
document.getElementById('phone').value = s;
$("#updateFormID").modal('show')
}
Might be my opinion but i really do not like your code. It's messy.
But, you can pass your data as json and laravel will escape it.
<a onclick="updateForm(#json($record))" style="cursor: pointer;"><i class="fa fa-edit"></i>Edit</a>
In your javascript
updateForm(object){
//you can use it as object.name or object.whatever
}
Take a look at the laarvel docs on how to pass json data and display it.
https://laravel.com/docs/5.8/blade#displaying-data
You can even use prerry print :-)
-----UPDATE------
If you use jquery, please use jquery!
function updateForm(record)
{
$('#recordid').val(record.userid);
$('#name').val(record.name);
$('#username').val(record.username);
//and so on.
$("#updateFormID").modal('show')
}
I'm using the jSignature plugin to add signature capture to a simple Bootstrap modal window - the signature capture displays correctly and I can draw and save the signature without any issues. Here's a screenshot showing the signature modal window in action:
At present the user must enter their signature then click the Save button below the signature for it to be saved. They then have to click the Submit button to submit the form which updates a database etc.
Here's the html code for the modal window:
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Approver Signature</h4>
</div>
<div class="modal-body">
<form id="saveEvent" action="update.php" method="post">
<div class="form-group">
<input type="hidden" name="id" value="123456">
<input type="hidden" id="hiddenSigData" name="hiddenSigData" />
<label for="yourName">Approver Name</label>
<input type="text" class="form-control" id="managerName" name="managerName" placeholder="Manager's Name" value="Peter Rabbit">
<label for="managerNotes">Approver Notes</label>
<input type="text" class="form-control" id="managerNotes" name="managerNotes" placeholder="Manager's Notes" value="">
</div>
<div class="form-group">
<label for="yourSignature">Approver Signature</label>
<div id="signature"></div>
<button type="button" class="btn btn-default" onclick="$('#signature').jSignature('clear')">Clear</button>
<button type="button" class="btn btn-primary" id="btnSave">Save</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
We have found them many users are forgetting to click the Save button to first save the signature and simply clicking the Submit button which submits the form but doesn't include the signature, and by the time we notice it's too late to get the signature again.
Here's the Javascript that runs when the signature Save button is clicked:
$(document).ready(function() {
$('#btnSave').click(function() {
var sigData = $('#signature').jSignature('getData', 'default');
$('#hiddenSigData').val(sigData);
console.log('jSignature saving signature');
});
})
We're looking for a way, when the Submit button is pressed, to automatically save the signature first and then submit the form. Not sure if this is possible or how to achieve this?
You can use an event handler.
$("#saveEvent").submit(function(){
var sigData = $('#signature').jSignature('getData', 'default');
$('#hiddenSigData').val(sigData);
console.log('jSignature saving signature');
});
You're done!
I'm trying to make a webpage form where you see a select drop-down list, and if you select one of the values from the drop-down list, a modal form that is unique to the value you selected will open up and you can fill it out. From my understanding, this is considered Cascading Dropdown lists.
The problem I'm facing is trying to find a way to create different modal forms for each unique value from the drop-down list. Let's say if my select list is a bunch of fruits, I want a modal form for "apples" to open if I select "apples" from the drop-down list, as well as a modal form for "oranges" to open if I select "oranges" from the drop-down list.
The function I'm using to get the modal to appear after there is an onChange()
Here's my head element:
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Here is my body element with the select drop-down, and two modal forms for "Apples" and "Oranges":
<div>
<select id="fruitlist">
<option value="main">Select Fruit:</option>
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
<option value="pineapples">Pineapples</option>
<option value="strawberries">Strawberries</option>
</select>
</div>
<div class="modal fade" id="appleModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-apple"></span> Fruit - Apples</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="appleName"><span class="glyphicon glyphicon-user"></span> Name</label>
<input type="text" class="form-control" id="appleName" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="appleAddress"><span class="glyphicon glyphicon-home"></span> Address</label>
<input type="text" class="form-control" id="appleAddress" placeholder="Enter your address">
</div>
<div class="form-group">
<label for="appleTelephone"><span class="glyphicon glyphicon-earphone"></span> Telephone Number</label>
<input type="text" class="form-control" id="appleTelephone" placeholder="Enter your telephone number">
</div>
<div class="form-group">
<label for="appleAmount"><span class="glyphicon glyphicon-tasks"></span> How many?</label>
<input type="text" class="form-control" id="appleAmount" placeholder="Enter the amount of fruits you wish to purchase">
</div>
<button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-check"></span> Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="orangeModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-apple"></span> Fruit - Oranges</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="orangeName"><span class="glyphicon glyphicon-user"></span> Name</label>
<input type="text" class="form-control" id="orangeName" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="orangeAddress"><span class="glyphicon glyphicon-home"></span> Address</label>
<input type="text" class="form-control" id="orangeAddress" placeholder="Enter your address">
</div>
<div class="form-group">
<label for="orangeTelephone"><span class="glyphicon glyphicon-earphone"></span> Telephone Number</label>
<input type="text" class="form-control" id="orangeTelephone" placeholder="Enter your telephone number">
</div>
<div class="form-group">
<label for="orangeAmount"><span class="glyphicon glyphicon-tasks"></span> How many?</label>
<input type="text" class="form-control" id="orangeAmount" placeholder="Enter the amount of fruits you wish to purchase">
</div>
<button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-check"></span> Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
</div>
</div>
</div>
</div>
Here's the script I'm using to execute the function after there is an onChange() on the select dropdown list:
<script>
$(document).ready(function(){
$("#fruitlist").change(function(){
$("#appleModal").modal();
});
});
</script>
As you can see, if you plug in the code and run it, no matter what selection you make on the dropdown, it'll only execute the "Apples" modal. For clarity, I want to display an "Apples" modal for an "Apples" select value, an "Orange" modal for an "Orange" select value, a "Pineapples" modal for a "Pineapples" select value and so on. I was trying to think of different ways to tackle this problem, such as an if-statement where if the apples select value was selected, display the apples modal form, or some sort of loop where for every int value assigned to each select value, display the corresponding modal form. I tried to do this, but was unsuccessful. I may be approaching this the wrong way.
I spent about 15 minutes trying to find suggested threads to make sure I wasn't asking a duplicate question before submitting this, I was unable to come across one that could help me specifically enough for my issue. I'm new to using cascading dropdown lists and could really use some assistance. Thank you very much!
I would recommend changes the value of options in select to singular and use it to append to find the corresponding modal.
$("#fruitlist").change(function(){
var value = $(this).val();
$('#' + value + "Modal").modal({show: 'true'});
});
Example : http://jsfiddle.net/9nmc6zjc/4/
For starters, you need the value of the selected option, which you can get with $(this).val() within the change closure.
Then one way to go about it is to give your modals data attributes that correspond with these values. For example, your apples modal would get a data attribute like.
<div class="modal fade" data-select="apples" id="appleModal" role="dialog">
//
</div>
Then you can open the correct modal with
$(document).ready(function(){
$("#fruitlist").change(function(){
$('.modal[data-select="' + $(this).val() + '"]').modal());
});
});
Hi i got this function in the controller that is called from the ng-view:
productApp.controller('ModalInstanceCtrl', function ($scope, $modalInstance, productFactory, prodId) {
$scope.ok = function () {
console.log($scope.model_productDescription);
$scope.$watch(['model_productBrand,model_productName,model_productDescription,model_productPrice, model_productStock'], function() {
var stock = '';
if($scope.model_productStock) {
stock = 'AVAILABLE';
}else{
stock = 'NO STOCK';
}
var productObject = {
id : prodId,
prodBrand : $scope.model_productBrand,
prodName : $scope.model_productName,
description : $scope.model_productDescription,
price : $scope.model_productPrice,
prodStock : stock
}
productFactory.updateProductById(productObject, function successCallback(data) {
// do something here in data
}, function errorCallback(data, status) {
alert(data + ' Failed with error ' + status);
});
})
};
});
This is the modal.htm body:
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="cancel()">×</button>
<h4 class="modal-title">Modify a Product</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<fieldset>
<!-- Row 1 -->
<div class="col-md-12 col-centered">
<div class="control-group">
<label class="control-label" for="prod_brand">Product Brand</label>
<input type="text" id="prod_brand" class="form-control"
ng-model="model_productBrand" required="required" value="prod.prodBrand">
</div>
<div class="control-group">
<label class="control-label" for="prod_name">Product Type</label> <input
type="text" id="prod_name" class="form-control"
ng-model="model_productName" required="required" value="prod.prodName">
</div>
<div class="control-group">
<label class="control-label" for="prod_price">Price</label>
<div class="input-group">
<span class="input-group-addon">$</span> <input type="text"
class="form-control" ng-model="model_productPrice" value="prod.price"> <span
class="input-group-addon">.00</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="prod_description">Description</label>
<textarea id="prod_description" class="form-control" ng-model="model_productDescription" cols="70" rows="3">{{prod.description}}</textarea>
</div>
<div class="control-group" style="margin-top: 10px">
<div class="input-group">
<span class="input-group-addon"> <input type="checkbox" ng-model="model_productStock">
</span>
<span class="form-control no-cursor">Stock</span>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="cancel()">Close</button>
<button type="button" class="btn btn-primary" ng-click="ok()">Edit product</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
Now, if i type in the textarea (for example), and press the ok button, it will get into this function. Now, since the textarea value has changed, shouldn't be reflected in the $scope.productDescription value? looks like it's not. I thought that whenever you make a change in the model, it would override the $scope.model_name value, should i use ng-change or any other directive for this?
Tried adding a $watch but it's not working either, any suggestion?
P.S: console.log($scope.model_productDescription); // shows the old description despite the fact i change it
Thanks.
The most probable cause of this is that your model.html is creating child scope. The changes that you do to the model property are local to child and cannot be seen in the parent due to prototypal inheritance.
What you can try is to create an object on the controller and do binding on object property.
$scope.productObject={};
Do the textarea binding to
<textarea id="prod_description" class="form-control" ng-model="productObject.productDescription" cols="70" rows="3">{{prod.description}}</textarea>
Now the changes would be reflected in productObject.productDescription property.
Also go through this wiki to understand how does scope inheritance works https://github.com/angular/angular.js/wiki/Understanding-Scopes
God... i'm going to fix it as of now by doing this:
From the view:
<button type="button" class="btn btn-primary" ng-click="ok(model_productBrand, model_productName, model_productPrice, model_productDescription, model_productStock)">Edit product</button>
From the controller passing the vars to the ok() function:
$scope.ok = function (model_productBrand, model_productName, model_productDescription, model_productPrice, model_productStock) {
Yeah... i know it looks UGLY as hell, but bleh...
Thank you, anyway i'm going to tick your answer as correct since the solution you gave me is really convenient, the only problem was that my project was kinda bad design for the solution you provided :P but is good!