I am having a weird problem with my v-combobox that is hard to explain but I will try my best.
When i start typing in the combobox the "list" gets filtered and if i click one of the items in the dropdown menu everything is fine.
The problem hapens if i click an item and then add another letter and directly press the send button in my form, the new charachters in my combo box is not passed to my axios request. If i instead change to another field all the information in my combobox is passed to the axios.post request.
But the weirdest part is that if i put:
console.log(this.shortname)
The output contains all characters in the combobox but not in the axios.post request.
Below is my code.
// TEMPLATE
<v-combobox v-model="shortname" color="forms" :items="shortnames" autocomplete="off"></v-combobox>
// SCRIPT
sendForm(){
console.log(this.shortname)
axios.post('/endpoint, {
shortname: this.shortname
})
.then((response) => {})
}
So in the sendForm() function if i type "Richa" in the combobox and click the "Richard" listitem the
console.log(this.shortname) // outputs "Richard" and so will axios request
But if i type "Richa" and click the "Richard" listitem and then ADD "sdf" (Richardsdf)
the
console.log(this.shortname) // outputs "Richardsdf" but axios request is still "Richard"
However if i change fields after I add "sdf" axios.post will have "Richardsdf"
Im using vuetify version 2.4.2 and same behaviour on chrome and safari
My question is if there is a way to be able to get all added info into the combobox without having to change input fields?
// Best regards.
Found the solution.
I added id="targetInput" and #update:search-input="updateTargetInput" and removed the v-model to combobox
<v-combobox id="targetInput" #update:search-input="updateTargetInput" :items="shortnames" outlined :rules="shortnameRules"></v-combobox>
and in the methods i added
methods: {
updateTargetInput(currentValue){
this.shortnameone = currentValue
console.log(this.shortnameone)
},
}
Credits go to PradeepNooney
https://github.com/vuetifyjs/vuetify/issues/4679#issuecomment-682456398
Related
Im using bootstrap vue:
<b-form-checkbox #change="onoff('concurency_filter')" v-model="concurency_filter.onoff" switch size="lg"></b-form-checkbox>
And I need call ajax with state of this checkbox:
onoff: function (filter) {
axios.put('/api/user/accounts/'+this.account_id+'/togglefilter',
{
filter: filter,
status: this[filter].onoff //here still old value in this.concurency_filter.onoff
}).then(response => {
..........
});
},
But v-model still not changed when ajax is called. When checkbox clicked v-model must toggle true/false, but ajax called before v-model toggle it. How to deal with it?
I know that I can use WATCH in vue, but when first time ajax loading data it's triggering this WATCH event. I want trigger it only on click
Success:
onoff('concurency_filter', $event)
$event will contain exact value of checkbox right after click
I have a simple dropdown with two values.Lets say Staus:active and inactive.
During the onchange event, I want to perfrom some validation and revert back if the validation fails. Thai is if I change from active-inactive and my validation fails, I should change the dropdown back to active.
So far I am able to catch the on change event through the dataevents options of editOptions.
Below is my code, Thanks for the assist.
editoptions:{value:{Y:'Active',N:'Inactive'}, dataEvents:[
{
type: 'change',
fn: function(e) {
alert("inside change trigger");
$grid.setColProp('Status', { editoptions:{value:{Y:'Active',N:'Inactive'}}});
}
}
]}
I also read I have to set recreate form :true. I tried that also.
I would recommend you to consider to make the column non-editable or to readonly/disabled if the validation condition could be checked before editing will be started. It shows the user more clear that the field mayn't be changed.
Alternatively you can get savedRow parameter of jqGrid if you use inline editing mode or cell editing mode (with var savedRows = $(this).jqGrid("getGridParam", "savedRow")). To get the "old" data in case of form editing you can just get the data of selected row by using getGridParam with selrow (or alternatively from the hidden field of the form which have id="id_g". Something like var serRowId = $("#id_g").val();) and by using getRowData/getCell.
Here is my situation:
I have a very long multi-page survey built by webforms in drupal.
The questions are not required but we don't want the users to skip all the questions too easy by just clicking Next Page button.
So this is what we need:
When the user try to click on "Next Page" button with any empty fields on the page, error or warning messages will show up, "Are you sure you want to skip this question?", as well as a skip button next to it. When the user click on the skip button, the message disappears and they click on the next page button to proceed the survey.
Here are my thoughts on this:
I used webform validation module to create an Not Empty validation and apply it to the fields.
in webform_validation_validators.inc:
case 'skip_if_empty':
foreach ($items as $key => $val) {
if (count($val) == 0) {
drupal_set_message(t('This field is empty.'), 'warning');
// do something, not sure about it here
}
}
Another thought:
I used the Dismiss module to display an X button next to the error message.
Can I add some functions to the X button to bypass the validation when it is clicked?
And here is the script for the Dismiss module, :
(function ($) {
Drupal.behaviors.dismiss = {
attach: function (context) {
$('.messages').each(function () {
var flag = $(this).children().hasClass('dismiss');
if (!flag) {
$(this).prepend('' + Drupal.t('Close this message.') + '');
}
});
$('.dismiss').click(function () {
$(this).parent().hide('fast');
// some functions to bypass validation to the field?
});
}
}
})(jQuery);
I don't know what to do to after the //. Or is there any other ideas that will work?
AS per the you requirement mention
Take this example
You have created webform having field like
Firstname with required field
Lastname with required field
Then Next button button
When user click next button then error show because you have make the fields are required
When your showing "Dismiss button" next to each field.
Whenr user click "Dismiss button" that time you have to remove "required" attribute of field using jquery or drupal ajax
After that when user click next button then user not get any kind of required field validation error.
Does anyone know how to change text of custom button in Kendo UI, when it is defined like:
c.Command(command =>
{command.Custom("custom").Click("Action").Text("Text");
})
in order to after click on that button, the text could change.
thanks in advance for answers.
Using your sample code,
The "custom" parameter is useless/ignored by the parser (leaving nothing means "custom")
the Click("") parameter is the name of a Javascript function that will be executed upon a click
The Text("") parameter is the default text (when Razor is executed/page loads)
c.Command(command =>{command.Custom("custom").Click("Action").Text("Text");})
you'd need a function like:
function Action(e) {
e.target[0].innerText = "Some new text for the button"
}
I have a page of products and for each of them, I want to have a form that uses AJAX to update the session. I've done this bit - just providing background.
I use the product's ID to create a different form class and name for each form, so each form is called something like this_form_name_567 and the next would be this_form_name_568 and so on.
There is a submit button per form. I'm having trouble figuring out
Which event is best to use so that the correct form will be identified when a submit button is clicked?
Once clicked, how to then make sure the correct value is taken from a hidden field (unique ID) within the submitted form so that I can populate a line of code such as:
$.post("compare_response.php", {compare_this: $("#compare_this").val()}, function(data){
}
You can use the .closest tree traversal method to get the form in which the button of interest is nested:
$("input[type=submit]").click(function() {
alert($(this).closest("form").attr("id"));
});
or even simpler, just get the element's form property :)
$("input[type=submit]").click(function() {
alert(this.form.id);
});
You can try it out here.
You can get the form you are submitting like this:
$('form').submit(function() {
var yourForm = $(this);
var hiddenValue = $(this).find('input[type=hidden]').val();
});
Of course you can get the hidden value differently, or if you have more than one hidden you'll have to give a little more information about it.