Develop Reference

multiselect box will not populate without alert - javascript

I can't post all my code but I try to get the important pieces in here. The problem I have is that I populate a multiselect box from the database then I get the already selected items and add those to the selected attribute. This all works in IE 7 which is what my testers are using, unfortunately I'm on IE 9 and most of my users are on IE 9. This code doesn't work on IE 9 or on firefox. The very weird thing is it will work if I stick an alert just after the call to the function that populates the multiselect.
after getting the selected values from the database through an ajax call I use
var oldValues.push($(this).find("Value_ID).text());
I do an alert of oldValues they are there 31,32,45
then I use $("drop2-input").val(oldValues);
If I put an alert after this line it works.
I have spent the majority of the day checking every line of code there are no missing semicolons, no curly brackets out of place, and no parentheses out of place. Does anyone know of a way to make this work.
Oh I already tried using a timeout to pause the code that just stoped the rest of the page from loading.

This should work for you.
Take a look at the JSFiddle I put togethre for you:
http://jsfiddle.net/douglasloyo/NEtJd/
var json = [
{name:"Texas", value:1},
{name:"Texas Again", value:2},
{name:"Texas Rocks!", value:3}];
$.each(json, function(i, value) {
$('#my-select').append($('<option>').text(value.name).attr('value', value.value));
});
<select id="my-select">
<option>-Select-</option>
</select>

Related

Here is my fiddle https://jsfiddle.net/juggernautsei/w8yn2ehk/
My jquery has gotten very rusty. The system says I have to put the code in here so here is a snippet below.
$(function() {
$("input[name$='notify_type']").click(function() {
var test = $(this).val();
var selected = $("input[type='radio'][id='notify_type3']:checked").val();
$("div.referral").hide();
$("#ref" + test).show();
if(selected == "4") var opts = [
{name: "Please Select", val:""},
{name:"WMOX", val:"WMOX"},
{name:"WVKL", val:"WVKL"},
{name:"WJDQ", val:"WJDQ"},
{name:"WOWI", val:"WOWI"},
{name:"WTOK", val:"WTOK"}
];
On the left is a list of referral types. I want the block on the left to change depending on the type of referral that is selected. Most of that is accomplished.
What I want to happen is notify_type3 should populate the dropdown list on the right according to the list type selected on the left. The first one works correctly. The rest do not. I think I need an on change but not sure where to place it. Suggestions please

I found a few problems. Two main ones:
1) The way you were getting selected only worked for the first one. For the others selected got the value undefined.
2) The way you decided which block on the right were to be shown ($("#ref" + test).show();) didn't work since test could have a value between 1 and 10 and you only had ref elements for 1-4.
Here is the changes I made: https://jsfiddle.net/w8yn2ehk/41/
Please note is still doesn't work for 7-10 because I only fixed the ones using the select block (ref3), but with this info it shouldn't be a problem to fix the rest.

I don't know how this started happening but a ui-grid (project home) on my page (angular SPA) is duplicating 2 rows somehow (and I don't want it to).
Refreshing the page (Chrome) has no effect (I have devtools open, with Disable cache checked).
For reference: I am setting the grid.data to an array with 65 entities, so that count is correct, and if I remove all filters it shows all 65, but actually 67 rows shown (I took the time to count, with the interesting find that alternating rows don't necessarily keep their grey or white color as you scroll up and down).
Here's what I am seeing. If I click row 3 or 4, both are selected and 1 and 2 are unselected. I assume that they have the same generated Id. Note here that it does say that only one row is selected, but 4 are shown!
I can open the page in Firefox and log in, then go to this page which then looks right, so it is either something in Chrome or something in this instance and other users wouldn't see it.
Here is the array from the grid.data:
[{"Name":"Trainer","Desc":"","Type":"string","OptionsCount":6,"$$hashKey":"uiGrid-000W"},
{"Name":"System","Desc":"Practice","Type":"string","OptionsCount":97,"$$hashKey":"uiGrid-000Y"},
{"Name":"EMR","Desc":"Electronic","Type":"string","OptionsCount":67,"$$hashKey":"uiGrid-0010"},
{"Name":"Guideline","Desc":"Guideline","Type":"string","OptionsCount":7,"$$hashKey":"uiGrid-0012"},
{"Name":"Notes","Desc":"Notes","Type":"string","OptionsCount":4,"$$hashKey":"uiGrid-0014"},
{"Name":"Scorecard","Desc":"April 2015","Type":"string","OptionsCount":27,"$$hashKey":"uiGrid-0016"},
{"Name":"Scorecard","Desc":"July 2015 ","Type":"string","OptionsCount":27,"$$hashKey":"uiGrid-0018"},
{"Name":"Scorecard","Desc":"November 2","Type":"string","OptionsCount":27,"$$hashKey":"uiGrid-001A"},
{"Name":"Scorecard","Desc":"December 2","Type":"string","OptionsCount":27,"$$hashKey":"uiGrid-001C"},
{"Name":"Scorecard","Desc":"September ","Type":"string","OptionsCount":27,"$$hashKey":"uiGrid-001E"},
{"Name":"2012","Desc":"","Type":"money","$$hashKey":"uiGrid-001G"},
{"Name":"2014","Desc":"","Type":"money","$$hashKey":"uiGrid-001I"},
{"Name":"2015","Desc":"","Type":"money","$$hashKey":"uiGrid-001K"},
{"Name":"2016","Desc":"","Type":"money","$$hashKey":"uiGrid-001M"},
{"Name":"2017","Desc":"","Type":"money","$$hashKey":"uiGrid-001O"},
{"Name":"Specialty","Desc":"Primary","Type":"string","OptionsCount":191,"$$hashKey":"uiGrid-001Q"},
{"Name":"Specialty2","Desc":"Secondary","Type":"string","OptionsCount":191,"$$hashKey":"uiGrid-001S"},
{"Name":"Special","Desc":"Special","Type":"string","$$hashKey":"uiGrid-001U"},
{"Name":"Rooming In","Desc":"Rooming in","Type":"date","$$hashKey":"uiGrid-001W"},
{"Name":"HTN","Desc":"Hyper","Type":"date","$$hashKey":"uiGrid-001Y"},
{"Name":"Depression","Desc":"Depression","Type":"date","$$hashKey":"uiGrid-0020"},
{"Name":"Measure","Desc":"measure","Type":"date","$$hashKey":"uiGrid-0022"},
{"Name":"HCC","Desc":"HCC","Type":"date","$$hashKey":"uiGrid-0024"},
{"Name":"Data 1","Desc":"First","Type":"date","$$hashKey":"uiGrid-0026"},
{"Name":"Data 2","Desc":"Second","Type":"date","$$hashKey":"uiGrid-0028"},
{"Name":"Data 3","Desc":"Third","Type":"date","$$hashKey":"uiGrid-002A"},
{"Name":"Term Date","Desc":"Termination","Type":"date","$$hashKey":"uiGrid-002C"},
{"Name":"2015.11","Desc":"11.1.2015","Type":"float","$$hashKey":"uiGrid-002E"},
{"Name":"2016.07","Desc":"7.1.2016","Type":"float","$$hashKey":"uiGrid-002G"},
{"Name":"Status","Desc":"Practice","Type":"string","OptionsCount":3,"$$hashKey":"uiGrid-002I"},
{"Name":"Phase","Desc":"","Type":"string","OptionsCount":5,"$$hashKey":"uiGrid-002K"},
{"Name":"EMFMT","Desc":"","Type":"string","OptionsCount":2,"$$hashKey":"uiGrid-002M"},
{"Name":"LAB Data","Desc":"","Type":"string","OptionsCount":2,"$$hashKey":"uiGrid-002O"},
{"Name":"Phase #","Desc":"Performance","Type":"integer","$$hashKey":"uiGrid-002Q"},
{"Name":"Letter 1","Desc":"Performance","Type":"date","$$hashKey":"uiGrid-002S"},
{"Name":"Letter 2","Desc":"Performance","Type":"date","$$hashKey":"uiGrid-002U"},
{"Name":"Letter 3","Desc":"Performance","Type":"date","$$hashKey":"uiGrid-002W"},
{"Name":"I Term","Desc":"","Type":"date","$$hashKey":"uiGrid-002Y"},
{"Name":"CO","Desc":"CO","Type":"bit","$$hashKey":"uiGrid-0030"},
{"Name":"Chart","Desc":"Chart","Type":"string","OptionsCount":3,"$$hashKey":"uiGrid-0032"},
{"Name":"Test money","Desc":"","Type":"money","$$hashKey":"uiGrid-0034"},
{"Name":"End-testing","Desc":"","Type":"money","$$hashKey":"uiGrid-0036"},
{"Name":"test1234","Desc":"","Type":"string","OptionsCount":5,"$$hashKey":"uiGrid-0022"},
{"Name":"testAbc","Desc":"","Type":"date","$$hashKey":"uiGrid-003A"},
{"Name":"test456","Desc":"","Type":"bit","$$hashKey":"uiGrid-003C"},
{"Name":"M","Desc":"Meaningful","Type":"string","OptionsCount":2,"$$hashKey":"uiGrid-003E"},
{"Name":"test date","Desc":"","Type":"date","$$hashKey":"uiGrid-003G"},
{"Name":"Service","Desc":"","Type":"string","$$hashKey":"uiGrid-003I"},
{"Name":"R Notes","Desc":"","Type":"string","OptionsCount":17,"$$hashKey":"uiGrid-003K"},
{"Name":"Appointment","Desc":"Appointment","Type":"string","OptionsCount":3,"$$hashKey":"uiGrid-003M"},
{"Name":"Connection","Desc":"Type of Connection","Type":"string","OptionsCount":6,"$$hashKey":"uiGrid-003O"},
{"Name":"A","Desc":"","Type":"string","OptionsCount":6,"$$hashKey":"uiGrid-003Q"},
{"Name":"Billing","Desc":"B","Type":"string","OptionsCount":6,"$$hashKey":"uiGrid-003S"},
{"Name":"E Connection","Desc":"","Type":"string","$$hashKey":"uiGrid-003U"},
{"Name":"Addend","Desc":"Data Addend","Type":"string","OptionsCount":2,"$$hashKey":"uiGrid-003W"},
{"Name":"IT","Desc":"","Type":"string","OptionsCount":4,"$$hashKey":"uiGrid-003Y"},
{"Name":"Portal","Desc":"","Type":"string","OptionsCount":5,"$$hashKey":"uiGrid-0040"},
{"Name":"Follow-up ","Desc":"","Type":"string","OptionsCount":3,"$$hashKey":"uiGrid-0042"},
{"Name":"Subspecial","Desc":"","Type":"string","OptionsCount":4,"$$hashKey":"uiGrid-0044"},
{"Name":"T","Desc":"Trainerh","Type":"string","$$hashKey":"uiGrid-0046"},
{"Name":"S","Desc":"","Type":"string","OptionsCount":3,"$$hashKey":"uiGrid-0048"},
{"Name":"A","Desc":"Date","Type":"string","$$hashKey":"uiGrid-004A"},
{"Name":"Dual","Desc":"Date joint","Type":"date","$$hashKey":"uiGrid-004C"},
{"Name":"Start D","Desc":"","Type":"date","$$hashKey":"uiGrid-004E"},
{"Name":"CO Addend","Desc":"Data COA","Type":"string","OptionsCount":1,"$$hashKey":"uiGrid-004G"}]
Has anyone else experience this issue with ui-grid, and how did you resolve it?
Or can anyone explain why it is creating these extra rows, and consistently only for these 2 rows?

Ok, so here's my answer. I apologize that this wasn't all in the original question, but there was too much code for it to be helpful. I'm writing an answer to be helpful for anyone else that runs into similar issues and gets stuck debugging (as I see that sharing as the purpose of SO).
For background, a row is supposed to get selected during the page load process if the url has an Id for the row as a parameter.
In the code the data is loaded into the grid.data. Then if the url has a parameter a loop executes on grid.data to find the matching row(s). If it is found, then it would call
gridApi.grid.modifyRows(grid.data).then(action);
where the action would be something like
$timeout(function () {
// Do this after the columns and rows processors have finished and it is all rendered.
selectRows.forEach(function (row) {
gridApi.selection.selectRow(row);
});
gridApi.core.scrollTo(selectRows.pop(), grid.columnDefs[0]);
}, 100);
What is working for me now is to skip the "gridApi.grid.modifyRows" and just call the action. I think that code was in there earlier to update the grid if it had rendered before the data was retrieved and assigned to grid.data, but that is taken care of by waiting for onRegisterApi to fire, then assigning the grid.data.

This question already has answers here:
How to set HTML value attribute (with spaces)
(6 answers)
Closed 11 months ago.
I have a form with various input boxes. I use jQuery on a click event to take the text in the input boxes and populate several select menus. This all works quite happily.
I noticed the problem when I used PHP to submit the form data to MySQL: the selected values in the select menus were included but if there was a space in the string then it only included text to the first space.
Tracking the problem back using an onchange event on the select menu and outputting it to the console.log shows it happens immediately, it is not lost in translation.
I use some pre-set select menus and they work fine, even if I add spaces.
Below some code examples, shortened:
HTML
<input type="text" name="head_loss1" id="head_loss1">
<select name="loss_depend1" id="loss_depend1">
JS/JQ
<script>
$(document).ready(function() {
$( "#collapse5" ).one("click", create_holoss_list);
function create_holoss_list(){
var lo1 = $('#head_loss1').val();
$('#loss_depend1').append('<option value=""></option><option value='+lo1+'>'+lo1+'</option><option value='+lo2+'>'+lo2+'</option><option value='+lo3+'>'+lo3+'</option><option value='+lo4+'>'+lo4+'</option><option value='+lo5+'>'+lo5+'</option><option value='+lo6+'>'+lo6+'</option><option value='+lo7+'>'+lo7+'</option><option value='+lo8+'>'+lo8+'</option><option value='+lo9+'>'+lo9+'</option><option value='+lo10+'>'+lo10+'</option>');
};
});
</script>
JS (for output to console)
loss_depend1.addEventListener("change", myScript);
function myScript() {
console.log(loss_depend1.value);
}
So if the text in the input box is: one two
The select menu will show one two as an option, but when I output the selected value it will be one
I am hoping I have done something stupid because I have been looking at it too long and I can't see where I should have " instead of ' or vice versa!
Thanks for any assistance
Blair

After taking a break I came back and noticed:
$('#loss_depend1').append('<option value=""></option><option value='+lo1+'>'+lo1+'</option>
should be:
$('#loss_depend1').append('<option value=""></option><option value="'+lo1+'">'+lo1+'</option>
"'+lo1+'"
It's the simple things...

I am trying to hide some options from a select. The solution used is this:
this.selectBox.children(".myOption_"+optionValue).wrap("<span></span>");
this.selectBox is a jQuery object of the mentioned select.
In Firefox it works just fine, but in IE8 the changes are not reflected: if one should look at the select, it will seem unchanged. But if the user selects an option, the value respects the removed element.
Here is an example:
<option value="val1">Test1</option>
<option value="val2">Test2</option>
<option value="val3">Test3</option>
<option value="val4">Test4</option>
Now, when I select "Test1", a function is called and the above code is executed.
From the user's perspective, the options will remain the same. BUT if he now tries to select "Test1" again, the provided value will actually be "val2" and the option should be removed. Again, nothing happens, so he selects "Test1" again and the value will be "val3" and so on.
In order to display the occured changes, I have to hide and then show the select.
this.selectBox.children(".myOption_"+optionValue).wrap("<span></span>");
this.selectBox.hide().show();
The code above will make the changes visible(hide the clicked options).
What is more curious is that this fiddle:
http://fiddle.jshell.net/FAkEK/25/show/
works as it should on the same browser.
I do not understand why is this all of a sudden happening.
Why is this happening? Where should I look for the issue?

I am not sure why you would want to hide the option instead of removing it, but here's an example on how you can do it. It's based on this solution for hiding options.
Fiddle here -> http://jsfiddle.net/kAp42/2/
JSBin here (should work in IE8) -> http://jsbin.com/uyuram/1
var $select = $('select');
$select.prop('selectedIndex', -1); //ensure we can hide the first option
$select.change(function () {
//not sure why you would not want to remove the option instead of hiding it byt, if you want to hide...
$select.children('option:selected').wrap('<span class="hide-option"></span>');
//remove it
//$select.children('option:selected').remove();
this.selectedIndex = -1; //ensure we can hide the last option
});

I am a predominantly PHP developer. I realize in this day and age specialization in one scripting language doesn't cut it, but the fact remains that my skills at JavaScript and jQuery are pretty green. I am a novice at best. I can create my own code but Cross Browser compatibility remains a huge issue with my work in JavaScript.
Anyway, I have a script that filters products according to categories/subcategories. This is how it works: you select a category and the javascript in the background does its thing to filter the subcategories so that the options displayed are the ones pertaining to the parent category- a combination of these two filters the product line.
Here is my code:
function scategories(){
//get the category option value from the category drop down bar
var cat = (document.getElementById('categories').value);
//get all the options from the subcategory drop down bar
var subcat = document.getElementsByClassName('subcategories');
var n=0;
//if the category bar option is set to 0 display everything
if(Number(cat)==0){
Show();
}
//filter the subcategories
while(subcat.item(n)){
//if there is no match b/w the subcategories option and the categories id FILTER
if(Number((subcat.item(n).value).split('|')[1]) != Number(cat) && Number(subcat.item(n).value) != 0){
document.getElementsByClassName('subcategories')
.item(n)
.style
.display="none";
}else{
//else display the subcategory
document.getElementsByClassName('subcategories')
.item(n)
.style
.display="list-item";
}
n++;
}
}
This code is pretty self explanatory I would say. I also have a shiftfocus function that shifts the focus from the current option selected in the subcategory to the default one which is 'none' whenever a new category is picked. This basically resets the subcategory.. here's the code:
function shiftfocus(){
document.getElementsByClassName('subcategories')
.item(0)
.removeAttribute("selected");
document.getElementsByClassName('subcategories')
.item(0)
.setAttribute("selected","selected");
}
Shiftfocus is called onChange and scategories is called onClick.
Problem 1:
1) Firefox: Shiftfocus doesn't shift the focus to the default option even though I can see it adds the 'selected' attribute.
2) Safari: Does not work at all.
EDIT: Problem 2 was the product of a careless mistake. I left open an anchor tag which was
creating havoc in IE. Should have double checked before bothering you
guys. Sorry. Problem 1 still persists.
Problem 2:
I understand none of us developers particularly like internet explorer. But I am willing to believe I have made a mistake here. I have some jQuery that fetches data from a script in another file via the native POST function and appends it to a table with the id "content". This works fine on every browser, except IE. If I try going back to IE 7,8 compatibility mode the results are a little better (the data shows up broken in pieces though) and in IE9 compatibility mode nothing is appended at all! Here's the code:
$.post("bagcontents.php", {
"Bid": $(this).attr('bid')
},
function(data){
$("#content").empty().append(data);
roundNumber();
$('#processorder_hidden').attr('value',currentBid);
});
//append here
<div id="contents" style="overflow:auto;height:345px;padding-right:5px;">
<form name="bag_contents" id="bag_contents" method="post" action="<?php _page ;?>">
<table id="content">
</table>
<input type="hidden" id="bag_contents_hidden" name="bag_contents_hidden" value="1" />
</form>
</div>
Any help will be appreciated. I tried outputting the fetched results with alert, alert(data), and the script is fetching everything just fine. Its the just the append part that fails :|

Here are some suggestions and hope you find them somewhat useful.
Problem: 1
Instead of having the shiftfocus() set the to a specific value, have you tried using .val('') just to clear it out. I can imagine that this will default to the first option.
Problem: 2
This will be hard to debug without knowing what data is coming back from the server. Might be bad formatting or some syntax error on the rendered output.