I have this plunker to show my issue.
Once user clicks on "Open Modal" a modal opens up showing input fields. If user enters on all the 3 input fields, it should close the modal. This works fine.
Now, if user forgets to mention any one of the field, it gives a alert message showing us to enter values to the fields... After this message, the modal should remain open. in my case, it closes after showing the alert.
I tried to remove the hide function from here
ng-click="$hide();adduser()"
So instead of the above, i tried this
ng-click="adduser()"
This solves the problem. i.e. it gives an alert when one of the fields are missing. But the other issue comes up which was working in the first scenario.
after user enters all the 3 values and clicks 'add' the modal doesnt close. since i have removed hide() functionality from ng-click.
Can someone tell me how to get both the cases possible and working.
You can simply add validations to your form and then you can disable the button to prevent user click on button without fill all fields, like this:
ng-disabled="form.$invalid"
So you can have something like this in your modal:
<div class="modal ng-scope center am-fade-and-scale" tabindex="-1" role="dialog" aria-hidden="true" style="z-index: 1050; display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" ng-show="title">
<button type="button" class="close" aria-label="Close" ng-click="$hide()"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" ng-bind-html="title"></h4></div>
<div class="modal-body">
<form novalidate name="form">
<div class="form-group">
Select Sedol:
<input name="select1" type="text" ng-model="selectedState" bs-options="state for state in states" placeholder="Enter state" ng-change="get_change(selectedState)" bs-typeahead required>
</div>
<div class="form-group">
RestrName:
<select name="select2" id="restrName" ng-model="selectedOption" ng-change="set_value(selectedOption)" required>
<option value="sedol">sedol</option>
<option value="cusip">cusip</option>
</select>
</div>
<div class="form-group">
RestrType:
<select name="select3" id="restrType" ng-model="selectedOption1" ng-change="set_value1(selectedOption1)" required>
<option value="NoBuy">NoBuy</option>
<option value="NoSell">NoSell</option>
<option value="NoHold">NoHold</option>
<option value="NoTrade">NoTrade</option>
<option value="NoincExp">NoincExp</option>
<option value="NoDecExp">NoDecExp</option>
<option value="NoHoldLong">NoHoldLong</option>
<option value="NoHoldShort">NoHoldShort</option>
<option value="NoCoverBuy">NoCoverBuy</option>
<option value="NoSellShort">NoSellShort</option>
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-disabled="form.$invalid" ng-click="$hide();adduser()">Add</button>
</div>
</div>
</div>
</div>
DEMO
Well, if you want to hide your modal, something has to trigger it. I'm not sure how to do it properly from your controller right now, you could use jquery to hide it from inside addUser() method.
A cleaner solution imo is to use https://angular-ui.github.io/bootstrap/#/modal
then you can programmatically close it (and more) in a nicer way.
You should be using your controller to manage the lifecycle of the modal. I have created a new plunker that shows you how to do this:
http://plnkr.co/edit/k0yDjAcUbRhUtm1vQ2Ck?p=preview
$scope.detailsModal = $modal({
scope: $scope,
title: 'Enter details',
html: true,
show: false,
templateUrl: 'modal/docs/modal.demo.tpl.html'
});
$scope.showModal = function() {
$scope.detailsModal.show();
}
$scope.adduser = function() {
if ($scope.selectedState && $scope.selectedOption && $scope.selectedOption1) {
$scope.detailsModal.hide();
}
else {
window.alert('please select all required fields');
}
}
Related
I am creating a web app (using thymeleaf, html, css, javascript) and I ran into a problem. Say I have a search bar and a button like this:
Now this represents the functionality of an app and currently it can only search records from a table by their name. But I want to add some other functions like "search by population", "search by capital" etc. I was planning on creating a drop-down list next to the search bar where these options will be included, and the user will select from that list how he wants to search for a record. I can't see a way to do that. Currently this is a search bar code:
<h4 class="left">
<form ui-jp="parsley" th:action="#{/events/showByState}" th:object="${myState}" method="get">
<div class="row m-b">
<div class="child">Search by State Name:</div>
<div class="child"><input id="filter" type="text" th:field="*{officialStateName}" class="form-control input-sm w-auto inline m-r"/></div>
<div class="child box-3">
<button class="btn">Search!</button>
</div>
</div>
</form>
</h4>
So it is unclear for me how I do this because I need to specify the link for button based on what user will choose from the list. Any help is appreciated!
You can create a <select> element with options whose value indicate what the action of the form should be. Whenever its value changes, you can update the form's action.
document.getElementById('search-by').addEventListener('change', function(e) {
let searchBy = this.value;
console.log(searchBy);
this.form.action = `/events/${searchBy}`;
});
<form ui-jp="parsley" th:action="#{/events/showByState}" th:object="${myState}" method="get">
<div class="row m-b">
<div class="child">Search by
<select id="search-by">
<option value="showByState">State Name</option>
<option value="showByPopulation">Population</option>
<option value="showByCapital">Capital</option>
</select>:</div>
<div class="child"><input id="filter" type="text" th:field="*{officialStateName}" class="form-control input-sm w-auto inline m-r" /></div>
<div class="child box-3">
<button class="btn">Search!</button>
</div>
</div>
</form>
I am designing a angularjs form in Model window, I have set validations of this like $pristine for detecting the changes of form. My problem is: If I make any change in the form field and destroy the model window form. When I open it again, then the previous changes are shown, like "$pristine" values are not set default. I search more about it on Google but no any solution.
Some part of my code is:
<div id="new-contact" class="modal" tabindex="-1" style="z-index: 9999;">
<div class="modal-dialog" style="width: 80%;">
<form data-editable-form="editable-form" name="contactForm" autocomplete="off" id='contactForm' role='data-editable-form' method="post" novalidate>
<fieldset>
<div class=" col-xs-12" ng-class="{'has-error' : contactForm.contacts_type.$invalid && !contactForm.contacts_type.$pristine }">
<label for="form-field-select-1" style="width: 250px;">
<msg key="contacttype" />
</label>
<label>
<select class="form-control" name="contacts_type" style="border-color: #d5d5d5 !important;" id="form-field-select-tag-type" required data-ng-model="contactContent.type">
<option value="" style="display: none;">{{'selectcontacttype'|localize}}</option>
<option value="BC">{{'businesscontact'|localize}}</option>
<option value="PC">{{'personalcontact'|localize}}</option>
</select>
</label>
</div>
</fieldset>
</form>
</div>
I use Show/Hide this window:
$("#new-contact").modal('show');
$("#new-contact").modal('hide');
I am also trying to use of $route. reload (); with the hide on their controller, but no any success.
Anyone please Help me how can do this..
Remember to also reset the FORM (contactform).
$('#contactForm').trigger('reset');
It's where the data is actually coming from.
Did you try with hidden.bs.modal event
<script>
$(document).ready(function() {
$('#new-contact').on('hidden.bs.modal', function () {
$(':input','#contactForm').val("");
});
});
</script>
I'm pulling the variables from a database and the values could either be Manual or Automatic. Users can also use a dropdown to change the values.
If the value is already Manual I need it to unhide a DIV or if it was Automatic and the user switches to Manual I need to unhide a DIV.
What I have currently only unhides if it was Automatic and user selects Manual.
Here is a JSFiddle: http://jsfiddle.net/DTcHh/5031/
Any help would be appreciated.
Thanks!
HTML:
<form class="form-horizontal" method="post">
<div class="form-group">
<label class="col-md-5 control-label" for="method">Method:</label>
<div class="col-md-6">
<select id="method" name="method" class="form-control">
<option value="Automatic">Automatic</option>
<option value="Manual">Manual</option>
</select>
</div>
</div>
<div id="manual" class="panel panel-default" style="display:none">
<div class="panel-heading">
<h4 class="panel-title">
Manual
</h4>
</div>
<div class="panel-body">
<div class="form-group">
<label class="col-md-5 control-label" for="activitycomplete">Activity Complete:</label>
<div class="col-md-6">
<select id="activitycomplete" name="activitycomplete" class="form-control">
<option value="False">False</option>
<option value="True">True</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-actions">
<button type="submit" class="btn btn-success">Update</button>
<button type="button" data-dismiss="modal" class="btn btn-default">Back</button>
</div>
</form>
JQuery:
$(document).ready(function () {
$('#method').change(function () {
$('#manual').toggle(500);
});
//$("#method").val('Manual');
});
There's no logic in the code which actually checks the value. Basically, this rule isn't implemented:
If the value is already Manual I need it to unhide a DIV or if it was Automatic and the user switches to Manual I need to unhide a DIV.
The code is assuming that the initial value is always "Automatic" and that there will always ever be a one-way-or-the-other switch between the two values. This assumption is incorrect.
Instead of assuming the value and just toggling, explicitly show/hide based on the inspected value:
$('#method').change(function () {
if ($(this).val() == 'Manual') {
$('#manual').show(500);
} else {
$('#manual').hide(500);
}
});
Which you can extract into a function so it can be invoked manually as well:
var toggleDiv = function () {
if ($('#method').val() == 'Manual') {
$('#manual').show(500);
} else {
$('#manual').hide(500);
}
}
$('#method').change(toggleDiv);
Then you can invoke it when the page first loads as well:
$("#method").val('Manual');
toggleDiv();
Example here.
You'll want to check the value of the dropdox and on page load if it is manual run the toggle function:
$(document).ready(function () {
$('#method').change(function () {
$('#manual').toggle(500);
});
var valueOfDropDown = $('#method').val();
if(valueOfDropDown === "Manual"){
$('#manual').toggle(500);
}
});
This will obviously show the box on once the dom is ready.
I am new to Meteor and Javascript. I have slowly figured out how to set up a modal form that will show up when I click a button, and can capture my form data and have the form close when I click submit. Where I am stuck is that whenever I click the button to add more data, the previous values are still in the modal form. I have tried most of the other answer and examples I have found, but I can't seem to figure out what I need to do to make it clear the values. Any suggestions would be appreciated. Here is what I have currently:
Modal Template
<template name="addButton">
<div class="modal fade" id="addButton">
<form>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Add Button</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="buttonOrder">Button Order</label>
<input type="text" class="form-control" name="buttonOrder">
</div>
<div class="form-group">
<label for="buttonName">Button Name</label>
<input type="text" class="form-control" name="buttonName">
</div>
<div class="form-group">
<label for="buttonDescription">Button Description</label>
<input type="text" class="form-control" name="buttonDescription">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<input type="submit" value="Submit" class="btn btn-primary"/>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</form>
</div>
</template>
Modal JS Helper
Template.addButton.events({
'submit form': function(e) {
e.preventDefault();
var button = {
buttonOrder: $(e.target).find('[name=buttonOrder]').val(),
buttonName: $(e.target).find('[name=buttonName]').val(),
buttonDescription: $(e.target).find('[name=buttonDescription]').val()
}
button._id = Buttons.insert(button);
$('#addButton').modal('hide');
$(this).removeData('#addButton.modal');
}
})
#Jeremy-s
I couldn't get your suggestion to work, although the Session key suggestion got me a solution that did for work with Bootstrap 2 but not with Bootstrap 3. I did finally get things working with Bootstrap 3, although I doubt it is the most elegant solution. I added ids to the elements and just set the value for each element to null like so:
$('#addButton').modal('hide')
$('#buttonOrder').val(null);
$('#buttonName').val(null);
$('#buttonDescription').val(null);
Now I just need to figure out why I can't get it to work with the Session key and Bootstrap 3.
One possible way to go is to use Meteor's findAll to find the inputs in the template, then iterate through them and set the value of each input to null. The findAll is a jquery selector but is limited here to the context of the template.
Template.addButton.events({
'submit form': function(e) {
e.preventDefault();
var button = {
buttonOrder: $(e.target).find('[name=buttonOrder]').val(),
buttonName: $(e.target).find('[name=buttonName]').val(),
buttonDescription: $(e.target).find('[name=buttonDescription]').val()
}
button._id = Buttons.insert(button);
_.each(
this.findAll("input"),
function(element){element.value = null}
);
$('#addButton').modal('hide');
}
})
Note also that instead of using jquery to show and hide the modal, Meteor's preferred approach would be to add and remove it completely from the DOM based on a reactive source like a Session key. I would look at Meteor's reactivity summary for additional guidance on how to do this.
I am doing a form right now, I want to automatically add another input area, same as the line above, when user press a button.
<div class="row" id="1">
<div class="form-group col-lg-2">
<select class="form-control" id="select">
<option selected>Tag Name</option>
<option value="p">p</option>
<option value="br">br</option>
</select>
</div>
<div class="form-group col-lg-2">
<select class="form-control" id="class">
<option selected>Tag Class</option>
<option value="Day">Day</option>
<option value="BlockTime">BlockTime</option>
<option value="BlockTitle">BlockTitle</option>
<option value="Session">Session</option>
<option value="Person">Person</option>
<option value="Firm">Firm</option>
</select>
</div>
<div class="form-group col-lg-7">
<textarea class="form-control" rows="3" id="textArea">Please put the content inside this html tag.</textarea>
</div>
<div class="form-group col-lg-1">
<input type="button" class="btn btn-default" onclick="addLine()" value="Add">
</div>
</div>
This is a line of input area, I want to add the same html below the input area we have now when user press the "Add" button. Maybe using JQuery?
It should looks like this one.
This is what I tried:
function addLine() {
$('#1').clone().attr('id', '').appendTo('form');
}
For now, it seems work, but how should I do if I want to add id to the new created element, say, 2, 3, 4?
Also I am not sure am I did it the right, or best way.
Solution by jQuery
var n = 8 // adjust it in some way
var inputArea = ['<div class="form-group col-lg-'+n+'">',
'<textarea class="form-control" rows="3" id="textArea-'+n+'">',// let's be nice and not use same IDs twice
'Please put the content inside this html tag.',
'</textarea></div>'].join('')
$('.row').append(inputArea);
However make sure that your back end is ready to handle that input.
EDIT:
The solution might not be fancy and using clone() is completely fine too.
To keep track of ids I would add a simple variable like n that I would increment every time a new input area is added, and then add it to id.
So, init
var n = 0;
In addLine:
n++;
Set the id (doable in addLine too)
$target.attr('id', 'inputArea-'+n);//Assuming that $target is the inputArea in question
You can copy from a blueprint structure in the DOM and append your copy after the button.
var addline = function() {
var invisibleNewLine = jQuery('#blueprint').clone();
var visibleNewLine = invisibleNewLine.removeClass('invisible');
jQuery('#target').append(visibleNewLine);
};
jQuery('#add-line').click(addline);
Remove the onClick handler on the element and bind the event using jQuery.
<button id="add-line" class="btn btn-default">Add</button>
See the fiddle here: JSFiddle