Vue-JS Displaying other data than the v-model in an input - javascript

Here's part of my code:
data() {
return {
dossier: [{
caisse: '', // I change this value with v-model
nom_caisse: 'exempleName' // I want to display this dynamic value in the input
}],
}
}
<input v-model="d.caisse"/>
I just put in the essential information. I didn't put the for. I'm going to go through my "dossier" array and interact on "caisse". It works but I would like to display another field in the input of the "nom_caisse" table. Do you know how to display another value than the v-model?
Edit "Solution":
I've come up with a solution that's a little hard to explain. I put my "d.caisse_name" field in v-model but I get the value of the input with jQuery to search in my api. So my v-model to be different from the value of the input... I understand myself :) Thanks for the suggestions.

Related

how to render input fields on page load at runtime based upon json in react js

I have below array of objects as sample input. I have this object available on page load of component.
I need to iterate on it and then fetch its Label Name,its input type and text associated to it.
Say suppose for first objet, I need to show label and its input type is dropdown and its text in one row, then go to second object show its lable text, its input type is textbox and then text on second row and so on for all other objects.
It should happen on run time when page is loading. I am not sure how to do it.
I just need to render it on page load. So I know that I need to write that code in componentDidMount() method but how to render is not sure.
While I am looking for sample code but approach to resolve it will also help me to solve it on my own. Thanks in advance.
[
{
"LABEL_NAME": "Purpose",
"LABEL_TYPE": "STANDARD_LABEL",
"WIDGET_TYPE": "NARROW_DROPDOWN",
"TEXT": "Abc"
},
{
"LABEL_NAME": "Sub-purpose",
"LABEL_TYPE": "STANDARD_LABEL",
"WIDGET_TYPE": "Textbox",
"HELP_TEXT": "pqr"
},
{
"LABEL_NAME": "Date",
"LABEL_TYPE": "STANDARD_LABEL",
"WIDGET_TYPE": "DATE_FIELD",
"HELP_TEXT": null
}
]

Change jsGrid insertvalue based on select control on the page

I am using JsGrid in my asp.net application. I felt it was very awesome grid. Everything worked out very well, but I was stuck at one point.
I have a dropdown on a page which is fetching data from database. and next to that control, i have added JsGrid.
When I change the index of dropdown, and when I click on Add row on my jsgrid, it should set the default value for one of the fields in the grid.
Can anybody please help me out in this regard.
enter image description here
Regards,
Nithin Eate
Redefine insertTemplate of the grid column you want to set default value to and pick up value from your dropdown widget:
insertTemplate: function() {
var input = this.__proto__.insertTemplate.call(this); // original input
// getValueFromDropDown() should read value from your dropdown control
var defaultValue = getValueFromDropDown();
input.val(defaultValue)
return input;
}
The source GitHub issue https://github.com/tabalinas/jsgrid/issues/471

Setting Default value of input textbox in Jquery EasyUI dialog

I have googled and looked throughout the whole documentation and could not figure out why value of input text is not shown. I am using FireFox latest version and below is what I have done so far.
<input name="amount" class="easyui-validatebox" id="d_amount" value="">
In regular html or php page we can give value="300" to set default value, but in EasyUI, it is not possible. So I was thinking possible alternative like below:
<script>
var m = '300';
document.getElementById("d_amount").value.innerHTML=m;
</script>
Nothing is shown and I am not getting any error. Any EasyUI expert, please help me.
NOTE: this input field is inside the dialog
To set the default value, you have to set the value attribute. However, that does not necessarily update the value property so you need to do both. So given:
<input name="amount" class="easyui-validatebox" id="d_amount" value="">
set the default value by setting the value attribute:
var input = document.getElementById('d_amount')
input.setAttribute('value', 'whatever');
now set the value property:
input.value = 'whatever';
Note that you can also get a reference to the input as a member of the form that it's in:
var input = document.formName.d_amount;
Use the below code
$("#d_amount").numberbox({
min:0,
precision:2,
value:300
})
Reference : numberbox
Or try this one
$("#d_amount").textbox({
buttonText:'Search',
iconCls:'icon-man',
iconAlign:'left',
value:"300"
});
Reference : textbox
use this code to set the value inside $(document).ready(function(){}
....
$("#d_amount").numberbox('setValue','300');
....
if still not working, just try to set name and id as the same name and id
<input name="d_amount" class="easyui-validatebox" id="d_amount" value="">
I am always working with this numberbox and it's working
I have found your thread because I am also having the same issue and I have just across this thing today. Your case is a little bit different (maybe) then my case because you want to set the default which can be changed by the user later (I believe). In my case, the value will be fixed (will not be changed) so I have applied a trick and hopefully it can give some ideas to you and others who are having same issue. Please refer below:
In first page says pageA.php:
<select name="myThing" id="myThing">
<option value="Your Desired Value" selected="selected">Something</option>
</select>
Still in the same page, under your $(document).ready( function(){ put the code below:
$("#myThing").val($("#myThing option:first").val());
That code is to make sure your desired value appears at the first row in the drop down. I say this because in EasyUI it seems when I use drop down and put single option, the first row will be blank and the second row will hold your input. So that is the trick to ensure your desired value appears on top and selected. Put the select under the form then during normal post, you will be able to get the value of it in the posted page. Enjoy. Thank you.
Suggestion: if your value can be changed by user, use placeholder and you can hide the default value from user using my trick.
try this
document.getElementById("d_amount").value=m;
you don't need innerHTML
I found the answer here. The trick is to use the code inside $(function(){});
$(function(){
var m=300;
$('#d_amount').textbox('setValue', m);
});
I too had this problem and it was solved using the following
First my input was in the form like this:
<input name="hostFirstName" id="hostFirstName" class="easyui-textbox">
I needed to load content from the db then pre-fill the input with this data so the user could edit the content.
I used the following javascript.
NOTE: i didn't hide this away inside an anonymous function() and it is working. I tested this first from the F12 console to make sure it was working before changing my code.
//populate with existing data
$('#hostFirstName').textbox('setValue', "Is this working?");
The docs on jeasyui.com don't provide this example when you look at the textbox api reference. But they do provide an example when looking at the combobox (http://www.jeasyui.com/documentation/index.php#) the combobox and textbox use the same setValue method.
Hopefully this works for you like it does for me.

Assign value from one input to another input using jQuery...not working

I have a couple of radios (#LocalDelivery and #StandardShip) related to a couple text inputs (#LocalDate and #datepicker). Then, off in another section is another text input with class productAttributeValue.
If LocalDelivery is chosen/checked, I need its input, #LocalDate to get the value and name from the input with class productAttributeValue. Or, if #StandardShip is chosen/checked I need its input, #datepicker, to get the value and name from the input with class productAttributeValue.
I have tried various combinations of the following:
if (!$('#LocalDelivery').is(":checked")) {
$('#datepicker').val("");
$('#LocalDate').val($('.productAttributeConfigurableEntryText div.productAttributeValue input[type="text"]').val());
$('#LocalDate').attr('name',
$('.productAttributeConfigurableEntryText div.productAttributeValue input[type="text"]').attr('name'));
}
if (!$('#StandardShip').is(":checked")) {
$('#LocalDate').val("");
$('#datepicker').val($('.productAttributeConfigurableEntryText div.productAttributeValue input[type="text"]').val());
$('#datepicker').attr('name',
$('.productAttributeConfigurableEntryText div.productAttributeValue input[type="text"]').attr('name'));
}
Per my other thread, Issue with jQuery 'else', this method isn't working. According to the answers given there, this is the wrong method entirely but I'm not sure how else to go about this.
Here is a fiddle:
This is my glorious Fiddle
EDIT:
Per beautifulcoder's comment I have added a click function to both radios. While it would be preferable for the inputs to populate their value without clicking first, this is the first solution I've had that works. Created a fiddle here, hope it helps someone else:
My amazing working Fiddle

Update autoselect value option dynamically using Ajax.InPlaceCollectionEditor

I'm using Scripaculous' in place collection editor to present the user a with list of customers to assign to a contact dynamically. I am passing a value parameter as detailed in the documentation so when the select is generated it will auto-select the current associated customer (if there is not one already the default is provided.)
This works well except when the user clicks on the 'edit me' field a second time the original value is selected, not the customer that was selected most recently. This is because the original call to InPlaceCollectionEditor is unchanged. My question is whether there is any way to update the autoselect value without dynamically updating the entire scriptaculous call (this would mean selecting all the customers again via ajax, which is possible but not ideal.)
Here is the code:
<div id="editme">Test 1</div>
<script type="text/javascript">
new Ajax.InPlaceCollectionEditor(
'editme',
'/usercustomer/editCustomer/id/811',
{ collection: [['192981', "Test 1"],['192893', "Test 2"],['192894', "Test 3"] ... ],
ajaxOptions: {method: 'get'}
, value: 192893 } // specifying the value parameter auto selects object id 192893
);
</script>
Is this a limitation of InPlaceCollectionEditor or is there some other way around this?
Pass a variable instead of the hardcoded number as 'value'. Set that variable to the initial or selected value right before making the call.

Categories