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
Related
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>
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:
I am creating a 'login' page, and I have it so that once the user presses the login button, a modal appears that says "Login Successful". What I want it to do, is after the modal appears for 3 seconds, it automatically opens up my profile.html page.
I'm using the Materialize Modals.
Here is the code I have so far:
<div class='row'>
<div class='input-field col s12'>
<input class='validate' type='email' name='email' id='txtEmail' />
<label for='email'>Enter your email</label>
</div>
</div>
<div class='row'>
<div class='input-field col s12'>
<input class='validate' type='password' name='password' id='txtPassword' />
<label for='password'>Enter your password</label>
</div>
</div>
<div class='row'>
<div class="col s12">
<button data-target="modal2" id="btnLogin" type='submit' class='col s12 btn startup modal-trigger'>Login</button>
</div>
<!-- Login SUCCESS Modal Structure -->
<div id="modal2" class="modal">
<div class="modal-content" id="modal2content">
<div class="row">
<div class="col s5 offset-s4">
<i class="success large material-icons">check</i>
</div>
</div>
<p class="success">Login Successful!</p>
</div>
I already have the Materialize javascript to run the modal:
$(document).ready(function(){
$('.modal').modal();
});
But I need to be able to open profile.html after the modal has run.
Any ideas or links or other ways to set it up would be appreciated.
Bootstrap modal has events. You can use the shown_bs_modal event.
$('.modal').on('shown.bs.modal', function(e) {
// Wait 3 seconds
setTimeout(function() {
window.location.href = 'url_of_your_profile_page';
}, 3000);
});
Once the modal is shown, wait 3 seconds then navigate to your profile page url.
Edit: As it seems you are using materialize modals and not bootstrap modals, here is a new version. Materialize modals have a onOpenEnd event.
$('.modal').modal({
onOpenEnd: function() {
// Wait 3 seconds
setTimeout(function() {
window.location.href = 'url_of_your_profile_page';
}, 3000);
}
});
Earlier versions of the library were apparently using ready instead of onOpenEnd. See the documentation for the latest version.
Proof of concept example: fire an alert once the modal has been shown.
$(document).ready(function() {
$('.modal').modal({
onOpenEnd: function() {
alert('modal has opened');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
I have the following HTML:
<section>
<div class="col-md-6">
<button id="quoteClick" type="button" class="btn btn-success btn-lg
quoteButton text-center btn-block">Get Quote</button>
</div>
</section>
<section>
<div class="col-md-8 boxed show text-center">
Text
</div>
</section>
I want to click the button and have my text change so I have the following code within my html file:
<script>
$(document).ready(function() {
$("#quoteClick").on("click", function(){
$(".show").html("Here is the message");
});
});
</script>
The button displays correctly however, when I click it nothing happens.
I have got a meteor app which uses the Semantic UI. I am using the semantic:ui-css package for this.
I have got a template called project where I want to show a modal.
There for I created a second template which is the modal like this:
<template name="xform">
<div id="modal" class="ui modal">
<i class="close icon"></i>
<div class="header">New Project</div>
<div class="content">
<div class="ui form" id="newProject">
<div class="one fields">
<div class="field">
<legend>Project Details</legend>
<label>Name</label>
<input id="name" name="name" type="text" placeholder="Project name">
</div>
<input type="submit" class="button small createProject" style="color:white;position:relative;float:right;padding: 0.875rem 1.75rem 0.9375rem 1.75rem;font-size: 0.8125rem;" value="Create">
</div>
</div>
</div>
<div class="actions">
<div class="ui button">
Cancel
</div>
<div class="ui button">
Okay
</div>
</div>
</div>
</template>
Then I haved added a event to a button like this to show the modal:
Template.projects.events({
'click .newProject': function(event, template){
template.$('.ui.modal').modal({
onDeny : function(){
return false;
}}).modal('show');
}
});
If I click the button for the first time the modal opens like wanted.
I can see that the modal is now not anymore inside the html of my template but at the end of my body.
I can close the modal using the close button but when I now try to open it again it does not open any more.
The modal div is still on the bottom of my body.
I have tried several ways to workaround this problem but none have worked.
Here my complete code: http://i.imgur.com/r9JNrlr
To follow up from my comment, this is the code that is working for me. It definitely seems like you have an issue with jQuery finding multiple elements. I created a new meteor project:
$ meteor create semantic
$ cd semantic
$ meteor add semantic:ui-css
$ meteor add iron:router
semantic.html
<template name="MainLayout">
<h1>Title</h1>
{{> yield}}
</template>
<template name="projects">
{{> xform}}
<button class="newProject">New Project</button>
</template>
<template name="xform">
<div id="modal" class="ui modal">
<i class="close icon"></i>
<div class="header">New Project</div>
<div class="content">
<div class="ui form" id="newProject">
<div class="one fields">
<div class="field">
<legend>Project Details</legend>
<label>Name</label>
<input id="name" name="name" type="text" placeholder="Project name">
</div>
<input type="submit" class="button small createProject" style="color:white;position:relative;float:right;padding: 0.875rem 1.75rem 0.9375rem 1.75rem;font-size: 0.8125rem;" value="Create">
</div>
</div>
</div>
<div class="actions">
<div class="ui button">
Cancel
</div>
<div class="ui button">
Okay
</div>
</div>
</div>
</template>
semantic.js
if (Meteor.isClient) {
Template.projects.events({
'click .newProject': function(event, template){
$('.ui.modal').modal({
onDeny : function(){
return false;
}}).modal('show');
}
});
Meteor.startup(function() {
Router.configure({
layoutTemplate: 'MainLayout'
})
Router.route('/',{
name: 'projects'
})
});
}
After running meteor and loading http://localhost:3000 I can open and close the modal multiple times.
Try to set the modal non-detachable in onRendered callback function of template.
Template.projects.onRendered(() => {
$('.ui.modal').modal({ detachable: false });
});
Hope it helps.