How can I move the cursor to an input field? - focus

How can I move the cursor to an input field in Dart?

Assuming you have a reference to the InputElement in input:
input.focus();
does the trick. You can get that reference through a call to query(), for example:
input = query('#input_id');
input.focus();
or perhaps you created the element yourself:
var input = new InputElement();
document.body.children.add(input);
input.focus();

Related

JavaScript - how to insert a hyperlink with dynamic label into a datatable

I followed the example on this link https://datatables.net/reference/option/columns.render and was able to insert the hyperlink into the table. However, I could not make the label of the hyperlink dynamic. Here is my code:
render: function (data, type, row) {
var chipName = data.substring(data.length-6, data.length-1);
return 'chipName';
}
As you can see, I defined chipName as a variable and its value is from the data. However, with this code, the label for the hyperlink is always "chipName" instead of "ABB109", "ABB110" as expected.
Please help
That's because you are not concatenating chipName variable with the string.
The right code:
...
return '' + chipName + '';
...

Get selected option in Select2 event, when multiple options can be selected

How can I get hold on the <option> that was just selected when listening to the select2:select event? Note that this is simple when using a single-select, as when only one option is selected, that must be the one that was just selected. I would like to also be able to find the option that was just selected when using a multiple-select (<select multiple>).
In the select2:unselect event, the unselected <option> is available through e.params.data.element, but it is not so in the select2:select event. I do not see a reason why the <option> should not be available, since it is created at this time. For the select2:selecting event, however, the <option> is not yet created, and obviously cannot be available when the event is fired.
I've used the following to get the current selected in Select2 (it's for version 4 and up):
// single value
var test = $('#test');
test.on("select2:select", function(event) {
var value = $(event.currentTarget).find("option:selected").val();
console.log(value);
});
UPDATE: Multi Selected Values (with and without last selected)
// multi values, with last selected
var old_values = [];
var test = $("#test");
test.on("select2:select", function(event) {
var values = [];
// copy all option values from selected
$(event.currentTarget).find("option:selected").each(function(i, selected){
values[i] = $(selected).text();
});
// doing a diff of old_values gives the new values selected
var last = $(values).not(old_values).get();
// update old_values for future use
old_values = values;
// output values (all current values selected)
console.log("selected values: ", values);
// output last added value
console.log("last added: ", last);
});
$('#test').on('select2:select', function(e) {
var data = e.params.data;
console.log(data);
});

How to display previous value on Min Miles text field

I want to display a previous value on Min Miles and that should not be editable. I want like
Default value of Min Miles is 0.
When I click on Add More Range then In the new form - Min Value should be Max Value of Previous Form.
I am using semantic form for. Please Help Me. How can I do this...
Regarding your second question, and assuming that the new form appears through javascript, without page reloading, you can grab the
field value with javascript and use it as the default value for the
new field. The "add new range"
Something Like
function getvalue(){
var inputTypes_max = [],inputTypes_min = [],inputTypes_amount = [];
$('input[id$="max_miles"]').each(function(){
inputTypes_max.push($(this).prop('value'));
});
$('input[id$="amount"]').each(function(){
inputTypes_amount.push($(this).prop('value'));
});
var max_value_of_last_partition = inputTypes_max[inputTypes_max.length - 2]
var amount_of_last_partition = inputTypes_amount[inputTypes_amount.length - 2]
if (max_value_of_last_partition == "" || amount_of_last_partition == "" ){
alert("Please Fill Above Details First");
}else{
$("#add_more_range_link").click();
$('input[id$="min_miles"]').each(function(){
inputTypes_min.push($(this).prop('id'));
});
var min_id_of_last_partition=inputTypes_min[inputTypes_min.length - 2]
$("#"+min_id_of_last_partition).attr("disabled", true);
$("#"+min_id_of_last_partition).val(parseInt(max_value_of_last_partition) + 1)
}
}
I have Used Jquery's End Selector In a loop to get all value of max and amount field as per your form and get the ids of your min_miles field and then setting that value of your min_miles as per max_miles
It worked For me hope It works For You.
Default value of a field can just be passed in the form builder as a second parameter:
...
f.input :min_miles, "My default value"
Of course I do not know your model structure but you get the idea.
Regarding your second question, and assuming that the new form appears through javascript, without page reloading, you can grab the field value with javascript and use it as the default value for the new field. The "add new range" click will be the triggerer for the value capture.
Something like (with jQuery):
var temp_value = '';
$('#add_more_range').click(function(){
temp_value = $('#my_form1 #min_miles').value();
$('#my_form2 #max_miles').value(temp_value);
});
Again I am just guessing the name of the selectors, but the overall approach should work.
If you are also adding dinamically to the page the "Add new range" buttons/links, then you should delegate the function in order to be inherited also for the so new added buttons:
$('body').on('click', '#add_more_range', function(){...});

Processing multiple select controls within jquery mobile form

I am trying to process multiple input selects in a form each one has a unique name and id.
here is my first try, this is broken when y = value.val(); executes
var selects = $("#pmWorkOrderProcedureStepsForm").find('select');
$.each(selects,
function(index, value)
{
y = value.val();
});
I can see in chrome debug that value has a reference to something that looks like
HTMLSelectElement#select-choice-400139826
Where select-choice-400139826 is my first select input name.
How do I get just the name and the selected value of the input from here.
New to jquery mobile!
You can use the following code snippet:
var selects = $("#pmWorkOrderProcedureStepsForm").find("select");
$.each(selects,function(){
name = $(this).attr('name');
value = $(this).val();
});
A demo here - http://jsfiddle.net/5xg6F/
Let me know if that helps.

jQuery or JavaScript getting the value of .each function

I have this jQuery .each function so I can traverse all the UL hmtl tags. Then I will get there id attribute. But the problems is, How can I get each value and place it to another variable so I can use it to .sortable UI function. Here is my code:
jQuery('.b ul').each(function(){
jQuery(this).attr('id');
});
example: the output of the .each function when I do alert is "0 1 2". How can I place it to another variable? So it would be use in:
jQuery(variable here).sortable(){ });
The code above will get the ID attribute. Anyone who can help?
Thanks,
Justin
No need to use the ID's at all. You can provide jQuery's $() function with more than just ID's:
$('.b ul').sortable();
Or if you are using multiple libraries (jQuery, MooTools, etc.):
jQuery('.b ul').sortable();
Any of these should work
Save the jquery array to a variable to act on later:
var $lists = $(".b ul")
$lists.sortable()
Act on the selector directly:
$(".b ul").sortable()
Don't do this:
var ids = []
$(".b ul").each(function() {
var id = $(this).attr("id")
ids.push(id)
})
var selector = "#" + ids.join(", #")
$(selector).sortable()

Resources