I have a problem using ember-bootstrap to render a form. When the route is visited nothing is rendered and in the console the message
appears.
The project is a Bootstrap 3 project and I have just installed ember-boostrap. To do that I did the following :
ember install ember-bootstrap
ember generate ember-bootstrap --preprocessor=sass
ember generate ember-bootstrap --bootstrap-version=3
From reading the doco I believe that was the correct sequence of commands ?
I then created a new route and in the template I put the following :
{{#bs-form formLayout=formLayout model=this onSubmit=(action "submit") as |form|}}
{{form.element controlType="email" label="Email" placeholder="Email" property="email" required=true}}
{{form.element controlType="password" label="Password" placeholder="Password" property="password" required=true helpText="Minimum 6 characters"}}
{{form.element controlType="radio" label="Radio" property="radio" options=radioOptions optionLabelPath="label"}}
{{form.element controlType="checkbox" label="Checkbox" property="checkbox"}}
{{form.element controlType="textarea" label="Textarea" property="textarea"}}
{{bs-button defaultText="Submit" type="primary" buttonType="submit"}}
{{/bs-form}}
{{outlet}}
Which is the sample template from the form component in the ember-bootstrap doco .
As I said when I go to visit the the new route I get nothing rendered and the error message shown above.
I feel like I must have overlooked some part of the directions ... is there something obviously missing ?
EDIT IN RESPONSE TO ANSWER FROM REAL_ATE
So to respond to the points raised by by Chris (real_ate) below. I'm using Ember 3.8 .
Now I was really pleased to feature on the excellent "May I Ask A Question" and I hadn't yet watched this weeks so I went off to watch. It seemed really odd that you were getting a different error than I was so I decided to start a new project and attempt my own reconstruction.
What I found was that I got exactly the error you saw (others can view that segment of the vid here) and not the one I had shown the screen shot of.
So I'm pretty puzzled about this but it does confirm your finding.
My best guess is this ... at about the same time I had been working through some issues with another addon and to document the process I had taken some screen dumps of those errors. I believe I may have picked the wrong screen dump and pasted it into the question. Oddly enough Chris mentioned something at the start of the segment about me not having actually copied the stacktrace but instead having used a screen shot of the stacktrace - perhaps if I'd actually copied the stacktrace I would have been less likely to do what, it seems likely, I did.
So ... for the sake of posterity the initial error was ...
Uncaught Error: Assertion Failed: An action named 'submit' was not found in <est#controller:login::ember231>
at assert (index.js:163)
at makeClosureAction (glimmer.js:6069)
at action (glimmer.js:5995)
at Object.evaluate (runtime.js:266)
at AppendOpcodes.evaluate (runtime.js:72)
at LowLevelVM.evaluateSyscall (runtime.js:3471)
at LowLevelVM.evaluateInner (runtime.js:3417)
at LowLevelVM.evaluateOuter (runtime.js:3409)
at VM.next (runtime.js:5530)
at TemplateIteratorImpl.next (runtime.js:5632)
Which was resolved by providing a 'submit' action on a controller created for the purpose and that then revealed a different issue with the example .hbs from ember-bootstrap including formLayout=formLayout which doesn't exist unless you've defined it and the error for that looks like this ...
Uncaught Error: Assertion Failed: must provide a valid `formLayout` attribute.
at Object.assert (index.js:163)
at Class.<anonymous> (bs-form.js:11)
at ComputedProperty.get (metal.js:2966)
at _get (metal.js:1591)
at RootPropertyReference.compute (glimmer.js:535)
at RootPropertyReference.value (glimmer.js:384)
at SimpleClassNameBindingReference.compute (glimmer.js:4002)
at SimpleClassNameBindingReference.value (reference.js:367)
at ClassListReference.value (runtime.js:1283)
at ComponentElementOperations.flush (runtime.js:1645)
... that was resolved as I described in my answer below .
So thanks to Chris and Jen and sorry for the misleading question .
Well I'm going to answer this myself for the sake of others who might have the same issue. I got some help from the add-on maintainer via the Emberjs discord and to quote him ...
The examples on ember-bootstrap.com are unfortunately not very smart,
in that they show bounded properties as such and not with the actual
value. For example that formLayout=formLayout only makes sense if
you also have a formLayout property on your controller. If that's
not the case (which I assume), formLayout will be undefined. Can you
try removing that and see if it helps? (or replace with a constant
value like formLayout="horizontal")
I did what he suggested and it resolved the problem.
thanks for the question and for giving such a complete example of how to recreate the problem.
I spent some time trying to recreate the problem that you have but I couldn't find the same issue and I wasn't able to get it to error in the same way as you described. I even tried this in an older version of Ember to see if it was something to do with that and it didn't help.
One thing that I did learn when I was trying this out was that the initialisation that you're doing as 3 different steps can actually be done on all one line:
ember install ember-bootstrap --preprocessor=sass --bootstrap-version=3
It shows an error that --preprocessor is not a known parameter for ember-cli but it still works as expected 😂
We also hit into the same issue where we needed to define formLayout for the form to get it to work, but the error we saw wasn't the same as the one you had 🤔 Could you tell us what version of Ember you're working on?
I can see that you have answered your own question already but I would still be interested in getting to the bottom of the error that you saw (if you're interested)
This question was answered as part of "May I Ask a Question" Season 2 Episode 3. If you would like to see us discuss this answer in full you can check out the video here: https://youtu.be/nQsG1zjl8H4
Related
I've written a github issue 2 weeks ago on semantic-ui-ember's repo but I got no answer yet. That's the reason why I'm reposting it here, hoping for more answers.
I'm trying to make a sample project out of the doc and can't get it working properly with all the docs I went through. I might be missing something really important. I'm actually able to get Semantic modules generated by ember but I get stuck when I try to interact with them and use actions on them.
I tried many different things but the closer I got was by following this guide.
Details on what I did. To see the actual error, please go to the end of my explanation.
I first installed ember: npm install -g ember-cli.
Then I created a new test project: ember new testEmberSemantic
Created the basic templates and a component for my future accordion test:
ember generate template application
ember generate template index
ember generate component accordion-test
Then I install Semantic-UI-Ember and generate it:
ember install semantic-ui-ember
ember generate semantic-ui-ember
I then put the following in templates/components/accordion-test.hbs:
{{yield}}
{{#ui-accordion as |execute|}}
<div class="title">
Semantic UI
</div>
<div class="content">
Be sure to check out <div class="ui button"
onclick="{{action (execute 'open' 1)}}">the example</div>
</div>
<div class="title">
Example
</div>
<div class="content">
This is a great example!
</div>
{{/ui-accordion}}
I added a simple {{accordion-test}} in templates/index.hbs and {{outlet}} in templates/application.hbs.
The error encountered.
Then, if I try to run ember server and load the webpage at localhost:4200, I have the following error in the console with nothing rendered on it.
Assertion Failed: A helper named "execute" could not be found
If I try the same without the execute and action parts in templates/components/accordion-test, I get a normal page but, of course, without event handler on the button.
I kinda guessed, from what I read from the docs than it implicitly calls a method on the ui-accordion component in the base mixin that is supposed to call the method on the semantic component but it's not clearly said.
I even tried to add the following in components/accordion-test, just to make sure I wasn't required to create the "helper" myself.
import Ember from 'ember';
export default Ember.Component.extend( {
actions: {
execute( command, argumentOne ) {
$( '.ui.accordion' ).accordion( command, argumentOne );
}
}
} );
But that didn't help.
I think the main problem probably comes from my usage of Semantic-UI-Ember but this is the closest I can get to something working based on what I can find in the docs. Maybe that needs to be updated, to make sure a newcomer can get to a working example easily.
Also, I did all of this using node v7.1.0 once and then tried it again (from scratch) with the 6.9.1 version and got the same results. So, it doesn't seem to be linked with the node version, here.
Thank you for your patience while reading this. :)
PS: This post might require a new tag called semantic-ui-ember as it uses this framework but I don't have the reputation to do so. Please, feel free to create it and tag this post to it. Thank you.
I am confused at how EmberJS uses inflection to fetch data from local database.
Given that I have a model called Post, I have seen instances of:
this.store.find('post', 1); //This one makese sense to me. Find a record of post with ID 1
I am more confused at when the tutorial starts adding/omitting 's'.
What are the differences between:
this.store.find('post');
this.store.find('posts');
this.store.all('post'); //This one also makes sense. Find all records of post.
The one that specifically confuses me is this.store.find('posts'); when I only have Post model, because it will actually throw an error telling me that No model was found: posts. Nonetheless, I still see it in the tutorial and getting started. Is this just a typo in the tutorial? This is the toturial that I am referring to:
http://emberjs.com/guides/routing/defining-your-routes/
and go to Dynamic Routes section.
Turning my previous comments into an answer in case someone else stumbles upon this before a fix is live.
I feel this has been wrongly downvoted. It is actually a mistake with the guides, as the singular form should be used throughout. The OP's confusion was entirely warranted.
The PR submitted to correct this issue has already been merged.
I have a project that is my first serious dive into Mongoid.
I saw a tip to use the following command:
Parent.where('childrens._id' => Moped::BSON::ObjectId(params[:id])).first
But this doesn't work. Error message was:
NameError: uninitialized constant Moped::BSON
I found that BSON is no longer included, so I added it to my Gemfile, as well as Moped. Then, I did another fix I found (placing Moped::BSON=BSON in application.rb).
This still didn't work, but the error changed to:
NoMethodError: undefined method `ObjectId' for BSON:Module
So I am assuming that this method got deprecated or something. Does anyone have any other tips?
Just to be clear, I am finding myself in the situation where I want to sort embedded documents using jquery-sortable. This requires me to update them in the database, but the serialize from that doesn't include the parent document in the hash. So I figured I'd try to get it on the back end using an ID from the embedded document. That is why I need it.
Thanks again for any help you can provide.
Try simply:
Parent.where('childrens._id' => params[:id]).first
I have solved the question though this won't be of much help to people in the future. The requirements have changed and now I am using human-readable strings as IDs to assist in friendly URLs and some other stuff.
Therefore, I don't have any issues with ObjectIds. Cortex's solution should (from what I have read) work for dealing with ObjectIds but I cannot verify it now.
I'm using Ember built from git master. My RouteManager is not complex, but when I try to start my app, I get this error:
Uncaught TypeError: Property '1' of object , is not a function
Following the trace indicates that this is happening on the app's initialization.
This jsfiddle shows the problem, although you'll have to look in the javascript console to see the error message. My actual router will be more complex than this, but I've pared it down to the bones to try to eliminate potential error sources.
You need to update your version of Ember Data to the latest version from master, as the injection API changed.
Here is a fiddle which "works".
http://fiddle.jshell.net/Sly7/ZySzK/
I pick up an ember-data resource from another fiddle I found on stackoverflow.
The way of populating the arraycontroller is weird. Usually you pass the context in the connectOutlet method of the controller, by specifying a context (in your case, it should be Sylvius.Section.find() )
I don't know why, but doing this, I have the error 'Sylvius.Section has no method find'... perhaps an other mess due to ember-data/emberjs bad version.
If I got to calendar, click on To Do, then try to add an event, the form pops up, I fill it out, press save, but no Event gets added.
In the SQL error log's I see an error like this:
2011-09-29 14:57:07 EDT ERROR: null value in column "visibility" violates not-null constraint
2011-09-29 14:57:07 EDT STATEMENT: insert into
vtiger_activity(activityid,subject,date_start,time_start,time_end,due_date,status,eventstatus,priority,sendnotification,activitytype,visibility,duration_hours,duration_minutes,location,recurringtype,notime)
values('235','Testing','2011-09-29','19:50',NULL,'2011-09-29','Not Started',NULL,'High','0','Task',NULL,NULL,NULL,NULL,NULL,'0')
So, for some reason, it is trying to add a To-Do while inserting null values. My biggest problem is that I cannot locate the origin of the query. So, basically, the most important thing I am asking is what file takes the data that was input into the todosave form and turns it into a query.
I don't know if many people on here use Vtiger, but I couldn't figure this out so I went ahead and posted anyway. The official documentation is not very helpful in my opinion.
Thanks for everything, have a good day.
This might be an isolated case, but was any of the modules modified recently? In this case, I would assume that it would be the Calendar module. I've tested this on the demo website and on my vTiger installation and it works fine..
Perhaps you can download a fresh copy of vTiger and replace the modules/Calendar all its content.
By the way, another place to ask if you have any questions, is the vTiger forums.
http://forums.vtiger.com/index.php
Usually you can ask it in the Help - 5.2.1 section. Hope this helps!