We Keep Coding

How ng multi select dropdown work it form dirty

I use a lib in npm Angular Multiselect Dropdown
How I can hide div alert depend on form dirty or not. My problem is when I load page and my selectedAuthors is put into ng multi select dropdown this makes form dirty.
<div class="col-8">
<div class="alert alert-warning" *ngIf="editForm.dirty">
<strong>Every thing not saved will be lost</strong>
</div>
</div>
<form #editForm='ngForm' id='editForm' (ngSubmit)="updateBook()">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Title</label>
<input type="text" name="title" [(ngModel)]="book.title" class="form-control" id="exampleInputEmail1"
aria-describedby="emailHelp" />
</div>
<div class="form-group row">
<div class="col-sm-2">Authors</div>
<div class="col-sm-6">
<div>
<ng-multiselect-dropdown [placeholder]="'Choose Author'" [settings]="dropdownAuthorSettings"
[data]="listAuthors" [(ngModel)]="selectedAuthors"
name="selectedAuthors"
(onSelect)="onItemSelectAuthor($event)"
(onSelectAll)="onSelectAllAuthor($event)" (onDeSelect)="onItemDeSelectAuthor($event)"
(onDeSelectAll)="onDeSelectAllAuthor($event)">
</ng-multiselect-dropdown>
</div>
</div>
</div>
<button class="btn btn-success" [disabled]=!editForm.dirty>Edit</button>
</form>

JS - Dynamic website form changing URL

I have couple of questions about creating dynamic website. I'm using MaterializeCSS and basic JQuery. My main point is making my website dynamically change content in divs based on clicked or with some ID and still have "browser history", so you can go back. Is it possible to do this with vanilla JQuery or I need to use Vue.js or some framework like this?
I already have something written in JQuery, but that's just .Show() and .Hide(), which won't do anything in browser history, which is important to me. Also I would like to show one div (with loading bar), but only when it will be loading, If it's possible.
Thanks for answers
<div class="login_box card darken-1">
<div class="progress"><div class="indeterminate"></div></div>
<div id="email_block" class="card-content">
<img class="login_logo" src="./images/svg/logo_text.svg">
<h1 class="login_header">Log in</h1>
<div class="mt-4 input-field">
<input id="email" class="validate" type="email">
<label for="email" data-error="wrong" data-success="right">Email</label>
<span class="helper-text" data-error="Wrong syntax" data-success=""></span>
</div>
<div class="mt-2">
Forget your password?
Next
</div>
<div class="mt-3 center-align">
Register
</div>
<div class="login_footer center-align mt-1">
<a class="waves-effect waves-light red btn wide_button">Sync w/ Google</a>
</div>
</div>
<div id="password_block" class="card-content">
<img class="login_logo" src="./images/svg/logo_text.svg">
<h1 class="login_header">Log in - Pass</h1>
<div class="mt-4 input-field">
<input id="password" class="validate" type="password">
<label for="password" data-error="wrong" data-success="right">Password</label>
</div>
<div class="mt-2">
Forget your password?
Next
</div>
</div>
<div id="register_block" class="card-content">
<img class="login_logo" src="./images/svg/logo_text.svg">
<h1 class="login_header">Register</h1>
<div class="mt-4 input-field">
<input id="email" class="validate" type="email">
<label for="email" data-error="wrong" data-success="right">Email</label>
<span class="helper-text" data-error="Wrong syntax" data-success=""></span>
</div>
<div class="mt-2">
Next
<a class="waves-effect waves-light red btn">W/ Google</a>
</div>
<div class="login_footer"></div>
</div>
<div id="register_pass_block" class="card-content">
<img class="login_logo" src="./images/svg/logo_text.svg">
<h1 class="login_header">Register</h1>
<div class="mt-4 input-field">
<input id="password" class="validate" type="password">
<label for="password" data-error="wrong" data-success="right">Password</label>
</div>
<div class="input-field">
<input id="password" class="validate" type="password">
<label for="password" data-error="wrong" data-success="right">Confirm Password</label>
</div>
<div class="mt-2">
Next
</div>
<div class="login_footer"></div>
</div>
</div>
And My JS:
$(document).ready(function(){
$('.login_box .card-content').not("#email_block").hide();
$('#next_btn').click(function() {
$('.login_box .card-content').hide();
$('#password_block').show();
});
$('#register_btn').click(function() {
$('.login_box .card-content').hide();
$('#register_block').show();
});
$('#btn_next_register').click(function() {
$('.login_box .card-content').hide();
$('#register_pass_block').show();
});
});

How to add dynamic data attribute value to a button and a div generated by repeater.js

I am using repeater.js to repeat a div with some input fields and button, but the problem is that i want to give each and every div a unique id so that i can extract data from all the fields of that particular div input elements.
this is the HTML Code:
<div class="form-group mt-repeater">
<a href="javascript:;" data-repeater-create class="btn btn-circle purple mt-repeater-add">
<i class="fa fa-edit"></i> Repeat Field
</a>
<div data-repeater-list="group-b">
<div data-repeater-item class="mt-repeater-item">
<div class="mt-repeater-cell">
<div class="row">
<div class="col-md-2">
<div class="form-group">
<div class="input-group">
<input type="text" id="dosage_form" class="form-control typeahead-findings circle-input" placeholder="Dosage Form">
<label for="dosage_form">e.g. Tablet / Syrup / Capsule etc.</label>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<div class="input-group">
<input type="text" id="brand_name" class="form-control typeahead-findings circle-input" placeholder="Brand / Generic Name">
<label for="brand_name">e.g. Dytor</label>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<input class="form-control circle-input" id="contents" type="text" placeholder="Contents" />
<span class="help-block"> e.g Paracetamol </span>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<div class="input-group">
<input type="text" id="dose" class="form-control typeahead-findings circle-input" placeholder="Dose">
<label for="dose">e.g. 20 mg / 20 ml</label>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<input class="form-control circle-input" id="dose_regimen" type="text" placeholder="Dose Regimen" />
<span class="help-block"> e.g 1-1-1-1 </span>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<div class="input-group">
<input type="text" id="therapy_duration" class="form-control typeahead-findings circle-input" placeholder="Therapy Duration">
<label for="therapy_duration">e.g. 1 Day / 1 Month etc.</label>
</div>
</div>
</div>
<div class="col-md-1 col-sm-6 col-xs-6">
<i class="fa fa-plus"></i>
</div>
<div class="col-md-1 col-sm-6 col-xs-6">
<i class="fa fa-minus"></i>
</div>
</div>
</div>
</div>
every time i click on the add repater button this div gets replicated but what i also want is that the new div generated should have a unique div id also the curresponding elemnts inside it should have a class or id starting with that id so that data extraction can be easy for that particular div
I was using this Jquery code:
$(".addData").on('click' ,function()
{
alert("hi");
});
This is the repeater i am using: https://pastebin.com/n7g7tdTH
but this code only runs for the very first div on the later generated dynamic divs it doesn't run. I also tried editing the repeater.js but no success because its all dynamic and i am not able to understand where i should edit that code to add a dynamic data-counter value for the div and the corresponding elements.
Can anyone help with this logic?

Another option, to retrieve field values would be to rename all input field id with name (example below) and use repeater.js repeaterVal() to get all the field values .
$(".mt-repeater").repeater();
$("#getVal").click(function () {
$('.mt-repeater').repeaterVal()["group-b"].map(function(fields){
//fields contain the collection of input fields per row
console.log(fields["dosage_form"]);
console.log(fields["brand_name"]);
//....
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="form-group mt-repeater">
<a href="javascript:;" data-repeater-create class="btn btn-circle purple mt-repeater-add">
<i class="fa fa-edit"></i> Repeat Field
</a>
<div data-repeater-list="group-b">
<div data-repeater-item class="mt-repeater-item">
<div class="mt-repeater-cell">
<div class="row">
<div class="col-md-2">
<div class="form-group">
<div class="input-group">
<input type="text" name="dosage_form" class="form-control typeahead-findings circle-input" placeholder="Dosage Form">
<label for="dosage_form">e.g. Tablet / Syrup / Capsule etc.</label>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<div class="input-group">
<input type="text" name="brand_name" class="form-control typeahead-findings circle-input" placeholder="Brand / Generic Name">
<label for="brand_name">e.g. Dytor</label>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<input class="form-control circle-input" nam="contents" type="text" placeholder="Contents" />
<span class="help-block"> e.g Paracetamol </span>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<div class="input-group">
<input type="text" name="dose" class="form-control typeahead-findings circle-input" placeholder="Dose">
<label for="dose">e.g. 20 mg / 20 ml</label>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<input class="form-control circle-input" name="dose_regimen" type="text" placeholder="Dose Regimen" />
<span class="help-block"> e.g 1-1-1-1 </span>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<div class="input-group">
<input type="text" name="therapy_duration" class="form-control typeahead-findings circle-input" placeholder="Therapy Duration">
<label for="therapy_duration">e.g. 1 Day / 1 Month etc.</label>
</div>
</div>
</div>
<div class="col-md-1 col-sm-6 col-xs-6">
<i class="fa fa-plus"></i>
</div>
<div class="col-md-1 col-sm-6 col-xs-6">
<i class="fa fa-minus"></i>
</div>
</div>
</div>
</div>
<button id="getVal">Get Value</button>

For the first problem..
but this code only runs for the very first div on the later generated
dynamic divs it doesn't run
You can convert your jquery events into delegated events.. These allow you to catch events on DOM elements based on a selector, so when newer DOM elements are added these are caught too.
So -> $(".addData").on('click' ,function()
As a delegated event becomes -> $(document.body).on("click",".addData" ,function()
The second problem.
but how to get the values from the input field that are present near that button
This can be achieved by traversing up the DOM tree to a parent that surrounds the elements you want,. eg. .row or maybe mt-repeater-cell, as long as it's a DOM element that contains the elements you want to find. Here you can use jquery's closest selector, that will traverse up the tree until it finds the element your after.
So -> $(this).closest('.row').find('#dose_regimen').val()
The above will traverse up the DOM tree until it finds a .row class, we then find element with id dose_regimen etc,.. #dose_regimen and then finally get it's value with .val()

Access the value of an input that is loaded after the dom

how can I access the value of an input text field, which loads propably after the dom?
I am working with leaflet at the moment and a plugin creats an input field and I don't know, how to access it.
If I try this:
$('#myTextbox1').on('input', function() {
alert($('#myTextbox1').val());
});
I don't get any result. I guess, jQuery can't handle the created input field.
My HTML looks like this:
#extends('layouts.app')
#section('head')
<link rel="stylesheet" type="text/css" href="{{ asset('css/leaflet/leaflet.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/leaflet/leaflet-search.css') }}">
#ensection
#section('content')
<div class="col-md-8 col-md-offset-2 form-container">
<div id="map-adress"></div>
<div class="panel panel-default marker-panel">
<div class="panel-heading">Create a post</div>
<div class="panel-body">
<div class="col-md-8 col-md-offset-4">
<p>Insert the adress of the marker position<br>
(You can move the marker on the map to the right position).</p>
</div>
<div class="form-group">
<label for="findbox-adress" class="col-md-4 control-label find-label">Marker Location</label>
<div class="col-md-6">
<div id="findbox-adress"></div>
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-primary user_marker_btn">
Validate
</button>
</div>
</div>
</div>
</div>
<div id="user_marker_adress" class="panel panel-default">
<div class="panel-heading">Validate the marker adress</div>
<div class="panel-body">
<form class="form-horizontal" method="POST" action="{{ route('userposts.create') }}">
{{ csrf_field() }}
<div class="form-group">
<label for="a_street" class="col-md-4 control-label">Street</label>
<div class="col-md-6">
<input id="a_street" type="text" class="form-control" name="a_street" required>
</div>
</div>
<div class="form-group">
<label for="a_street_no" class="col-md-4 control-label">Street No.</label>
<div class="col-md-6">
<input id="a_street_no" type="text" class="form-control" name="a_street_no" required>
</div>
</div>
<div class="form-group">
<label for="a_zip_code" class="col-md-4 control-label">Zip Code</label>
<div class="col-md-6">
<input id="a_zip_code" type="text" class="form-control" name="a_zip_code" required>
</div>
</div>
<div class="form-group">
<label for="a_state" class="col-md-4 control-label">State</label>
<div class="col-md-6">
<input id="a_state" type="text" class="form-control" name="a_state" required>
</div>
</div>
<div class="form-group">
<label for="a_country" class="col-md-4 control-label">Country</label>
<div class="col-md-6">
<input id="a_country" type="text" class="form-control" name="a_country" required>
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-4">
<button type="reset" class="btn btn-danger">
Clear
</button>
<button type="submit" class="btn btn-primary">
Next
</button>
</div>
</div>
</form>
</div>
</div>
#endsection
#section('scripts')
<script type="text/javascript" src="{{ asset('js/leafleat/leaflet.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/leafleat/leaflet-search.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/leafleat/marker-adress.js') }}"></script>
#endsection
The div with the ID "findbox-adress" triggers the plugin, which will create the form with the input, that I can't access.
Hope, someone got an idear of my problem...
Edit:
OK, I have found an ID in this element and with the ID it is working, but only the text, that I have typed in. The plugin gives me a dropdown selection(autocomplete like ajax) where I can choose a unordered list with some li's. But there I can't get a value? How can I get the value, if someone is clicking on the autocomplete(li's)?
My try:
$(".user_marker_btn").click(function(){
console.log($("#searchtext9").val());
});

On dynamically created elements, use event delegation to attach event listeners.
Attach the event listener to a parent element that existed on DOM-load, and then pass the element that you wish to delegate the event to:
$('body').on('input', '#myTextbox1', function() {
alert($('#myTextbox1').val());
});

First of all, your given code doesn't look right. Please refer to jQuery manual: http://api.jquery.com/on/
This might be:
$( "body" ).on( "click", "input#myTextbox1" function() {
console.log( $( this ).val() );
});
As you said, "The div with the ID "findbox-adress" triggers the plugin, which will create the form with the input"
If you can track the event when the div 'findbox-adress' get clicked or triggered, you can easily check for the form whether it has been added in the DOM or not and then check for input field by using $("input#myTextbox1").val();
Or if you cannot track the event of loading the form, you will need to have a function to check always when the form is getting loaded into the DOM. That might be using setTimeout() or any other method by framework/library. And finally stop the tracking when the form loaded.

JavaScript Pop-Up Dialog Not Being Read by Web Accessibility Screen Reader

I have a project requirement in which the web page I am building in question needs to be read by the JAWS screen reading software, but the client only has access to JAWS 11 as their latest version.
We currently have JavaScript-based pop-up dialogs for many of the forms on the web and right now a big problem is that the JAWS 11 software cannot read the below pop-up text. What is wrong with the pop-up dialog below (in HTML)?
<div class="modal fade" id="EditContentModal" tabindex="-1" role="dialog" aria-labelledby="editContentDialogTitle"
aria-hidden="true" title="Edit Content Pop-up Dialog Window" aria-describedby="editContentDialogTitle">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" value="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="editContentDialogTitle">Edit: Content ID <span id="lblContentid"></span></h4>
</div>
<div class="modal-body">
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_Contentnumber">Content Number</label>
<input type="text" class="form-control" max-length="20" id="edit_Contentnumber" />
</div>
</div>
</div>
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_Educationalinsitution">Educational Insitution</label>
<input type="text" class="form-control" max-length="100" id="edit_Educationalinsitution" />
</div>
</div>
</div>
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_TotalAmountforRecovery">Total Amount Available for Recovery</label>
<input type="text" class="money form-control" max-length="10" id="edit_TotalAmountforRecovery" />
</div>
</div>
</div>
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_source">Source</label>
<select id="edit_source" class="form-control"></select>
</div>
</div>
</div>
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_indemletterdate">Indemnification Letter Date</label>
<input type="text" class="form-control datepicker" id="edit_indemletterdate" />
</div>
</div>
</div>
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_Contentreceiveddate">Content Received Date</label>
<input type="text" class="form-control datepicker" id="edit_Contentreceiveddate" />
</div>
</div>
</div>
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_site">Site</label>
<select id="edit_site" class="form-control">
</select>
#*<input type="text" class="form-control" max-length="10" id="edit_site" />*#
</div>
</div>
</div>
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_status">Status</label>
<select id="edit_status" class="form-control">
</select>
</div>
</div>
</div>
<input type="hidden" id="edit_Contentid" />
<img id="displayBlockUI" alt="Spinner" src="~/Images/loader2.gif" width="32" height="32" style="display:none" />
</div>
<div class="modal-footer">
<button type="button" id="cancel_edit" class="btn btn-default" data-dismiss="modal" value="Close">Close</button>
<button type="button" id="save_edit" class="btn btn-primary" value="Save">Save</button>
</div>
</div>
</div>
</div>

Setting the main content to aria-hidden='true' tells the screen reader to stop reading the content there.
Try using aria-hidden='false'

How are you opening the modal? Because with a tabindex of -1 on the wrapper div, you will only be able to send the screenreader and keyboard focus to the modal via JavaScript. In that case it's best to make moving the focus part of the script which opens the modal.
On the other hand, if it's opened via a link, you can just remove that tabindex attribute altogether and put the id of the wrapper div in the link href, e.g. <a href=#EditContentModal>
Either way, remember to send focus back to where it started when the modal is closed.
Edited to clarify: the tabindex="-1" attribute on your wrapper div is preventing keyboard access. Remove it. See MDN's tabindex reference: a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation.