I need to create a function with this:
onMouseDown to add that class,onChange that other class and onBlur last class.
With ".animate" is more wonderful, but is ok even without.
onMouseDown="this.className='styleDropDownClick';
onChange="this.className='styleDropDown'";
onBlur="this.className='styleDropDown';
If anyoane can help me , thank's.
Try the following functions:
function styleDropDownClick() {
var textForm = document.forms["textForm"];
textForm.fname.setAttribute("class", "styleDropDownClick");
}
function styleDropDown() {
var textForm = document.forms["textForm"];
textForm.fname.setAttribute("class", "styleDropDown");
}
This works with the following HTML:
<form id="textForm">
<input type="text" class="styleDropDown" name="fname"
onBlur="styleDropDown()" onChange="styleDropDown()" onMouseDown="styleDropDownClick()" value="test"/>
<input type="text" class="styleDropDown" name="fname2" value="test2"/>
</form>
Fixed! My problew was that the child of select is not expanding with auto width or a given width.
$("select").click(function () {
$(this).children().addClass("cooling");
});
here is an example, it works only for IE
http://jsfiddle.net/DCjYA/132/
Related
I am pretty new to vue, and am trying to use it in a bootstrap modal. The relevant div in the modal is as follows.
<div class="form-group row">
<label for="priceQCField" class="col-sm-2 col-form-label">Price<span class="red"> *</span></label>
<input type="number" step="0.01" class="form-control col-sm-4" id="priceQCField" name="priceQCField" min="0" v-model="job.price">
</div>
I read some other questions about vue returning strings rather than numbers, so I have converted the job.price to a number inside my method to call the modal
showPriceJob: function (job) {
this.job = job;
this.job.price = parseFloat(this.job.price);
$('#mdlPriceJob').modal('show');
},
However, job.price refuses to appear in the input field either as a string or a number. I know it is available to the modal as I can see it using <span>{{job.price}}</span>.
Can anyone advise me please?
Additional - I think it is a display issue - if I change the input field, the entry in the <span> changes
2nd update - initial table
<tr class="light-grey" v-for="job in jobs" v-on:click="viewJob(job)">
<td>{{job.id}}</td>
<td>{{job.customerName}}</td>
<td>{{job.description}}</td>
<td v-bind:class="job.dueDate | dateColour">{{job.dueDate | dateOnly}}</td>
<td>£{{job.price}} {{job.isEstimate | priceEstimated}}</td>
<td>{{job.delivery}}</td>
</tr>
Upd.
According to your comments to my answer you are using v-for and you can't use this.job within your method. You should give us more code to see the whole picture.
Upd.2
You have showed more code but I didn't see any v-for so I am confused. You can try to use something like this if job is a property of appData.jobs:
showPriceJob: function (job) {
this.appData.jobs.job = Object.assign({}, job);
this.appData.jobs.job = parseFloat(this.appData.jobs.job.price);
$('#mdlPriceJob').modal('show');
},
But I'm not sure about this because I don't see where job is declared.
Upd.3
Oh! Wait! You have this code:
data: appData.jobs, but data should be in this format:
data: function(){
return {
appData: {
jobs: [],
},
}
},
Or show me what is your appData.jobs variable is.
I have a form that calculates as it is filled. I want to fill that form via casper and get the result.
In my form, I am doing the calculation on blur of each field. How can I fire a blur event using casperJS?
According to the specs you can just trigger native blur function:
casper.evaluate(function(){
document.querySelector('.some-element').blur();
});
Consider this simple HTML form:
<form id="example">
<input name="value_one" type="text" onblur="addition()">
<input name="value_two" type="text" onblur="addition()">
</form>
Let's say that the following JavaScript function is fired onblur:
function addition() {
var value_one = document.getElementsByName('value_one')[0].value;
var value_two = document.getElementsByName('value_two')[0].value;
var result = document.getElementById('result');
result.textContent = parseInt(value_one) + parseInt(value_two);
}
You can use the following CasperJS script to obtain the result:
var casper = require('casper').create();
casper.start('https://www.example.com/', function () {
this.fill('#example', {
value_one: '5',
value_two: '10',
});
this.echo(this.getElementInfo('#result').text); // Result: 15
});
casper.run();
I am using Date Range Picker to select to dates now when I select the dates, I update the inputs with dates value respectively.
The inputs I have binded with v-model and created a function in watch attribute of component to observe the change in model.
But when the inputs are updated with the javascript function no change can be observed in the model but the value of my input fields are updated.
// My Input Fields
<input type="text" name="updateStartDate" v-model="updateDateRange.start">
<input type="text" name="updateEndDate" v-model="updateDateRange.end">
//My javascript Function
$('input[rel=dateRangePickerX]').daterangepicker({
'autoApply': true,
'drops': 'up',
'startDate': moment().add(90, 'days').calendar(),
'endDate': moment().add(97, 'days').calendar(),
locale: { cancelLabel: 'Clear' }
},
function (start, end, label) {
$('input[name="updateStartDate"]').val(start.format('MM/DD/YYYY'));
$('input[name="updateEndDate"]').val(end.format('MM/DD/YYYY'));
});
// My watch attribute in Component
watch : {
'updateDateRange.end' : function (val) {
console.log('In Watch Function');
console.log(this.dateRanges);
if(val != '' && this.updateDateRange.start != '' && this.updateDateRangeIndex != ''){
console.log(val);
console.log(this.updateDateRange.start);
console.log(this.updateDateRangeIndex);
this.dateRanges[this.updateDateRangeIndex] = this.updateDateRange;
this.updateDateRangeIndex = '';
this.updateDateRange.start = '';
this.updateDateRange.end = '';
console.log(this.dateRanges);
}
}
}
I don't like to mix jQuery and Vue because jQuery messes up the DOM. Even more, I find it completely unnecessary.
Simple only with native Vue you can do it like this:
<input type="text" name="updateStartDate" v-model="startDate" #input="onInput()">
<input type="text" name="updateStartDate" v-model="endDate" #input="onInput()">
methods: {
onInput(e): function () {
// this will be called on change of value
}
}
Further to set the value and update the DOM simply update startDate and/or endDate variables and DOM will update accordingly.
You need to work with your model and not fiddle with the bound DOM element. You have bound the elements to viewmodel items:
<input type="text" name="updateStartDate" v-model="updateDateRange.start">
<input type="text" name="updateEndDate" v-model="updateDateRange.end">
then you use jQuery to set the field values
$('input[name="updateStartDate"]').val(start.format('MM/DD/YYYY'));
$('input[name="updateEndDate"]').val(end.format('MM/DD/YYYY'));
but you should be setting the bound values instead:
updateDateRange.start = start.format('MM/DD/YYYY');
updateDateRange.end = end.format('MM/DD/YYYY');
Neither works this one:
$formTemplateModal.modal('show');
$('#form_template_name').focus();
nor a more complicated one:
$formTemplateModal.modal('show').promise().done(function() {
// #todo: does not work.
$('#form_template_name').focus();
});
field $('#form_template_name') is a input[type=text] and it surely exists and it belongs to $formTemplateModal.
The shown is changed in bootstrap 3 ,
Try this if it could help
$('#myModal').on('shown.bs.modal', function () {
$('#textareaID').focus();
})
this is more easier try using the autofocus in your tag .
<textarea id="textareaID" autofocus="" ></textarea>
i would like to know the syntax for removing a row which was added by appendchild.
There is also a removechild, but I am not sure how to operate.
<input type="button" id='submitlink' value="ADD_AGENDA" onClick="generateRowAgenda()" name="AGENDA"/>
<input type="button" id='submitlink' value="" onClick="removeRow()" name="AGENDA"/>
<script language="">
function generateRowAgenda() {
var temp ="<p><input type='text' class='textinputagenda' name='MM_AGENDA[]'></p>";
var newdiv = document.createElement('AGENDA');
newdiv.innerHTML = temp;
var yourDiv = document.getElementById('AGENDA');
yourDiv.appendChild(newdiv);
}
function removeRow(){
yourDiv.appendChild.deleteRow(newdiv);
}
</script>
<br>
<div id="AGENDA" align="center"></div>
That would be:
function removeRow(element){
element.parentNode.removeChild(element);
}
removeRow(newDiv);
That is, the removeChild method actually belongs to the element's parent, so you need to reference the parent first (by using parentNode) and then call the method removeChild over the newDiv element.
Also, you have two elements with the same id: submitlink. And that is not good.
If you rename your element, you could add a listener that call the removeRow function.
<input type="button" id='doremove' value="" onClick="removeRow()" name="AGENDA"/>
(Now the id is doremove)
Now do something like this to make the removeRow function to be executed on click:
document.getElementById('doremove').addEventListener('click', function(e) {
removeRow(newDiv);
});
Here is an example on jsfiddle: http://jsfiddle.net/5TmQC/
You'll notice that remove only works with one agenda item. You want to work with several agendas?
Try this then: http://jsfiddle.net/5TmQC/1/
Almost same code, but this one can delete several, in order by using pop()