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>

Bootstrap modal not working using jquery

I have created a bootstrap modal box and anchor link. When i clicked anchor link it's open modal popup. I have written jquery when link anchor link is clicked to show modal popup. Can any give me suggestion to solve this problem.
index.html
<div class="update-heading">Email Updates</div>
<div class="email_text">Please confirm which of the FREE email services you would like to receive from us, you can unsubscribe at any time:</div>
<div class="checkbox_list"><input type="checkbox" name="newsletter-daily" value="newsletter-daily" class="ind"><span> </span> <label style="width: 400px;">Compelo Energy Daily Update </label> <a class="pview" data-toggle="modal" href="#mprof" >preview</a></div>
<div class="checkbox_list"><input type="checkbox" name="newsletter-weekly" value="newsletter-weekly"><span> </span> <label style="width: 400px;">Compelo Energy Weekly Round-up </label><a class="pview" data-toggle="modal" href="#mprof" >preview</a></div>
Script.js
$(document).ready(function(){
$(".pview").click(function(event){
if($(this).parent().find(':checkbox').is(':checked')){
//alert('parent field is checked');
$('#mprof').modal('show');
console.log('if');
}else{
//alert('parent field is not hecked');
$('#mprof').modal('hide');
console.log('else');
}
});
});

It can't work, modal is an html construct and you must set it like it needs, so you need html for the modal and change the javascript becuase you are doing an on click on class pview that is not correct....Try this and look the differences....Bye...
<div class="update-heading">Email Updates</div>
<div class="email_text">Please confirm which of the FREE email services you would like to receive from us, you can unsubscribe at any time:</div>
<div class="checkbox_list">
<input type="checkbox" name="newsletter-daily" value="newsletter-daily" class="ind">
<span> </span> <label style="width: 400px;">Compelo Energy Daily Update </label>
</div>
<div class="checkbox_list">
<input type="checkbox" name="newsletter-weekly" value="newsletter-weekly">
<span> </span> <label style="width: 400px;">Compelo Energy Weekly Round-up </label>
</div>
<div class="modal bs-example-modal-md fade" id="mprof" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalMprof" >
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header"align="center">
<h4 class="modal-title" id="myModalMprof">Modal</h4>
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">× </span>
<span class="sr-only">Chiudi</span>
</button>
</div>
<b><div class="modal-body" id="contentModalMprof">
</div></b>
<div class="modal-footer">
</div>
</div>
</div>
</div>
JS:
$(".checkbox_list").click(function(event){
if($(this).parent().find(':checkbox').is(':checked')){
$('#contentModalMprof').html('preview');
$('#mprof').modal('show');
}else{
$('#mprof').modal('hide');
}
});
I think there is also another problem because you are doing find checkbox and if is checked modal open but in this way you can have two checkbox checked, maybe it's bettere use radio button or you must do a js to check only one checkbox at time...or when you open the modal reset the checkebox prop checked to false, reset checked...Ciao

Buttons inside bootstrap well don't work

So I have the following code:
https://jsfiddle.net/8rhscamn/
<div class="well">
<div class="row text-center">
<div class="col-sm-1"> </div>
<div class="col-sm-5 col-xs-12">
<button type="button" class="btn btn-success" id="butt1" onclick="alert('Hola')">Button <br />One</button>
</div>
<div class="col-sm-5 col-xs-12">
<button type="button" class="btn btn-default" id="butt2" onclick="alert('Hello')">Button <br />Two</button>
</div>
<div class="col-sm-1"> </div>
</div>
</div>
It is a simple bootstrap well with columns inside that contains buttons that should execute a simple alert command. Problem is, when resized to the xs size column (like in the fiddle I am including), the buttons don't work. The buttons don't even are recognized as such (this is, the mouse indicator does not switch to the hand indicator when the pointer is over the button).
Any clue what I am doing wrong? Any help will be appreciated, thanks!

Your last div
<div class="col-sm-1"> </div>
Do you need it? If you delete this div you can click on button, because this div cover your button so you can't click on it.

Simply remove the col-xs-12 classes. By default, the col-sm-* classes become full-width on small screen widths anyway. The floats in col-xs-* were causing the issue.
JSFiddle
If you were using the col-sm-1 elements as horizontal padding, I suggest you use the col-sm-offset-* classes, eg
<div class="row">
<div class="col-sm-5 col-sm-offset-1">
<button>...</button>
</div>
<div class="col-sm-5">
<button>...</button>
</div>
</div>
JSFiddle

<!-- Their are 2 ways. either make a function or can go through the second way -->
function f(thetext)
{
alert(thetext);
}
<button type="button" class="btn btn-success" id="butt1" onclick="f('text1')">Button <br />One</button>
<button type="button" class="btn btn-default" id="butt2" onclick="f('text2')">Button <br />Two</button>
<!--Or you can go the following way by deleting the following line in your code.-->
<div class="col-sm-1"> </div>

Protractor + angular error - Element is not clickable at point

When trying to test a visible button on a modal window using protractor and angular, I receive the error following error:
UnknownError: unknown error: Element is not clickable at point (400, 234). Other element would receive the click: <div class="modal-footer">...</div>'.
I have tried resizing the window to a larger size in the before each statement, and have tried a scrollTo the top of the page before the click as well. Any suggestions?
Code:
it('should create a new portfolio when modal form is completed', function () {
portfolio_create_btn.first().click().then();
element(by.model('portfolios.portName')).sendKeys('Test');
element(by.css('#portfolio-modal-create-button')).click();
Tabs.filter(function (elem, index) {
return elem.getTagName('tab-heading').getText();
}).then(function (filteredElements) {
expect(filteredElements.length).toEqual(expect_tabs_len_start + 1);
});
});
Most of the HTML:
<div class="container-fluid">
<h1 class='port-title port-manager-header title custom-inline'>Portfolios</h1>
<div ng-controller="ModalCtrl" class='create-new-frame'>
<!--todo move to a partial or into $templateCache -->
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Create New Portfolio</h3>
</div>
<form name='eventForm' method="POST">
<div class="modal-body">
<input id='create-new-portfolio-input' class='form-control' ng-model='portfolios.portName'
placeholder='Portfolio name' ng-required='true' maxlength="35" focus-me="true">
<span class="help-inline" ng-show="notUnique">Portfolio name already used</span>
<!--
Private/Group selection to be used in future versions
<div ng-init="radioModel = 'Right'; portfolios.groupSelection = false" class="btn-group">
<label class="btn btn-primary" ng-model="radioModel" ng-click='portfolios.groupSelection = true' btn-radio="'Left'">Group</label>
<label class="btn btn-primary" ng-model="radioModel" ng-click='portfolios.groupSelection = false' btn-radio="'Right'">Private</label>
</div>
-->
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok(portfolios.portName)"
ng-disabled="eventForm.$invalid || notUnique" id='portfolio-modal-create-button'>
Create
</button>
<button class="btn btn-warning" ng-click="cancel()" id='portfolio-modal-cancel-button'>Cancel</button>
</div>
</form>
</script>
<button class="btn btn-sm btn-primary create-new-frame-btn" ng-click="open('sm')">Create New</button>
</div>
<div class="title port-title custom-inline pull-right">
<!-- <span class="text-muted">
Organization // user
</span> -->
</div>
</div>

It turned out that the test before the one causing problems was opening the modal and leaving it open, and then when this test tried to open a new modal, couldn't find the button to do so because the modal was already open. I didn't realize that the very first line of the test was causing the error until I looked more closely. Problem solved.

Use Bootstrap Button Group to Swap Divs

I'm creating a login / register form for a woocommerce shop.
The default woo template shows two side by side forms, one for new customers to register, one for existing customers to login. IMHO this sucks.
I want to use a button group above a single form that swaps out the login / register forms based on the users selection, this way only one option is presented at a time. Hence, I need to swap content, and apply/remove active classes to the appropriate buttons.
I've done the following:
1.) Added a twitter bootstrap button-group like so:
<div class="col-sm-4 col-sm-offset-4">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" id="login_click" class="btn btn-default active" data-toggle="button">Login</button>
</div>
<div class="btn-group">
<button type="button" id="register_click" class="btn btn-default">Register</button>
</div>
</div>
</div>
2.) Wrapped the two forms in bootstrap classes and added IDs for simple targeting.
<div id="login_form" class="col-sm-4 col-sm-offset-4">
// login form
</div>
<div id="register_form" clas="col-sm-4 col-sm-offset-4">
//register form
</div>
I know there are built in jQuery plugins for accomplishing this. I've tried using the .active class without success. I also tried using data-toggle="button" and use the .toggle() method without success. I can't wrap my head around the appropriate jQuery, I either end up with both buttons toggled, or no buttons toggled.
Could someone guide me in the right direction?

You can just set some jQuery to hide/show the form divs:
$('#switch-forms .btn').on('click', function() {
$('#switch-forms .btn').removeClass('active');
$(this).addClass('active');
});
$('#login_click').on('click', function() {
$('#register_form').hide();
$('#login_form').show();
});
$('#register_click').on('click', function() {
$('#login_form').hide();
$('#register_form').show();
});
JS Fiddle: http://jsfiddle.net/ezrafree/HZbvA/
Also, you misspelled the class attribute on button#register_click. Updated markup is:
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div id="switch-forms" class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" id="login_click" class="btn btn-default active">Login</button>
</div>
<div class="btn-group">
<button type="button" id="register_click" class="btn btn-default">Register</button>
</div>
</div>
</div>
</div>
<div class="row">
<div id="login_form" class="col-sm-4 col-sm-offset-4">
<p>Login Form</p>
</div>
<div id="register_form" class="col-sm-4 col-sm-offset-4">
<p>Register Form</p>
</div>
</div>

For anyone interested I made it work. Not the "bootstrap way" but it works as desired. Someone with better jQuery chops could certainly simplify this.
<script>
$(document).ready(function() {
var login_btn = $('#login_click');
var register_btn = $('#register_click');
var register_form = $('#registration_form');
var login_form = $('#login_form');
// set defaults
register_form.addClass("hidden");
login_btn.addClass("active");
// events for register button
register_btn.on("click", function(){
login_form.addClass("hidden");
login_btn.removeClass("active");
register_btn.addClass("active");
register_form.removeClass("hidden");
});
//events for login button
login_btn.on("click", function(){
register_form.addClass("hidden");
register_btn.removeClass("active");
login_btn.addClass("active");
login_form.removeClass("hidden");
});
});
</script>

Code updated
No jQuery, you could do it with bootstrap collapse.
try this
<div class="col-sm-4 col-sm-offset-4">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" id="login_click" class="btn btn-default" data-toggle="collapse" data-target=".class1">Login</button>
</div>
<div class="btn-group">
<button type="button" id="register_click" class="btn btn-default" data-toggle="collapse" data-target=".class1">Register</button>
</div>
</div>
</div>
<div class="col-sm-4 col-sm-offset-4">
<div class="class1 collapse in">123</div>
<div class="class1 collapse">321</div>
</div>
cannot comment in feed. there right way to use toggleClass
not good
$('#switch-forms .btn').on('click', function() {
$('#switch-forms .btn').removeClass('active');
$(this).addClass('active');
});
good
$('#switch-forms .btn').on('click', function() {
$('#switch-forms .btn').toggleClass('active');
});