I want to display textbox with dropdown. when user enter text, it will call the function to access DB and returns list of users which match with entered text. that users list will be displayed in dropdown along with textbox like typeahead.
I am going to use angular typeahead for search users.
but my users list contains around 16000 data.
when i use typeahead, if I type a single character, it will call the async function,then all data will return filtered by that character.
So i would like to call that async function after user typed and press enter key.
Is there any other solution to achieve this?
or is there any other plugin for my requirement?
Thanks.
I have used typeahead-min-length attribute instead of enter functionality.
Related
I'm trying to get google tag manager to track a couple of different buttons on a site. We're currently unable to change the site to aid with this, so we have to find a solution solely with tag manager.
There are several buttons on the site all with the same format as to the two below.. they all have "submit" as the type and a unique term for value so I'm trying to use the tag manager Form Listener which picks up on type="submit". Is there any variable I can use to pull the value field into my event so I can create individual goals in analytics?
etc etc
Any help is greatly appreciated.
You can use built-in variable "Click Element", then create custom JS-variable:
function(){
try{
return {{element}}.getAttribute("value"); //I am not sure now if it is {{element}} or {{Click Element}}
}catch(err){}
}
This will give you a value attribute of clicked button.
Maybe a useful link by Simo Ahava:
http://www.simoahava.com/analytics/track-form-engagement-with-google-tag-manager/#3
You can use built-in auto-event variable Element Attribute to get value. And be sure to use click tracking and not form tracking, because you want to track button clicks and not form submissions.
In my AngularJS project, I am having a dropdown field as a directive and the values are coming from the backend.The user can also leave the field without selecting the dropdown(optional field) but the problem is, there is no empty field from the backend. So I need to add an empty field into the dropdown as default.
Since there is no option in the directive got struck in this issue.Googled a lot but didnt get any solutions yet.Kindly provide some suggestion.
Note:Client machine,cant post the code.
If there is no value set for the ng-model that the dropdown is bound to, Angular will provide a blank option by default that can be left in place (ignored) by the user and will result in your final value being whatever you set that ng-model to in the first place. If you need an actual empty string for the value, initialize it to that.
If you need to enable the user to select an empty value once they have already selected a value, you will need to add an empty value to the object that the dropdown is bound to. Add the empty value like this:
myPromise.then(function(data){
$scope.ddInfo = data;
$scope.ddInfo.unshift({id:'0000',text:'Not Applicable'});
});
Working on Drupal, I have a page with a form made with "Webform" module, containing several fields (text fields and sliders) and a "Submit" button.
When the user enters the information and presses the "Submit" button, another page is loaded with custom code into it.
The new page is devided into 2 parts - the first one contains new information(based on the user input from the previous page); the second one contains (block) the same form, used in the previous page.
Is there a way to load the values, filled in the form from the first page into the new page?
First of all you would need to make a custom module, with the help of
hook_form_alter
You would need to store the previous form's information in cookies with prefix
Drupal_visitor_
and then display it in the new page like:
$form['submitted']['FirstName']['#default_value'] =
$_COOKIE[$firstname];
Thanks
My UI has a batch editable grid with column called Rank and fixed number of records ( say 5 records and no paging ). The field Rank has to be validated and should always input in the ascending order ( say 1,4,6 7, 9). These inputs has to be validated before submitting and would like to show in-line validation message against the edited cell.
I tried following
Using [Remote] validation attribute, but no way to pass the entire grid data.
Using OnSave client event, not sure how to add the in-line validation messages
Any suggestion on this would be greatly appreciated,
-George
Try adding this jquery.validate.unobtrusive.min.js Javascript reference in your view page. And the remote validation will exactly post all the input parameters to the action method. There you can return either true or false.
In order to pass the entire grid data using [Remote] validation attribute, you have to make the grid data in this format for each data:
<input name="col1" value="col1_Value">
The name "col1" must be match as a parameter in your controller, so that the value can be passed.
You can achieve this by doing a little trick using jquery.
I'm trying to have a dropdown menu for the user to select the database table. I have defined few tables in db.py and I want the user the to select a particular table from a dropdown menu and insert entries. Right now I use SQLFORM:
def index():
form=SQLFORM(db.selectedtable) #want to change the table name#
if form.process().accepted:
response.flash = 'form accepted'
elif form.errors:
response.flash = 'form has errors'
else:
response.flash = 'please fill out the form'
return dict(form=form)
I need the user to select 'selectedtable' value from a dropdown list that shows all the available tables in the DB. I do not necessarily want to retrieve the table values from DB. I am OK with defining a list with the available tables and the dropdown menu can pull the table names from that list.
So far I only found IS_IN_DB to automatically create a dropdown and PluginDropdown() but that does not serve my purpose. If soemebody can direct me to the proper way of handling this task I'd be really thankful.
Regards.
Update:
After Anthony's suggession I tried the following with , as I'm not that familiar with JS.
{{extend 'layout.html'}}
{{select='NONE'}}
<form>
<select>
{{for item in TOOLS:}}
<option value="{{select=item}}">{{=item}}</option>{{pass}}
</select>
<input type="submit" value="Go!"/>
</form>
<h2>Input form</h2>
{{=form}}
<h2>{{=select}}</h2>
As you might see this doesn't work properly. What I tried to do is to get the user chose value to 'select' variable. But it doesn't work. It always gets the last element in ITEMS (this list is defined in db.py). My next option would be to be call another controller function, passing the user selected value as an argument. Then it can prepare the form with the passed value and send to a view to display
<h2>Input form</h2>
{{=form}}
But I'm not sure how I can assign the user chosen value to an argument and then call another controller function with that arugument value.
If you have any suggestion how I can modify this to get the user chosen value thats very much appreciated. Thank you.
You could create a <select> element listing all the tables, and then load the form associated with the selected table as a web2py component via Ajax. In the view of the main page (e.g., /views/default/index.html):
<script>
jQuery(function() {
jQuery('#table').change(function() {
web2py_component("{{=URL('default', 'form.load')}}" + "/" +
jQuery(this).val(), target='form')
})
})
</script>
{{=SELECT('Select a table', *db.tables, _id='table')}}
<div id="form"></div>
And in a controller (e.g., default.py):
def form():
if request.args(0) in db.tables:
response.generic_patterns = ['load']
return dict(form=SQLFORM(db[request.args(0)]).process())
else:
raise HTTP(404)
Note, db.tables is a list of all the tables defined on the db connection object -- it is used in the SELECT() helper in the view to generate a <select> list of all the tables. The script in the view registers a jQuery event handler that fires whenever a different table is selected from the dropdown. The handler calls the web2py_component() function (which is in /static/js/web2py.js), which loads the form component via Ajax into the div with id="form". It appends the value of the selected table to the URL.
In the controller, the form() function checks for the db table name in request.args(0). It then sets response.generic_patterns so the "generic.load" view will be allowed (by default, generic views are only enabled for local requests). Alternatively, you could define your own "form.load" view, or even use a different extension (e.g., "form.html").
Because the form is loaded as a web2py Ajax component, the form submission will be trapped and submitted via Ajax as well, so it will not result in a full page reload.