We Keep Coding

How can I get my drop down to select a value after re-loading it via javascript

I have an application that allows users to edit the reason and next action for a selected receiving discrepancy via 2 drops downs. One of the drop downs is simply hard coded directly into the HTML the 2nd one is being loaded via a quick JavaScript based on what value is in 1st drop down.
The first drop down has 14 options for reasons, each of which has 6-12 options for action steps. If user changes first drop down reason selection, it has to go back to SQL db and retrieve the appropriate list of action step options to use for 2nd drop down.
All of that works.
The problem I'm having is when the user first selects a discrepancy to edit. At that time it loads the view and based on the value stored on SQL DB it sets the value of the 1st drop down, and then runs java to first empty, then append new list of options to 2nd drop down.
What I can NOT get to work is having it set the value of the 2nd drop down, after that java is ran to create list of options, once again trying to set it based on the value stored on SQL DB for that discrepancy.
If I hard code the 2nd list of options the same as first list, and don't have it use java to re-load it until the first drop down is changed, then I can set the value the same way I do the first one. The problem there is then the 2nd drop down would have about 30-40 options listed, until you change first drop down - only 6-12 of which would be accurate for that specific reason selected.
The way I originally set the 2 drop down values, when both lists were hard coded (still works on first drop down):
<script>
// script to set drop down values to those stored on DB after document finished loading
document.getElementById("ReasonDD").value = "#Model.DiscReason";
document.getElementById("NextActionDD").value = "#Model.NextAction";
</script>
Script used to change 2nd drop down if first one is changed (again works fine):
$(function () {
$("#ReasonDD").change(function () {
var option = $(this).val();
$("#NextActionDD").empty();
var url = "GetActionValues?selectedOption=" + option;
$.post(url, function (actValues) {
$.each(actValues, function (i, actValue) {
$("#NextActionDD").append($('<option></option>').val(actValue).html(actValue));
});
});
});
});
This script is one being ran when discrepancy is first selected, it is correctly loads 2nd drop down but I've tried all 3 shown ways both together and individually to set the value but none have worked so far. The console.log shown has a valid choice equal to one of the values loaded into 2nd drop down:
$(function () {
var reasonLoad = "#Model.DiscReason";
if (reasonLoad > "") {
var option = reasonLoad;
$("#NextActionDD").empty();
var url = "GetActionValues?selectedOption=" + option;
$.post(url, function (actValues) {
$.each(actValues, function (i, actValue) {
$("#NextActionDD").append($('<option></option>').val(actValue).html(actValue));
});
});
console.log("#Model.NextAction");
$("#NextActionDD").val = "#Model.NextAction";
$("#NextActionDD").value = "#Model.NextAction";
document.getElementById("NextActionDD").value = "#Model.NextAction";
}
});
I've now also tried Rajesh G's idea of:
$('#NextActionDD option[#Model.NextAction]').attr('selected','selected');
I added it directly after my console.log("#Model.NextAction") and instead of and commented out the other 3. Ran 2 test with both and 2 with it instead of console.log line, total of 4 tests.
On 2 tests with console.log on the console showed the "#Model.NextAction" values to be "Other" and "Wait for Vendor Response" but then gave the same error message all 4 times (both times with console.log and both times with it replaced) of:
Error: Syntax error, unrecognized expression: #NextActionDD option[Close Discrepency]
Although Close Discrepancy isn't the #Model.NextAction value, but was the last option appended to the list of options for the #NextActionDD dropdown

Student search project jquery / javascript

I am doing a project that requires me to add a search bar to a page that has a list of students names and email addresses and once the form is submitted only show students who have the characters typed in the search bar either on email address or student name.
So far I have the search bar appended and have started a function that listens for the click event on the button and adds the value from the input to a variable.
I thought I could do an if statement that checks if the list item contains the input variable I created and just add a class that I can then do another if statement later to hide or show based on what class it contains.
$(document).ready(function() {
//set number of students to show on each page
var inputValue;
var showStudents = 10;
//append search bar to the page
$(".page-header").append('<div class="student-search"><input placeholder="Search for students..."><button>Search</button></div>');
//add pagination to the page
$(".page").append('<div class="pagination"><ul></ul></div>');
//make page display 10 students at a time
//make search input only show students that contain that letter.
//use contains to add an ID?/class? to the student list item that matches the value in the input field.
//display the students that have said ID/class and hide the others.
$("button").click(function() {
//store the value of the input search into a variable
inputValue = $("input").val();
console.log(inputValue);
//filter the list items by the input value and add CSS
if ('.student-details h3:contains(inputValue)') {
$('.student-details h3').addClass('showstudent')
}
});
});
Obviously my issue is that once I write this it adds the class to all .student-details h3 items, not just the ones that contain the inputValue, and I cannot use "this" because it just adds the class to the button. Is this the best way to code this? Should I just convert my students list to an array and have the value of the input search the array and return the results into a new array? I am sort of lost here! Thanks for any help.

You can try this approach:
$('.student-details h3').each(function() {
if ($(this).text() == inputValue) {
$(this).addClass('showstudent');
}
}

Mapping a new column header to newly added html table column

What I am trying to accomplish is to allow the user to generate a table on a page, allow user to create new column(s), and for the column names to show up, and be mapped to, the data in the same column.
Currently, I am able to build the table and I have a generated table that maps its column headers to a select box. I have a refresh button on this page, that when clicked, refreshes the select box headers (in case a user creates a new column).
When I refresh the select box, the correct headers drop down, but the data that should be selected along with them are not mapped (I can see this with my console.log statements) This only happens when I create a column.. the column is appended to the table, but when I do something like
$('#dropHeader').change( function() {
firstArray = [];
console.log('First Select Box Changed');
var table = document.getElementById("theTable");
currentValue1 = ($(this).val());
console.log(currentValue1);
var elem1 = $("#theTable td:contains("+ currentValue1 +")");
console.log(elem1);
var index1 = elem1.index('#theTable td');
console.log(index1);
index1+=1;
$("#theTable tr td:nth-child("+ index1 +")").each(function () {
firstArray.push($(this).text());
});
firstArray.shift();
});
This works only for columns that are originally a part of the table.
Something that might help is that the console.log jQuery selector statements that I documented:
Normal selector statement:
[td,prevObject: m.fn.init[1], context: document, selector: "#theTable td:contains(Header 2)"]
Column Added selector statement:
[prevObject: m.fn.init[1], context: document, selector: "#theTable td:contains(New Column↵)"]
I've looked at this one for a while, and the I believe the issue lies within the jQuery selector statement. One thing I notice is the return signal at the end of the jQuery selector statement.
Any help would be greatly appreciated! Thanks!

Search value in div

I've got a little function which allows to search values through rows, but there is a problem with it - search function is not working properly.
Please take a look at the fiddle here http://jsfiddle.net/4f3WF/
Try to set text in input to "798" for example.
In the end this function must be able to search through entire row, not just only first or last ms-column div. I just don't get what's wrong.

Just try with:
e.find('.multiple-selector-table .ms-search-label .ms-search').on("keyup", function() {
var value = $(this).val();
e.find('.multiple-selector-table-row').hide();
e.find('.ms-column:contains("' + value + '")').parents('.multiple-selector-table-row').show();
});
Updated fiddle
In the first step, we hide all rows. Next we search for cells that contain value passed in input and show their parent rows.

HTML: Get value from input with no ID

Been looking around and I cant seem to find an answer to this so maybe im wording it wrong but here it goes.
So I have a table displaying data from a database. In jQuery I have made it so a row can be added with empty inputs and then submitted to the database, this works fine.
I am now attempting to be able to edit it. So each row will have a button to edit that row, the button will put the row values into inputs so you can change the value and update the database. How can I do this? I was looking into using this here but Im not sure how I can get the value of the input boxes without them having some sort of ID.
jQuery I was trying to use:
$('#tbl').on('click','.xx',function() {
$(this).siblings().each(
function(){
if ($(this).find('input').length){
$(this).text($(this).find('input').val());
}
else {
var t = $(this).text();
$(this).text('').append($('<input />',{'value' : t}).val(t));
}
});
});
Am I over thinking this? Should I just be grabbing the values and then putting them in pre-made input boxes?
Update:
HTML:
sb.AppendLine("<table style='width: 80%;'>")
sb.AppendLine("<tr class='inputRowbelow'>")
sb.AppendLine("<td style='width: 20%;' class='ui-widget-header ui-corner-all'>Area</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Details</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Options</td>")
sb.AppendLine("</tr>")
For Each w In workItems
sb.AppendLine("<tr>")
sb.AppendLine("<td>" & w.area & "</td>")
sb.AppendLine("<td>" & w.details & "</td>")
sb.AppendLine("<td><a href='#' class='fg-button ui-state-default ui-corner-all edit'><img src='/images/spacer.gif' class='ui-icon ui-icon-pencil' /></a></td>")
sb.AppendLine("</tr>")
Next
sb.AppendLine("</table>")

There are a couple of ways to do this, including changing your VB code to add extra data to the html, but I will answer this from a pure javascript/JQuery solution.
First of all you need to handle the click event for each edit button, after that you find the matching row, and then you can get the first to td elements of that row...
$(".edit").click(function(e){
e.preventDefault();//prevent the link from navigating the page
var button = $(this);//get the button element
var row = button.closest("tr");//get the row that the button belongs to
var cellArea = row.find("td:eq(0)");//get the first cell (area)
var cellDetails = row.find("td:eq(1)");//get the second cell (details)
//now you can change these to your inputs and process who you want
//something like this...
ConvertToInput(cellArea, "area");
ConvertToInput(cellDetails, "details");
});
function ConvertToInput(element, newId){
var input = $("<input/>");//create a new input element
input.attr("id", newId);//set an id so we can find it
var val = element.html();//get the current value of the cell
input.val(val);//set the input value to match the existing cell
element.html(input);//change the cell content to the new input element
}
Here is a working example
From that you can then do the saving that you say you have already implemented, using the ID values of each field to get the values to save.

Instead of using a For Each ... in ... Next loop, use a a For loop with a counter. give each button and each row an ID with the current counter value at the end. You can then use Jquery to make each row editable separately, because each row has a row number now.