We Keep Coding

Page unresponsive after modal close

A have a webapp developed with Spring boot and thymeleaf a s front end.
We display all the groups available to review. Once user clicks a group we list documents in it tabular form and once user clicks on and document we provide its details. All these I am handling through ajax call and defining on click method. Once user gets to detail section they are provided with more details on that document where they can go and modify or add more through modal. Below is the modal
<!-- Modal start-->
<div id="editModal" tabindex="-1" class="modal fade" role="dialog">
<div class="modal-dialog" role="document">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h5 id="pTitle" class="modal-title">Edit</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="row" id="firstNameRow">
<div class="form-group col-sm-12">
<label for="firstName" class="col-sm-4">First Name: </label>
<input class="col-sm-8" type="text" id="firstName" maxlength="32" onkeydown="return validateInputFields(this,event)"/>
<span class="text-danger" style="display:none;float: right;" id="firstNameError">First name is required.</span>
</div>
</div>
<div class="row" id="middleNameRow">
<div class="form-group col-sm-12">
<label for="middleName" class="col-sm-4">Middle Name: </label>
<input class="col-sm-8" type="text" id="middleName" maxlength="32" onkeydown="return validateInputFields(this,event)"/>
<span class="text-danger" style="display:none;float: right;" id="middleNameError"></span>
</div>
</div>
<div class="row has-danger" id="lastNameRow">
<div class="form-group col-sm-12">
<label for="lastName" class="col-sm-4">Last Name: </label>
<input class="col-sm-8 is-invalid" type="text" id="lastName" maxlength="32" onkeydown="return validateInputFields(this,event)" />
<div class="text-danger" style="display:none;float: right;" id="lastNameError" >Last name is required.</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" th:onclick="'save();'" id="saveButton" data-backdrop="false" data-keyboard="false">Save</button>
<button type="button" class="btn btn-neutral" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<!--Modal end-->
And here is my save function:
function saveParty(){
var hasError = validateParty();
if(!hasError){
//To close the modal and get back to the previous screen
document.getElementById("saveButton").setAttribute("data-dismiss","modal");
var data = loadPartyDetails();
var objectID = $("#objectID").val();
$.ajax({
type : "POST",
contentType: "application/json",
url: "/saveDetails/" + objectID + "/",
data: JSON.stringify(data),
timeout : 100000,
success : function(result) {
$("#detailsPanel").html(result);
document.getElementById("successMsgParties").style.display="";
$('#successMsgParties').delay(5000).fadeOut('slow');
},
error : function(e) {
console.log("ERROR: ", e);
},
done : function(e) {
console.log("DONE");
}
});
}
}
The call to make modal open:
<td class="text-center"><a th:id="${iter.index + 1}" onclick="populateModal(this);" class="glyphicon glyphicon-pencil" data-toggle="modal" data-target="#editModal"></a></td>
And all this has been working fine. But sometimes all of sudden the whole page hangs up, I cant scroll I cant click on the links and have to refresh the page to continue. There are no errors on the console and have compare the response when the screen freeze and when it doesn't and there is no difference. At this point I am lost on where to look for and what could be the issue. Any directions will be appreciated.
Update: So I found that modal-open class was added but not getting remove when the screen froze, so I added below in my javascript. It does unable to page to scroll but all the links on the page are still disabled.
$("body").removeClass("modal-open");
Alright, I found one more thing, below div element stays there whenever screen freeze. How can I found out which div element is this?
<div class="modal-backdrop fade show"></div>
Any guidelines on how to close the modal appropriately?

Programmatically dismissing a Modal can be done using $('#editModal').modal('hide')
So either the modal is dismissed using the close or cancel button or from the Javascript using the method I shared.

I noticed that the below div element being added which is making screen freeze. I have to hide this through javascript.
<div class="modal-backdrop fade show"></div>

Can I trigger a file upload from an element contained within a Vue component with Cypress?

With Cypress, I'm unable to click a dropzone to upload a file. It feels like there is something preventing the click event from happening. Am I clicking the wrong element?
It works manually. (I don't know which specific element is actually recieving the click though)
I've tried { force: true } - Cypress shows a successful click here but nothing happens.
I've tried parent and child elements.
I've tried the Cypress.$ command to bypass the cy wrapper.
// spec code
it.only('has clickable area for upload', () => {
cy.visit('#bulkPolicyOnboarding')
.get('#BulkPolicyOnboardingStartup')
.find('.file-upload')
.find('input[type=file]')
.click({ force: true })
})
// component code
<template>
<section id="widget-grid" v-show="IsShown === true">
<div>
<div class="row">
<article class="col-md-12">
<div class="jarviswidget jarviswidget-color-darken" data-widget-sortable="false" data-widget-togglebutton="true" data-widget-editbutton="false" data-widget-fullscreenbutton="false" data-widget-colorbutton="true" data-widget-deletebutton="false">
<header>
<h2>Add Document</h2>
</header>
<div>
<div class="widget-body">
<div class="row">
<div class="col-md-12">
<file-upload v-model="file"></file-upload>
</div>
</div>
<br />
<div class="row">
<div class="col-md-offset-10 col-md-2">
<a class="btn btn-labeled btn-info" v-on:click="UploadFileToServer"><span class="btn-label"><i class="fa fa-plus"></i></span>Upload File</a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</section>
</template>
// nested component (the one I'm trying to click?)
<template>
<div class="file-upload">
<input type="file" style="display: none;" #change="FileChanged" />
<div
class="uploader"
#click="OpenFile"
#dragover="DragOver"
#dragenter="DragEnter"
#dragleave="DragLeave"
#drop="DropFile"
>
<span class="instructions">click to select, or drag and drop a file</span>
<label
class="selected-file"
style="font-size: 1em;"
v-html="selectedFile"
></label>
<span class="x" v-show="HasFile()" #click="RemoveFile">✖</span>
</div>
</div>
</template>
I'm expecting on click (like in manual testing), that the event would fire and the window pops up for file select -- but nothing happens on click in Cypress.
UPDATE:
Per Recep Karadas, I've tried the .uploader selector, but same result:

Modal window in template

I have a modal block which must be called after pressing the button.
But if the button inside the template generated page, modal window will not called.
<script type="x-template" id="company-template">
<button class="ui button primary" id="addBtn">Add Form</button>
<!-- it's doesn't work on the rendered page-->
</script>
If I put button outside the template, just in page. It will work.
<!-- Modal Forms-->
<div class="ui small modal" id="addCompanyForm">
<div class="header">Добавить</div>
<div class="content ui form">
<div class="field">
<label>Компания:</label>
<input type="text" name="companyname" placeholder="название компании">
</div>
<div class="field">
<label>ИНН:</label>
<input type="text" name="inn" placeholder="ИНН компании">
</div>
</div>
<div class="actions">
<button class="ui cancel button">Закрыть</button>
<button class="ui approve button">Сохранить</button>
</div>
</div>
<script>
$('#addCompanyForm')
.modal({
detachable: false,
onApprove : function() {
}
})
.modal('attach events', '#addBtn', 'show')
;
</script>
LIBS: jquery, semanticUI, vue

I understand, modal script doesn't know about template page element because modal script called before vue. I'm just put it after vue and it's work

Open Modal in semantic-ui

I just cant figure out how to open this modal. I usually use Bootstrap, but wanted to try a new layout.
Here is the button that I use to open the Modal:
<div class="ui pointing menu">
<a class="item" id="#register">Register</a>
#include('auth.modals')
</div>
Here is my Modal:
<div id="register-modal" class="ui modal">
<i class="close icon"></i>
<div class="header">
Profile Picture
</div>
<div class="image content">
<div class="ui medium image">
<img src="">
</div>
<div class="description">
</div>
</div>
<div class="actions">
<div class="ui black deny button">
Nope
</div>
<div class="ui positive right labeled icon button">
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>
</div>
And Here is my JavaScript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="semantic/dist/semantic.min.js"></script>
<script>
$(document).ready(function(){
$('#register').click(function(){
$('#register-modal').modal('show');
});
});
</script>

The whole problem is that the element to which you try to attach the click event does not exist. You have specified id="#register", instead of id="register"
correcting the attribute will do the job:
<div class="ui pointing menu">
<a class="item" id="register">Register</a>
#include('auth.modals')
</div>
The id of the modal itself seems to be correct, though :)
Such things are very easy to debug, simply type $('#register') in the console, and you'll see that jquery cannot find any matching element.

Figured it out!
I guess the button that you open the modal with has to be a class?
<a class="item register">Register</a>
Then pass in JavaScript like this:
<script>
$(document).ready(function(){
$('.register').click(function(){
$('#register-modal').modal('show');
});
});
</script>

How to create foundation popover nested with html content (template)

I wanted to load a html template inside foundation popover, but i could not found any good documentation or similar solution on internet. I just wanted to know weather this is possible to have a html template along with its controller inside popover or not.
i saw we just load content in popover using properties like below:
<button popover="{{dynamicPopover}}"
popover-title="{{dynamicPopoverTitle}}" class="button">Dynamic Popover</button>
or
<button popover="I appeared on mouse enter!" popover-trigger="mouseenter" class="button">Mouseenter</button>
i can somehow inject the html using scope but difficult to have controller for that.
I want to load a popover for my website (which is getting build using angularJS) when user mouse over on video thumbnail i want to load the preview image of the video and on mouse over on popover i want to have some buttons which perform some action when click on them.

Try This http://codepen.io/Blu-Jay/pen/wMRBLx
$(document).foundation();
.callout{
text-align:center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.0.5/foundation.min.js"></script>
<link href="https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.css" rel="stylesheet">
<div class="row">
<div class="large-8 large-centered columns">
<div class="callout">
<h3>Password Verification</h3>
<div class="row">
<div class="small-3 columns">
<label for="right-label" class="text-right">Username</label>
</div>
<div class="small-9 columns">
<input type="text" id="right-label" placeholder="Username">
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label for="right-label" class="text-right">Password</label>
</div>
<div class="small-9 columns">
<input type="password" id="right-label" placeholder="Password Please" data-toggle="example-dropdown-1">
</div>
</div>
</div>
</div>
</div>
<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true">
<strong>Password Must meet to following criteria:</strong>
<ul class="no-bullet">
<li style="color:red;">Must be between 4 and 8 characters</li>
<li style="color:red;">Must contain capital letters</li>
</ul>
</div>