I have the following jsbin. Editing a user allows to change several things:
But clicking on the active checkbox has no effect. The name is properly updated, though.
This is the relevant part of the template:
<div class="control-group">
<label class="control-label" for="name-id">Name</label>
<div class="controls">
{{view Ember.TextField valueBinding="name" id="name-id" required="true"}}
<i class="help-block">User's name</i>
</div>
</div>
<div class="control-group">
<label class="control-label" for="active-id">Active</label>
<div class="controls">
{{view Ember.Checkbox valueBinding="active"}}
<i class="help-block">Is this user active?</i>
</div>
</div>
What is the problem with the checkbox? Why is it not being updated in the backend (FIXTURES in this case)?
it should be checkedBinding
{{view Ember.Checkbox checkedBinding="active"}}
Related
Stuck on this for quite some time now, I am trying to create a form wizard using twitter bootstrap wizard (http://vinceg.github.io/twitter-bootstrap-wizard/) which is shown on button click inside a modal window. This doesn't seem to be working for me.
The wizard is created dynamically using an ajax call, which returns the html for the wizard. I also tried using jQuery Steps plugin which was also not working properly inside the modal windows. I tried 2 approaches:
Appending the wizard html inside a jquery-ui dialog. - Here the jquery steps plugin method .steps() wasn't able to create the wizard, rather flat html was rendered instead of a wizard.
Appending the wizard html inside a bootstrap wizard - Tabs are created as links, but clicking on either of the tabs navigates to localhost:port//#tab1
Here are my code snippets:
Bootstrap Wizard
<div id="MainContainer">
<form id="MainForm" class="form-horizontal">
<div class='sectionA' id='rootwizard'>
<ul class="nav nav-tabs">
<li class="active">Tab1</li>
<li>Tab2</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="Tab1">
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls">
<input type="text" id="emailfield" name="emailfield" class="required email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<input type="text" id="namefield" name="namefield" class="required">
</div>
</div>
</div>
<div class="tab-pane" id="Tab2">
<div class="control-group">
<label class="control-label" for="url">URL</label>
<div class="controls">
<input type="text" id="urlfield" name="urlfield" class="required url">
</div>
</div>
</div>
<ul class="pager wizard">
<li class="previous">Previous</li>
<li class="next">Next</li>
</ul>
</div>
</div>
</form>
</div>
Modal Window
<div id="MainDiv" tabindex="-1" class="modal fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit Trigger</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="DialogDiv">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Javascript
$('#MainDiv').on('shown.bs.modal', function (e) {
$.ajax({
url: '/MethodToFetchData',
type: 'POST',
data: data,
contentType: 'application/json; charset=utf-8',
success: function (data) {
var html = JSON.stringify(data);
html = html.replace(/(?:\\[rn])+/g, "");
initTriggerAdvancedEdit(html);
},
error: function (err) { alert(JSON.stringify(err)); }
});
});
function initTriggerAdvancedEdit(html) {
$('#rootwizard').bootstrapWizard({
'tabClass': 'nav nav-pills'
});
}
I'm new to ember and trying to build a very simple app as a learning exercise in 2.4. I have a list of tasks that appear on the index page. And I've attached actions to each one to delete. And have one form row on the bottom of the page with an action to saveTask.
I have one index controller.
No defined index routes.
One model for tasks at app/models/task.js
My function to saveTask is working. But I can't get the deleteTask to work. I know I'm not passing the object I want to delete correctly. The error returned is that Uncaught TypeError: undefined is not a function index.js:26
deleteTask.
Can someone explain the correct syntax to me?
app/templates/index.hbs
{{#each model as |task| }}
<div class="form-horizontal form-group row">
<div class="col-xs-4 col-md-3">
{{input type="text" value=task.taskname class="form-control"}}
</div>
<div class="col-xs-3 col-md-2">
{{input type="text" value=task.startdate class="form-control"}}
</div>
<div class="col-xs-3 col-md-2">
{{input type="text" value=task.enddate class="form-control"}}
</div>
<div class="col-xs-3 col-md-2">
{{input type="text" value=task.duration class="form-control"}}
</div>
<div class="col-xs-3 col-md-2">
{{input type="text" value=task.banding class="form-control"}}
</div>
<div class="col-xs-2 col-md-1">
<button type="button" class="btn btn-default btn-sm" aria-label="Remove task" {{action 'deleteTask' task}}>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
</div>
{{/each}}
and the controller
app/controllers/index.js
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
deleteTask(task) {
this.destroyRecord();
this.transitionTo('index');
}
}
});
You call destroyRecord in deleteTask on this not on the task, which is actually the record. I think that's all.
You should be able to see in developer tools the line in code which throws. I bet it's this.destroyRecord();.
I am implementing crud operation in my Ember project. I passed an object to the component and tried to use the same object for save, update action.
In route I created model as follows,
routes.js
model() {
return Ember.RSVP.hash({
employeeList : this.store.findAll("employee"),
employee : Ember.Object.create(),
});
}
component: employee-form.js
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-3" for="fname">First Name:</label>
<div class="col-sm-8">
{{input type="text" value=model.firstName placeholder="First Name"}}
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="lname">Last Name:</label>
<div class="col-sm-8">
{{input type="text" value=model.lastName placeholder="Last Name" }}
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="email">Email:</label>
<div class="col-sm-8">
{{input type="text" value=model.email placeholder="Email" }}
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="department">Department: </label>
<div class="col-sm-8">
{{input type="text" value=model.department placeholder="Department" }}
</div>
</div>
</form>
I am passing object to component as follows,
Template.hbs
{{employee-form model=model.employee}}
I need to clear the attributes data in object for using it for different operation. I tried to replace the model object with a new ember object and it worked. But I don't think it is a nice way to do, as it is creating new object always.
this.set("model", Ember.Object.create());
Can anyone help me with best approach to clear ember object attributes values.
Use rollbackAttributes()
RollbackAttributes -
If the model hasDirtyAttributes this function will discard any unsaved changes. If the model isNew it will be removed from the store.
model.rollbackAttributes();
This is my problem:
What I'm trying to do is when I click on a model's name, I get a modal window that shows all it's attributes, like so:
However, when I click on another one, it doesn't work, no modals show up, like so:
This is my index.hbs:
<div class="row" style="text-align:center;">
{{#each model as |event|}}
<div class="col-xs-3 col-md-3">
<div class="centerBlock">
</div>
<button type="button" class="btn btn-link" data-toggle="modal" data-target="#{{event.name}}">{{event.name}}</button>
</div>
<!-- Modal -->
<div class="modal fade" id="{{event.name}}" 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">{{event.name}}</h4>
</div>
<div class="modal-body">
<p>{{event.location}}</p>
<p>{{event.roomNumber}}</p>
<p>{{event.eventDay}}</p>
<p>{{event.eventTime}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Modal-->
{{/each}}
</div>
And this is my index.js:
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.store.findAll('event');
}
});
I suppose that I'm doing my {{#each}} wrong, but I've spent about an hour on it and I can't figure it out.
Sorry this is such a dumb problem, and thanks for any direction!
The problem is your event name. You have spaces in Yoga Drop-In and later you use that as modal id attribute. You can't target model by id with spaces. You have to use another property as modal target. For example you could take model name and remove all spaces from that, or replace with dashes. It will work after you do so.
I am currently building a site with a contact function. I build the site with Django and Bootstrap. For contacting the people behind the site the user clicks on a element in the top navigation bar called Contact. This elements open a Bootstrap modal. At the moment the modal works as expected and looks like that:
The code is:
<div class="modal fade" id="kontakt" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form action="" class="form-horizontal">
<div class="modal-header">
<h4>Contact us</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="kontakt-name" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="kontakt-name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="kontakt-email" class="col-lg-2 control-label">E-Mail</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="kontakt-email" placeholder="Email-Address">
</div>
</div>
<div class="form-group">
<label for="kontakt-nachricht" class="col-lg-2 control-label">Message</label>
<div class="col-lg-10">
<textarea class="form-control" id="kontakt-nachricht" rows="8"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="submit">Send</button>
Close
</div>
</form>
</div>
</div>
</div>
Because I would like to sent the data that is written by the user to the Django backend I wrote a form that is:
class ContactForm(forms.Form):
name = forms.CharField(max_length=255)
email = forms.EmailField()
message = forms.CharField(widget=forms.Textarea)
In order to offer this form to all templates (implemented in the base.html) I wrote a context preprocessor that works fine.
Is there a possibility to render the Django form to my desired html? I tried django-bootstrap3 but this app does not render the label and the input in one row. When I replace the input fields with Django (without any third party application) the class form-control and the id is wrong.