I have this table:
When the user choses a WorkCentre, a request is sent to get the default duration for that work centre and then this value is inserted into the appropriate field. But the user may wish to specify a different duration.
The automatic update of the duration works only if the user has not made a manual change. So if I was to enter 5 in the duration field of the last row it would get stuck at 5, even if I change the work centre.
Heres my code:
$(document).on('change', 'select.form-control', function() {
var WorkCentre = $(this).val();
var i = $(this).attr('row-number');
SetDuration(WorkCentre, i);
});
$(document).on('change', '.duration', function() {
console.log('change');
UpdateDates();
});
function SetDuration(WorkCentre, i) {
$.get("/getDuration", {'WorkCentre' : WorkCentre}, function(data){
var duration = data;
$('input[name="Ops['+i+'][Duration]"]').val(duration);
});
}
At the moment if the user selects a work centre, changes the duration from default to a custom value, but then decides they selected the wrong work centre and chooses a new one, the new default duration is not updated
You can see here:
https://www.youtube.com/watch?v=RFxwYlH7df8
Once I manually change the duration, it gets stuck like that.
The problem is the next line: (You reference is to select element, you should reference to selected item):
var i = $(this).attr('row-number');//No return data
Change by:
var i = $(this).find("option:selected").attr('row-number');//Return value of attribute
Result: https://jsfiddle.net/cmedina/4pkdros9/1/
Related
I' ve a button, so when user clicks it, it should alert range selected. If user didn't change the range selected (slider) default value 1 should be alerted.
Why is not alerting it?
Codepen:
https://codepen.io/ogonzales/pen/abNQXLg
Error: it should only alert 1 value:
JS:
$('#step_one_siguiente').on('click', function () {
let val = this.value;
alert($("#performance_options").prop("selected", true).text());
});
Here is a workaround that might be helpful.
let ranges = ['1080p','1440p','2k']
$('#step_one_siguiente').on('click', function () {
var index = parseInt($('input').val()) - 1
alert(ranges[index]);
});
I think it is because the way you use the syntax of the datalist is incorrect.
Values are not meant to be between the option tags but only in the value="" attribute.
However for this to work, the input value would need to match the list value, which is not compatible with a range control as the values you want are not a sequence.
https://www.w3schools.com/tags/tag_datalist.asp
Based on Ibrahim question, I was able to come up with:
Apparently I don't have to search for a selected range, as it only returns the value of the selected one.
<script>
$('#step_one_siguiente').on('click', function () {
alert($('[type="range"]').val());
});
</script>
I found a solution that retains the value of a datatable search filter box after the page refreshes.
What I need to do is also ensure that a blank value can be retained.
When the user clicks the "clear button" and clears the search box, I need to set the value of the filter to blank. So when the page refreshes, the filter is blank.
Here is the input:
<input type="search" id="searchFilter" onkeyup='saveValue(this);' />
And here is the JavaScript:
document.getElementById("searchFilter").value = getSavedValue("searchFilter"); // set the value to this input
//Save the value function - save it to localStorage as (ID, VALUE)
function saveValue(e){
var id = e.id; // get the sender's id to save it .
var val = e.value; // get the value.
localStorage.setItem(id, val); // Every time user writing something, the
localStorage's value will override .
}
//get the saved value function - return the value of "v" from localStorage.
function getSavedValue(v){
if (!localStorage.getItem(v)) {
return ""; // You can change this to your defualt value.
}
return localStorage.getItem(v);
}
Here is the clear button click event:
$('.clearFilters').on('click', function()
{
$('#searchFilter').val("");
$('#example1').DataTable().search('').draw();
});
As stated, when the page is refreshed, the last value that was entered in the search is retained.
However, if the user clears the filter, and if the page refreshes, the last value that was entered appears again in the filter.
The filter needs to be blank if the clear button was clicked and the page refreshes.
I'm guessing I need to call the saveValue function from the clear button click event, but wasn't sure how.
I was able to solve my problem by triggering the keyup by setting the value to blank on the clear filter button event:
$('.clearFilters').on('click', function()
{
$('#searchFilter').val(""); // still needed to make sure the value gets cleared
$('#example1').DataTable().search('').draw();
$('#searchFilter').keyup().val(""); // this is what I added to trigger the keyup
});
I have a chartist.js bar graph. I want to customize x-axis labels. I wrote some following jquery for flipping first and last name and then add '...' at the end if the length of the text is more than 11 characters.
$(function () {
$('#AssignedLineChart .ct-labels, #ResolvedBarChart .ct-labels').find('.ct-label.ct-horizontal').each(function () {
var label = $(this).text();
var splitLabel = label.split(",");
var newLabel = splitLabel[1] + ", "+splitLabel[0];
if (newLabel.length > 13) {
newLabel = newLabel.substring(0, 10) + "...";
}
$(this).text(newLabel);
});
});
It applied fine when I load the page first time. There are some select options on bar charts for displaying individual ranges. When I select them the labels go back to their previous state. Selecting options are changing DOM. This also happens when I open inspect element tab.
Is there a way to use find or each method on dynamically changed elements?
$(function () {
This is only applied when the page finishes loading and get fired 1 time only.
Selecting options are changing DOM.
So the current process is like:
Page finishes loading.
The label got changed by document ready event. (*)
The label got changed by other events, this case, the select options. (**)
So, it changed the DOM dynamically and nothing like above (*) changes the label again.
So, to change the label after select options, you need to change it in the callback function of what is done after select options in the above mentioned (**).
I have 18 rows of text fields and in each one I need to give it an increasing ID, however they're not just straight forward, as the bottom row in the grid could need ID 1 and the first one could need ID 15 depending on what is chosen. It doesn't need to look that pretty as long as it does the job. I will be using it to insert data in to a database from an iPad and ideally having an onclick event on the row title, and that adding the next incremental number would be perfect, however if that's not possible adding an onfocus event would be fine.
I already have the following
$('.played').on('focus', function(){
var $this = $(this);
if($this.val() == ''){
$this.val('1');
} else {
$this.val('');
}
});
Which adds the number 1 in the clicked text field and if you click on it when it has the value of 1, it removes it. What I'd now like to do is when the next 'played' class text field that's clicked, it populates it with 2, and so on up to 18. Is this possible?
Maybe something like the following to get the max value that you can check against yourself to know if you need to set it or clear it out, and additionally if you don't have a value and you do have a max value, your new value would be max + 1
var valueArray = $('.played').map(function(played){ return $(played).val(); }).toArray();
var maxValue = Math.max(valueArray);
When someone clicks a specific link on my website I want the select box option to change to the option to a certain option by the value it has set.
I imagine I would do this by adding some sort of onClick that points to the value on each selection... but can't figure out the code to use.
In regular JavaScript you could do something similar to:
var selectBox = document.getElementById('selectBox');
var image = document.getElementbyId('someImage');
image.addEventListener('click', function() {
selectBox.selectedIndex = 1; // specify the selected index here.
});
where you get a reference to the select box and image and add an event handler to the image to set the selected index of the select box.
If you have jQuery available, you can do similar:
$('img').click(function() {
$('select').val('new value'); // specify the new value
});