How do I go about entering ".ZIP" and ".RAR" as the allowed mimetypes for the filepicker.io widget?
You should make use of the data-fp-extensions attribute, for instance
<input type="filepicker" data-fp-extensions="zip,rar"/>
Make a list of allowed mimetype. add 'application/zip' to the list and you are good to go
var allowedMimeTypeList =['image/*', 'text/plain', 'application/pdf','application/msword','application/vnd.ms-powerpoint','application/vnd.openxmlformats-officedocument.presentationml.presentation','application/zip'];
filepicker.pick({
mimetypes: allowedMimeTypeList,
//container : 'window'
},
});
Related
It is super easy problem but I just can't seem to figure this out (And yes I have read the documentation).
I am trying to get the input user puts in the ion-searchbar (in Ionic v4) after they the press search and put in a const/let.
Mah HTML
<ion-searchbar showCancelButton="focus" class=""></ion-searchbar>
I don't know how I should write the TS for this.
Thanks in advance :{)
Use (search) event to call your function. This event is fired when the user will click on the search button provided by the ion-searchbar.
To get the value entered in the searchbar, use $event.target.value which gets the value field of the tag which in this case is <ion-searchbar>
<ion-searchbar
showCancelButton
searchIcon="search"
animated
cancel-button-icon
(ionCancel)="hideSearch()"
(search)="yourSearchFunction($event.target.value)"
placeholder="Search Some Values">
</ion-searchbar>
To listen to changes as user types in the search bar:
<ion-searchbar
...
(ionInput)="yourInputChangeFunction($event.detail.value)">
</ion-searchbar>
Note: On Ionic 6+, (ionInput) strangely emits value on $event.target.value although, their documentation mentions $event.detail
In your .html file:
<ion-searchbar
[(ngModel)]="autocomplete.input"
(ionInput)="updateSearchResults()"
placeholder="Search for a place">
</ion-searchbar>
In your .ts file:
export class LoginPage{
autocomplete: { input: string; };
updateSearchResults() {
console.log(this.autocomplete.input) //search input will display
}
}
Hope this works.
Html file.
<ion-toolbar>
<ion-searchbar
debounce="1000"
(ionChange)="ionChange($event)">
</ion-searchbar>
</ion-toolbar>
ts file
ionChange(event) {
console.log(event.detail.value)
}
Always Read Documentation of API, Plugins or anything which you are looking for.
You will get data by using ionChange() or ionInput().
Use following code in HTML file
<ion-searchbar
showCancelButton="focus"
ionInput="getData()"
class="">
</ion-searchbar>
and in TypeScript.
public getData(){
//ur logic here
}
Get a reference to the searchbar using the #ViewChild directive:
View:
<ion-searchbar #search></ion-searchbar>
Component:
#ViewChild('search', {static: false}) search: IonSearchbar;
Thereafter, get the value of the ion-searchbar as follows:
const input = await this.search.getInputElement();
const searchValue = input.value;
I have an
<input type="file">
in my DOM. Is it possible to trigger an action with Ember techniques if the file in this input changes, or do I have to use third party libs like jquery-observe?
Yes, of course it is possible.
You can create a file field component as follows:
// put in components/file-field.js if you are using ember-cli
import Ember from "ember"
export default Ember.TextField.extend({
type: 'file',
attributeBindings: ['multiple'],
multiple: false,
change: function(event) {
var input = event.target();
if (!Ember.isEmpty(input.files)) {
this.sendAction("filesChanged", input.files);
}
}
});
Now place this in your template in place of your <input type="file">
{{file-field filesChanged="uploadFile"}}
Then in the controller or in one of your routes where this action will bubble, define your uploadFile action:
actions: {
uploadFile: function(files) {
// put your ajax call to upload the file(s) here
}
}
Although this is enough to get you started learning, I would definitely recommend using something like ember-cli-uploader for this in a real application.
I thought the HTML spec stated that buttons click in a form pass their value, and button "not clicked" did not get passed. Like check boxes... I always check for the button value and sometimes I'll do different processing depending on which button was used to submit..
I have started using AJAX (specifically jquery) to submit my form data - but the button data is NEVER passed - is there something I'm missing? is there soemthing I can do to pass that data?
simple code might look like this
<form id="frmPost" method="post" action="page.php" class="bbForm" >
<input type="text" name="heading" id="heading" />
<input type="submit" name="btnA" value="Process It!" />
<input type="submit" name="btnB" value="Re-rout it somewhere Else!" />
</form>
<script>
$( function() { //once the doc has loaded
//handle the forms
$( '.bbForm' ).live( 'submit', function() { // catch the form's submit event
$.ajax({ // create an AJAX call...
data: $( this ).serialize(), // get the form data
type: $( this ).attr( 'method' ), // GET or POST
url: $( this ).attr( 'action' ), // the file to call
success: function( response ) { // on success..
$('#ui-tabs-1').html( response );
}
});
return false; // cancel original event to prevent form submitting
});
});
</script>
On the processing page - ONLY the "heading" field appears, neither the btnA or btnB regardless of whichever is clicked...
if it can't be 'fixed' can someone explain why the Ajax call doesn't follow "standard" form behavior?
thx
I found this to be an interesting issue so I figured I would do a bit of digging into the jquery source code and api documentation.
My findings:
Your issue has nothing to do with an ajax call and everything to do with the $.serialize() function. It simply is not coded to return <input type="submit"> or even <button type="submit"> I tried both. There is a regex expression that is run against the set of elements in the form to be serialized and it arbitrarily excludes the submit button unfortunately.
jQuery source code (I modified for debugging purposes but everything is still semantically intact):
serialize: function() {
var data = jQuery.param( this.serializeArray() );
return data;
},
serializeArray: function() {
var elementMap = this.map(function(){
return this.elements ? jQuery.makeArray( this.elements ) : this;
});
var filtered = elementMap.filter(function(){
var regexTest1= rselectTextarea.test( this.nodeName );
var regexTest2 = rinput.test( this.type ); //input submit will fail here thus never serialized as part of the form
var output = this.name && !this.disabled &&
( this.checked || regexTest2|| regexTest2);
return output;
});
var output = filtered.map(function( i, elem ){
var val = jQuery( this ).val();
return val == null ?
null :
jQuery.isArray( val ) ?
jQuery.map( val, function( val, i ){
return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
}) :
{ name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
}).get();
return output;
}
Now examining the jQuery documentation, you meet all the requirements for it to behave as expected (http://api.jquery.com/serialize/):
Note: Only "successful controls" are serialized to the string. No submit button value is serialized since the form was not submitted using a button. For a form element's value to be included in the serialized string, the element must have a name attribute. Values from checkboxes and radio buttons (inputs of type "radio" or "checkbox") are included only if they are checked. Data from file select elements is not serialized.
the "successful controls link branches out to the W3 spec and you definitely nailed the expected behavior on the spec.
Short lame answer: I think it is teh broken! Report for bug fix!!!
I've run into a rather unusual issue with this. I'm working on a project and have two separate php pages where one has html on the page separate from the php code and one is echoing html from inside php code. When I use the .serialize on the one that has the separate html code it works correctly. It sends my submit button value in its ajax call to another php page. But in the one with the html echoed from the php script I try to do the same thing and get completely different results. It will send all of the other info in the form but not the value of the submit button. All I need it to do is send whether or not I pushed "Delete" or "Update". I'm not asking for help (violating the rules of asking for help on another persons post) but I thought this info might be helpful in figuring out where the break down is occurring. I'll be looking for a solution and will post back here if I figure anything out.
I've got an HTML5 form on my page with an email input that has place holder text in it. It works beautifully and I love the native validation!
I'm not sure how to serve old browsers best. I'm using a bit of javascript that copies the placeholder's text and imprints it as a value. It works well, but then the form validation goes off because there's text that isn't an email address in the form.
I do not want to lose the validation.. Any ideas?
HTML
<input id="email" type="email" placeholder="Enter your email address">
JavaScript (Prototype):
var Placeholder = Class.create({
initialize: function (element) {
this.element = element;
this.placeholder = element.readAttribute('placeholder');
this.blur();
Event.observe(this.element, 'focus', this.focus.bindAsEventListener(this));
Event.observe(this.element, 'blur', this.blur.bindAsEventListener(this));
},
focus: function () {
if (this.element.hasClassName('placeholder'))
this.element.clear().removeClassName('placeholder');
},
blur: function () {
if (this.element.value === '')
this.element.addClassName('placeholder').value = this.placeholder;
}
});
Event.observe(window, 'load', function(e){
new Placeholder($('email'));
});
EDIT:
Wouldn't it be great if browsers supporting placeholder ignored the value attribute?
EDIT 2:
No, I don't want to set the input type to text. That will change the validation's behavior from email syntax to spellcheck.
User Modernizr to detect support for placeholder and only use your javascript to copy the placeholder text if support doesn't exist:
if(!Modernizr.input.placeholder){
// copy placeholder text to input
}
This will prevent it from doing the copy on browsers supporting html5 form attributes like placeholder.
Try this:
<input type="email" value="Enter Email"
onfocus="if (this.value == 'Enter Email') {this.value = '';}"
onblur="if (this.value =='') {this.value = 'Enter Email';}" />
I know it's an old question, but it could help other users that come across this question.
You can use this http://afarkas.github.com/webshim/demos/demos/webforms.html for form validation with support for older browsers. It sits on top of jQuery and Modernizer and is pretty easy to implement.
Hope it helps.
I have a location search form that uses jQuery UI autocomplete.
When the user starts typing into the input, our list of locations appear as a drop down menu just below the input. If the user clicks one of the locations, the page redirects to the landing page for that location. The user can also click "enter" on the keyboard instead of explicitly clicking on the item.
Here's the probelm. I can't figure out how to get autocomplete to work if the user clicks the SUBMIT button. I'm not allowed to simply remove the submit button because it's a "call to action". The markup & code look like this: (I'm writing this from memory, so it may not be exact)
<form id="locationSearch">
<input type="text" id="enterLocation" />
<input id="goButton "type="submit" value="GO" />
</form>
<script>
var locations = [<br />
{'value': 'Brooklyn', 'url': '/ny/brooklyn/browse'}
{ 'value' : 'Hoboken; , 'url' : /nj/hoboken/browse'}
];
$('#enterLocation').autocomplete({
autoFocus: true,
source: 'locations',
select: event, ui (function() {
window.location.url
});
});
</script>
What I need to do is something like this:
$('#goButton').click(function() {
// trigger automcomplete select
});
Any suggestions are greatly appreciated!
Try using
$('#enterLocation').trigger("autocompleteselect", function(){});