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.
Related
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);
});
I just upgraded to version 4 and now my set data is not working
I'm doing the following, which worked fine before the update
Init
$("#fertilizer").select2({
data: listToLoad,
placeholder: mf('pleaseSelectFertilizer',"please select fertilizer")
}).on('change', function (e) {
var concentration = $("#fertilizer").select2('data')[0].concentration;
$("#typesOfConcentration").text(concentration);
$("#typesOfConcentrationDiv").removeClass("hide");
});
var fertilizer = $("#orders").select2('data')[0].fertilizer;
var fertilizerId = $("#orders").select2('data')[0].id;
var concentration = $("#orders").select2('data')[0].concentration;
$("#fertilizer").select2("data", {id: fertilizerId, text:fertilizer});
As noted in the release notes (twice actually), .select2("data") is read-only now. This will actually trigger a warning if you put Select2 into debug mode (setting the option debug to true).
In your case, you don't need to use .select2('data') at all. You appear to only be using it so you can re-map fertilizer to text, which should be done way before the option is selected. The id and text properties are required and it doesn't take much to re-map them before passing data to Select2.
var listToLoad = $.map(listToLoad, function (obj) {
obj.text = obj.text || obj.fertilizer;
return obj;
});
$("#fertilizer").select2({
data: listToLoad,
placeholder: mf('pleaseSelectFertilizer',"please select fertilizer")
}).on('change', function (e) {
var concentration = $("#fertilizer").select2('data')[0].concentration;
$("#typesOfConcentration").text(concentration);
$("#typesOfConcentrationDiv").removeClass("hide");
});
For everyone else who actually used .select2('data'), you should be able to use .val() now and just pass in the id that needs to be set. If you need to select an option which doesn't actually exist, you can just create the <option> for it (like you would in a standard <select>) ahead of time.
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(){...});
Following is how I populate my jqTreeView.
View
#Html.Trirand().JQTreeView(
new JQTreeView
{
DataUrl = Url.Action("RenderTree"),
Height = Unit.Pixel(500),
Width = Unit.Pixel(150),
HoverOnMouseOver = false,
MultipleSelect = false,
ClientSideEvents = new TreeViewClientSideEvents()
{
Select="spawnTabAction"
}
},
"treeview"
)
<script>
function spawnTabAction(args, event) {
alert(args);
}
</script>
Controller
public JsonResult RenderTree()
{
var tree = new JQTreeView();
List<JQTreeNode> nodes = new List<JQTreeNode>();
nodes.Add(new LeafNode { Text = "Products", Value="Product/Product/Index" });
FolderNode fNode = new FolderNode { Text = "Customers" };
fNode.Nodes.Add(new LeafNode() { Text = "Today's Customers", Value = "Customer/Customer/Today" });
nodes.Add(fNode);
nodes.Add(new LeafNode { Text = "Suppliers", Value = "Supplier/Supplier/Index" });
nodes.Add(new LeafNode { Text = "Employees", Value = "Employee/Employee/Index" });
nodes.Add(new LeafNode { Text = "Orders", Value = "Order/Order/Index" });
return tree.DataBind(nodes);
}
What I want to do is spawn a tab based on the Value of the selected node. I tried a lot but couldn't get hold of the selected node's value.
Later I checked the DOM of rendered page and found that the value is nowhere added to the node but magically when I select the node the value appears in a hidden control by the name treeview_selectedState (treeview being the id of the control). I even traced all ajax calls but couldn't find anything.
Questions:
1) Where does it keep the Values of tree nodes?
2) How do I get the Selected Node's value in select event?
I even tried to get the treeview_selectedState control's value in select event but it returned [].
Then I added a button the view and hooked that onto a js function and found the value there. It makes me think that the value is not available in select event, am I right in thinking that?
I don't think getting selected node's value should be a this big deal? Am I missing something very obvious?
Thanks,
A
After trying so many things , I checked their demo and found the hints there (I shouldve done this as the first thing).
It was actually pretty straight forward
function spawnTabAction(args, event) {
alert($("#treeview").getTreeViewInstance().getNodeOptions(args).value);
}
Thanks,
A
I am using kendoUI tree view with check boxes implementation.
I am able to check all children's check boxes,when i select the parent checkbox.
now,I want to get all the children's text values when i select the parent check box.
I used template for check box operation in tree view
$("#ProjectUsersTreeView [type=checkbox]").live('change', function (e) { var chkbox = $(this);
var parent = chkbox.parent();
var pBox = $(parent).closest('.k-item').find(":checkbox");
if (this.checked || pBox.length>0) {
$(pBox).prop('checked',this.checked ? "checked": "")
}
Instead of using your code for checking children I do recommend using KendoUI configuration option checkChildren.
tree = $("#ProjectUsersTreeView").kendoTreeView({
checkboxes:{
checkChildren: true
},
...
}).data("kendoTreeView");
Then for getting all selected text use:
$("#ProjectUsersTreeView [type=checkbox]").live('change', function (e) {
var checked = $("input:checked", tree);
$.each(checked, function(idx, elem) {
console.log("text", tree.text(elem));
})
});
In checked I get all input elements from the tree that are actually checked and display its text on console by getting it using text method.
NOTE: Realize that I've defined tree as $("#ProjectUsersTreeView").data("kendoTreeView") and then use it in change handler.