how to disable flag in "ngx-intl-tel-input" lib, I disable input field in form has ngx-intl-tel-input but not disable flag.
Please see issue fixed "https://github.com/webcat12345/ngx-intl-tel-input/issues/205"
This issue has been fixed in the latest releases. To disable your control, including the country dropdown:
phoneForm = new FormGroup({
phone: new FormControl({
value: undefined,
disabled: true
}, [Validators.required])
});
or
this.phoneForm.controls['phone'].disable();
I found a hack. Take a ref of <ngx-mat-intl-tel-input> and disable the button inside it. Check the code below.
HTML:
<ngx-mat-intl-tel-input
[preferredCountries]="['us']"
[enablePlaceholder]="true"
[enableSearch]="true"
format="national"
name="phone"
placeholder="Phone Number"
formControlName="phone"
#phoneField
></ngx-mat-intl-tel-input>
Component TS:
#ViewChild('phoneField')
public phoneField;
public ngAfterViewChecked() {
// disabling country selection button
try {
this.phoneField.elRef.nativeElement.firstChild.children[0].disabled = 'true';
} catch (e) {
// ignore this
}
}
Enjoy :)
Related
This code used to work just fine and fast for years.
Given that $.ajax does not receive any file data, as of update to iOS 11.3 this $.ajax seems to work very slowly up to 20 seconds to submit a simple text-only form when tested on iOS browser.
But if the file element passes file data, the $.ajax works just fine in both cases and just as fast as expected.
HTML ---
<form enctype="multipart/form-data" id="chatform" method="post">
<input type="file" name="pic" id="pic" class="hidden" />
<textarea name="chattextarea" id="chattextarea" rows="3" cols="10"></textarea>
<input type="button" value="Send" onclick="sendMessage();" />
</form>
JavaScript ---
function sendMessage() {
var formData = new FormData($("#chatform")[0]);
$.ajax({
url: 'send.php',
type: 'POST',
data: formData,
async: true,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
/* some success message */
}
});
}
Is this an iOS 11.3 bug?
----- EDIT -----
Yes indeed it is not only iOS 11.3 bug, but also a Safari 11.1 bug.
So far I tested these environments and replicated the bug:
Mac OS, Safari
iOS, Safari
iOS, Chrome
iOS, WKWebView (hybrid app)
I wrote a simple workaround, please check my answer and let me know if you have a cleaner solution.
This function works on iOS 11.3, iOS 10.2 and windows Chrome 65.0.3325.181.
Can someone help to test on other browsers?
function formDataFileFix(formData) {
try {
if (formData.keys) {
var formKeysToBeRemoved = [];
for (var key of formData.keys()) {
var fileName = null || formData.get(key)['name'];
var fileSize = null || formData.get(key)['size'];
if (fileName != null && fileSize != null && fileName == '' && fileSize == 0) {
formKeysToBeRemoved.push(key);
}
}
for (var i = 0; i < formKeysToBeRemoved.length; i++) {
formData.delete(formKeysToBeRemoved[i]);
}
}
}
catch(err) {
console.log(err.message);
}
}
var formData = new FormData($(formID)[0]);
formDataFileFix(formData);
Instead of deletion, I disabled the empty file inputs from the formData before class creation:
if(!file.val()){
file.attr('disabled', true);
}
I have the exact same problem! I have a web application with several forms that dont work anymore if the user NOT choose to include a file. Have been running iOS 11.3 beta since beta 1 and hoped that every New beta should resolve this problem. Quite annoying that the problem persists in the public release. Hopefully there will be more info on how to solve this now when this ”bug” affects so many more people.
Same problem here !!! Since many IOS users are upgrading it will be a real problem. Did someone find a workaround for this problem ? Works if I send a file.
My workaround is to separate behavior for forms with and without file selected.
This solution is quite nasty, but it works around an Apple bug :(
function sendMessage() {
// Form does not have file selected
if(!$("#pic").val()) {
var formData = $("#chatform").serialize();
$.post("send.php", formData, function(data) {
/* success */
});
}
// Form has file selected
else {
var formData = new FormData($("#chatform")[0]);
$.ajax({
url: 'send.php',
type: 'POST',
data: formData,
async: true,
cache: false,
contentType: false,
processData: false,
success: function (data) {
/* success */
}
});
}
}
Please let me know if you have a cleaner solution.
Simply remove the empty file input from the formData:
if(!imageUsed){
formData.delete('file[]');
}
We are still testing on different devices, but it seems to work.
Thank you! I combined the two previous answers to a cleaner and working example. I though think Apple should fix this in a hurry...
var formData = new FormData( this );
if(!$("#image").val()) {
formData.delete('image_file');
}
if(!$("#pdf").val()) {
formData.delete('pdf_doc');
}
$.ajax({
type: 'post',
data: formData
//and so on...
I had the same problem, this worked for me, I hope my solution helps anyone :
Before the Ajax request :
// disable all empty inputs with type file :
let fileInputs = document.querySelectorAll(".myForm input[type=file]");
fileInputs.forEach(function (file) {
let fileInput = $('#'+file.id);
if(fileInput.get(0).files.length === 0){
fileInput.attr('disabled',true);
}
});
Then here you make your normal Ajax request.
Note : after that you might need to enable your inputs with type files again.
( The same way you disabled them )
let myFiles = document.querySelectorAll(".myForm input[type=file]");
myFiles.forEach(function (file) {
let fileInput = $('#'+file.id);
fileInput.attr('disabled',false);
});
I have a Select2 that fetches its data remotely, but I would also like to set its value programatically. When trying to change it programatically, it updates the value of the select, and Select2 notices the change, but it doesn't update its label.
https://jsfiddle.net/Glutnix/ut6xLnuq/
$('#set-email-manually').click(function(e) {
e.preventDefault();
// THIS DOESN'T WORK PROPERLY!?
$('#user-email-address') // Select2 select box
.empty()
.append('<option selected value="test#test.com">test#test.com</option>');
$('#user-email-address').trigger('change');
});
I've tried a lot of different things, but I can't get it going. I suspect it might be a bug, so have filed an issue on the project.
reading the docs I think maybe you are setting the options in the wrong way, you may use
data: {}
instead of
data, {}
and set the options included inside {} separated by "," like this:
{
option1: value1,
option2: value2
}
so I have changed this part of your code:
$('#user-email-address').select2('data', {
id: 'test#test.com',
label: 'test#test.com'
});
to:
$('#user-email-address').select2({'data': {
id: 'test#test.com',
label: 'test#test.com'
}
});
and the label is updating now.
updated fiddle
hope it helps.
Edit:
I correct myself, it seems like you can pass the data the way you were doing data,{}
the problem is with the data template..
reading the docs again it seems that the data template should be {id, text} while your ajax result is {id, email}, the set manual section does not work since it tries to return the email from an object of {id, text} with no email. so you either need to change your format selection function to return the text as well instead of email only or remap the ajax result.
I prefer remapping the ajax results and go the standard way since this will make your placeholder work as well which is not working at the moment because the placeholder template is {id,text} also it seems.
so I have changed this part of your code:
processResults: function(data, params) {
var payload = {
results: $.map(data, function(item) {
return { id: item.email, text: item.email };
})
};
return payload;
}
and removed these since they are not needed anymore:
templateResult: function(result) {
return result.email;
},
templateSelection: function(selection) {
return selection.email;
}
updated fiddle: updated fiddle
For me, without AJAX worked like this:
var select = $('.user-email-address');
var option = $('<option></option>').
attr('selected', true).
text(event.target.value).
val(event.target.id);
/* insert the option (which is already 'selected'!) into the select */
option.appendTo(select);
/* Let select2 do whatever it likes with this */
select.trigger('change');
Kevin-Brown on GitHub replied and said:
The issue is that your templating methods are not falling back to text if email is not specified. The data objects being passed in should have the text of the <option> tag in the text property.
It turns out the result parameter to these two methods have more data in them than just the AJAX response!
templateResult: function(result) {
console.log('templateResult', result);
return result.email || result.text;
},
templateSelection: function(selection) {
console.log('templateSelection', selection);
return selection.email || selection.id;
},
Here's the fully functional updated fiddle.
I've issue with ASP.NET MVC validation not working with Bootstrap Select Picker, If I remove the selectpicker class from dropdown list the validation working fine and if I added it the validation not working , Any help please
The MVC Code :
#Html.DropDownListFor(m => m.SelectedLocationID, Model.lstOfLocations, "Select Delivery Location", new { #class = " selectpicker", #placeholder = "" })
#Html.ValidationMessageFor(m => m.SelectedLocationID)
The Jquery Code With Valida-min.js
$(".SearchForm").validate({
ignore: ':not(select:hidden, input:visible, textarea:visible)',
rules: {
SelectedLocationID: {
required: true
}
},
errorPlacement: function (error, element) {
if ($(element).is('Select Delivery Location')) {
element.next().after(error);
} else {
error.insertAfter(element);
}
}
})
Thanks
I stumbled upon this question while searching for fix for same issue.
The problem arises from fact, that Bootstrap hides original select element and creates it's own elements to handle UI for dropdown list. In the meantime, jQuery validation by default ignores invisible fields.
I fixed this with workaround which combines changing validation ignore list and finding parent form. Final code snippet in my case looks like this
if ($(".selectpicker")[0]) {
$(".selectpicker").selectpicker();
$('.selectpicker').parents('form:first').validate().settings.ignore = ':not(select:hidden, input:visible, textarea:visible)';
}
There still could be potential issues, but for my needs this solution works good enough.
The problem is caused by the display:none property given from bootstrap select skin to the original select (jQuery validate ignores hidden fields).
It could be avoided working only with CSS keeping back visible the original select but giving it some properties to avoid visibility
select.bs-select-hidden, select.selectpicker
{
display:block !important; opacity:0; height:1px; width:1px;
}
I guess, editing of bootstrap-select.js may solve this issue permanently.
I have tried something like this:
$(document)
.data('keycount', 0)
.on('keydown.bs.select', '.bootstrap-select [data-toggle=dropdown], .bootstrap-select [role="listbox"], .bs-searchbox input', Selectpicker.prototype.keydown)
.on('focusin.modal', '.bootstrap-select [data-toggle=dropdown], .bootstrap-select [role="listbox"], .bs-searchbox input', function (e) {
//Validation handler: Kartik
var $thisParent = $(this).parent(".bootstrap-select");
if ($thisParent.find("ul").find("li:first").hasClass("selected")) {
if ($thisParent.next("span").length > 0)
$thisParent.next("span").css("display", "block");
}
else {
if ($thisParent.next("span").length > 0)
$thisParent.next("span").css("display", "none");
}
e.stopPropagation();
});
Its working fine to me.
i cant get the issue in my code , every thing working proper but issue is that when user click or focus first time on textbox correct img show .. this is incorrect but i cant solved this problem when user typing then after completing wher user correct type then show otherwise not shown . can any one help me regarding this issue . my complete jquery and html or css code are available in this link pls check and solved my issue
my code link
i think error on this function but icant get the issue
$('#step1 #fName').focus(function(){
if($('#step1 #fName').hasClass('error_Aplha')==true)
{
$('#step1 #fntick').removeClass('block');
}
else {
$('#step1 #fntick').addClass('block');
}
}).blur(function(){
if($('#step1 #fName').hasClass('error_Aplha')==true)
{
$('#step1 .fname_error').fadeIn(100).delay(2000).fadeOut(1000);
$('#step1 #fntick').removeClass('block');
}
else {
$('#step1 .fname_error').removeClass('block');
$('#step1 #fntick').addClass('block');
}
});
thanks in advance
Wow, that's a lot of code for a simple task. Change it so the checks are only done in the .keyup() and .blur() events of the INPUT elements.
Not 100% sure what the intended behaviour is, but this will probably get you going:
$(document).ready(function(e) {
var errorAlpha = function() {
var reg = /^([A-Za-z]+)$/;
var check = $(this).val();
if (reg.test(check) == true && check.match(reg) != null) {
// VALID
$(this).removeClass('error_Aplha');
$(this).next('img').addClass('block');
$(this).prevAll('span.tooltip2').stop(true).delay(500).fadeOut(400);
} else {
// INVALID
$(this).addClass('error_Aplha');
$(this).next('img').removeClass('block');
$(this).prevAll('span.tooltip2').fadeIn(500).delay(2000).fadeOut(1000);
}
};
$('#step1 #fName, #step1 #lName').on('keyup blur', errorAlpha);
});
Demo: http://jsfiddle.net/gU3PU/6/
anyone know how to open a tooltipDialog from extlib using parameters.
in csjs I find all links in a webapage and bind them to mouseover. using a key in the link I know which link is clicked, I want to send this key to the toolTipDialog so that I can use that to find the document and display document data in the tooltipDialog.
Currently the only way I have found to open a tooltip dialog is by using XSP.openTooltipDialog("tooltipid",'linkid') which does not seem to allow parameters.
any ideas how to resolve this
Hows this?
require(["dijit/TooltipDialog", "dijit/popup",
"dojo/on", "dojo/dom", "dojo/_base/lang"],
function(ready, TooltipDialog, popup, on, dom, lang){
var myTooltipDialog = new TooltipDialog({
id: 'myTooltipDialog',
style: "width: 300px;",
contentTemplate: "<p>Key is: {key}</p>",
content: 'empty',
onMouseLeave: function(){
popup.close(myTooltipDialog);
},
onOpen: function(pos) {
this.set("content", lang.replace(this.contentTemplate, this.replaceObject));
}
});
/
query('a.hasSelectorClass').on('mouseover', function(){ //
myTooltipDialog.replaceObject = { //
key : this.innerHTML // (inner text in anchor node)
}
popup.open({
popup: myTooltipDialog,
around: this // anchor
});
});
});
Try it and tell if any errors (untested code) :)