$.fn.fillSelect = function (data) {
return this.clearSelect().each(function () {
if (this.tagName == 'SELECT') {
var dropdownList = this;
$.each(data, function (index, optionData) {
var option = new Option(optionData.Text, optionData.Value);
if ($.browser.msie) {
dropdownList.add(option);
} else {
dropdownList.add(option, null);
}
});
// code for access "selectedindex"
}
});
};
Above is the code snippet for dynamically generating a drop down using jQuery.
I need to set selectedIndex property value dynamically for the purpose of showing the saved value earlier. I am going to insert that code into // code for access "selectedindex" place inside above code. So how can I set selectedIndex property for the dropdownList?
You should be able to set the selectedIndex property the same as any other.
Assuming that dropdownList is a HTMLSelectElement, dropdownList.selectedIndex = 5;, should work.
I'd do this in this bit of the code:
$.each(data, function (index, optionData) {
var option = new Option(optionData.Text, optionData.Value);
if (/* code to determine if this is the chosen one */) {
option.setAttribute("selected", "selected");
}
if ($.browser.msie) { /* etc */
You're setting the selected attribute on the relevant option.
Related
I am getting select box value like code below:
$(document).on('change','.test',function(){
var val = $('option:selected',this).val()
alert(val);
});
How can I get that selected value in below function:
function test_data()
{
//get select box value here
}
you could do like below :
var value = $('select.test').val();
alert(value)
or you can use on change event
<select onchange="test(this.value)" ></select>
<script>
function test(value) {
//value is selected option value
}
</script>
jsfiddle
It's depend -
1. You can easily pass the value to function.
$(document).on('change','.test',function(){
var val = $('option:selected',this).val()
test_data(val);
});
function test_data(val) {
//get select box value here
}
2. you can store value inside globe variable.
var gval;
$(document).on('change','.test',function(){
var val = $('option:selected',this).val()
gval = val;
});
function test_data() {
alert(gval)
//get select box value here
}
3. To get value using select element.
function test_data() {
var value = $('select.test').val();
alert(value)
}
You can call the metod test_data on change event of select.
$(document).on('change','.test',function(){
var val = $('option:selected',this).val();
test_data(val);
// alert(val);
});
function test_data(val)
{
alert(val)
}
See Fiddle
OR
$(document).on('change','.test',test_data);
function test_data()
{
var val = $('.test option:selected').val();
alert(val)
}
Fiddle
Structure Concept:-
Basically, i am trying to create the modal window containing input and that modal window currently fires when the input on index page get focused for that I have used data attribute to make a link between them by assigning them same attribute value.
Javascript Concept:-
for the modal window, I have created the modal object. and model object contains a bindModal method which takes one argument and that argument is data attribute value. after taking that value bindModal method will search dom elements containing that particular value and after the search, I iterate over them using each loop.
Problem
So basically I want whenever user starts typing on the model input it should get written automatically in input on the index page.
I will appreciate you all if guys help me out to make my code more optimized and well structured and most important thing is that let me know what mistake I have done in overall work Thanks
JavaScript Code
var modal = function () {
this.toggleModal = function () {
$('#modal').toggleClass('content--inActive').promise().done(function () {
$('#modal__close').on('click',function(){
$('#modal').addClass('content--inActive');
});
});
}
this.bindModal = function (bindVal) {
var bindValue = $(document).find('[data-modal-bind = ' + bindVal + ']');
$.each(bindValue, function (index) {
var bind1 = $(this);
if(index === 1) {
var bind2 = $(this);
$(bind1).change(function (){
$(bind2).val(bind1.val());
});
}
});
}
}
var open = new modal();
$('#input_search').on('click',function(){
open.toggleModal();
open.bindModal('input');
});
Here is one way to do what you want:
var modal = function() {
this.bindModal = function(bindVal) {
var bindValue = $('[data-modal-bind = ' + bindVal + ']');
bindValue.each(function(index) {
$(this).keyup(function() {
var value = $(this).val();
bindValue.each(function(i, e) {
$(this).val(value);
});
});
});
}
}
$('#input_search').on('click', function() {
var open = new modal();
open.bindModal('input');
});
Changes done:
I cached the inputs with same binding values in bindValue variable, and then bound the the keyup event for each of them. On keyup, the value of the current input is get in value, which is then assigned to each input using the inner loop.
This makes the inputs to be in sync while typing. Hope that solves your issue.
I have multiple checkboxes on my UI which when checked doing some operation. But the moment I refresh the page all the check boxes are unchecked again. How can I use AJS.Cookie (Atlassian Javascript framework) to save the state. Source Code which I have written but it gives the cookie value as undefined.
'#generate-canvas-button' is the id of the button which passes all the checked checkboxes.
// Wait until the page is completely loaded.
AJS.$(document).ready(function() {
// Iterating over all checkboxes on page.
$('input:checkbox').each(function() {
// Getting checkbox name.
var name = $(this).attr('name');
// Checking saved cookie.
if (AJS.Cookie.read(name)) {
// Updating checkbox state.
$(this).prop('checked', true);
}
});
// Clicking the OK button should run submit(), pop up displays all checked boxes
$('#generate-canvas-button').click(submit);
});
function submit() {
var checked = [];
var targetGroupActors = [];
var bigPictureActors = [];
var bigPictureImpacts = [];
var productDetailsActors = [];
var productDetailsDeliverable = [];
// Iterating over all checkboxes on page.
$('input:checkbox').each(function() {
// Getting checkbox name.
var name = $(this).attr('name');
// Checking checkbox state.
if ($(this).is(":checked")) {
// Saving checkbox name to cookie.
AJS.Cookie.save(name, true);
} else {
// Remove checkbox state from cookie.
AJS.Cookie.erase(name);
}
if ($(this).is(":checked")) {
impactMapValues = $( this ).prop('id');
impactMapActor = $( this ).prop('name');
var value = document.getElementById(impactMapValues).value;
if (impactMapActor == "actor-checkbox") {
targetGroupActors.push(value);
}
if (impactMapActor == "impact-checkbox") {
var result = value.split(",");
actor_value = result[0];
impact_value = result[1];
bigPictureActors.push(actor_value);
bigPictureImpacts.push(impact_value);
}
if (impactMapActor == "deliverable-checkbox") {
var result = value.split(",");
actor_value = result[0];
deliverable_value = result[1];
productDetailsActors.push(actor_value);
productDetailsDeliverable.push(deliverable_value);
}
checked.push(value);
}
});
addTotargetGroup(targetGroupActors);
addToBigPicture(bigPictureActors,bigPictureImpacts);
addReleaseTarget(productDetailsActors,productDetailsDeliverable);
}
Try this approach:
// Wait until the page is completely loaded.
$(document).ready(function() {
// Iterating over all checkboxes on page.
$('input:checkbox').each(function() {
// Getting checkbox name.
var name = $(this).attr('name');
// Checking saved cookie.
if (AJS.Cookie.read(name)) {
// Updating checkbox state.
$(this).prop('checked', true);
}
// Attaching onchange handler.
$(this).change(function() {
// Checking checkbox state.
if ($(this).is(":checked")) {
// Saving checkbox name to cookie.
AJS.Cookie.save(name, true);
} else {
// Remove checkbox state from cookie.
AJS.Cookie.erase(name);
}
});
});
});
Use viewstate concept intead of using other cookies logic
Wrap all your logic in
AJS.toInit(function ($) {
// You can use $ instead of AJS.$ here
...
});
This is Atlassian's equivalent of $(document).ready(...) which allows all the Atlassian code to load before you call yours.
I set a new property on a table element (each table should have the property selectedRow, which is a pointer to the tr element that is selected), but actually between calls of my click handler, that property becomes null:
$("table.grid").each(function () {
this.selectedRow = null;
});
var selectRow = function (tr) {
var table = tr.parents("table").get();
if (table.selectedRow == tr.get()) return;
// table.selectedRow still NULL!!!!!!!!!!!
if (table.selectedRow) {
var unselect = $(table.selectedRow);
unselect.removeClass('selectedChilds');
unselect.prev('tr').removeClass('siblingUpChilds');
unselect.next('tr').removeClass('siblingDownChilds');
}
table.selectedRow = tr.get();
tr.addClass('selectedChilds');
tr.prev('tr').addClass('siblingUpChilds');
tr.next('tr').addClass('siblingDownChilds');
}
$('table.grid tr').click(function (e) {
selectRow($(e.delegateTarget));
});
Use data(key[, value]) to set/get properties:
$('#my-elem').data('selected_row', '...');
I'm trying to replicate the following Fiddle (http://jsfiddle.net/3UWk2/1/) on mobile (more specifically iPhone Safari) but it seems like it is not running the javascript correctly, any suggestions? Thanks!!
Here's the js:
<script>
$(document).ready(function() {
$('#00Ni0000007XPVF').bind('change', function() {
var elements = $('div.container_drop').children().hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if somethings' selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change');
});
</script>
You seem to be using the cached value. hide does not return anything. So fails when you try to show them again.
var elements = $('div.container_drop').children().hide();
Supposed to be
var elements = $('div.container_drop').children();
elements.hide();
Code
$(document).ready(function() {
$('#00Ni0000007XPVF').bind('change', function() {
// cache the value
var elements = $('div.container_drop').children();
elements.hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if somethings' selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change');
});