Text Box Uneditable after clicking continue - html

Im having issues with a script for a form that when a user clicks continue but not filled in a mandatory question the Additional Comments box becomes read only. the script for said comments box below:
<div class="ui-field-contain" id = 'additionalComment_div' style = 'display: block'>
<fieldset class="ui-grid-a">
<div class="ui-block-a" style="width: 50%">
<label for='additionalComment' id = 'additionalComment' style = '' class='labelbold, required'>Additional Comment</label>
</div>
<div class="ui-block-b" style="width: 50%">
<input type = 'Text' style='width: 100%;text-align: center; text-shadow: none !important;' data-mini='true' name='additionalCommentBox' id='additionalCommentBox' value='' class=' lightBG' >
</div>
</fieldset>
</div>
<!-- additionalComment End -->
I can type in the box before attempting to move onto the next page but not after.
Any help would be great

Related

Fire Event on change not firing the search

In my online interface there is a client search. At the point when I embed PAN. Search motor discover the client with that PAN and I select something similar (When I select it every client has some extraordinary id at backend, it reflecting for half second). When I Select a similar it divert me to the page where full detail of client is there. I needed to divert there. However, codes are not supporting.
HTML Codes
<div class="row">
<div class="col-md-8">
</div>
<div class="col-md-4" style="text-align: left;">
<div class="col-md-3" style="text-align: right !important;">
<label for="CLIENT_ID">CLIENTS: </label>
</div>
<div class="col-md-9">
<span class="ui-helper-hidden-accessible" role="status" aria-live="polite">1 result is available, use up and down arrow keys to navigate.</span><input class="ui-autocomplete-input ui-autocomplete-loading" id="SEARCH_CLIENT_ID" style="width: 100% !important; color: rgb(51, 51, 51);" autocomplete="off">
<input id="hdnSEARCH_CLIENT_ID" type="hidden">
</div>
</div>
</div>
I have taken a stab at fallowing Codes
IE.Document.getElementById("SEARCH_CLIENT_ID").Focus
IE.Document.getElementById("SEARCH_CLIENT_ID").Value = "ACPPL3488C"
IE.Document.getElementById("SEARCH_CLIENT_ID").FireEvent ("onchange")
IE.Document.getElementById("SEARCH_CLIENT_ID").selectedIndex = 1
In any case, its not working for me. generously control me my misstep
Create change event using Event constructor and then dispatch the change event on target element using EventTarget.dispatchEvent() method.
const event = new Event('change');
const inputEle = document.getElementById("SEARCH_CLIENT_ID");
// Listen for the change event.
inputEle.addEventListener('change', function (e) {
console.log(e.target.value); // output: ACPPL3488C
}, false);
inputEle.focus();
inputEle.value = "ACPPL3488C";
// Dispatch the change event.
inputEle.dispatchEvent(event);
<div class="row">
<div class="col-md-8">
</div>
<div class="col-md-4" style="text-align: left;">
<div class="col-md-3" style="text-align: right !important;">
<label for="CLIENT_ID">CLIENTS: </label>
</div>
<div class="col-md-9">
<span class="ui-helper-hidden-accessible" role="status" aria-live="polite">1 result is available, use up and down arrow keys to navigate.</span><input class="ui-autocomplete-input ui-autocomplete-loading" id="SEARCH_CLIENT_ID" style="width: 100% !important; color: rgb(51, 51, 51);" autocomplete="off">
<input id="hdnSEARCH_CLIENT_ID" type="hidden">
</div>
</div>
</div>
Check MDN docs for more details.

Tooltip hover on selected field in angular 2

html code
<td >
<input type="text" class="form-control" value="create.qty[i]" (mouseenter)="toggle()" (mouseleave)="toggle()" name="qty" [(ngModel)]="this.create.qty[i]" #qty="ngModel" (change)="onqtyadd($event.target.value,i)" >
<div *ngIf="show">
<div *ngIf="show" style="border-radius: 6px;z-index: 8;position: absolute; background-color:black;height: 15%;padding-left:10px;color:white; width: 5%;"><p>{{qtyhover[i]}}</p></div>
</div>
</td>
I just want to show the selected field but it show hover in every field in dynamic table
enter image description here
instead use boolean property use number like show:number
and set an index (the current) to show on mouseenter/leave and in html ask if show==index
in HTML:
(you do not have to ask twice ngIf only in wrap div)
<input type="text" class="form-control" (mouseenter)="show=i" (mouseleave)="show=0">
<div *ngIf="show==1">
<div>your tooltip 1 </div>
</div>
See example:https://stackblitz.com/edit/hello-angular-6-eu5ecu?file=src/app/app.component.html

How to generate DIV dynamically from Sql data from server in AngularJS file?

I have to add element as per the data coming from mssql server in the following area :
<div id="ApplicationForm" class="tabcontent" style="display:none;">
<div class="tab_section">
<div class="container">
<div class="row">
<div class="col-lg-12" style="font-size:16px;">Application Form</div>
<div class="col-lg-12">
<div class="" style="width:100%;border-bottom:1px solid #ddd;padding-top:5px;margin-bottom:10px;"></div>
</div>
</div>
<div ng-bind-html="applnformdata"> //from here on the data should be dynamic
</div>
</div>
</div>
</div>
</div>
</div>
(Sorry if I left any ending div tag).
On click of a button I'm calling a function in angularJs
$scope.dynamicdata=function(){
Method.getbyId("xxxxxxxxxxxx", Id).then(function (response) {
var newEle = '';
for ( i = 0; i < response.data.length;i++){
newEle += "<div class='form-group col-lg-6'>< label class='form_lable' >" + response.data[i].fieldName + "</label ><div class='m_settings_cell'><input type='checkbox' class='m_switch_check' value='1' entity='Test 1'></div></div>"; //when I try to do this it doesnot loads the <label> tag at all
}
$scope.applnformdata = newEle;
}).catch(function (data) {
console.log("access not allowed");
});
}
and I have some entries coming from mssql which have "label name" and checkbox values . How can I make this part to generate dynamically ? Like if 10 entried come then 10 data will be shown , if 5 then 5 and so on ? Please help.
Rather than appending the "div" and using default jquery checkbox, made own switch and used it.
<div class="row">
<div class="form-group col-lg-6" ng-repeat="x in apform">
<div class="col-lg-6">
<label class="form_lable">{{x.fieldName}}</label>
</div>
<div class="col-lg-6" align="right">
<label class="switch">
<input id="{{x.id}}" class="switch-input" type="checkbox" ng-model="x.fieldOption" ng-click="check(x.id)" />
<span id="data_{{x.id}}" class="switch-label" data-on="" data-off=""></span>
<span class="switch-handle"></span>
</label>
</div>
</div>
</div>

How to get data from a div in AngularJS

I use an input text to put text in div. When I write something in the input and I press the key Enter, the text from the input field is added to a div just below and normally, an array should be updated in my controller with the new value. I don't know how can I get the list of element text added to the div from a controller.
I'm trying to use the property n-change on my div with ng-model but it doesn't work.
<div class="row center" id="searchD" >
<form id="search" >
<input type="text" id="searchInput" onchange="createTag($(this).val());"/>
</form>
</div>
<div class="row center" ng-controller="Mainctrl">
<div id="tagContainer" ng-model="tagList" ng-change="tagList()">
</div>
</div>
You could do it something like below if that is what you are expecting.
Html :
<div class="row center" id="searchD" ng-controller="Mainctrl">
<form id="search" >
<input type="text" id="searchInput" ng-model="tagInput" ng-change="addTag()"/>
</form>
</div>
<div class="row center">
<div id="tagContainer" ng-repeat="tag in tagList">{{tag}}
</div>
</div>
Mainctrl:
$scope.tagList = [];
$scope.addTag = function () {
$scope.tagList.push($scope.tagInput);
$scope.tagInput = '';
}
Are you asking how to get data from the controller onto the html page? If so, you just use angular interpolation {{ someData }}
<div id="tagContainer" ng-model="tagList" ng-change="tagList()">
{{ tagList }}
</div>

How to put control id based on parent control reference/ID to avoid conflict

i am facing one issue due to one button control existed with same ID at two place in single page.
As i have created a custom field for jira which is appear on issue view screen and edit screen both.
"Edit" screen is just be a DIV and appear as display none till edit is clicked else issue view screen is appear (both on single page).
my created button existed on both the area.
How can we keep the condition like -
if parent is "DIV - edit" then keep different ID of button
ELSE
another ID of button. ? or any another way of jquery to resolve this conflict issue.
Below is stuff which shows same control at two place:
issue view screen stuff on a page:
.... .....
<li id="rowForcustomfield_11200" class="item">
<div class="wrap">
<strong title="final Dynamic Value" class="name">final Dynamic Value:</strong>
<div id="customfield_11200-val" class="value type-dynamicvalue editable-field active"
data-fieldtype="dynamicvalue">
<form id="customfield_11200-form" class="ajs-dirty-warning-exempt" action="#">
<div class="inline-edit-fields">
<div class="field-group">
<table id="customfield_11200:maintable">
<tbody>
<tr width="15%">
<tr width="15%">
<tr width="15%">
<tr width="15%">
<tr width="15%">
<tr width="15%">
<tr width="15%">
</tbody>
</table>
<input type="button" value="add" id="finaladd" />**PROBLEM CONTROL**
<input type="button" value="remove" id="finalremove" />**PROBLEM CONTROL**
</div>
</div>
<span class="overlay-icon throbber" />
<div class="save-options" tabindex="1">
</form>
</div>
</div>
</li>
......
....
..
note: i have highlighted above with tag comment as "PROBLEM CONTROL
Another stuff on same page for edit issue screen div:
.......
.............
<div id="edit-issue-dialog" class="aui-popup box-shadow aui-dialog-open popup-width-custom aui-dialog-content-ready"
style="width: 810px; margin-left: -405px; margin-top: -263.5px;">
<h2 class="aui-popup-heading">
<div class="aui-popup-content">
<div class="qf-container">
<div class="qf-unconfigurable-form">
<form action="#" name="jiraform" class="aui">
<div class="form-body" style="max-height: 419px;">
<input type="hidden" name="id" value="11100" />
<input type="hidden" name="atl_token" value="BP8Q-WXN6-SKX3-NB5M|6533762274aaa5d16f14dbbe010917f161596d8d|lin" />
<div class="content">
<div class="aui-tabs horizontal-tabs" id="horizontal">
<ul class="tabs-menu">
<div class="tabs-pane" id="tab-0">
<div class="tabs-pane active-pane" id="tab-1">
<div class="field-group aui-field-something">
<div class="field-group">
<div class="field-group">
<div class="field-group">
<label for="customfield_11200">
final Dynamic Value</label>
<table id="customfield_11200:maintable">
<input type="button" value="add" id="finaladd" /> **PROBLEM CONTROL**
<input type="button" value="remove" id="finalremove" /> **PROBLEM CONTROL**
</div>
</div>
</div>
<div class="field-group aui-field-wikiedit comment-input">
</div>
</div>
<div class="buttons-container form-footer">
</form>
</div>
</div>
</div>
</div>
.....
...
..
NOTE: above highlighted issue at PROBLEM CONTROL tag comment.
I think you can differentiate by using the id edit-issue-dialog
if($("#edit-issue-dialog").length){
//u r in edit form, and do your stuff
}else{
//in create form do your stuff
}