Develop Reference

How to refresh HTML field on selecting the drop down list?

I want to get html field (a drop down list) refreshed as I get it by default on clicking the chart type from the (chart type) drop down list. The default selection after selecting a chart is shown below: (if I select "Pie Chart 2D" from the drop down list)
Now if I select another similar chart "Pie Chart 3D" (which has same drop down field) and also I select the field data, then the image is as below:
PROBLEM
Now if I select the "Pie Chart 2D" back again from the drop down list I get this 2nd image field set already. I want the field to be refreshed as it is shown in the 1st image of Pie Chart 2D. Therefore, how should I refresh the field?
NOTE:
The field that I want to refresh to default is "Define X-Axis" drop down list.
I hope I have cleared my problem, in case of confusion in the understanding I will be replying soon. I hope it is not difficult to solve!
Thanks for your time.

You can add an onchange event listener to your select. If you have a function updateDiv() in JS that would update your <div> element that you want to call with a change of the <select> element:
In HTML:
<select id="chartType" onchange="resetFieldToDefault();">
In jQuery:
$("select#chartType").change(resetFieldToDefault);
In (plain) JS:
document.getElementById("chartType").addEventListener("change", resetFieldToDefault);
EDIT
I don't think I answered the question correctly above. I believe the question was more along the lines of, How could I deselect all the options in that field (once a select field was changed)? So I only answered the first part of the question, but the second part about resetting the other <select> element remains unsettled. (Am I correct?)
To do this, add a listener as shown above. And then, add the (plain) JS function:
var resetFieldToDefault = function() {
var selectedOptions = document.getElementById("xAxisSelect").selectedOptions;
for(var i = 0; i < selectedOptions.length; i++)
selectedOptions[i].selected = false;
}

I would do something like this:
$("#chartType).on("change", function() {
refreshDivs(this.val());
});
function refreshDivs(value) {
if(value=="Scatter Chart") {
$("#divEventCategory").hide();
$("#divEventSubCategory").hide();
} else if ((value=="Bubble Chart") {
$("#divEventCategory").show();
$("#divEventSubCategory").show();
}
}
If you need to refresh the content of the dropdowns/listboxes based on the choice, just add the code in the corresponding section as well.

jQuery clone elements with-in a main wrap

I am trying to create a summary page where I grab all content form the main page and show it in a overlapping div sort of like images are displayed these days.
Now problem that I get I lose input and select values once I past it into a summary / print wrap.
jQuery
$(".header").clone().appendTo('.page');
$(".task").clone().appendTo('.page');
$(".options").clone().appendTo('.page');
.header and .task are just plain text input. And that works just fine. However with in the .options I have many controls like textarea, input, and select ... I get all the elements into .page however I lose all the selected values and text.
Any suggestion?
Thanks

The value of the inputs are not stored in the attribute tag value. This means that the copy will not have the value set. So before you copy them set the value attr.
function CopyStuffToPage() {
// Doing this will change the HTML for all the input elements
$('input').each(function(index,element) {
$(element).attr('value',$(element).val());
});
$('textarea').each(function(index,element) {
$(element).html($(element).val());
});
$('select').each(function(index,element) {
var value = $(element).val();
$(element).children('option').removeAttr('selected');
$(element).children('option[value='+value+']').attr('selected','selected');
});
// Then you can do this
$(".header").clone().appendTo('.page');
$(".task").clone().appendTo('.page');
$(".options").clone().appendTo('.page');
}
For selects you will have to add the attribute 'selected' to the option for which the select has selected.
I had this same issue when I wanted to save the contents of a div through PHP I had to set the attribute tags then send the HTML.
Edit: To Clerify the values of the elements you are copying are not stored as
<input value='this value'/>
they are stored in the DOM thus cloning them only clones the html not the value.

You can use localstorage for a quick patch to your problem.
Store the values within the textbox and textarea as,
//retrieving value from textbox and text area,
var textbox = $("#id-of-textbox").val();
var textarea = $("#id-of-textarea").val();
//retrieving the selected value for 'select'
var selectedValue = $('#id-of-select').val();
//storing the value in localstorage
localstorage.setItem("textbox", textbox);
localstorage.setItem("textarea", textarea);
localstorage.setItem("select", selectedValue);
//You can retrieve the above stored values anywhere you want as,
var newtextbox = localstorage.getItem("textbox");
var newtextarea = localstorage.getItem("textarea");
var newselect = localstorage.getItem("select");
//It is advisable to remove the store data after it's use,
localstorage.removeItem("textbox");
localstorage.removeItem("textarea");
localstorage.removeItem("select");
Advantage of using localstorage is that the data is stored within user's browser so you can access it on any page just like session data.

jQuery - Get the value of unselected item in multiselect

Although this may sound dead simple, the matter is complicated by the fact I can only use the change() trigger on the select element. I am using the 'Chosen' jQuery plugin which basically modifies the multi select box on the page.
Whenever a item is selected or unselected, the plugin triggers the change event on the original select element. I am obviously able to get all the unselected items, but I need the one that was just unselected that caused the change event to trigger.
So I have the following function, the bit in the middle is what I need to capture the item that was just unselected. #cho is the id of the original select element.
$("#cho").chosen().change( function() {
// Need code here to capture what item was just unselected, if any...
})

Store value when the user changes the the check box.
var preVal;
$("input[name='g']").on("change",function(e){
if(preVal){
alert(preVal);
}
preVal=$(this).val();
});
Check this http://jsfiddle.net/fcpfm/

1.Use hidden field
2.Hidden field value initially empty.
3.Onchange put the selected value in a hidden field.
4.If onchange is happening again , hidden field value is the previously selected value.
$("#cho").chosen().change( function() {
var hidvalue = $('#hiddenfield').val();
if (hidvalue ) {
//Get the previously selected ids
var prev_ids = $('#hiddenfield').val();
//Then Update currently selected ids
$('#hiddenfield').val('currently selected ids');
} else {
//Update currently selected ids
$('#hiddenfield').val('currently selected ids');
}
})

Try using a variable to store the selected item. Update it each time when item changed. I cant add comment. That is why I am posting it as an answer.

Knockoutjs complex binding combo select table

I have a table for adding a new budget details like the image below:
When I select an Income Account then another row is added to the viewmodel collection:
I want to set all field values to "0.00" when the new row is added and also I have a problem because if I delete a row then the "change" event of the combo doesnt exist so there is no way to add a new row when changing the last combo.
Any clue? Here is the fiddle working sample: http://jsfiddle.net/rLUyS/9/
Here is the code that I use to bind the change action to the last added combo:
$('select[name=cboincomeaccount_' + newRowIndex + ']').bind("change", {
combo: $(this)
}, handler);
function handler(event) {
newRowIndex++;
var combo = jQuery(this);
var row = combo.parent().parent();
appViewModel.addRow();
// Unbind
combo.unbind('change');
// Bind new combo
jQuery('select[name=cboincomeaccount_' + newRowIndex + ']').bind("change", {
combo: jQuery(this)
}, handler)
jQuery(row).find('input[name^="txtincmonth"]').removeAttr('disabled');
};
Thanks in advance!!

This might not be so much of a Knockout issue as it is a user interface issue.
I want to set all field values to "0.00" when the new row is added
Well that's easy enough. Simply initialize the the observable row to all zeros.
When I select an Income Account then another row is added to the viewmodel collection...
and also I have a problem because if I delete a row then the "change" event of the combo doesnt exist so there is no way to add a new row when changing the last combo.
This is probably a negotiable requirement.
Why not create an 'Add' button instead of insisting on this "nifty" behavior that adds a row when the user makes a section in the dropdown list?
Besides, even if we could accomplish what you're asking for (and I can envision a way that we could do this), what will you do when it's time to save the user's input to the server? Were you planning on ignore that last empty row?

Dynamically add option to chosen select multiple JQuery plugin

I want to add the text that a user inputs in the text field of a chosen select multiple input as an option, and automatically select it, all of this when the option doesn't exists, if the option exists, then I would like to select it. So far I have manage to do this:
Chosen.prototype.add_text_as_option = function () {
$('#id_select').append(
$('<option>')
.html(this.search_field.val())
.attr('selected', 'selected')
.attr('value', 0)
);
$('#id_select').trigger("liszt:updated");
return false;
};
I call this function whenever the users presses enter while the input field is in focus within the keydown_check function.
I have two problems:
Top priority, when the user presses enter and has typed a substring of an option, the option won't get selected, but the substring text will be added and selected. Not what I want.
For instance: If I have the option "foo", and start typing "fo", chosen will mark the first
option as candidate ("foo"), so if I press enter, it should be selected, but instead, what happens is that "fo" is added as an option and selected, when I actually wanted to select "foo".
If I select "foo" with a click, then everything works fine. The option chosen marks is selected and the substring text is taken as part of the option.
How can I add a non existent option to chosen, without loosing all the original functionality?
How can I access the select multiple field I initilized whith chosen inside the chosen plugin? As you can see in the code above, the id of the select multiple field is hardcoded. I want to do this to be able to refresh the select when the user adds a new option.
The functionality that I'm looking for is very similar to the skills widget of linkedin

You should try out the select2 plugin which is based off of chosen plugin but it works well with adding elements dynamically.
Heres the link: http://ivaynberg.github.com/select2/
Look at the example for auto-tokenization I think that might be what you are looking for.

I needed this today so I wrote something like this:
$(function() {
// form id
$('#newtag').alajax({
// data contains json_encoded array, sent from server
success: function(data) {
// this is missing in alajax plugin
data = jQuery.parseJSON(data);
// create new option for original select
var opt = document.createElement("OPTION");
opt.value = data.id;
opt.text = data.name;
opt.selected = true;
// check if the same value already exists
var el = $('#tags option[value="' + opt.value + '"]');
if( !el.size() ) {
// no? append it and update chosen-select field
$('#tags').append( opt ).trigger("chosen:updated");
} else {
// it does? check if it's already selected
if(!el[0].selected) {
// adding already existent element in selection
el[0].selected = true;
$('#tags').trigger("chosen:updated");
} else {
alert("Already selected and added.");
}
}
}
})
});
"#"newtag is a form, ".alajax" is a plugin that sends form data in async way and returns server's response in JSON format. In the controller I check if a tag exists otherwise I create it. In response I five "jsoned" tag object.

I created a jsfiddle of jquery chosen which takes text and create as option. In earlier version of jquery chosen have facility create option.
create_option: true;
persistent_create_option: true;
skip_no_results: true;
You can use this code:
$('#id_select').chosen({
width: '100%',
create_option: true,
persistent_create_option: true,
skip_no_results: true
});
jsfiddle link: https://jsfiddle.net/n4nrqtek/

just call it keyup_check
keydown_check is called before the pressed letter is initialized
unlike keyup_check

I found a solution multiple select
var str_array = ['css','html'];
$("#id_select").val(str_array).trigger("chosen:updated");