well I have this code in a view
<Picker id="picker1" selectionIndicator="true" class="picker">
<!-- Picker shorthand notation -->
<Column id="column1" class="column">
<Row title="option1" />
<Row title="option2" />
<Row title="option3" />
</Column>
</Picker>
and I have been trying to change the rows on the controller, since I receive different options from the server, lets say for example:
( option4, option5, option6 )
I tried adding a row to the picker like this:
$.column1.addRow(Ti.UI.createPickerRow({title:'option4'}));
and had no success too, looking through the forums on appcelerator it wasn't possible before titanium SDK 5.1.0 GA to dynamically update the picker, but on another topic I've read that it is possible to do it but you have to reload the picker, so I tried it, but no success
var picker = $.picker1;
var column = $.column1;
column.addRow(Ti.UI.createPickerRow({title:'option4'}));
picker.reloadColumn(column);
how should be the right way to do it? adding a row and removing others, that is my question.
I am testing on an iphone(9+) and android(5+), using the Titanium SDK 5.1.2GA.
Solved, it was just a mistype, sorry, but you need to reload the column, or else it will not work.
var picker = $.picker1;
var column = $.column1;
column.addRow(Ti.UI.createPickerRow({title:'option4'}));
picker.reloadColumn(column);
Related
I got massive headache getting an international number input with intl-tel-input and webform
I got the documentation here : https://github.com/jackocnr/intl-tel-input
Mentioning that I can get a international number using the "separateDialCode".
separateDialCode
Type: Boolean Default: false
Display the country dial code next to the selected flag so it's not part of the typed number. Note that this will disable nationalMode because technically we are dealing with international numbers, but with the dial code separated.
However only a national number is posted.
Here my code included into CSS / JavaScript configuration of my webform.
Drupal.webform = Drupal.webform || {};
Drupal.webform.intlTelInput = Drupal.webform.intlTelInput || {};
Drupal.webform.intlTelInput.options = {
preferredCountries: ['fr'],
separateDialCode: true,
autoPlaceholder: "aggressive",
formatOnDisplay: true,
};
I got the separate code showing, validation working, but no international code store inside the input of my form.
I did try the hiddeninput but I do not inderstand the logic to store the full number in an hiddenInput option, if it's already managed by the librairie :(. Same with forcing nationalMode:False.
On this picture the only result I get is "782828282", and not "+33782828282"
Anyone ?
Cheers,
I have used in following format, example is based on what i am doing
<div class="row">
<asp:Label ID="lblPhone" CssClass="lbl" runat="server" Text="Telephone *">
</asp:Label><asp:TextBox ID="txtPhone" CssClass="rg-txt rg-phone-txt" runat="server"></asp:TextBox>
<asp:TextBox ID="txtCountryCode" style="display:none;" Text="" runat="server"></asp:TextBox>
<asp:CustomValidator ID="cvPhone" ErrorMessage="*" CssClass="validate v-phone-txt" ClientValidationFunction="ValidatePhone" ValidationGroup="vg" runat="server" />
</div>
$("#MainContent_txtPhone").intlTelInput({
preferredCountries: ['us'],
utilsScript: "../../Scripts/libphonenumber/utils.js"
});
setTimeout(function () {
$("#MainContent_cvPhone").appendTo(".intl-tel-input");
}, 5000);
during form validation i assign value of country to txtCountryCode $("#MainContent_txtCountryCode").val(country);
From code behind i get both country code & phone number on frontend i only show Country Flag + Phone number.
hope this helps, I had issue running this script as i am using Master Page and script if not place in right place doesn't work properly. if you are not using Master Page approach then it should not be that much of an issue.
I dont remember if i had similar issue as you are facing as i didnt this job almost 2 years back
I've an issue with ReferenceArrayInput that I try to use for a group membership representation.
Here the code related to a group editing UI
export const UserGroupEdit = (props) => (
<Edit title={<UserGroupTitle />} {...props}>
<SimpleForm>
<TextInput label="Common Name" source="commonName" />
<TextInput label="E-mail" source="email" type="email" />
<TextInput label="Shortname (UNIX purpose)" source="shortname" />
<ReferenceArrayInput label="Members" source="members" reference="users">
<SelectArrayInput optionText="fullName" />
</ReferenceArrayInput>
<DisabledInput label="Record UUID" source="id" />
<DisabledInput label="Record ID" source="numericID" />
</SimpleForm>
</Edit>
);
I've two issue.
First, if the related property in the represented object is empty, the UI does not display the input field. It show the title of the field, a whitespace with no input possible and the next one. When I pass the mouse over the whitespace, I get the same icon attached to the mouse as a DisabledInput, the forbidden sign.
Second, if there is already one value, I can add new one, I've the text input available and the autocompletion is working well. However, once I select one value to add, it immediately disappear. It does not stay in memory until the save or cancel action.
And if in the second case, I remove existing values, they get properly removed and once I remove everything I'm back to the first issue.
Is there something I'm doing wrong?
About your first issue, you can try to add a allowEmpty prop to your ReferenceArrayInput :
<ReferenceArrayInput label="Members" source="members" reference="users" allowEmpty>
It's a bug indeed. This issue has been fixed on master which will be released soon as version 1.4.0.
I have a kendo ui listview with a template the conditionally hides elements based on the underlying data. An example would be as follows:
<script type="text/x-kendo-template" id="template">
<div class="product">
<img src="../content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" />
<h3>#:ProductName#</h3>
<p>#:kendo.toString(UnitPrice, "c")#</p>
<div>
# if (Discontinued) { #
Discontinued Product
# } #
</div>
</div>
</script>
If i modify the underlying dataSource items to set Discontinued with the following code:
data[index].set('Discontinued', true);
If the index is the currently selected item then that item looses focus and is no longer selected.
Please see the following dojo example http://dojo.telerik.com/UlOze, select an item from the list and then set it to discontinued.
Has anybody found a solution / workaround for this issue ?
Thanks.
------------- FINAL SOLUTION --------------
Following on from dimodi's answer below I pieced together the solution.. For this to work the dataSource must have the schema -> model -> id property set.
1st capture the currently selected data item:
var selectedItem = $(listElement).find(".k-state-selected");
var selectedDataItem = list.dataItem(selectedItem);
2nd: After calling .set re-find the data item and set the k-state-selected class. This is nessesary as the list component is regenerating the uid's.
if (selectedDataItem) {
var newSelectedItem = list.dataSource.get(selectedDataItem.ProductID)
var uid = newSelectedItem.uid;
jQuery("[data-uid='" + uid + "']").addClass("k-state-selected");
}
I've updated the original dojo to show this solution, incase it helps someone else.
When a data item is changed, its corresponding ListView item is re-rendered to apply the changes. As a result, the selection is lost, as it is a purely visual feature that is not persisted across rebinds. You can check if an item is selected before using set() and then restore the selection manually by applying a k-state-selected class to the element afterwards.
I've followed this Tutorial to add a custom field to the article content type and I was successful to make a new one with adding the following code:
In File : root/administrator/components/com_content/models/forms/article.xml
Code :
<field name="newText" type="editor" class="inputbox"
label="COM_CONTENT_FIELD_ARTICLETEXT_LABEL"
description="COM_CONTENT_FIELD_ARTICLETEXT_DESC"
filter="ContentHelper::filterText" buttons="true" />
In File : root/administrator/components/com_content/views/article/tmpl/edit.php
Code :
//Our new textbox
<div class="clr"></div>
<label>Article Text - New Text</label>
<div class="clr"></div>
<?php echo $this->form->getInput('newText'); ?>
and altered Database to add a new column for that new field.
ALTER TABLE 'j_content' ADD 'newText' VARCHAR( 255 ) NOT NULL;
On Article posting the data is successfully getting stored in Database.
The new custom field is visible when I'm posting a brand new article. But when I'm editing/updating the same new post, that newly added field is missing.
Is there a way to get this field even when we are editing the post/article.
Please, never overwrite core files or change the core database! This is not a good tutorial because it is not update-safe.
If you need additional fields for your content items, use a special core extension for this instead.
I recommend this one:
http://fieldsattach.com/. This method is update-safe.
I have a main.mxml application that lays out my application, it contains a "browse and upload" button. And contains an image to view the users uploaded image like so:
<mx:Application
<mx:Script>
<![CDATA[
import model.myModel;
import control.myControl;
// Create data model
public var model:myModel = new myModel();
//[Bindable]
//private var scld_img:Bitmap;
// Create control
public var mycontrol:myControl = new myControl(mymodel);
</mx:Script>
<!-- Upload and view -->
<mx:Canvas id="upload" label="1: Upload Image">
<mx:VBox>
<mx:HBox>
<mx:Label text="Upload an image: "/>
<mx:Button id="btn"
label="Browse and preview..."
click="mycontrol.browseAndUpload();"
buttonMode="true"
useHandCursor="true"/>
</mx:HBox>
<mx:Image id="mximg_upld"
verticalCenter="0"
horizontalCenter="0"
source="mymodel.img_scld_bm"/>
</mx:VBox>
</mx:Canvas>
......
In my myModel class I have a img_scld_bm that the browseAndUpload() function draws into after scaling it.
My intent is that my mx:Image will display the image. As shown here I'm assigning the image source="mymodel.img_scld_bm", this ends up just showing a broken image icon.
I also tried data binding, where in my myModel class I have [Bindable] var img_scld_bm. And then tried setting my mx:Image source="{myModel.img_scld_bm}" .. that didn't seem to do anything either. All this compiles fine, no warnings. I think in this case, I'm not setting a trigger or propertyChange event to update the binding?
Can someone help me understand, or provide an example of how to correctly bind an mx:Image source to some bitmap??
From the code you've given, it looks like you need to do two things:
Wrap the source with curly brackets.
Set the property img_scld_bm in the model class. Bindings will only execute if you set the property; it looks like you may be drawing into the img_scld_bm that currently exists, but this won't cause the image to update.
Convert this:
<mx:Image id="mximg_upld" verticalCenter="0" horizontalCenter="0" source="mymodel.img_scld_bm"/>
To this:
<mx:Image id="mximg_upld" verticalCenter="0" horizontalCenter="0" source="{mymodel.img_scld_bm}"/>
Then any time you make changes to the img_scld_bm in the model, reset the image.source.
Does that work?