I have found Angular-formly and it looks awesome. However, I have found a problem. We load the array of options for our <SELECTS> using an Ajax call so the select options can come asynchronously.
Unless I am missing something (hopefully) it seems we need to have the array when we create the "fields" for the form.
I have set up an example here http://jsbin.com/tihofegifu/edit
Ideally I would like to load the Array for the SELECT OPTIONs via ajax and formly to use the options like standard Angular does.
Another issue is editing the array using angular as in the button will not work.
What am I missing or doing Wrong?
I think the example you're looking for is on the website. Basically, you create a controller for the field to do the loading for you. You could also define that controller as part of a custom type.
Alternatively, you could also use expressionProperties which can accept a promise and you could do:
expressionProperties: {
'templateOptions.options': function() { /* return promise that resolves to the options you want*/ }
}
Good luck! Enjoy angular-formly :-)
Related
I am new to wordpress and this might be a really simple task.
I have a created a form using gravity forms plugin. I need to populate an options field in the form by making an API call. I had implemented this using gform_pre_render action and calling the function to make the API call. This code was in funtions.php of the active theme. This was working as expected.
However, now I'm required to do the same in a plugin file as I cannot have custom code in the themes file. When I place the same code in a plugin file and install the plugin, I am not getting the options field populated by API.
Is there any other way to do this? Please let me know. Any help is much appreciated.
You can use the gform_pre_render hook to add your custom code to the plugin. The only difference is that you need to use the add_filter function instead of add_action:
add_filter( 'gform_pre_render', 'populate_options' );
The add_filter function is the same as add_action except that it expects a callback function that returns a value. In the case of the gform_pre_render hook, the callback function should return the form object.
So, the code you want to run when the form is rendered should look something like this:
function populate_options( $form ) {
// your code goes here
return $form;
}
I have multiple buttons and form inputs in one page. All these buttons and form inputs need to be disabled or enabled depending on a condition.
I know that it is possible to use the disabled keyword inside a tag to disable a specific input or button. Also, I can just add the code
:disabled="true"
to disable the inputs depending of the boolean value of a variable.
However, this solution is not acceptable for me, since I will have to add this line of code to every inputs on my page (I may create new pages in the future, containing as many inputs).
I would like to know if there's a way that allows me to simply disable the parent container of all the inputs so that the children item (the inputs) are disabled.
If you inspect the Vue instance itself of the VM when running your code you can have something like this when you console.log(this),
It will give you output similar to this if you use the correct scope:
{
$attrs
$options
.......
$el
}
Inside $el there's object properties for accessing firsElementChild, previousElementChild, previousElementSibling, etc. There's a lot of HTML related properties, however, accessing HTML element this way can get messy pretty fast. I think that your best solution is the one you already mentioned or changing the CSS class dynamically.
If you use v-if to conditional render on a parent you can achieve pretty similar functionality too.
See: Conditional rendering
I am trying to get angular formly and angular ui bootstrap typeahead playing nice. What I want is to have my select list populated from an http get request, and each time there is a change to the select field it should fire a function to get a new list of options.
typeahead="address for address in getLocation($viewValue)"
I'm not sure I did the jsbin right, but here we go.
JsBin of my problem
Here is a plunker with the typeahead working alone.
dynamic typeahead works here
I can't even get the getLocation function to fire. I have tried vm.getLocation, but no dice.
Help would be very appreciated!
Thanks. ;-)
Async select options
Watchers Example
Initially the options should be an empty array, and passed in with as shown above. Then you need to add a watcher that updates the $scope.options.templateOptions.options as its called.
But, I am still having trouble getting the typeahead to answer functions. In the typeahead docs you can use a callback to know when it is selected.
typeahead-on-select='onSelect($item, $model, $label)'
My onSelect function in the controller is never called.
Here is a working example...I combined the Async formly example with the UI Bootstrap example...notice it now becomes item.question for item instead of item for item...
Unsure why that is, I checked and its the same format the Async example is coming back as...tried all kinds of ways to get it to display the full JSON object but no luck...
if I set it to item for item, the whole JSON object shows in the model but the search returns [object Object], otherwise its only the single line which I have set to the label, which I guess is the same way it displays normally, so that's OK...
Anyway, it works
http://plnkr.co/IjuJ0HPGCKfZAOrK0u3z?p=preview
app.run(function(formlyConfig) {
formlyConfig.setType({
name: 'typeahead',
template: '<input type="text" ng-model="model[options.templateOptions.label]" uib-typeahead="item.question for item in to.options | filter:$viewValue | limitTo:15" class="form-control">',
wrapper: ['bootstrapLabel', 'bootstrapHasError'],
});
});
when we type into autoComplete, primefaces automatically highlighted first shown item. so when we press enter key that item will be selected. how can i change the behavior of enter key, so when it pressed, just entered text be submitted in backing bean property.
I know we can hit ESC button then continue but but user don't like it.
I am using primefaces 5.0 & jsf 2.1.11
What helped me to solve the same issue where the answers here and here. Basically, you have to override 2 different behaviours.
First one is the default selection of the first result, that can be achieved adding this to your autocomplete (as stated by the accepted answer in the first link, available in primefaces for versions 5.1.5, 5.0.14 and 5.2):
autoHighlight="false"
The second thing you want to override is the behaviour when Enter is pressed, as you want the form that contains the autocomplete to be submitted. For doing so, just add this code to either the containing form or the autocomplete:
onkeyup="if (event.keyCode == 13) {
document.getElementById('[searchFormId]:[submitButtonId]').click();
return false; }"
Change the ids between square brackets for your own ones and it's done.
PS: I know this is a rather old question but it still applies to the current version of primefaces (6.1 when this question was answered). And I also think it can help to have both changes combined in one answer.
Truth be told, this feels like a bug. Richfaces do that implicitly (submit on enter while suggesting). I haven't found an official fix so I did some research and turns out the simplest way is to override the JS function that resolves key presses. The whole autocomplete js is here. You just need to override the bindKeyEvents function so you declare it likewise:
PrimeFaces.widget.AutoComplete.prototype.bindKeyEvents = function () {
Then add the rest of the code for this specific function from the JS I mentioned before. I've omitted that code so it's more readable. Then you want to find a switch that resolves different keys that have some behavior mapped to them. And under the code:
case keyCode.ENTER:
case keyCode.NUMPAD_ENTER:
Add something like:
if (highlightedItem.length == 0) {
document.getElementById("<your_form_id>").click();
_self.hide();
} else {
highlightedItem.click();
}
Also, make sure that you got forceSelection and the autohighlight off on the autocomplete component.
The problem in the JS is that even though you haven't selected any item from the suggestions it still triggers the event that tries to click the item... which doesn't even exist.
This is the simplest way as I said... you can also create your own autocomplete implementation and override the behavior there. But that's a lot of work and if you only need this one feature I suggest overriding the JS function.
In order to override the original JS with your custom one you need to make sure yours is loaded after the original one. To do that you can either use h:outputScript or simply just load the javascript like you're used to... but in the body (not the head).
Also there's probably a fancier way than having to specify the form id. But I just wasted too much time searching for a solution that I had to get it done real fast.
is it possible to alter a form after an ajax call?
what i want to do is this:
i have a form with some textfields and a select box with 2 options.
what i want to do is when a person chooses one option, i will unset some of the textfields(depends on which option the user choose).
i do this with ajax because i need to load from my DB which input to disable.
ofcouese i can hide it with jQuery(which i do).
but i was wondering that if there a way for doing it in the ajax server function.
10x.
I would get a look to the Form API of drupal and how AHAH (Asynchronous HTML and HTTP) works here
and here you'll find a small example how to implement it.
Anyway you can always give a look on modules that are using it like pools, filefield (CCK), etc.
cheers :)