Drop down list change function not working in IE9 - javascript

I have two dropdowns, the second dropdown shall change when something is changed in the first dropdown, this is working fine in Firefox, but not in IE. (IE9). Then in the second dropdown, I'm looping through the items, and hiding some of them.
var intermin = '${intermin}';
var intermin2=intermin.substring(1,3);
$('#startSemester').change(function() {
var start=$('#startSemester').val();
var end=$('#endSemester').val();
var start1=start.substring(0,1);
var start2=start.substring(1,3);
var start3="";
var end3="";
if (start1=="H"){
start3="2";
}
else
start3="1";
var start4=start2+start3;
$('#endSemester option').removeAttr("disabled");
var endSemesters= $('#endSemester');
$.each($('option', endSemesters), function(index, value) {
var end= ($(this).val());
var end2=end.substring(1,3);
var end1=end.substring(0,1);
if (end1=="H"){
end3="2";
}
else
end3="1";
var end4=end2+end3;
$('#endSemester ' + 'option' + '[value =' + end + ']').show();
if (end4 < start4 || end2 > intermin2) {
$('#endSemester ' + 'option' + '[value =' + end + ']').hide();
}
});
});
Is there some way of having this working in IE.

The problem with IE is the hiding option part. IE doesn't support much CSS on option elements.
Especially display: none which is what .hide() does.
Therefor I believe it's best for you to disable the option.
var changeOption = $('#endSemester ' + 'option' + '[value=' + end + ']');
changeOption.prop("disabled", false);
if (parseInt(end4) < parseInt(start4) || parseInt(end2) > parseInt(intermin2)) {
changeOption.prop("disabled", true);
}
You can test this in various browsers: http://jsfiddle.net/tive/wU6XL/
Or if you're persistent enough find a plugin that:
hides the select control and uses a replacement ul li structure
wraps <option /> with a span (demo1 demo2)
PS: you might want to change the option values accordingly since I have no view on your HTML.

Hey Please refer This code
<asp:DropDownList ID="ddlWeeklyWeightIn" runat="server" ClientIDMode="Predictable">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
</asp:DropDownList>
Js Code Is
$('#ddlWeeklyWeightIn').on("change", function () {
alert($(this).val());
});
Please refer Link See Demo
Hope it helps you.

Related

JQuery: Text changed on previous element disappears

I am working on a JQuery application where I am trying to change the text of a previous element using $(element).prev().text("Mytext");. But when I scroll up / scroll down the page, the changes I have made are disappeared.
titles = $('.checkGroup:checked').parent().map(function () {
return $(this).text();
}).get(); // Generate Array of Titles
for (i = 0; i < titles.length; i++) {
$('span[level ="' + i + '"]').prev().text(titles[i]);
}
this is my code snippet. please help me to fix this
To fix this add the following JS.
Note that this is a quick fix. There must be some callback functions you can use to have the same end effect. The Slick.Grid plugin is rendering the HTML on scroll. Hence the issue.
Events for SlickGrid.
Edit 1:
grid.onScroll.subscribe(function(e,args){
$('.checkGroup:checked').parent().each(function (i, val) {
$('span[level ="' + i + '"]').each(function(){
$(this).prev().text($(val).text());
});
});
})
Normally the following might have worked. But the SlickGrid had many mysteries of its own. Its not a scroll event.
$(document).on('scroll', '.slick-viewport',function(){
$('.checkGroup:checked').parent().each(function (i, val) {
$('span[level ="' + i + '"]').each(function(){
$(this).prev().text($(val).text());
});
});
})

Opening a html select option on focus

I had asked a question about How to open option list of HTML select tag on onfocus(). At that time it solved my problem but I missed one problem that every time on opening a html select option onfocus next select option went disappear.
I not able to find whats going wrong with this code.
here is link for that problematic question jsFiddle.
Yes, that's what the lines
var x = "select[tabindex='" + (parseInt($(this).attr('tabindex'),10) + 1) + "']";
$(x).fadeTo(50,0);
do. They hide the next select, because otherwise it would show on top of the expanded one.
This isn't a good solution at all though. Instead i'd use z-index to prevent that from happening:
$('select').focus(function(){
$(this).attr("size",$(this).attr("expandto")).css('z-index',2);
});
$('select').blur(function(){
$(this).attr("size",1).css('z-index','1');
});
$('select').change(function(){
$(this).attr("size",1).css('z-index','1');
});
It would be even better to use a class instead of inline style. But i used that just as a demonstration.
http://jsfiddle.net/PpTeF/1/
Just comment out the fadeTo function. check this http://jsfiddle.net/PpTeF/2/
$(document).ready(function(){
$('select').focus(function(){
$(this).attr("size",$(this).attr("expandto"));
var x = "select[tabindex='" + (parseInt($(this).attr('tabindex'),10) + 1) + "']";
//$(x).fadeTo(50,0);
});
$('select').blur(function(){
$(this).attr("size",1);
var x = "select[tabindex='" + (parseInt($(this).attr('tabindex'),10) + 1) + "']";
//$(x).fadeTo('fast',1.0);
});
$('select').change(function(){
$(this).attr("size",1);
var x = "select[tabindex='" + (parseInt($(this).attr('tabindex'),10) + 1) + "']";
//$(x).fadeTo('fast',1.0);
});
});
Cheers!!

How to clone div with html controls without their content using jquery & refresh dropdown for IE?

I am using jquery .clone() function to clone a div which is having 6 controls (dropdowns, textboxes etc) .I have a functionality where there are 2 dropdowns DDL A & DDL B . Now changing the DDL A item populates content in DDL B. This function works fine in Chrome , Firefox , Ipad but doesn't work in IE .
The scenario is like I clone the div of 6 controls to add a new row for
data entry, & when I select item from DDL A , it shows the corresponding item
in DDLB. But when again I select other item from DDL A, the options of DDL B
don't get refreshed . It is strange that in Firebug of IE the DDL B shows
proper options, but the view doesn't.
Is it that IE doesn't refreshes dropdown before repopulation or it doesn't understands jquery
.clone() function ? Can anyone help me get a proper solution ?
The problem with IE is that it does not clears dropdown when we script
$("#ddlB").empty();
The rest of browsers work fine with this snippet.
So we need to use
$("#ddlB")[0].options.length = 1;
These clears the old dropdown state & data in IE. I am now successful to create a functionality where I clone divs with different html controls . Following is the snippet
$(function () {
$('.addRow').click(function () {
var clickNumrow = $(this).data('clickNumrow');
if (!clickNumrow) clickNumrow = 1;
$("#original").clone(true).insertBefore('.addnewRow').attr('id', 'original_' + clickNumrow);
$("#original_" + clickNumrow + " select#materialid")[0].options.length = 1;
$(this).data('clickNumrow', ++clickNumrow);
});
});
I finally could refresh the dropdown on selection change of dropdown item
$(function () {
$('select#categoryid').change(function () {
var url = "/Material/FillMatByCatId";
var ddlsource = this;
var prt = $(this).parent().parent().parent().attr('id');
var ddltarget = '#' + prt + ' select#materialid';
if ($(this).val() != '') {
$.getJSON(url, { CatId: $(this).val() }, function (data) {
$(ddltarget)[0].options.length = 1;
$(ddltarget).empty();
$.each(data, function (index, optionData) {
$(ddltarget).append("<option value='" + optionData.Value + "'>" + optionData.Text + "</option>");
});
});
}
});
});

JavaScript For loop appending 4 times

I have a JavaScript program that isn't properly functioning. For some reasons before it appends what it is actually getting from the checked radio box it appends three times with noting in the append except the styling. I'm not sure what I'm doing wrong.
$(document).delegate('#add-owner', 'pageinit', function () {
loadOwners();
$('#add-owner-save').bind('click', function () {
var permission = $('#editing-permissions option:selected').text();
var selection = $("input[type='radio']:checked") || [];
if (selection.length > 0) {
for (var i = 0; i < selection.length; i++) {
console.log($('#label-' + selection[i].id).find('.owner-name').text());
console.log($("input[type='radio']:checked").val());
$('.display-owners').append('<div class="ui-grid-a"><div class="ui-block-a">' + $('#label-' + selection[i].id).find('.owner-name').text() + '</div><div class="ui-block-b" style="text-align:right">' + permission + '</div></div>');
}
$('.display-owners').trigger('create');
}
$('.display-owners').show();
$('#add-owner').dialog('close');
$('input[name=contribute-radio]').attr('checked', false).checkboxradio("refresh");
return false;
});
});
I think the problem is that I have multiple radio areas on this page. How do I specify that I just want these radio buttons are the ones I want it to checked?
This code:
... + $('#label-' + selection[i].id).find('...
should be like this:
... + $('#label-' + selection[i].attr('id')).find('...
because what you have in selection array are jQuery objects, not DOM elements objects.
Thanks Esalija for pointing out my assumption was not correct.
Since said you have multiple sets of radio buttons, the selector you're using is finding all of them on the page so that is why you have multiple "checked" radio buttons.
This:
var selection = $("input[type='radio']:checked") || [];
To this:
var selection = $("input[name='radioset1']:checked") || [];
Then just name each radio set different and replace "radioset1" with the set you need for this one.

Need help with a JavaScript function to de-select items in jQuery DropdownChecklist

I'm working on an ASP.Net webpage which will use the jQuery Dropdown Checklist (http://code.google.com/p/dropdown-check-list/). I'm fairly inexperienced with JavaScript and completely new to jQuery.
Could anyone help me with a JavaScript function that de-selects items from a jQuery DropdownChecklist? It would need to accept a string, then de-select the item that matches that string.
Thanks in advance.
Try changing the original <select> element so that the item you want to deselect is no longer selected and then refresh the jQuery dropdown-checklist using the "refresh" command. Something like this (where selectID is the ID of the original <select> element and targetString is the content of the <option> you want to deselect):
function deselect(selectID, targetString){
$("#" + selectID + " option").each(function(){
if($(this).text() === targetString) $(this).attr("selected", "");
});
$("#" + selectID).dropdownchecklist("refresh");
}
Following code deselects item and removes it from display.
document.clearSel = function(list,txt){
var ele=document.getElementById(list);
for(i=0; i < ele.options.length; i++ ) {
if (ele.options[i].selected && (ele.options[i].text == txt) &&
(ele.options[i].value != "")) {
var val=ele.options[i].value;
$("div#ddcl-" + list +"-ddw input[value='"+val+"']").each(function(){
$(this).attr("checked",false);
var spSel="span#ddcl-" + list +" span.ui-dropdownchecklist-text";
var spTxt=$(spSel).text();
$(spSel).text(spTxt.replace(txt+",",'').replace(txt,''));
});
}
}
}
document.clearSel("s8","Low");
I got "div#ddcl--ddw input[value='']" and "span#ddcl- span.ui-dropdownchecklist-text" selectors after examining demo page for drop down check list
PS:- I've trie $("#" + list).dropdownchecklist("refresh"); but I am not able to refresh the text;

Categories