This is a NEAR duplicate of this post which has a very nice example of ember-validations (without EAK) here. However, I am wondering if anybody can do an EAK version of this for me, with the one difference that the JSBIN has validation errors shown only once the user has blurred a form input. This jsbin shows the errors on load. I would expect to see the validation messages come after the field has been focused for the first time at the very soonest, rather than onload. Im not sure if this is an artifact of JSBIN implementation or the actual expected feature design of ember-validations. I would love to see a clean EAK in git or bitbucket that has just this, the same 5 or 6 inputs in the index.hbs that are tied to a controller with the same five elements in the validations object, but the difference that it doesn't show errors until after the controls are at least interacted with once by the user. I would be extra happy to see the steps the user took at the terminal to add ember-validations to their EAK, because currently, I'm following this study below and I am unsure if perhaps the problem is not the EAK implementation, but rather the manner in which I've brought the ember-validations.js into my app in the first place. I've had some conflicting suggestions on how this should be done, but considering that right now, I have at least seen error messages in the page it's hard to tell if there's a problem with the way the script is included or not.
gem install bundler
git clone git://github.com/dockyard/ember-validations.git
cd ember-validations
bundle install
bundle exec rake dist
cp dist/ember-validations/ember-validations.js vendor/ember-validations/ember-validations.js
subl app/index.html
insert line 57: <script src="/vendor/ember-validations/ember-validations.js"></script>
open http://localhost:8000
With this, I am able to see the errors highlighted when the app loads. However, for my attempt, I don't see the errors clear or the continue button enabled after satisfactory input is added. So I am having the same unwanted functionality as the JSBIN and the OP. This maybe a more basic ember js question, or a basic EAK question, but I would love to see a simple ember-validations set up in EAK(ES6) format. With a list of files, their locations, or better still a git to clone.
Also, I am looking to see this done without FIXTURES or DS store if possible. I am thinking a simple object in the controller. It appears to me in the documentation that as soon as the object is created, validation fires. So, how to defer the validation until after the form-controls are interacted with?
Thanks!
Edit: So, I was able to get the EAK architecture to happen... anybody interested in my solution, there's a bitbucket repo now for you to inspect and enjoy!
Edit 2: So, looking and thinking about this some more. It makes sense the way it is. It's only my styling and message language that makes it clunky. Of course the presence: property makes them seem like errors, but they are in fact, also hypostatized as cta's or call to actions, highlighting fields that need attention. When the fields are empty initially, instead of thinking about them like errors, think about them like attention getting call outs. Since my button is disabled as long as the fields are inValid, there's no reason to have the messages at any other time, since there will never be a use case in which the user has submitted the button without satisfying the presence and other properties of the validations object. So, to solve my "problem" I just need to think about the errors differently. Instead of styling them with an error class, I'll style them normally, and when presence is satisfied, show a checkmark or something friendly like that. So in effect, these validations are working as I want them to. It's just a matter of not following the out-of-the-box nature of the message error styling.
Double Thanks!
Related
I am trying to get a custom component working in Formio.js. I would love a complete, nontrivial working example.
I am not using angular, ng, react or the form.io service.
The documentation is terrible. I can copy out the Checkmatrix example code and run it (after much fiddling) but even it doesn't work correctly: in the formbuilder, the edit and delete controls don't show up. (There an bug issue open on this, but no resolution, which is distinctly worrisome.)
There are dead links all over the SDK reference documentation.. like for example for "Component" which seems particularly important.
There is no documentation of any of code used by the example. For example, it uses the 'renderTemplate' call, but the arguments are not described anywhere.
It appears that the only way to understand any part of this system to try to figure out all of the source code. There are no instructions for adding code.
It's not even clear what the best way to proceed is: whether I should fork the formio.js repo, learn TypeScript, and add components directly (creating a hassle if I ever want to keep formio.js up to date) or continue trying to work by registering components from add-on scripts in the browser.
** Can anyone give concrete advice on the best way to go? **
#nathaniel Tagg I couldn't find form.io proper form examples, so i would like to see your form.io examples if you are like to provide. Here is my email 'udara#staff.medicalwizard.com.au'
My Shopify app replaces the product pages 'Add To Cart' form / product form, with it's own form of sorts. It is Liquid logic that decides whether or not to render the entire <form> element.
This works great, but on some themes (like Jumpstart by Shopify), the product page bugs out completely, throwing me an error saying:
option_selection.js - can't access its "parentNode" property
Which I believe is the option_selection.js function where it is looking for the select box / variant ID somewhere on the page.
Of course, this variant ID / select box does not exist because it is not being rendered.
How can I replace the add to cart form while satisfying the option_selection.js functions?
Usually this wouldn't be a big deal, but Shopify's app review team will give me problems with this, and on the Jumpstart theme specifically, this error causes the product photos to not render; breaking the page completely.
Any ideas here? Much appreciated!
Axing the entire product form seems a bit extreme - there's no way to do what you need to do in a less invasive way?
Assuming not, you'll want to expand your install so that you can update any code in a theme that initializes the product form to take into account the possibility that you've defied the theme's simplistic assumptions.
For the option_selection.js compatibility, you'll be looking for where new Shopify.OptionSelectors is being invoked. If your code has set a variable through Javascript, that may be the easiest check to make. Example of an inline install that assumes your code creates a function named MyAppNamespace.isProdHidden:
Original:
new Shopify.OptionSelectors( ...
Updated:
!(window.MyAppNamespace && MyAppNamespace.isProdHidden({{ product.id | json }}) ) && new Shopify.OptionSelectors( ...
The added piece of code will evaluate to false if and only if your app has loaded properly and your isProdHidden function returns a truthy value. This scenario would prevent the new Shopify.OptionSelectors part from running, since we're using the && as a sort of short-circuit/emergency-stop operation.
If your app failed to load (or was uninstalled from the store without the liquid code being updated), or if MyAppNamespace.isProdHidden returns false, then the added block of code evaluates as true and the new Shopify.OptionSelectors happens as normal.
The above is equivalent to wrapping the entire new Shopify.OptionSelectors call in an if statement, with the install benefit that the party installing your app doesn't need to read the theme code to figure out where the OptionSelectors call ends. In most themes the OptionSelectors code is spread out over multiple lines and occasionally theme developers declare their onVariantChange function as an inline anonymous function - neither of which are big obstacles for experienced developers, but a huge complication for novices and store owners without this kind of expertise.
Making the status of your app available somehow through Javascript is probably the best thing for you to do as far as theme-install-compatibility goes. Some themes have their OptionSelectors call right in the product page, which can be affected by dynamic Liquid variables, but many have this code tucked away in a .js file in the assets folder instead. Still other themes don't use Shopify's OptionSelectors code at all and instead run their own thing, and thus your app could interfere in completely unexpected ways or places. Creating tools to make it easier to integrate your app into somebody else's code is therefore one of the best things you can do.
You'll also want to make sure that your code is able to handle multiple products, as many stores have quick-shops all through the site which can load arbitrary product forms. By making sure you have made the tools available, it's possible for you, your support team (if any) and theme devs can make the required updates to (almost!) any arbitrary theme.
Hope that helps!
I use SugarCRM CE. I'm trying to create an image data type on the Cases module. The purpose of this is so that the employees of my company can attach images that can better explain the cases that they submit. However, I seem to have a hard time implementing this.
I tried to follow the guide at: https://www.atcoresystems.com/blog/adding-a-photo-to-a-contact-record
This apparently does not work for me as when I navigate to the detail view and the edit view of the record, it displays a mess of code instead of the expected output.
On my own, I also tried creating a custom field trying to emulate the 'file' data type of the "Documents" module and using a javascript to display it on the Detail View but no luck at all.
I am able to display something similar to the browse file on the "Documents" Edit View but as soon as I save it, it doesn't show.
Also to include in my worries, even after I successfully use it to accept files and display them, how do I filter them to accept only image files?
Please help!!!
Finally solved this question last Friday and I thought I'd share what worked for me. I revisited https://www.atcoresystems.com/blog/adding-a-photo-to-a-contact-record and decided to give it another shot. However, on Section 4.2, I changed this:
elseif($_FILES[$this->field_name]['size']
to this:
elseif($_FILES[$field_name]['size']
I cleared the cache but mostly what really grounded me was that even after doing so, I still got the same results. So to solve this, I modified my search query and picked other random records to edit. Problem solved!
This is a beginner's question -- surely already answered but I don't know how to find it:
When a coding/system error message pops up during processing of a PHP script or possibly JavaScript, its title is usually "The page at localhost [or other URL] says:". Its content usually includes a load of non-rendered HTML code (<b>, <br>, etc), a long reference to a PHP manual, an actual error message, and a reference to where the error occurred. Because the HTML is being ignored, the whole dialog is hard to read.
How can I get such windows to appear styled properly, as surely intended by the "folks at PHP or JavaScript", or at least appear in simple text with line breaks?
Please note: It is not an error message that I am intending to pop up in response to any user action; I don't know what is causing the message. Also, I'm not seeking advice on how to make user-friendly software or on how to do continuous development-and-delivery
How can I get such windows to appear styled properly, as intended?
I don't know which window you are talking about, however from the rest of your description it sounds to me that you want to turn HTML error off so to get the plain text version of the error messages.
PHP has a setting for that Docs:
html_errors boolean
Turn off HTML tags in error messages. The new format for HTML errors produces clickable messages that direct the user to a page describing the error or function in causing the error. These references are affected by docref_root and docref_ext.
So all you need to do is to turn if off, either in your php.ini:
html_errors = 0
Or within your code:
<?php
ini_set('html_errors', 0);
You might also be interested in:
How to get useful error messages in PHP?
Never have your errors show up in a production website!!
If you're talking about dealing with errors while you're developing, then check out the Whoops library. It'll give you everything you want, plus much more.
Here's a quote from their homepage:
whoops is a nice little library that helps you develop and maintain your projects better, by helping you deal with errors and exceptions in a less painful way.
Check out their demo here. You can click on the left side to go through the stack. Really cool.
Does anyone know what the core drupal javascript functions are to force an error message? More importantly, it must work with Message Effects (http://drupal.org/project/messagefx).
With JS Theming you can call these: (this is javascript code)
Drupal.messages.set("The Message!", 'error');
But, it doesn't hook into Message Effects, and after disabling JS theming, this function no longer works.
It seems like you have asked the wrong question. The status, warning, error messages that you see, is not invoked by javascript. Instead they are generated by the drupal_set_message() function. It work, by saving the messages in the session table for that user, and then they get printed whenever that user (re)load a page. It ends up as $messages in the page.tpl.php. I believe that there are no javascript version of this functionality, but you could mimic it. It's no harder than to insert some html on the page, something like.
$("#message").append('<div class="message error">The error message</div>');
I'm not sure about the exact html structure, and it cal also vary from theme to theme, but you get the idea. If you do take this approach, you will also need to hook into the messagefx module's js, to add the effect, but this shouldn't be too hard.