I'm attempting to bind a KO viewmodel to a bootstrap modal and I seem to be missing something to instruct KO to populate the input fields.
Here's what I have so far.
The modal template:
<script type="text/html" id="edit">
<div class="modal fade modal-template" tabindex="-1" role="dialog" data-backdrop="static">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input type="hidden" data-bind="value: Id">
<div class="row">
<div class="col-sm-4">
Name
</div>
<div class="col-sm-8">
<input type="text" class="form-control" data-bind="value: Name" />
</div>
</div>
<br>
<div class="row">
<div class="col-sm-4">
Description
</div>
<div class="col-sm-8">
<textarea style="resize: none;" class="form-control" data-bind="value: Description" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success">Save</button>
<button type="button" data-dismiss="modal" class="btn btn-danger">Cancel</button>
</div>
</div>
</div>
</div>
</script>
I have a table also mapped to a KO viewmodel. The display template used to render the items in the table is as such:
<script type="text/html" id="display">
<td data-bind="text: Name"></td>
<td data-bind="text: Published"></td>
<td data-bind="text: PublishedOn"></td>
<td>
<div class="btn-toolbar">
<button type="button" class="btn btn-default btn-space" data-bind="click: $root.showModal"><span class="fas fa-edit"></span></button>
</div>
</td>
</script>
The viewmodel:
this.viewModel = {
workflowCollection: ko.observableArray(),
showModal: function (model) {
//this creates an instance of a bootstrap modal, using the html content of the template instead of the #edit element itself.
$($('#edit').html()).modal('show');
}
};
In showModal I'm receiving the entity for which the modal was opened, but is there anything I need to further specify for KO to bind it properly? As of now, the fields are blank.
Since the bootstrap modal is being created from a brand new element in the DOM that hasn't yet been bound by knockout, you need to specifically bind it by passing the new element to ko.applyBindings.
showModal: function (model) {
//this creates an instance of a bootstrap modal, using the html content of the template instead of the #edit element itself.
var myModal = $($('#edit').html());
ko.applyBindings(model, myModal[0]);
myModal.modal('show');
}
Related
I am new to webDevelopment. Now, Here I have a list of buttons , but the data-target is a same model for every button click. So, My model is like -
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Missing {{suggestivalue}}
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail3">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"/> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
In this buttons are like -
<ul class="col-md-12 list-group suggestion">
<li class="list-group-item suggestion-list-group-item nopadding" ng-repeat="suggestion in suggestions | orderBy:'name'" tooltip-trigger
tooltip-placement="bottom" tooltip={{suggestion.name}} tooltip-popup-delay=200 tooltip-append-to-body="true">
<button ng-click="grabIndex(suggestion)" class="btn btn-default btn-block suggestion-button" role="button" data-toggle="modal"
data-target="#myModalHorizontal"><span class="suggestion-text">{{suggestion.name}}</span>
</button>
</li>
</ul>
Every Button is going to open a same model,But It should be respective to that of click value. E.g. If the button is like FullName , I should be able to add the two Input box fistName and lastName . Its like on click of the Button, How can I add the fields respective of that button.? Can any one help me with this ?
I think you can use ng-if
Just create all fields in modal
Like
firstname
lastname
email
password
remember me
When you click on btn , set a variable like showFields
Eg:
showFields== "login" or ""
showFields== "register"
use ng-if ='showFields== "register"' for fields that need to show only on register page
Hope it will help
I have a dynamically created table https://imgur.com/a/NDkVX on click of tick mark a modal opens https://imgur.com/a/0RI1W on click of accept the values must be inserted into database but this happens if i do it in order from top to bottom i.e from 1st person then next..if I start from random point like I click the accept button of 4th person in the starting then null values are inserted..please help me?
<!-- html code for tick button and accept -->
<td>
<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#{{pl.id}}_1"><i class="fa fa-check" aria-hidden="true" style="color:green"></i></button>
<!-- Modal -->
<div class="modal fade" id= "{{pl.id}}_1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Do You want to accept <b>{pl.employee.emp_name|title }} </b> leave?</h4>
</div>
<form action={% url 'm_manage:accept' %} method="POST">
{% csrf_token %}
<div class="modal-body">
<p><input type="checkbox" name="email" id="email" > Notify Via Email<br></p>
<p><label for="message">Message </label>
<textarea rows="3" name="message" id="message" class="form-control input-md"></textarea></p>
</div>
<div class="modal-footer" id="{{pl.id}}">
<button type="button" class="btn btn-success" id="accept_{{pl.id}}" data-dismiss="modal">Accept</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</td>
<!--my jQuery call---->
$(document).on('click','[id^="accept_"]', function(e){
e.preventDefault();
var v_id=$(this).closest('div').attr('id');
// tried msg
var msg=$('#message').val();
// tried getElementbyId
// var msg_1=document.getElementById("message").value;
var check=$('#email').is(':checked');
console.log(msg);
// console.log(msg_1);
console.log(check);
console.log(v_id);
Identifier in HTML must be unique, duplicate identifiers creates invalid HTML.
You can use class selector to target elements and DOM traversal method to target desired elements.
Additionally use data-* custom attribute to store arbitrary data which can be fetched using .data() method.
Modify you HTML as
<!-- Modal -->
<div class="modal fade" id= "{{pl.id}}_1" role="dialog" data-id="{{pl.id}}">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Do You want to accept <b>{pl.employee.emp_name|title }} </b> leave?</h4>
</div>
<form action={% url 'm_manage:accept' %} method="POST">
{% csrf_token %}
<div class="modal-body">
<p><input type="checkbox" name="email" class="email" > Notify Via Email<br></p>
<p><label for="message">Message </label>
<textarea rows="3" name="message" class="message" class="form-control input-md"></textarea></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success accept" data-dismiss="modal">Accept</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
Script
$(document).on('click', '.accept', function (e) {
e.preventDefault();
var modal = $(this).closest('.modal');
var v_id = modal.data('id');
var msg = modal.find('.message').val();
var check = modal.find('.email').is(':checked');
console.log(v_id, msg, check);
});
I made an article scraper using handlebars. For each article link, I create a modal (using Bootstrap 4), however, the first modal generated for the first article doesn't generate the element so, the notes for the first modal don't get posted since it has no reference to a POST route.
I'm not sure what the issue is. Any input on what could be happening?
Here is my code below:
{{#each article}}
<div class="article">
<h3>
{{this.title}}
<button type="button" class="btn-default float-right" data-toggle="modal" data-target="#newNote{{this._id}}">Note</button>
</h3>
</div>
{{/each}}
<!-- Modal for NOTE -->
{{#each article}}
<div class="modal fade" id="newNote{{this._id}}" tabindex="-1" role="dialog" aria-labelledby="newAppt" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h1 class="welcome">Note for {{this.title}}</h1>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{!-- FORM HERE (doesn't generate for first modal created) --}}
<form class="noteModal" action="/articles/{{this._id}}" method="POST">
<div class="form-group">
<label for="apptNotes">Notes</label>
<textarea class="form-control placeholder" rows="5" id="apptNotes" name="body" placeholder="Notes"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary cancelButton" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-secondary regButton">Submit</button>
</div>
</form>
</div>
</div>
</div>
{{/each}}
Trying to make this modal work on the checkout page here: http://designatwork.net/c3/checkout/ under the "Have a Physician Code? Enter your Physician Code" link at the top. When I put the modal code in, it shows the content that's supposed to be in the popup below the link that's supposed to open the popup. How do I get this to work properly?
<p>Don't have a Physician Code? <a data-toggle="modal" data-target="#physcode">Get one here!</a></p>
<!-- Physician Code Modal -->
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>AQ Skin Pro products are available exclusively through participating clinics and physicians offices. If you do not have an Exclusive Physician Code, click "generate a code" below.</p>
<button class="nm-simple-add-to-cart-button single_add_to_cart_button button alt" data-dismiss="modal" aria-label="Close">Generate a Code</button>
</div>
</div>
</div>
You need to wrap your modal content within the a <div class="modal fade"></div> and have the role="dialog" attribute to that wrapper as following :
The modal html goes like this:
<div class="modal fade" id="physcode" tabindex="-1" role="dialog" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Physician Code</h4>
</div>
<div class="modal-body">
<p>AQ Skin Pro products are available exclusively through participating clinics and physicians offices. If you do not have an Exclusive Physician Code, click "generate a code" below.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
And the trigger element looks like this:
<p>Don't have a Physician Code?
<!-- Button trigger modal -->
<a data-toggle="modal" data-target="#physcode">Get one here!</a>
</p>
You need to wrap the entire thing in a modal div, also there you need to set the id of it to the element that the button uses. Try this code:
<p>Don't have a Physician Code? <a data-toggle="modal" data-target="#physcode">Get one here!</a></p>
<div class="modal" id="physcode">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Physician Code</h4>
</div>
<div class="modal-body">
<p>AQ Skin Pro products are available exclusively through participating clinics and physicians offices. If you do not have an Exclusive Physician Code, click "generate a code" below.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Or pulled directly from my website, I use jQuery to open the modal automatically, but a button still works to open it.
<div class="modal" id="modalLogin">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="formLogin" method="post" action="./index.php">
<fieldset>
<div class="form-group">
<label for="inputUsername" class="col-lg-2 control-label">Username</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputUsername" name="inputUsername" data-validation="alphanumeric length required" data-validation-allowing="-_" placeholder="User">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" name="inputPassword" data-validation="strength required" data-validation-strength="3" placeholder="Password">
<span class="help-block">Forgot My Password</span>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<a type="button" href="./index.php" class="btn btn-default">Cancel</a>
<button type="submit" class="btn btn-default" form="formLogin">Login</button>
</div>
</div>
</div>
</div>
This question already has answers here:
How to reset form body in bootstrap modal box?
(9 answers)
Closed 7 years ago.
I am working on a project which uses bootstrap3 to implement a modal containing edit form. I can display the modal and load original data into each input field by setting the value attribute. The problem is when I make some change and click Close button to cancel it. Then load this edit form again and see the content is what edited last time not the original one. I do not know how to restore it on clicking the Close button. Besides, where is the user input stored in modal?
Below is my code
<div class="span4">
<div class="panel panel-primary">
<div class="panel-heading">qawsedrftgDI</div>
<div class="panel-body">jhyuh</div>
</div>
<p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editItem2">Edit</button>
<input type="button" class="btn btn-default" value="Delete" onclick="javascript:deleteCategoryNoneItem(2);" />
</p>
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" id="editItem2">
<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" id="myModalLabel">Make Your Change</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" method="POST" id="existingItem2">
<div class="form-group">
<label class="control-label col-md-2">Title</label>
<div class="col-md-8">
<input type="text" class="form-control" value="qawsedrftgDI" id="title2" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Content</label>
<div class="col-md-8">
<textarea rows="10" class="form-control" id="content2">jhyuh</textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="changeExistingItem" onclick="javascript:modifyCategoryNoneItem(2);">Save changes</button>
</div>
</div>
</div>
</div>
</div>
See the documentation for Bootstrap modals. In the event section you can use "hidden.bs.modal" event to do some stuff after the modal is closed. So it can look like:
$('#myModal').on('hidden.bs.modal', function (e) {
$(this).find('input').val('');
});
From here you can specify "placeholder" attributes on input fields, or do some javascript in the event handler.