I need help on this IE error which I think relates on binding issue on my HTML page.
I'm using IE 11 and Angular 2. It has no error on Chrome and Firefox but I got an error
on this with IE 11 only. I can't trace where the exact error is located on my page but I know it's on my HTML page somewhere because of this part of the error.
at View_EdataReportingComponent0.prototype.detectChangesInternal (Function code:2933:5)
Here's the screenshot from the console in IE which shows the error.
And here's my HTML page...
<div class="main-header row px-0">
<div class="upload-bar" *ngIf="(uploader.progress || 0) > 0 || isUploadFinished">
<span class="caption-left">
<i class="fa fa-upload" aria-hidden="true"></i> Uploading files <b>({{(uploader.progress || 0)}}%)</b>
</span>
<span class="caption-right file-list">
<i class="mlcons_filled_close" (click)="abortUploadingFiles($event)" aria-hidden="true"></i>
Cancel
</span>
<div class="upload-progress" [ngStyle]="{ 'width': (uploader.progress || 0) + '%' }"> </div>
</div>
<div class="container-fluid">
<div class="main-body container">
<h2 class="pull-left">eData Reporting</h2> <!-- <hermes-toast></hermes-toast> -->
</div>
<form (ngSubmit)="onSubmit(modalForm.value, $event)" [formGroup]="modalForm" name="eDataReportForm" #eDataReportForm="ngForm">
<div class="form-group col-md-6 col-lg-6 px-0-left data-form">
<div class="form-group col-md-12 col-lg-12">
<div class="col-md-4 px-0 form-label">
<label for="reportingFrequency" class="label-Names- label-inline">Reporting Frequency:</label>
</div>
<div class="col-md-8 px-0">
<div *ngIf="modalMode == modalModes.EditMode">
<select id="report-frequency" class="form-control" formControlName="reportingFrequency" (change)="setReportingFrequency()" tabindex="0">
<option value="null">Please Select</option>
<option *ngFor="let reportingFrequency of reportingFrequencies" [value]="reportingFrequency.FieldValueKey">{{reportingFrequency.DisplayName}}</option>
</select>
</div>
<div id="report-freq-viewmode" *ngIf="modalMode == modalModes.ViewMode" class="view-mode" >
{{originaleDataReport?.reportingFrequencyName && originaleDataReport.reportingFrequencyName()}}
</div>
</div>
</div>
<div class="form-group col-md-12 col-lg-12" *ngIf="(this.originaleDataReport.reportingFrequencyName && this.originaleDataReport.reportingFrequencyName())=='Yes - Other' || freqReport=='Yes - Other' ">
<div class="col-md-4 px-0 form-label">
<label for="other" class="label-Names- label-inline" [class.required-field]="modalMode != modalModes.ViewMode">Other:</label>
</div>
<div class="col-md-8 px-0">
<div *ngIf="modalMode == modalModes.EditMode">
<input id="other" maxlength="50" formControlName="other" type="text" class="form-control" (keydown)="otherValue($event)" tabindex="0">
<div *ngIf="modalForm.controls.other.invalid && modalForm.controls.other.touched" class="alert-danger">
<span class="mlcons_circled_information"><span class="path1"></span><span class="path2"></span></span> Other is required.
</div>
</div>
<div *ngIf="modalMode == modalModes.ViewMode " class="view-mode" >
{{originaleDataReport?.FrequencyOtherNote}}
</div>
</div>
</div>
<div class="form-group col-md-12 col-lg-12">
<div class="col-md-12 col-lg-12 px-0">
<div class="col-md-4 px-0 form-label">
<label for="report-type" class="label-Names- label-inline">Type of Report:</label>
</div>
<div class="col-md-8 px-0">
<div *ngIf="modalMode == modalModes.EditMode">
<select id="report-type" class="form-control" formControlName="typeOfReport" (change)="setTypeOfReport()" tabindex="0">
<option value="null">Please select</option>
<option *ngFor="let item of typeofReports" [value]="item.FieldValueKey">{{item.DisplayName}}</option>
</select>
</div>
<div *ngIf="modalMode == modalModes.ViewMode" class="view-mode" >
{{originaleDataReport?.typeofReportsName && originaleDataReport.typeofReportsName()}}
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 " *ngIf="(this.originaleDataReport.typeofReportsName && this.originaleDataReport.typeofReportsName())=='Other' || typeReport=='Other'">
<br />
<div *ngIf="modalMode == modalModes.ViewMode " class="col-md-11 px-0 px-30-right">
<label class="label-Names- label-inline">Sample Report:</label>
<div *ngFor="let item of fileAttachment" class="file-list">
<div *ngIf="item?.Sample_Report?.FileName">
<a id="link-icon" href="#" (click)="$event.preventDefault(); downloadFile($event)">
<file-icon [fileExtension]="item?.Sample_Report?.FileExtension"></file-icon>
</a>
<span class="file-info">
<label class="label-Names- label-inline">
<a id="link" href="#" (click)="$event.preventDefault(); downloadFile($event)" class="a-link">
{{ item?.Sample_Report?.FileNameDisplay }}
</a>
</label>
</span> <b>({{ item?.Sample_Report?.FileSize/1024/1024 | number:'.2' }} MB)</b>
</div>
</div>
</div>
<div *ngIf="modalMode == modalModes.EditMode " class="col-md-12 col-lg-12 px-0 px-30-right ">
<label for="file-upload" class="label-Names-upload">Sample Report</label> <label class="max-size-limit-label">(Maximum file size is 20MB.)</label>
<div *ngFor="let item of fileAttachment;" class="added" tabindex="0">
<div *ngIf="item?.Sample_Report?.FileName && !isSetforRemoval">
<a id="link-icon" href="#" (click)="$event.preventDefault(); downloadFile($event)" class="pull-left" tabindex="-1">
<file-icon [fileExtension]="item?.Sample_Report?.FileExtension"></file-icon>
</a>
<span class="file-info pull-left">
<label class="label-Names- label-inline file-limit">
<a id="link" href="#" (click)="$event.preventDefault(); downloadFile($event)" class="a-link" tabindex="-1">
{{ item?.Sample_Report?.FileNameDisplay }}
</a>
</label>
</span> <b class="pull-left">({{ item?.Sample_Report?.FileSize/1024/1024 | number:'.2' }} MB)</b>
Remove
<i class="mlcons_filled_close pull-right" aria-hidden="true" tabindex="-1" (click)="setToRemoveSampleFile($event)"></i>
</div>
<div *ngIf="isSetforRemoval">
<span class="file-limit pull-left"><b> {{ item?.Sample_Report?.FileNameDisplay }} </b></span>
Keep File
<i class="mlcons_stroke_refresh pull-right" aria-hidden="true" (click)="KeepFileAttachment($event)"></i>
<span class="pull-left"> will be removed when you save.</span>
</div>
</div>
<br />
<div id="file-upload" ng2FileDrop
[class.file-over]="hasDropZoneOver"
(fileOver)="fileOver($event)"
[uploader]="uploader"
class="well drop-zone" *ngIf="fileEmpty == null">
<div class="form-group col-md-12 col-lg-12 ">
<div class="col-md-2 col-lg-2 px-0" *ngIf="uploadStatus == uploadStates.Ready && uploader.queue.length == 0">
<div class="change-icon" *ngIf="uploadStatus == uploadStates.Ready">
<span class="mlcons_stroke_add_doc">
<span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span>
</span>
<span class="mlcons_stroke_upload_doc">
<span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span>
</span>
</div>
<span *ngIf="uploadStatus == uploadStates.Failed" class="mlcons_stroke_failed_upload">
<span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span>
</span>
<span *ngIf="uploadStatus == uploadStates.Uploading && (uploader.progress || 0) <= 99" class="mlcons_stroke_upload_doc">
<span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span>
</span>
<span *ngIf="uploadStatus == uploadStates.Uploading && (uploader.progress || 0) > 99" class="mlcons_stroke_success_upload">
<span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span>
</span>
</div>
<div class="col-md-7 col-lg-7 px-0 margin-top-10" *ngIf="uploadStatus == uploadStates.Ready && uploader.queue.length == 0">
<div class="align-left" *ngIf="uploadStatus == uploadStates.Ready">Upload a file to the project.</div>
<div *ngIf="uploadStatus == uploadStates.Ready"
class="second-message align-left">Drag and drop a<b> file </b>here or click Add File to browse.</div>
</div>
<div class="col-md-8 col-lg-8 px-0" *ngIf="(uploadStatus == uploadStates.Ready && uploader.queue.length > 0) || uploadStatus == uploadStates.Success || uploadStatus == uploadStates.Uploading || uploadStatus == uploadStates.Failed">
<div [class.failed]="uploadStatus == uploadStates.Failed"
[class.upload]="uploadStatus == uploadStates.Uploading"
class="file-info">
<file-icon [fileExtension]="fileExtension"></file-icon> <div>
{{fileInfo}}
<span *ngIf="uploadStatus == uploadStates.Success || uploadStatus == uploadStates.Uploading" class="mlcons_circled_check"><span class="path1"></span><span class="path2"></span></span>
<span *ngIf="(uploadStatus == uploadStates.Failed && !rename)" class="mlcons_circled_error"><span class="path1"></span><span class="path2"></span></span>
</div>
</div>
</div>
<div class="remove-file form-group col-md-4 col-lg-4 px-0" *ngIf="uploadStatus == uploadStates.Ready && uploader.queue.length > 0">
<div class="link-margin-right pull-right px-0" *ngIf="uploader.queue.length > 0">
<div class="remove-file">
<span class="mlcons_filled_close" (click)="$event.preventDefault(); remove()"></span> Remove
</div>
</div>
</div>
<div class="form-group col-md-4 col-lg-4 px-0 remove-file" *ngIf="uploadStatus == uploadStates.Uploading">
<div class="remove-file pull-right link-margin-right">
<span class="mlcons_filled_close"></span> Cancel
</div>
</div>
<div class="col-md-3 col-lg-3 add-file-btn" *ngIf="uploadStatus == uploadStates.Ready && uploader.queue.length == 0">
<input [hidden]="true" #file type="file" ng2FileSelect [uploader]="uploader" (change)="fileChangeEvent($event)" />
<button (click)="$event.preventDefault(); file.click()" class="btn btn-primary"><i class="mlcons_filled_add"> </i> Add File</button>
</div>
<div class="form-group col-md-12 col-lg-12 px-0">
<div class="padding-lr-15 file-progress">
<div class="progress upload-progress" *ngIf="uploadStatus == uploadStates.Uploading">
<div class="progress-bar" [class.failed]="uploadStatus == uploadStates.Failed" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
</div>
</div>
<div *ngIf="uploadStatus == uploadStates.Uploading && uploader.progress > 0"
[class.failed]="uploadStatus == uploadStates.Failed"
[class.upload]="uploadStatus == uploadStates.Uploading"
class="file-info-progress padding-lr-15">
Uploading file <span>({{uploader.progress || 0}}%)</span>
</div>
<div *ngIf="fileExceeded" class="duplicate-file-name-error">
<span class="mlcons_circled_information"><span class="path1"></span><span class="path2"></span></span> {{fileName}} exceeds the maximum size limit of 20 MB.
</div>
<div *ngIf="errorOccured && uploadStatus == uploadStates.Failed" class="duplicate-file-name-error">
<span class="mlcons_circled_information"><span class="path1"></span><span class="path2"></span></span> Upload was unsuccessful. Please try again.
</div>
</div>
<div> </div>
</div>
</div>
</div>
</div>
<div class="form-group col-md-12 col-lg-12 ">
<div class="col-md-4 px-0-left form-label">
<label for="recipients" class="label-Names- label-inline">Recipients:</label>
</div>
<br />
<div class="form-group col-md-12 col-lg-12 px-0">
<textarea class="col-md-12 col-lg-12 px-2 textstyle" [readonly]="modalMode != modalModes.EditMode" maxlength="200" id="recipients" formControlName="recipients" (keydown)="recipientValue($event)" tabindex="0">{{originaleDataReport?.Recipient}} </textarea>
</div>
<div class="form-group col-md-12 px-0 px-25-pad-bottom">
<span class="col-md-12 border-bottom-1"></span>
<hr />
</div>
<div *ngIf="modalMode == modalModes.EditMode" class="form-group col-lg-12 px-0">
<button id="save-button" name="save-button" class="btn btn-primary" [disabled]="!isButtonEnable " type="submit" >Save Changes</button>
<button id="cancel-button" class="btn btn-default" type="submit" (keydown.Tab)="cancelButtonTab($event)" (click)="cancelClick($event)" tabindex="0">Cancel</button>
</div>
<div *ngIf="modalMode == modalModes.ViewMode" class="form-group col-lg-12 px-0 footer-action">
<span class="mlcons_filled_edit"></span> <a id="edit-data" class="a-link" (keydown.Tab)="$event.preventDefault" (keydown.enter)="onEditDataClicked($event)" (click)="onEditDataClicked($event)" >Edit eData Reporting</a>
</div>
</div>
</div>
</form>
</div>
</div>
I hope somebody could help me find the cause of this error. Thanks
It's perfectly normal that you get such errors in IE. It simply doesn't support all ES6 and then again you need to add some missing libraries in IE.
Go to src/polyfills.ts and replace its content with the following:
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/client/shim';
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js'; // Run `npm install --save classlist.js`.
/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
/**
* Required to support Web Animations `#angular/animation`.
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
**/
import 'web-animations-js'; // Run `npm install --save web-animations-js`.
* Zone JS is required by Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
Run the following commands:
npm install --save classlist.js
npm install --save web-animations-js
Related
I have dropdown list with some file names.
What I want to achieve is to find file name parents so when checkbox is checked I can get their respective values and build them into path of some sort. For example you are clicking
updates > second_folder_updates > CSD_update checkbox
on that CSD_update checbox click you can see updates/second_folder_updates/CSD_update being console logged, same goes for first update on click you will get updates/first_update in the console
my current solution it works in a way? but this returns a lot of duplicates and incorrect data
var elem = document.getElementById("AQW_update");
function getParents(elem) {
var parents = [];
while(elem.parentNode && elem.parentNode.nodeName.toLowerCase() != 'body') {
elem = elem.parentNode;
parents.push(elem.textContent);
}
return parents;
}
var abc = getParents(elem)
for(var i = 0; i < abc.length; ++i)
abc[i] = abc[i].replace(/(\r\n|\n|\r)/gm,"")
console.log(abc.toString())
$(document).ready(function () {
$('.clickFaq').click(function () {
$('.displayDir').toggle('1000');
$("i", this).toggleClass("icon-up-circled icon-down-circled");
var $data = $('.SWCheckBox:checked').val();
console.log($data)
});
$(".open").hide();
$('.dirTitle').click(function () {
$(this).next().slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
<div class="container">
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
updates
<i class=" .displayDir "></i>
</div>
<div class="faqQuestionsTextPreview open" style="display: none;">
<ul>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
first_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
second_folder_updates
<i class=" .displayDir "></i>
</div>
<div class="faqQuestionsTextPreview open" style="display: none;">
<ul>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
AQW_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox" >
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
CSD_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js"
crossorigin="anonymous"></script>
<!doctype html>
</html>
<head>
<title> </title>
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="sigin-style.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid px-1 px-md-5 px-lg-1 px-xl-5 py-5 mx-auto">
<div class="card card0 border-0">
<div class="row d-flex">
<div class="col-lg-6">
<div class="card1 pb-5">
<div class="row"> </div>
<div class="row px-3 justify-content-center mt-4 mb-5 border-line"> <img
src="https://i.imgur.com/uNGdWHi.png" class="image"> </div>
</div>
</div>
<div class="col-lg-6">
<div class="card2 card border-0 px-4 py-5" name = "login">
<div class="row mb-4 px-3"> <!-- fb twitter linked login-->
<h6 class="mb-0 mr-4 mt-2">Sign in with</h6>
<div class="facebook text-center mr-3">
<div class="fa fa-facebook"></div>
</div>
<div class="twitter text-center mr-3">
<div class="fa fa-twitter"></div>
</div>
<div class="linkedin text-center mr-3">
<div class="fa fa-linkedin"></div>
</div>
</div>
<div class="row px-3 mb-4"> <!-- OR login separator line-->
<div class="line"></div> <small class="or text-center">Or</small>
<div class="line"></div>
</div>
<div class="row px-3" > <!-- email address-->
<label class="mb-1">
<h6 class="mb-0 text-sm">Email Address</h6>
</label>
<input class="mb-4" type="text" name="email" placeholder="Enter a valid email address">
</div>
<div class="row px-3"> <label class="mb-1"> <!-- passowrd-->
<h6 class="mb-0 text-sm">Password</h6>
</label>
<input type="password" name="password" placeholder="Enter password">
</div>
<div class="row px-3 mb-4"> <!-- remember me checkbox and forgot password link-->
<div class="custom-control custom-checkbox custom-control-inline"> <!--remember me-->
<input id="chk1"
type="checkbox" name="chk" class="custom-control-input">
<label for="chk1" class="custom-control-label text-sm">Remember me</label>
</div>
Forgot Password? <!--fogot password-->
</div>
<div class="row mb-3 px-3"> <!--login button-->
<button type="submit" class="btn btn-blue text-center" onclick="validate()" >Login</button>
</div>
<div class="row mb-4 px-3"><!-- register link-->
<small class="font-weight-bold">Don't have an account?
<a href="E:/WebDevStudy/html-css/bootstrap%20webpage%20example/register.html"
class="text-danger "> Register
</a>
</small>
</div>
</div>
</div>
</div>
<div class="bg-blue py-4">
<div class="row px-3"> <small class="ml-4 ml-sm-5 mb-2">Copyright © 2019. All rights
reserved.</small>
<div class="social-contact ml-4 ml-sm-auto"> <span class="fa fa-facebook mr-4 text-sm"></span> <span
class="fa fa-google-plus mr-4 text-sm"></span> <span
class="fa fa-linkedin mr-4 text-sm"></span> <span
class="fa fa-twitter mr-4 mr-sm-5 text-sm"></span> </div>
</div>
</div>
</div>
</div>
</body>
<script>
function validate()
{
var em = document.login.email.value;
var pw = document.login.password.value;
console.log(em);
var valid = false;
var usernameArray = ["ashish", "rahul"];
var passwordArray = ["12345", "54321"];
for (var i = 0; i < usernameArray.length; i++)
{
if ((un == usernameArray[i]) && (pw == passwordArray[i]))
{
valid = true;
break;
}
}
if (valid)
{
alert("Login was successful");
window.location = "www.google.ie";
return false;
}
else
{
alert("Incorrect password or username you are now blocked");
return false;
}
}
</script>
</html>
The above code is intended to be for a simple html login page where user will enter their email and password to login by clicking login button. the script for doing so is added at the end of the document following body tag. for some reason it is unable to fetch the email and password fields' values and match it with the array i have implemented. kindly point out my fault.
Can you work with this? I tested it and it works.
I changed your
var em = document.login.email.value;
var pw = document.login.password.value;
to
var em = document.getElementById('email').value;
var pw = document.getElementById('password').value;
and gave your email and password inputs an id
function validate() {
var em = document.getElementById('email').value;
var pw = document.getElementById('password').value;
console.log(em);
var valid = false;
var usernameArray = ["ashish", "rahul"];
var passwordArray = ["12345", "54321"];
for (var i = 0; i < usernameArray.length; i++) {
if ((em == usernameArray[i]) && (pw == passwordArray[i])) {
valid = true;
break;
}
}
if (valid) {
alert("Login was successful");
window.location = "www.google.ie";
return false;
} else {
alert("Incorrect password or username you are now blocked");
return false;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container-fluid px-1 px-md-5 px-lg-1 px-xl-5 py-5 mx-auto">
<div class="card card0 border-0">
<div class="row d-flex">
<div class="col-lg-6">
<div class="card1 pb-5">
<div class="row"> </div>
<div class="row px-3 justify-content-center mt-4 mb-5 border-line"> <img src="https://i.imgur.com/uNGdWHi.png" class="image"> </div>
</div>
</div>
<div class="col-lg-6">
<div class="card2 card border-0 px-4 py-5" name="login">
<div class="row mb-4 px-3">
<!-- fb twitter linked login-->
<h6 class="mb-0 mr-4 mt-2">Sign in with</h6>
<div class="facebook text-center mr-3">
<div class="fa fa-facebook"></div>
</div>
<div class="twitter text-center mr-3">
<div class="fa fa-twitter"></div>
</div>
<div class="linkedin text-center mr-3">
<div class="fa fa-linkedin"></div>
</div>
</div>
<div class="row px-3 mb-4">
<!-- OR login separator line-->
<div class="line"></div> <small class="or text-center">Or</small>
<div class="line"></div>
</div>
<form>
<div class="row px-3">
<!-- email address-->
<label class="mb-1">
<h6 class="mb-0 text-sm">Email Address</h6>
</label>
<input class="mb-4" id="email" type="text" name="email" placeholder="Enter a valid email address">
</div>
<div class="row px-3"> <label class="mb-1"> <!-- passowrd-->
<h6 class="mb-0 text-sm">Password</h6>
</label>
<input type="password" id="password" name="password" placeholder="Enter password">
</div>
<div class="row px-3 mb-4">
<!-- remember me checkbox and forgot password link-->
<div class="custom-control custom-checkbox custom-control-inline">
<!--remember me-->
<input id="chk1" type="checkbox" name="chk" class="custom-control-input">
<label for="chk1" class="custom-control-label text-sm">Remember me</label>
</div>
Forgot Password?
<!--fogot password-->
</div>
<div class="row mb-3 px-3">
<!--login button-->
<button type="submit" class="btn btn-blue text-center" onclick="validate()">Login</button>
</div>
</form>
<div class="row mb-4 px-3">
<!-- register link-->
<small class="font-weight-bold">Don't have an account?
<a href="E:/WebDevStudy/html-css/bootstrap%20webpage%20example/register.html"
class="text-danger "> Register
</a>
</small>
</div>
</div>
</div>
</div>
<div class="bg-blue py-4">
<div class="row px-3"> <small class="ml-4 ml-sm-5 mb-2">Copyright © 2019. All rights
reserved.</small>
<div class="social-contact ml-4 ml-sm-auto"> <span class="fa fa-facebook mr-4 text-sm"></span> <span class="fa fa-google-plus mr-4 text-sm"></span> <span class="fa fa-linkedin mr-4 text-sm"></span> <span class="fa fa-twitter mr-4 mr-sm-5 text-sm"></span> </div>
</div>
</div>
</div>
</div>
form tags are missing in your code; submit button and input fields should be within form tags
You need to place your inputs within a form to get values the way you want.
Look:
<!doctype html>
<html>
<head>
<title> </title>
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="sigin-style.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid px-1 px-md-5 px-lg-1 px-xl-5 py-5 mx-auto">
<div class="card card0 border-0">
<div class="row d-flex">
<div class="col-lg-6">
<div class="card1 pb-5">
<div class="row"> </div>
<div class="row px-3 justify-content-center mt-4 mb-5 border-line"> <img
src="https://i.imgur.com/uNGdWHi.png" class="image"> </div>
</div>
</div>
<div class="col-lg-6">
<div class="card2 card border-0 px-4 py-5" name = "login">
<div class="row mb-4 px-3"> <!-- fb twitter linked login-->
<h6 class="mb-0 mr-4 mt-2">Sign in with</h6>
<div class="facebook text-center mr-3">
<div class="fa fa-facebook"></div>
</div>
<div class="twitter text-center mr-3">
<div class="fa fa-twitter"></div>
</div>
<div class="linkedin text-center mr-3">
<div class="fa fa-linkedin"></div>
</div>
</div>
<div class="row px-3 mb-4"> <!-- OR login separator line-->
<div class="line"></div> <small class="or text-center">Or</small>
<div class="line"></div>
</div>
<form name="login">
<div class="row px-3" > <!-- email address-->
<label class="mb-1">
<h6 class="mb-0 text-sm">Email Address</h6>
</label>
<input class="mb-4" type="text" name="email" placeholder="Enter a valid email address">
</div>
<div class="row px-3"> <label class="mb-1"> <!-- passowrd-->
<h6 class="mb-0 text-sm">Password</h6>
</label>
<input type="password" name="password" placeholder="Enter password">
</div>
<div class="row px-3 mb-4"> <!-- remember me checkbox and forgot password link-->
<div class="custom-control custom-checkbox custom-control-inline"> <!--remember me-->
<input id="chk1"
type="checkbox" name="chk" class="custom-control-input">
<label for="chk1" class="custom-control-label text-sm">Remember me</label>
</div>
Forgot Password? <!--fogot password-->
</div>
<div class="row mb-3 px-3"> <!--login button-->
<button type="submit" class="btn btn-blue text-center" onclick="validate()" >Login</button>
</div>
</form>
<div class="row mb-4 px-3"><!-- register link-->
<small class="font-weight-bold">Don't have an account?
<a href="E:/WebDevStudy/html-css/bootstrap%20webpage%20example/register.html"
class="text-danger "> Register
</a>
</small>
</div>
</div>
</div>
</div>
<div class="bg-blue py-4">
<div class="row px-3"> <small class="ml-4 ml-sm-5 mb-2">Copyright © 2019. All rights
reserved.</small>
<div class="social-contact ml-4 ml-sm-auto"> <span class="fa fa-facebook mr-4 text-sm"></span> <span
class="fa fa-google-plus mr-4 text-sm"></span> <span
class="fa fa-linkedin mr-4 text-sm"></span> <span
class="fa fa-twitter mr-4 mr-sm-5 text-sm"></span> </div>
</div>
</div>
</div>
</div>
</body>
<script>
function validate()
{
var em = document.login.email.value;
var pw = document.login.password.value;
console.log(em);
var valid = false;
var usernameArray = ["ashish", "rahul"];
var passwordArray = ["12345", "54321"];
for (var i = 0; i < usernameArray.length; i++)
{
if ((un == usernameArray[i]) && (pw == passwordArray[i]))
{
valid = true;
break;
}
}
if (valid)
{
alert("Login was successful");
window.location = "www.google.ie";
return false;
}
else
{
alert("Incorrect password or username you are now blocked");
return false;
}
}
</script>
</html>
I'm still new in coding. I hope I can get a kind response from you.
Please bear with me :) thanks
Anws,
I tried to display the value of these radio buttons but still it won't display.
May I know on how can I get the value of .custom-control-input when I choose a radio button using javascript?
May I know where I did it wrong?
PS: I didn't add the css here yet, what just I need is to display the value of these radio buttons.
function otcContinue_onClick() {
var tac = document.getElementsByClassName('custom-control-input');
if (tac.checked) {
if ($("input[name=exampleRadios]:checked").val()) {
document.getElementById($("input[name=exampleRadios]:checked").val()).style.display = "block";
document.getElementById('pmethods').style.display = "none";
} else {
$('#errorMsg').text("Please select preferred payment option.");
$('#modalError').modal('show');
}
}
}
<div id="pmethods">
<!-- otc tab -->
<div class="card">
<div class="card-header bg-blueberry" id="headingOne">
<h6 class="mb-0">
<a class="collapsed text-apple-core-light" role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">Over-the-Counter Payments
</a>
</h6>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<span class="small">Pay in cash at the nearest payment nearest center.</span>
<div class="row">
<div class="col-md-6 col-xs-12 mt-2">
<div class="custom-control custom-radio">
<input class="custom-control-input" type="radio" name="exampleRadios" id="exampleRadios1" value="otc_sm" />
<label class="custom-control-label text-md-left" for="exampleRadios1">
<span class="pm-icon-holder">
<img src="images/otc-icons/sm.png" alt="SM" />
</span>
<span class="text-prussian-blue font-weight-bold small">SM Bills Pay</span>
</label>
<br />
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-md-4 offset-md-8">
<button type="button" class="btn btn-apricot btn-block" onclick="otcContinue_onClick()">Continue</button>
</div>
</div>
</div>
</div>
</div>
<!-- end otc tab -->
</div>
<div class="mt-3">
<!-- sm form -->
<div id="otc_sm" class="card border-secondary mb-3 bg-payment" style="display: none">
<div class="card-body text-prussian-blue">
<div class="selected-logo mb-2">
<img src="images/logos/logo_sm.png" alt="Payment Logo" />
</div>
<span class="card-text small">Pay in cash at the following stores. See complete list here.</span>
<br />
<br />
<span class="card-text small">Please write down the SM Bills Payment Reference Number that will be generated once transaction has been initiated. An email will be sent to you with the transaction details.</span>
<br />
<div class="row mt-4">
<div class="col-md-4 offset-md-8 mb-1">
<button type="submit" class="btn btn-apricot btn-block">Continue</button>
</div>
<div class="col-md-4 offset-md-8 mb-1 text-center">
<u>Go Back</u>
</div>
</div>
</div>
</div>
<!-- end sm form -->
<br />
</div>
I have change your JS so when you click on an input you get the returned value it has. In this case - otc_sm.
$("input[name=exampleRadios]").on('click', function() {
console.log($(this).val());
document.getElementById($("input[name=exampleRadios]:checked").val()).style.display = "block";
document.getElementById('pmethods').style.display = "none";
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pmethods">
<!-- otc tab -->
<div class="card">
<div class="card-header bg-blueberry" id="headingOne">
<h6 class="mb-0">
<a class="collapsed text-apple-core-light" role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">Over-the-Counter Payments
</a>
</h6>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<span class="small">Pay in cash at the nearest payment nearest center.</span>
<div class="row">
<div class="col-md-6 col-xs-12 mt-2">
<div class="custom-control custom-radio">
<input class="custom-control-input" type="radio" name="exampleRadios" id="exampleRadios1" value="otc_sm" />
<label class="custom-control-label text-md-left" for="exampleRadios1">
<span class="pm-icon-holder">
<img src="images/otc-icons/sm.png" alt="SM" />
</span>
<span class="text-prussian-blue font-weight-bold small">SM Bills Pay</span>
</label>
<br />
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-md-4 offset-md-8">
<button type="button" class="btn btn-apricot btn-block" onclick="otcContinue_onClick()">Continue</button>
</div>
</div>
</div>
</div>
</div>
<!-- end otc tab -->
</div>
<div class="mt-3">
<!-- sm form -->
<div id="otc_sm" class="card border-secondary mb-3 bg-payment" style="display: none">
<div class="card-body text-prussian-blue">
<div class="selected-logo mb-2">
<img src="images/logos/logo_sm.png" alt="Payment Logo" />
</div>
<span class="card-text small">Pay in cash at the following stores. See complete list here.</span>
<br />
<br />
<span class="card-text small">Please write down the SM Bills Payment Reference Number that will be generated once transaction has been initiated. An email will be sent to you with the transaction details.</span>
<br />
<div class="row mt-4">
<div class="col-md-4 offset-md-8 mb-1">
<button type="submit" class="btn btn-apricot btn-block">Continue</button>
</div>
<div class="col-md-4 offset-md-8 mb-1 text-center">
<u>Go Back</u>
</div>
</div>
</div>
</div>
<!-- end sm form -->
<br />
</div>
I need to get all the tags that have the class containtText back to me and I can find that tag value more than 300 characters and use continue for value . . .
But when I use this code:
<div class=" col-md-12 col-xl-12 col-sm-12 col-xl-12 col-lg-12 p-0">
<div class="row m-auto topbar col-md-12 col-xl-12 col-sm-12 col-xl-12 col-lg-12 p-3 mb-3">
<span (click)="close()">
<i class="fas fa-times"></i>
</span>
</div>
<div class=" mian-content form-inline content col-md-12 col-xl-12 col-sm-12 col-xl-12 col-lg-12 pt-2 pb-3">
<div *ngFor="let item of globalModel;let i=index"
class="form-group justify-content-start col-md-12 col-xl-12 col-sm-12 col-xl-12 col-lg-12 pt-2">
<div class="col-md-2 col-xl-2 col-lg-2 col-sm-12 col-lg-2">
<label><strong>{{item.name | translate }} :</strong></label>
</div>
<div *ngIf="!item.isDate && !item.isBoolean && !item.isImage" class="showMore col-md-9 col-xl-9 col-lg-9 col-sm-12 col-lg-9 containtText">
<label class="lbl">
<span class="spanArea">
{{item.value}}
<span class="">
<button mat-button (click)="FindLenghtString(item.value,i)" color="accent">Accent</button>
</span>
</span>
</label>
</div>
<div *ngIf="item.isBoolean" class=" col-md-9 col-xl-9 col-lg-9 col-sm-12 col-lg-9 containtText">
<label class="lbl" *ngIf="item.value && !item.isDate">
<span> <i class="fa fa-check-circle ic-green"></i></span>
</label>
<label class="lbl" *ngIf="!item.value && !item.isDate">
<span> <i class="fa fa-ban ic-red"></i> </span>
</label>
</div>
<div *ngIf="item.isImage" class=" col-md-9 col-xl-9 col-lg-9 col-sm-12 col-lg-9 containtText">
<label class="lbl" *ngIf="item.value && !item.isDate">
<span (click)="openDialog(item.value)" class="show-img-box">
<i class="fa fa-search"></i>
{{'POST.PREVIEW' | translate}}
</span>
</label>
</div>
<div *ngIf="item.isDate" class=" col-md-9 col-xl-9 col-lg-9 col-sm-12 col-lg-9 containtText">
<label class="lbl"
*ngIf="item.isDate && lang=='fa'"><span>{{item.value | date: 'dd/MM/yyyy hh:mm'}}</span></label>
<label class="lbl" *ngIf="item.isDate && lang!='fa'"><span>{{ item.value | jalali }}</span> </label>
</div>
</div>
</div>
ts :
Elipses(): void {
console.log(document.getElementsByClassName('containtText'));
}
it show me :
HTMLCollection []
and that value :
but when i need to get Value of 2 it show me the undefined
console.log(document.getElementsByClassName('containtText')['2']);
how can i get value 2 and change that ?????
Can you try to call the function Elipses() after the view is created?
I suggested the following in a comment
ngOnInit(){
setTimeout(()=>this.Elipses());
}
However, I understand that you made it work by putting it inside AfterViewInit instead.
First, I would not use jQuery or plain JavaScript when I have Angular :D
Second, ['2'] this is an index, so why '2'? :D
A simple solution in Angular:
Page:
<div>
{{text}}
</div>
<button (click)="showText()>{{buttonName}}</button>
Component:
text = string;
fullText = "Really long text";
buttonName = "Show more";
ngOnInit(){
text = fullText.substring(0, 5);
}
showText(){
if(text.length === 5){
text = fullText;
buttonName= "Show less";
} else {
text = fullText.substring(0, 5);
buttonName = "Show more";
}
}
I am new in Vue.js. I have a question about how to render a large amount of HTML in vue.js template.
So i put a HTML in my template thats like a 500 lines of plain HTML. And when i do
npm run dev
the compiling is to slow, or don't finish the compiling.
<template>
<div class="m-grid m-grid--hor m-grid--root m-page">
<mobile-menu-partial></mobile-menu-partial>
<header-partial></header-partial>
<div>HTML goes here</div> <------
<footer-partial></footer-partial>
</div>
</template>
So is there an easy way to make that? I searched everything but could not find any site for that question.
This is my HTML.
<div class="m-grid__item m-grid__item--fluid m-grid m-grid--hor-desktop m-grid--desktop m-body">
<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver m-container m-container--responsive m-container--xxl m-page__container">
<div class="m-grid__item m-grid__item--fluid m-wrapper">
<div class="section-contacts">
<!-- CONTACTS -->
<div class="m-content">
<div class="m-portlet">
<div class="m-portlet__body m-portlet__body--no-padding">
<div class="row m-row--no-padding m-row--col-separator-xl">
<div class="col-xl-6">
<div class="standard-widget">
<div class="m-widget14">
<div class="widget_header_menu margin-bottom-10">
<div class="m-widget14__header">
<h3 class="m-widget14__title">Grups</h3>
<span class="m-widget14__desc">3 groups</span>
</div>
<div class="m-widget14__header_menu">
<button type="button" class="btn btn-accent btn-md m-btn m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="modal" data-target="#createGroupModal"><i class="la la-plus"></i></button>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="form-group m-form__group">
<input class="form-control form-control-search m-input" autocomplete="off" type="text" name="" value="" placeholder="Search...">
</div>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="m-scrollable">
<div class="m-list-timeline m-list-timeline--skin-light">
<div class="m-list-timeline__items no-timeline">
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="standard-widget">
<div class="m-widget14">
<div class="widget_header_menu margin-bottom-10">
<div class="m-widget14__header">
<h3 class="m-widget14__title">Contacts</h3>
<span class="m-widget14__desc">5 contacts</span>
</div>
<div class="m-widget14__header_menu">
<button type="button" class="btn btn-accent btn-md m-btn m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="modal" data-target="#createContactModal"><i class="la la-plus"></i></button>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="form-group m-form__group">
<input class="form-control form-control-search m-input" autocomplete="off" type="text" name="" value="" placeholder="Search...">
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col">
<div class="m-scrollable">
<div class="m-list-timeline m-list-timeline--skin-light">
<div class="m-list-timeline__items no-timeline">
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user2.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Benson John</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user1.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Clark Anna</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user4.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Grohl Dave</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user3.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Porter Ella</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user5.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Wood Kelly</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Please help. Thanks.
There are many ways to define a template in Vue. For big templates I suggest to use X-Templates. Define a component referring template by id.
Vue.component('my-checkbox', {
template: '#checkbox-template',
data() {
return {
checked: false,
title: 'Check me'
}
},
methods: {
check() {
this.checked = !this.checked;
}
}
});
And define a template in your html file with appropriate id. Example:
<script type="text/x-template" id="checkbox-template">
<div class="checkbox-wrapper" #click="check">
<div :class="{ checkbox: true, checked: checked }"></div>
<div class="title"></div>
</div>
</script>
More and Source.