Editing Value of X-Editable Field When EditableForm Opens - javascript

I've currently got a list of editable datepicker fields like this:
05/01/2018*<br>
05/03/2018*<br>
05/10/2018*
Now, when I click on these fields, the datepicker field itself is blank. That's because the value of each element with the * cannot be parsed into a date and therefore it just shows empty in the field.
How can I sanitize this value BEFORE editing the field so that the date is shown in the editable form text box?
I've tried the below using the value option of the editable field:
value:function(input) {
return $(this).text().replace(/\*/g, '');
},
However, that does not work and in fact causes the editableform to fail completely (no editableform loads).
Any ideas? Thanks!

It's unrelated to what I'm trying to do exactly, however, I found this question here: xeditable defaultViewDate option for datepicker doesn't work
That led me to the data-value attribute which allows the explicit value of that editable to be set in the HTML. After finding that answer, I noticed this attribute mentioned in the X-Editable documentation, but it's mentioned pretty inexplicitly, so it's extremely easy to miss.
I changed my html so that it became the following and this is working for me.
05/01/2018*<br>
05/03/2018*<br>
05/10/2018*

Related

Angular - How disable a field keeping the value

Good night guys, I have a very simple angular question. I have a form, it has a specific field that I set the value for a patch value but at the same time I need to disable this field. However after the disable, the value is not sent to the back end to be inserted anymore. I've done the test and I saw that only with the patch value, the value is sent normally and inserted in backend normally, but when I disable it, it loses the value and is not sent to the back, I already tried onlyself but I didn't succeed , I would like your help if possible, thanks for your attention. Ah I know that html disable works, but I would like to know if there is any way for me to do this in typescript by disabling the field in the form.
iniciarSituacaoCadastro(){
if(this.visualizar){
this.formPesquisar.controls['address'].patchValue(Address.ATIVO);
this.formPesquisar.controls['address'].disable({onlySelf: true});
}
}
Use getRawValue() instead of value.
https://angular.io/api/forms/FormGroup#getRawValue
getRawValue() retrieves all values regardless of disabled status. The
value property is the best way to get the value of the group, because
it excludes disabled controls in the FormGroup.

Validating text input - bug in implementation

I've encountered a user interface issue with validation I really want to solve. For the website: http://fun-booths.co.uk/dev/
I'm using this simple plugin for validation: http://www.formvalidator.net/
The simple code behind this is as follows:
$.validate({
form : '#fscf_form1, #fscf_form2',
validateOnBlur : true,
scrollToTopOnError : false
});
The validateOnBlur property makes sure validation occurs when inputs loose focus.
There is a form in the right hand sidebar. When selecting a date and time the validation is not functioning correctly.
Fill out the town/city and postcode fields with the correct test data format for example. You will notice a green tick dynamically appear. Now for the date and time fields an end user does not actually type, the input is given to the form field by clicking on the responsive time picker / date picker respectively.
After selecting a date and time and focusing on other input elements this results in the following issue (even though a value has been selected a red cross is presented in the form field which is not desired behaviour.):
I believe this issue is stemming from the fact that the user does not actually enter text into the time or date fields. So the validation does not detect that actual text has been entered into the form.
Note: A strange behaviour is that a green tick does appear on the date/time fields if a value is chosen, then the same input is selected/given focus again.
Is there a JavaScript/jQuery solution that could fire with an event listener to solve this issue and ensure a green tick appears? Or would textual input need to physically be typed in to the date/time fields.
Try this hack, should work :
$('.picker__input').on('change', function(){
$(this).focus();
})
Hope this helps.
You are doing two plugins to work together. Try to give a callback to pickadate asking to reprocess the field:
$('#fscf_field2_12').pickadate({
//... add this parameter
onClose: function() {
$('#fscf_field2_12').blur();
},
//... or this one
onSet: function() {
$('#fscf_field2_12').blur()
}
})
You can also check the validateOnEvent method from jQuery-Form-Validator.

Unexpected JS behavior when clearing input field value - STCombobox

I am using some JQuery Combobox that you can check out here: https://simpletutorials.com/uploads/1860/demo/index.html
As you can see, you can start typing and get the results filtered.
However, once you have selected a value, when clicking on the arrow to open the list, no other values are shown anymore. So, if I want to change college/state, I need to manually clear the input value. I don't like this, so I want to modify it.
I changed that code and added this JS on the click event of the list:
onclick="document.getElementById('statesCombo-ddi').value='';"
This line basically finds the input by id and sets its value to an empty string.
You can try out by looking for the td element having class "stc-button" (with Chrome, just focus on the arrow of the second combo box) and add my code to the tag.
===EDIT===
You can obtain the same results by adding this code directly to the input:
onclick="this.value=''"
===END EDIT===
This has a weird behavior:
If I SELECT an element from the list, it clears the value and everything works correctly.
If I TYPE some letters and then select a value from the list, no item is shown in the list after clicking.
What's wrong with it?
You can override one of the combo box methods to accomplish this:
STComboBox.prototype.filterAndResetSelected = function() {
this.$('ddi').val('');
this.filterList('');
this.selectRow(0);
this.$('ddl').scrollTop(0);
};
Does this help?
The unminified code is provided, is relatively small (12kb) and is fairly well commented, so you could make this modification directly to the source if you'd like.
Edit: Fixed to clear the input value (as indicated in the comment below)
By reading the source and doing a little debugging with Chrome's inspector (Control+Shift+i), you can find the particular ID of the element you need to clear (#collegesCombo-ddi) in order to clear the input box. Once you've found the element's ID you need to clear (and being very careful with plugins that assign multiple elements with the same ID, which is not allowed in the standard, and an indicator of poorly-written code):
$('#collegesCombo-ddi').val('');

Set Value of Hidden Field in SharePoint using jQuery

I am able to set the value of a site column (field), using jQuery, when it is not hidden using this:
$("select[Title='MyID']").val(MyRelatedID);
However, once I hide the field it doesn't work. I inspected the code and it looks like SharePoint hides it from the source code as well. I am opening the list containing the fields in a modal. Has anyone be able to set the hidden value of field?
I usually use this approach:
To set the value:
$('input[title="MyID"]').attr("value",MyRelatedID);
To hide the field:
$('input[title="MyID"]').parent().parent().parent().css("display","none");
I documented the complete approach here.

How to disable Sharepoint textbox?

I am trying to disable a textbox in SharePoint WSS3 and force a specific value (given by another JavaScript function) but I can't seem to find the right way of doing it. I have come across different issues. Let's say I have a normal single line text value named prova and another one named Description. Description is required, prova is not.
First Issue: If the field IS required, even if there is something in the textbox, SharePoint says otherwise and does not allow me to insert the entry.
$(document).ready(function(){
//var value = someFunction(...);
var value = "test";
$("input[title='Description']").attr("disabled", "disabled");
$("input[title='Description']").val(value);
});
Second Issue: If the field IS NOT required SharePoint doesn't say anything but it inserts a blank value instead of the one given.
$(document).ready(function(){
//var value = someFunction(...);
var value = "test";
$("input[title='prova']").attr("disabled", "disabled");
$("input[title='prova']").val(value);
});
I have a feeling that tells me that there is some kind of SharePoint JavaScript function somewhere that listens for KeyUp or something. I have really no idea what to do now...
EDIT: It looks like the problem is related to disabling the textbox, if I comment the line where I disable the textbox it works in both scenarios. Maybe if I catch the insert request I can re-enable the textbox before SharePoint do the actual post. No idea how to do it though...
Your problem really is related to disabling the textbox first. By default disabled textboxes are not contained in the POST request in IE.
See this post: Disabled form inputs do not appear in the request or this one: how to save data by disabled text box?
What you actually want to do is set the readonly attribute of the field, not disable it (readonly="readonly"). The problem with that is that the readonly state sometimes looks the same as the default state, so you also have to add some CSS to make it look greyed out.

Categories

Resources