Is it possible to create field in form layout that's initially hidden (completely, including field label)?
I don't want to call cmp.getEl().up('.x-form-item').setDisplayed[1] for these fields after rendering because it causes flicker and other “effects”.
[1] as I know that's the only way to hide form field including label.
You can setup the form field's xtype to hidden. So, you'll have something like this:
{
id:'my_field_id',
name: 'my_field_name',
xtype: 'hidden'
}
You can add the field like this:
Ext.getCmp("myFormPanel").add({
id:'my_field_id',
name: 'my_field_name',
xtype: 'textfield'
});
Ext.getCmp("myFormPanel").doLayout();
And remove it like this:
Ext.getCmp("myFormPanel").remove(Ext.getCmp("my_field_id"));
Ext.getCmp("myFormPanel").doLayout();
I hope this is what you want.
Sure, create a CSS class in your document with either (depending on your needs) 'display:none' OR 'visibility:hidden'. Call this class, say, 'invisible-class'.
Create another class with either 'display:block', 'display:inline' OR 'visibility:visible' and call this class say, 'visible-class'.
For the form field you wish to be invisible when its rendered you would set its 'cls' property to 'invisible-class', i.e.:
cls:'invisible-class'
And when you want the field to be visible, use the method:
addCls('visible-class')
ALTERNATIVELY- when you want to make the item visible use the method:
removeCls('invisible-class')
i.e. mycomponent.removeClass('invisible-class')
Hope this helps!
A simpler method if you just need to hide this single field and its field label would be to create a separate label object for it. It might be easier to just hide the label instead of deal with the CSS to hide the fieldLabel.
You might be able to add a listener to the render event of the layout managing panel to do something like this...
var cmp = Ext.getCmp(fieldID);
if((cmp.hidden) && cmp.previousSibling() != null)
&& (cmp.previousSibling().xtype =='label'){
cmp.previousSibling().hide();
}
Related
I currently have a form that is displaying fields that I do not want it to. There are 3 input fields associated with one form and the same form is being rendered multiple times.
I have my template set up to check for when this was only one value. I need to change it so the template will check for all of the values present & then decide to render.
So for example,
I have,
Div_id_form-0-x,
Div_id_form-0-y,
Div_id_form-0-z,
Div_id_form-0-location__location_category__requires_coordinates
What selector can I use to grab all of these to use in my template?
I need to grab them for each form. Where it says form-0 I have several of these forms repeating.
Then in HTML I have something like this.
$(function () {
// Determine weather we are in a modal window.
var context = $("#{{ contextId }}-form");
console.log("this is the {{ contextId }}" )
// Show required coordinates if location category requires them.
context.find("#id_location__location_category__requires_coordinates").change(function () {
if (context.find("#id_location__location_category__requires_coordinates").val() == 'Y') {
context.find('#id_needs_coordinates').removeClass('hide');
} else {
context.find('#id_needs_coordinates').addClass('hide');
}
});
});
Right now this is only checking for one value to determine whether to hide. I need it to check all of these for this value. Which is why I'm looking for a Jquery selector that can do such.
If you want a selector for IDs, you can use:
$("#Div_id_form-0-x, #Div_id_form-0-y, #Div_id_form-0-z, #Div_id_form-0-location__location_category__requires_coordinates")
Please see: https://api.jquery.com/id-selector/
Update
In the future, please clarify the entire issue and provide a proper example.
You can use the Attribute selectors.
$("[id^='Div_id_form-']")
This will select all IDs like:
Div_id_form-0-x
Div_id_form-1-x
Div_id_form-2-x
You will then select all of those elements.
See More: https://api.jquery.com/category/selectors/attribute-selectors/
In my view model I have a field. This field can be selected from a drop down list or entered in a textbox. I have two radio buttons which allows to select between drop and textbox.
<div class="frm_row" id="contractorRow">
#Html.RadioButton("IsContractorNew", "false", true)
#Html.Label(#Resources.SomeLabels.Existing)
#Html.RadioButton("IsContractorNew", "true", false)
#Html.Label(#Resources.SomeLabels.New)
<div class="frm_row_input" id="contractorDropDownList">
#Html.DropDownListFor(model => model.CONTRACTOR, Model.Contractors)
#Html.ValidationMessageFor(model => model.CONTRACTOR)
</div>
<div class="frm_row_input" id="contractorTextBox" style="display: none;">
#Html.TextBoxFor(model => model.CONTRACTOR)
#Html.ValidationMessageFor(model => model.CONTRACTOR)
</div>
</div>
I prepared a javascript code for hiding, showing and clearing controls while selecting radio buttons. The problem is - field is bound only to the first control (drop down list).
EDIT:
I solved this problem by creating one hidden field and scripting whole logic to bind active control with it and therefore with the model. Anyway if anyone knows simpler solution, please post it.
I know this is an old question, but for those dealing with this issue, here's a solution:
Explanation
When a form is submitted, input elements are bound to the model by their name attribute. Let's say you use HTML helpers to generate your form, and you generate two input fields which bind to the same property on the model. When rendered to the DOM, they both have the same name attribute.
<input name="Passport.BirthPlace" id="birthPlaceDropDown" ... >
<input name="Passport.BirthPlace" id="birthPlaceInfoTextbox" ... >
When the form is submitted, it will bind the first (in the DOM) input it finds to Passport.BirthPlace
A Solution
The quick and easy way to fix this is to use JQuery to change the name of the field you don't want bound on submit. For me, I use a checkbox to toggle which field shows. When the checkbox changes, I hide one control, change its name attribute, and show the other one (and change it's name attribute to Passport.BirthPlace) It looks like this, basically:
First, I run this on document ready
$('#birthPlaceInfoTextbox').attr('name', 'nosubmit'); // Change name to avoid binding on inactive element
Then, I create a listener for my checkbox which toggles which control should be bound:
$('#notBornUSCheckbox').change(function() {
if (this.checked) {
// Not born us was checked, hide state dropdown and show freeform text box
$('#stateDropDownSection').addClass('d-none'); // Hide drop down
$('#birthPlaceDropDown').attr('name', 'nosubmit'); // Change name to something other than Passport.BirthPlace
$('#birthPlaceInfoTextbox').attr('name', 'Passport.BirthPlace'); // Set this one to be bound to the model
$('#stateTextboxSection').removeClass('d-none'); // Show the textbox field
} else { // Opposite of above lines
$('#stateDropDownSection').removeClass('d-none');
$('#stateTextboxSection').addClass('d-none');
$('#birthPlaceInfoTextbox').attr('name', 'nosubmit');
$('#birthPlaceDropDown').attr('name', 'Passport.BirthPlace');
}
});
Instead of using Razor #Html.TextBoxFor... for your textbox, you could try using raw HTML e.g. <input />. Also, have your JavaScript code remove the other field from the DOM entirely when a radio button is clicked, before submitting the form.
i am adding textfields dynamically as
var input = $('<input class="EditorFields" id="textfield"/>');
$(input).igEditor({
width: 140,
required:true
});
this is working fine.
But when i am trying to add listItems property then its not working.
$(input).igEditor({
width: 140,
required:true,
listItems : ["red","blue","yellow"]
});
i do not want to change the base element to select.
Please help.
First things first - the Ignite UI jQuery API docs state that the button option defaults to none - if you want to have a drop-down add this:
button : "dropdown",
Why this still won't work? Dynamically adding dynamic controls is tricky sometimes if you don't know them in great detail. Same for jQuery, it's a common thing people miss - jQuery creates items in a document fragment so you need to be careful how you append them to the DOM.
When you provide an INPUT element and request a complex editor, the control's additional items (buttons, drop-down, validation messages, etc.) are built around that input and the whole thing wrapped in a container SPAN. Because you refer to the input and it works the first time I assume you attach it directly. Basically when you create a complex editor and only afterwards attach to eh DOM using the same input reference you are leaving all the extra markup stuck in the document fragment.
I can think of about 3 ways to get this to work, you pick what suits best yopur needs:
1) Append item first so the Editor can properly initialize in the DOM afterwards:
var input = $('<input class="EditorFields" id="textfield"/>').appendTo("body");
2) Povide the container, instead the input if possible:
var input1 = $('<span class="EditorFields" id="textfield1"/>');
3) Select the parent when you know you have one and append it instead:
$(input2).igEditor({
width: 140,
required: true,
listItems: ["red2", "blue2", "yellow2"],
button: "dropdown"
}).parent().appendTo("body");
Here's a JSFiddle with all of those: http://jsfiddle.net/damyanpetev/ZRqb2/
I am using a plugin in Wordpress (taxonomy-picker) that allow me to search by multiple taxonomies.
I want to change two of the items that are "multiple" to flat type but I have to do this dynamically.
So right now I have for example:
<select name="bebida[]" multiple=""><option value="bebida=tp-all">Todos</option><option value="bebida=batidos" class="parent">Batidos</option><option value="bebida=cervezas" class="parent">Cervezas</option><option value="bebida=cervezas-importacion" class="parent">Cervezas Importación</option><option value="bebida=cocktail" class="parent">Cocktail</option><option value="bebida=copas" class="parent">Copas</option><option value="bebida=copas-premium" class="parent">Copas Premium</option><option value="bebida=gin-tonic" class="parent">Gin Tonic</option><option value="bebida=licores" class="parent">Licores</option><option value="bebida=vinos" class="parent">Vinos</option><option value="bebida=zumos" class="parent">Zumos</option></select>
That is created dynamically and I want to delete the multiple="" attribute in order to make them flat only for some of the selects that only have a "name" but not a class.
Is posible to do this??
Also I am not sure of how can I add a different class only to the attributes I want.
So I want to know how can I add a class with the name I want and delete multiple attr to ONLY the selects I want dynamically.
So for example I want to say something like:
"If select name is "bebida[]" add class "bebida" and delete the attribute multiple" and also "If the select name is "ambiente[] add class "ambiente" (but no delete anything)."
I am trying something like this to delete the multiple selector but looks like is not working:
$("select[name='localizacion[]']").removeAttr('multiple');
Thank you so much.
Edited with more information
WordPress ships with jQuery, so (inside document.ready):
$('select').each(function() {
if ( $(this).attr('name') == "bebida[]" && $(this).attr('class') == "bebida" ) {
$(this).removeAttr('multiple');
}
});
Syntax probably isn't dead on, but you get the idea.
jqGrid colModel contains read-only multi line column defined using properties below.
Content line lenghts are greater than column width, text is to long so that tooltio does not show its whole content. It is not possible to see whole content.
I'm looking for a way allow user to see whole column content.
For example, if edit form button is pressed, this column content should de displayeid in edit form as readonly textarea.
However, readonly columns does not appear in edit form.
How to allow user to see whole column content ?
colModel: [{
"name":"LoggedLongText",
"editable":false,"width":539,
"classes":"jqgrid-readonlycolumn","fixed":true,
"hidden":false,"searchoptions":{"sopt":["cn","eq","ne","lt","le","gt","ge","bw","ew","nc"]}}
}]
Is the setting
editable: true, editoptions: { readonly: "readonly" }
probably what you need?
UPDATED: Free jqGrid supports more values for editable property starting with version 4.8. The wiki article described that editable can be function and it supports additionally three string values in case of using form editing: "hidden", "disabled" and "readonly".
To show readonly fields you might try using the "disabled:disabled" inside editoptions.
Yet another option is to use a custom element type that returns a span as below:
colModel: [
...
{name:'price', ..., editable:true, edittype:'custom', editoptions:{custom_element: myelem, custom_value:myvalue} },
...
]
..
function myelem (value, options) {
var el = document.createElement("span");
$(el).val(value); // be sure to escape special characters as necessary.
return el;
}
function myvalue(elem, operation, value) {
// just reutrun null or empty string.
return "";
}
I prefer this over using "readonly:readonly", because the readonly option wraps an input control around the cell value, the input control still receives focus, which I think is misleading to the user. Using "disabled:disabled" keeps the input element from receiving better, which is slightly better, in terms of usability.
Using a span is much better. Interestingly, jqGrid sends even "unsuccessful" form controls to the server.
Hope this helps.
-- jqr
To show readonly fields on EditForm, you must try using the {readonly: true} property inside editoptions for a jqGrid column and will work.