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'],
});
});
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;
}
Im using the headerContext-Callback on specific columns for the purpose of hiding/showing a set of additional columns. This worked fine in Tabulator 5.1.8 but somehow lost its functionality since I updated to version 5.2. Instead of calling the specified function it just opens the browsers default right-click-popup.
{title: exampleColumnGroup, columns:[
{title:"exampleAdditionalColumn", field:"xxx", visible:false},
{title:"exampleToggleColumn", field:"yyy", headerContext:headerClickfunc},
],},
Additional info: I chose to use a callback on specific columns instead of tableEvents because I couldn't get tableEvents to work in combination with ColumnGroups.
Any thoughts what im doing wrong or maybe overlooked some deprecated functionality?
edit:
i forgot to show an example of the function that should be called on rightclick:
function headerClickfunc(e, column){
e.preventDefault();
switch(column.getField()) {
case "yyy":
table.toggleColumn("xxx");
}};
Problem is, that this function is never called via headerContext:headerClickfunc since i upgraded to Tabulator 5.2
I can manage to get the function called via:
table.on("headerContext", function(e, column){
headerClickfunc(e, column);
});
but in this case the colum.getField() results in "undefined" which is somehow related to the use of a columngroup (tested it whithout the use of columngroups which works fine).
edit2:
Here is a jsfiddle of the not working Code (headerContext does nothing) with Tabulator 5.2.7
Here is a jsfiddle of the working code (headerContext calls the intended function) with Tabulator 5.1.8
The Code on both jsfiddles is exactly the same. Only difference is the version of tabulator.min.js i used as external ressource (via cdn-link in the ressoruces tab on the left).
The headerContext option, is simply a click listener, if you want to prevent the default browser context menu from opening then you need to call the preventDefault function on the event
{title:"exampleToggleColumn", field:"yyy", headerContext:function(e){
e.preventDefault() ///prevent browser context menu from opening
}},
If you were using Tabulators built in Menu System then you should be using the headerContextMenu option, not the headerClick option.
Also the 5.2 release introduced the concept of popups to allow the built in triggering of custom popup elements. Checkout the Popup Documentation for more info on these
As the heading states when I click a button on my main view I need it to call a method in my controller for that view. Ive been trying for hours and Ive changed the specific lines of code many times but all variations seem to give the same errors so im just showing the simplest versions to get my point across. Everytime I try something I get a 404 error that the path is not found. So im assuming something is wrong with the code in my view. Im not using JQuery or any javascipt
The line of code in my index view:
#Html.ActionLink("Button4Pressed", "Button4Pressed", "HomeController");
I know this wont work for getting methods but it works for changing pages so I thought I would start there. Im not sure if I should be doing it as a href or button.
my method in my HomeController:
[HttpPost]
public ActionResult Button4Pressed()
{
state = "year";
MyChart();
return View();
}
heres my Solution Explorer
Im pretty new to MVC and propably doing some pretty stupid stuff so any help is appreciated thanks.
You have two options:
Option A
Remove the [HttpPost] attribute from your controller method and you will be able to create normal links to it, i.e. with #Html.ActionLink()
Option B
Keep the [HttpPost] attribute and use a form or ajax to send the request as a HTTP Post request, i.e.
<form id="Button4Pressed" action="#Url.Action("Button4Pressed", "Home")" method="post"></form>
Button4
I can't seem to "click" on these select boxes using vue-test-utils and Vue 2. I am using mocha + webpack.
I am determining this by seeing that the visible-change event is never triggered as it should on click. Here is how my spec file is like:
...
const wrapper = mount(EntityItem, { propsData });
const selectBox = wrapper.find("el-select");
// I tried these:
selectBox.trigger("click");
selectBox.trigger("click.native");
As last resort if this doesn't work, I'd have to manually change the model attribute to simulate the component change.
----UPDATE----
When I set up a callback for the click event I see something, but I am unable to "select" anything in this select input component.
the component you are using does not use select input element. In order to simulate selecting an option, you would do something like this.
wrapper.findAll('.el-select-dropdown__item').at(1).trigger('click'); // simulates clicking of one of the options
if you want to simulate clicking of select element itself(to show the dropdown). you could do the following.
wrapper.find('.el-select-dropdown').trigger('click');
Whitespace's answer above helped, however also needed to ensure you use
await Vue.nextTick()
before your expect statement. Like so:
wrapper.findAll('.el-select-dropdown__item').at(1).trigger('click');
await Vue.nextTick();
expect(enterResultBtn.is('[disabled]')).toBe(true);
This allows the DOM to update it's cycle, more info here
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 :-)