I have a form within modal and I don't seem to be able to catch the submit event.
Let's say we have a html page defined as (for the sake of simplicity leaving out any templates defined by me)
<body>
<button class="ui button">Open modal</button>
<div class="ui small modal">
<div class="header">
Enter your email
</div>
<div class="content">
<form class="ui form">
<div class="field">
<div class="ui left icon input">
<i class="at icon"></i>
<input type="email" name="email" placeholder="Email">
</div>
</div>
<div class="ui error message">
</div>
</form>
</div>
<div class="actions">
<div class="ui negative button">
Cancel
</div>
<div class="ui positive primary loadable button">
Reset password
</div>
</div>
</div>
</body>
and registred template events
Template.body.events({
'click button': function () {
$('.modal').modal('show');
},
'submit form': function () {
alert('called');
}
});
When I submit the form it doesn't get cought by the handler. Why and what's the best approach?
I got something similar working by defining the inner content of modal as template, but it makes things much harder. Is there any other way?
EDIT: Here's meteorpad that demostrates the issue
The reason behind this behavior is that modal is detached from the DOM. This behavior can be overriden by setting detachable: false
Here's working meteorpad
Credits
Related
I have a button that is taking text entry in an input box and appending to a URL and redirecting.
The entire system is working, however the problem I am facing is when I enter the text and click the button nothing happens. Every time I add text, the button does nothing.
When I dont enter any information, the button takes me to the url that should have the input appended to (wihtout the appended information)
<div class="pen-title">
<div class="container">
<div class="card"></div>
<div class="card">
<form>
<div class="input-container">
<input type="#{type}" id="txt" required="required"/>
<label for="#{label}">Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button id="btn"><span>Go</span></button>
</div>
</form>
</div>
</div>
</div>
the JS:
<script>
var nickname = document.getElementById("txt");
function redirect () {
window.location.href = "https://theurl.com/details?info=" + nickname.value;
};
document.getElementById("btn").addEventListener('click', redirect);
</script>
If I use the JS with the following button settings:
(THE FOLLOWING CODE WORKS AND IS ONLY A DEMO TO SHOW THAT THE FUNCTION IS ACTUALLY WORKING FULLY)
The code with the bug is the code above this line.
<div class ="input"> <input type="text" id="txt" />
<label for="txt"> Enter Reg </label> </div>
<div class="buttons">
<button class="pulse" id="btn">Pulse</button>
</div>
<script>
var nickname = document.getElementById("txt");
function redirect () {
window.location.href = "https://carservicesinreading.co.uk/check-mot-history/details?car-reg=" + nickname.value;
};
document.getElementById("btn").addEventListener('click', redirect);
</script>
it works first time. However the template of this set up was different css for the input box and different CSS for the button and I just cannot get it in the layout I would like.
Thank you for any help!
the only thing i can see as you haven't provided much info. on the button i added type submit.see if i helps as i can see it redirects and says cannot find mot details.do you have real reg no for testing?
update:removed form tags.
var nickname = document.getElementById("txt");
function redirect() {
window.location.href = "https://theurl.com/details?info=" + nickname.value;
};
document.getElementById("btn").addEventListener('click', redirect);
<div class="pen-title">
<div class="container">
<div class="card"></div>
<div class="card">
<div class="input-container">
<input type="#{type}" id="txt" required="required" />
<label for="#{label}">Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button id="btn"><span>Go</span></button>
</div>
</div>
</div>
</div>
I would like to place Have an account?, Login button, and Link A Link B directly underneath something something something something, Enter Zip Code input field and Enter Zip Code button.
The way I've set up my Bootstrap (version 3.3.7) and HTML, I'd think that it would've appeared underneath but it's actually displaying the complete opposite of what I expect. Instead, it's all the way on the left side as per the picture below.
Why's is carrying out this behavior? If more information is needed please let me know.
picture of what I'm describing
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="col-7">
<form class="pull-right col-12 zipSection">
<h6 class="pull-right">something something something something</h6>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Zip Code">
</div>
<button type="submit" class="btn btn-default center-block enterZipCodeButton">Enter Zip Code</button>
</form>
<div class="col-12">
<p class="col-12">Have an account?</p>
<button type="submit" class="loginButton" onclick="document.location = '/'">Login</button>
Link A
Link B
</div>
</div>
</div>
Your form has a class called pull-right (which has been renamed to float-right in Bootstrap 4). What that does is forces the div to the far right. Since this is bootstrap, everything else adapts, which means the div which theoretically should be under, gets forced up to the top row, and to the left (since left-alignment is the default). A solution to that is to use the class of row from the Bootstrap grid system. Every row you want, you make a new div with a class of row. This way, they will now be under each other.
However, the Have an account? would still be on the left. To fix that, give it a class of pull-right.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-7">
<form class="pull-right col-12 zipSection">
<h6 class="pull-right">something something something something</h6>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Zip Code">
</div>
<button type="submit" class="btn btn-default center-block enterZipCodeButton">Enter Zip Code</button>
</form>
</div>
</div>
<div class="row">
<div class="col-12 pull-right">
<p class="col-12">Have an account?</p>
<button type="submit" class="loginButton" onclick="document.location = '/'">Login</button>
Link A
Link B
</div>
</div>
</div>
I recently ran into some problems when trying to use the Materialize modal and dropdown features with Blaze, specifically when there are multiple instances of each.
I have this template called cadcall:
<template name="cadcall">
<tr>
<td class="truncate">{{id}}</td>
<td>FRI</td>
<td>{{time}}</td>
<td>{{type}}</td>
<td>{{location}}</td>
<td>{{notes}}</td>
<td>
<i class="material-icons call-dropdown-button" data-activates="cadcallactions">more_vert</i>
</td>
</tr>
<div id="call-details-modal" class="modal">
<div class="modal-content">
<h4>Call Details</h4>
<div class="row">
<form class="new-call col s12">
<div class="row">
<div class="input-field col s6">
<input id="call-id" type="text" class="validate" disabled>
<label for="call-id">ID</label>
</div>
<div class="input-field col s6">
<input id="call-time" type="text" class="validate" disabled>
<label for="call-time">Time</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="call-location" type="text" autocomplete="off">
<label for="call-location">Location</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<textarea id="call-notes" class="materialize-textarea" length="100000" autocomplete="off"></textarea>
<label for="call-notes">Notes</label>
</div>
</div>
<div class="modal-footer">
<button type="submit" href="#!" class="modal-action modal-close waves-effect waves-grey btn-flat center">Submit</button>
</div>
</form>
</div>
</div>
</div>
<ul id='cadcallactions' class='dropdown-content'>
<li><a class="callupdate" href=""><i class="material-icons">update</i>Update</a></li>
<li><a class="callresolve" href=""><i class="material-icons">check</i>Resolve</a></li>
</ul>
</template>
Here is the cadcall events:
Template.cadcall.events({
'click .callresolve'(e) {
Calls.remove(this._id);
},
});
Here is the cadcall onRendered:
Template.cadcall.onRendered(function() {
$(document).ready(function () {
$('.call-details').leanModal();
});
$('.call-dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrainWidth: false, // Does not change width of dropdown to that of the activator
hover: false, // Activate on hover
gutter: 0, // Spacing from edge
belowOrigin: true, // Displays dropdown below the button
alignment: 'right', // Displays dropdown with edge aligned to the left of button
stopPropagation: false // Stops event propagation
});
});
Essentially, for each call there is in the Mongo database, I iterate each call entry. However, if there are multiple calls, the modal doesn't function correctly. If I try to close the modal (by clicking the class callupdate after opening it, the gray area behind it stays.
In addition to the modal not working correctly, the dropdown menu also acts funky, specifically when I try to delete a field (by clicking the class callresolve). Whenever I try to delete a call entry it works, but thereafter the dropdown menus on the other call entries stop working altogether. Furthermore, for some reason when I add an entry then delete it, an error pops up in the Chrome console:
blaze.js:650 Uncaught Error: Must be attached
at Blaze._DOMRange.DOMRange.containsElement (blaze.js:650)
at Blaze._DOMRange.<anonymous> (blaze.js:2612)
at HTMLAnchorElement.<anonymous> (blaze.js:863)
at HTMLTableSectionElement.dispatch (jquery.js:4723)
at HTMLTableSectionElement.elemData.handle (jquery.js:4391)
Presumably, since these problems only occur when I have multiple call entries, I think the HTML may be conflicting with each iteration of the call entry. Is there a way to remedy this issue?
<button class="ui button" #click="beforeAdd">添加</button>
<div class="ui modal">
<div class="header">Header</div>
<div class="content">
<div class="description">
<p>Description</p>
</div>
</div>
<div class="actions">
<div class="ui negative right labeled icon button">
取消
<i class="remove icon"></i>
</div>
<div class="ui positive right labeled icon button">
提交
<i class="checkmark icon"></i>
</div>
</div>
</div>
view methods:
beforeAdd(){
const modal = $(this.$el).find('.ui.modal')
console.log(modal)
modal.modal('show')
}
first click,modal show, second click nothing happened, I found semantic change modal to root for div class='ui dimmer modals page transition hidden',how can solve it
Semantic is removing it from your $(this.$el) so next time it does not find it.
It works when you use with global $ and an id:
show(){
const showModal = $('#mymodal')
console.log(showModal)
showModal.modal('show')
}
See Updated fiddle.
If you also want to use Vue variables in your modal, it is necessary to clone the modal and only show the cloned version.
With this approach Vue will still be able to keep track of the original modal, because Semantic doesn't remove it from the DOM.
beforeAdd(){
const modal = $(this.$el).find('.ui.modal').clone()
console.log(modal)
modal.modal('show')
}
I suppose it's wrong to nest a col-md-x immediately inside a col-md-x in Bootstrap 3. Am I right?
I have following at the moment:
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
<input class="col-md-4" value="something" />
<div class="col-md-8">Something here</div>
</div>
In this case, the input border starts at the very beginning of the row. It doesn't have any padding on the outside of it.
I would like the input to show 15px away from the row border. The way I know of how to achieve this is to put this input inside a col-md-x. However, could this cause any issues?
From the bootstrap docs:
To nest your content with the default grid, add a new .row and set of
.col-sm-* columns within an existing .col-sm-* column.
So as long as you are nesting within child rows, you are gonna be fine. Another option would be custom css rules and ids for your nested structure to achieve the desired padding or margin.
UPDATE
To refer to your comment, since this is about validation states: let me add that bootstrap already offers great validation-highlighting. See this quick sample. The bootstrap docs on forms offer great documentation on this topic. As for the padding: I like to put most of my "not-inline" forms into a .well, which shows the user, where action is required and allows a consistent styling of forms...
var resetSec = function(){
$('#sth-form-section').removeClass('has-error');
$('#sth-form-section').removeClass('has-warning');
$('#sth-form-section').removeClass('has-success');
$('#helpBlock-sth').addClass('sr-only');
$('#helpBlock-sth').html('');
};
$('#invalid').click(function(){
resetSec();
$('#sth-form-section').addClass('has-error');
$('#helpBlock-sth').removeClass('sr-only');
$('#helpBlock-sth').html('Oh snap! Better think about this one more time!');
});
$('#valid').click(function(){
resetSec();
$('#sth-form-section').addClass('has-success');
$('#helpBlock-sth').removeClass('sr-only');
$('#helpBlock-sth').html('Well done! I think your input was the best so far!');
});
$('#reset').click(function(){
resetSec();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well">
<form class="form-horizontal" role="form">
<div id="sth-form-section" class="form-group">
<label for="something" class="col-lg-2 control-label">Something:</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="something" placeholder="Something here">
<span id="helpBlock-sth" class="help-block sr-only"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
<button class="btn btn-primary" id="reset">Reset</button>
<button class="btn btn-danger" id="invalid">Invalid</button>
<button class="btn btn-success" id="valid">Valid</button>
Ah, just write the markup a little differently, like so:
<div class="row">
<div class="col-md-4">
<input class="form-control" value="something" />
</div>
<div class="col-md-8">
<p class="form-control-static">Something here</p>
</div>
</div>
The problem was putting the col-md-4 class on the input.