I'm trying to make a SAPUI5 Input have live suggestions when the user types.
<Input id="modeloInput" type="Text" maxLength="20" editable="true" required="true"
showValueHelp="true" submit="onModeloSubmit" suggest="onSuggest" suggestionItemSelected="handleSuggestionModelo" showSuggestion="true" startSuggestion="3" suggestionItems="{ModeloVH>/ItemsTableFiltered}" valueHelpRequest="handleModeloValueHelp"
value="{ path: 'SearchModel>/modelo', type: 'sap.ui.model.type.String', constraints: { minLength: 4, maxLength: 20} }" textAlign="End">
<layoutData>
<l:GridData span="L4 M4 S4"/>
</layoutData>
<suggestionItems>
<core:Item key="{ModeloVH>Zprodh}" text="{ModeloVH>Zvtext4o}" />
</suggestionItems>
</Input>
In my controller:
{
onSuggest: function (oEvent) {
var text = that.inputModelo.getValue();
that.getView().getModel("ModeloVH");
var suggestionModel = that.getModeloHelpModel();
var items = suggestionModel.getData().ItemsTable;
var filteredItems = items.filter(item => item.Zvtext40.startsWith(text));
suggestionModel.setProperty("/ItemsTableFiltered", filteredItems);
suggestionModel.setProperty("/ItemsTableFiltered",items);
that.inputModelo.setModel("ModeloVH",suggestionModel);
that.inputModelo.setModel(suggestionModel, "ModeloVH");
var bindingSuggestionItems = oEvent.getSource().getBinding('suggestionItems');
that.inputModelo.getModel("ModeloVH").refresh(true);
}
}
If I look at the suggestionItems binding, it has the results:
the suggestions popup doesn't fire:
I get all the data on the onInit method.
Can't make the suggestion popup fire.
Any suggestions?
Thanks.
As a quickfix,
I found that I can add items programmatically:
addItemToSuggestion: function(input, key, text) {
input.addSuggestionItem(
new sap.m.SuggestionItem({
key: key,
text: text
})
)
},
On the onSuggest event, iterate through the results list and call the function:
filteredItems.forEach(item => that.addItemToSuggestion(that.inputModelo, item.Zprodh, item.Zvtext40));
Hope this helps.
Related
I have the following dropdownlist in my view:
#{
var listado = new List<SelectListItem>()
{
new SelectListItem()
{
Text ="YES",
Value ="1"
},
new SelectListItem()
{
Text = "NO",
Value = "2"
}
};
}
<div class="form-group">
<label class="control-label">Is it True ?</label>
#Html.DropDownList("miDropDownList",listado)
</div>
I want to get the selected value 'YES' or 'NO' to do something in the controller like so:
IActionResult ControllerAction(){
var theValue = dropdownList.SelectedValue //this is pseudocode syntax but you understand I want to get
//the value
// with the value I will do something like this:
User userinstance = new User {
Id = 1,
Name = "john",
isJohnTall = theValue.Value
}
}
I want something simple in other answers I've seen DropDownLists that are bound to models, but I just want to get strings selected in the dropdown and be able to do something with them in the controller.
You can use JQuery with ajax.
Something like this:
<div class="form-group">
<label class="control-label">Is it True ?</label>
#Html.DropDownList("miDropDownList", listado, new { #onchange = "GetYesOrNo()"})
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script>
function GetYesOrNo() {
var selectElement = document.querySelector('#miDropDownList');
var option = selectElement.value;
$.ajax({
url: '/Home/GetYesOrNo',
type: 'GET',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
mimeType: 'text/html',
data: { getOption : option },
success: function (returnValue) {
alert(returnValue);
}
});
};
</script>
And in Home Controller, add this JsonResult:
public JsonResult GetYesOrNo(int getOption)
{
if (getOption == 1) return Json("Option: YES");
return Json("Option: NO");
}
You can use a form to submit your data.
The form will submit Value, so you can modify your value as Text.
You can change your code like below.
View:
#{
var listado = new List<SelectListItem>()
{
new SelectListItem()
{
Text ="YES",
Value ="YES"
},
new SelectListItem()
{
Text = "NO",
Value = "NO"
}
};
}
#using (Html.BeginForm("GetYesOrNo", "User"))
{
<div class="form-group">
<label class="control-label">Is it True ?</label>
#Html.DropDownList("miDropDownList", listado)
</div>
<button type="submit">Find</button>
}
Action:
public IActionResult GetYesOrNo(string miDropDownList)
{
//.....
return View();
}
Test result:
And how to bind to the model with dropdownlist,you can see my this reply,it may helpful.
I'm creating a form using vue.js and I need to create inputs in vue that is always capitalized. I know I could use the css property
text-transform: uppercase;
and then transform the data before sending using
data.someData.toUpperCase()
But I wonder if there is a more intelligent way of doing that in vue.js. In react we can create controlled inputs and easily do it. Is there anything like that in Vue.js?
I managed to do it using computed fields, however, I would have to create computed getter and setter for each input in the form. Is there a better way of doing it?
You could create a custom directive.
Vue.directive( 'touppercase', {
update (el) {
el.value = el.value.toUpperCase()
},
})
And then use it where you need. For example:
<input type="text" v-model="modelfield" v-touppercase>
Since you don't have a lot of code to run, you should manually bind events to your textfield and then handle the uppercasing there.
Handling events from a text field can be done by adding an input event handler on them, and then updating the initial state again.
<input :value="text" #input="updateText($event.target.value)"/>
export default {
data() {
return {
text: '',
}
},
methods: {
updateText(newValue) {
this.value = newValue.toUpperCase();
},
}
}
You can also do it inline in a template, but this might make it harder to read depending on your code style preferences
<input :value="text" #input="text = $event.target.value.toUpperCase()"/>
This directive works fine with v-model (last character is in upper case too):
Vue.directive('uppercase', {
update(el) {
const sourceValue = el.value;
const newValue = sourceValue.toUpperCase();
if (sourceValue !== newValue) {
el.value = newValue;
el.dispatchEvent(new Event('input', { bubbles: true }));
}
},
});
Usage:
<input type="text" v-model="myField" v-uppercase />
You can do this:
<input :value="theValue" #input="theValue = theValue.toUpperCase()"/>
as a fix for asologor's answer you should reach input element to change it at vuetify
Vue.directive("uppercase", {
update(el) {
const sourceValue = el.getElementsByTagName("input")[0].value
const newValue = sourceValue.toUpperCase()
if (sourceValue !== newValue) {
el.getElementsByTagName("input")[0].value = newValue
el = el.getElementsByTagName("input")[0]
el.dispatchEvent(new Event("input", { bubbles: true }))
}
}
})
and usage is
<v-text-field
type="text"
outlined
placeholder="placeholder"
v-model="name"
prepend-inner-icon="edit"
v-uppercase
/>
this is defnetely working
I´m trying to create a simple CRUD in vue2 and works perfectly, but when i enter in edit view i need to fill form inputs based on Firebase data.
View
<v-text-field prepend-icon="person" v-model="user" name="user" label="User" type="text" required></v-text-field>
<v-text-field prepend-icon="mail" v-model="email" name="email" label="Email" type="email"></v-text-field>
JS
export default {
data: function () {
return {
user: '',
email: '',
drawer: null
}
var edit = ref.child(this.$route.params.id)
edit.on('value', function (snapshot) {
this.user = snapshot.val().name
this.email = snapshot.val().email
})
snapshot.val().name
Return name properly but when i try to assign this value to this.user does not work. Console does not return any error.
¿Anybody has a idea whats is the correct way?
export default {
data: function () {
return {
user: '',
email: '',
drawer: null
}
var edit = ref.child(this.$route.params.id)
var self = this;
edit.on('value', function (snapshot) {
self.user = snapshot.val().name
self.email = snapshot.val().email
})
It might be a scope issue. Try the code above to maintain the scope let’s see if that helps.
var edit = ref.child(this.$route.params.id)
edit.on('value', snapshot => this.user = snapshot.val().name)
edit.on('value', snapshot => this.email = snapshot.val().email)
This works, but exist a form to 'code' better?
I'm using knockout validation and the error class is being added to the EndDate field but not the StartDate field when it't empty. the class caused the field to have a red background. I can't see any difference in the two fields. Something similar is happening on my other pages also.
Upon further investigation i realize it's always the first date field on the page that doesn't work. If I comment out the first one then the second stops working.
**Edit: as a hack I added this above the first date field
<input id="StartDate2" style="width: 140px;" type="hidden" data-bind="date: startDate">
and it works......but just feels really wrong.**
I have this at the beginning of my view model
ko.validation.init({
insertMessages: false,
decorateElement: true,
errorElementClass: "input-validation-error"
});
from my model
startDate: KnockoutObservable<Date> = ko.observable(null).extend({ required: { message: "Please enter a start date." }, simpleDate: { message: "Please enter a valid start date." } });
endDate: KnockoutObservable<Date> = ko.observable(null).extend({ required: { message: "Please enter an end date." }, simpleDate: { message: "Please enter a valid end date." } });
from the view
<li>
<label for="StartDate" class="required_label">Start Date</label>
<input id="StartDate" style="width: 140px;" type="text" data-bind="date: startDate, valueUpdate: 'afterkeydown', class:{'input-validation-error':(!startDate.isValid() && showErrors())}" ">
</li>
<li>
<label for="EndDate" class="required_label">End Date</label>
<input id="EndDate" style="width: 140px;" type="text" data-bind="date: endDate">
</li>
And here's our custome date binding handler
// mm/dd/yyyy format
ko.bindingHandlers.date = {
init: (element, valueAccessor) => {
$(element).mask("99/99/9999", { placeholder: "mm/dd/yyyy" });
ko.utils.registerEventHandler(element, "change", () => {
var value = valueAccessor();
if (moment(element.value).isValid()) {
value(element.value);
} else {
value(null);
}
});
ko.validation.makeBindingHandlerValidatable("date");
},
update: (element, valueAccessor, allBindingsAccessor) => {
var value = valueAccessor();
var allBindings = allBindingsAccessor();
var valueUnwrapped: any = ko.utils.unwrapObservable(value);
var pattern = allBindings.format || "MM/DD/YYYY";
var output = null;
if (valueUnwrapped !== null && valueUnwrapped !== undefined && valueUnwrapped.length > 0) {
output = moment(valueUnwrapped).format(pattern);
}
if ($(element).is("input") === true) {
$(element).val(output);
} else {
$(element).text(output);
}
}
};
You are making your date custom binding "validation compatible" only in its init function which will be only called when the binding is first used in the HTML. That is why the validation was only worked for the second input.
In order to fix this you have to move the ko.validation.makeBindingHandlerValidatable("date"); outside of your init function and have it after the whole binding handler declaration
ko.bindingHandlers.date = {
//...
};
ko.validation.makeBindingHandlerValidatable("date");
I have a partial view ,which I throw to another view ,In my partial view there is a checkbox which is checked by default I want to change its current (checked/unchecked) option from main view. Here is my partial view code:
<td class="sevenCol" name="sevenCol">
<input type="checkbox" checked/>
</td>
Below shows partial view content:
$("#btnSubmit").click(function () {
var mobnum = $("#mobNo").val();
var message = $("#txtMessage").val();
alert(mobnum);
$.ajax({
url: "SmsSendFromOneToOne",
type: "POST",
data: { contactList: mobnum, message: message },
success: function (data) {
$("#gridGenerate").html(data);
}
});
});
Below verifies checkbox is checked or unchecked but it always returns true so how can I fix this?
$("#sendbtn").click(function () {![enter image description here][1]
var maskId = $("#MASKLIST").val();
var campaignName = $("#campaignName").val();
var dataArray = {};
$(".loadingmessage").show();
$("#gridGenerate tr").each(function (iii, val) {
var trId = $(this).attr("id");
var isChecked = $('td[name=sevenCol]').find('input[type="checkbox"]').is(':checked');
//alert(isChecked);
if (isChecked) {
dataArray[iii] = {
'mobile': $(this).find(".secondCol").text(),
'message': $(this).find(".thirdCol").text(),
'type': $(this).find(".fifthCol").text()
};
}
});
Controller:
[HttpPost]
public ActionResult SmsSendFromOneToOne(string contactList, string message)
{
IList<GridPanel> cellInfoForForm1 = _smsService.GetForm1ForViewing(contactList, message);
return PartialView("partialGridPanel", cellInfoForForm1);
}
Thanks
it is a lot simpler if you put the selector directly on the field. try adding a class to your checkbox
<input type="checkbox" class="mobileCheck" checked/>
then in your script you can replace
var isChecked = $('td[name=sevenCol]').find('input[type="checkbox"]').is(':checked');
with
var isChecked = $('.mobileCheck').is(':checked');
Finally got my answer ,As i am binding a partial view and checkbox exits in it so i have to use jquery .live( events, data, handler(eventObject) )to solve the issue ..
$( selector ).live( events, data, handler );
Again thanks for responding