Develop Reference

$(".class").val() is returning undefined value

I'm hooking into the Trello API and creating a with the Lists from a Board. I'm then attempting to list all the Cards from each List. When getting the ListID from the value attribute, it's returning "undefined". Why is this?
I'm printing it out with document.getElementById("demo").innerHTML = $(".board").val();
//HTML
<label>Choose from a List of Boards</label>
<div id="output"></div>
<label>Display Cards Below for Board Selected</label>
<div id="outputCards"></div>
<p id="demo"></p>
//Javascript
var $boards = $("<select>")
.attr("id", "boards")
.text("Loading Boards...")
.appendTo("#output");
Trello.get("/boards/BOARD_ID/lists", function(boards) {
$boards.empty();
$.each(boards, function(ix, board) {
$("<option>")
.attr({href: board.url, target: "trello", value : board.id, name : board.id, id : board.id})
.addClass("board")
.text(board.name)
.appendTo($boards);
});
});
var $cards = $("<div>")
.text("Loading Cards...")
.appendTo("#outputCards")
.appendTo("#demo");
// This is where I'm trying to return the value
document.getElementById("demo").innerHTML = $(".board").val();
var resource = "lists/LIST_ID/cards";
Trello.get(resource, function(cards) {
$cards.empty();
$.each(cards, function(ix, card) {
$("<a>")
.attr({href: card.url, target: "trello"})
.addClass("card")
.text(card.name)
.appendTo($cards);
});
});
The HTML is outputting like this:
<label>Choose from a List of Boards</label>
<div id="output">
<select id="boards">
<option target="trello" value="LIST_ID" name="LIST_ID" id="LIST_ID" class="board">
List One
</option>
...
</select>
</div>
<label>Display Cards Below for Board Selected</label>
<div id="outputCards"></div>
<p id="demo">undefined</p>

I think the main problem here is that the board class is only being added to elements in the Trello.get callback.
As this code is executed asynchronously, it's likely that you are executing $(".board").val() before the code in the callback has been executed, meaning `$(".board") returned no elements.
I would consider something like this
Trello.get("/boards/BOARD_ID/lists", function(boards) {
$boards.empty();
$.each(boards, function(ix, board) {
$("<option>")
.attr({href: board.url, target: "trello", value : board.id, name : board.id, id : board.id})
.addClass("board")
.text(board.name)
.appendTo($boards);
});
// This is where I'm trying to return the value
$('#board').change(function () {
document.getElementById("demo").innerHTML = $(".board:selected").val();
});
});

How do i check if a text is almost the same as required

I want to check if the value of my textarea is almost the same as requires , for example :
I have a HTML code :
<textarea class="ab" placeholder="Type here"></textarea>
<div class="result">
</div>
and a Jquery code :
$(document).ready(function(){
$(".btn").click(function(){
var a = $(".ab").val();
var b = $(".result").html();
/* */
if(a.indexOf('Which of the following is generally true about Open Source software?') >= 0){$('.result').html('Its usually developed on a volunteer basis and anyone is free to change it (correct).');} /* */
else{
$(".result").html("error");
}
});
});
this code doesn't work as what i want actually , this is just what i tried to make . But the thing i want is for example when the value of the $('.ab') is almost the same as the text Which of the following is generally true about Open Source software? like the following is generally true or true about the Open Source , the $(".result") still have the html as Its usually developed on a volunteer basis and anyone is free to change it (correct).
So how do i do that , thanks for your help

Try splitting input text into array , using $.each() to iterate input words , if input words match at least five words in selected phrase , return true , else return false at if ; e.g.; try typing or pasting at textarea
the following is generally true or true about the Open Source
$(document).ready(function() {
$(".btn").click(function() {
var a = $(".ab");
var b = $(".result");
var arr = a.val().split(/\s+/);
var n = 0;
var phrase = "Which of the following is generally true about Open Source software?";
$.each(arr, function(key, val) {
if(phrase.indexOf(val) >= 0) ++n;
})
if (n >= 5) {
b.html('Its usually developed on a volunteer basis and anyone is free to change it (correct).');
}
else {
b.html("error");
};
a.val(""); n = 0;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea class="ab" placeholder="Type here"></textarea>
<div class="result"></div>
<button class="btn">click</button>

Actually it should be:
$(document).ready(function(){
$(".btn").click(function(){
var a = $(".ab").val();
var b = $(".result").html();
var c = 'Which of the following is generally true about Open Source software?';
console.log(c.indexOf(a));
if(c.indexOf(a) >= 0){
$('.result').html('Its usually developed on a volunteer basis and anyone is free to change it (correct).');
} else {
$(".result").html("error");
}
});
});
<textarea class="ab" placeholder="Type here">following is generally true about Open Source</textarea>
<div class="result"></div>
<button class="btn">test</button>

Split Javascript values in JSON

I need to split an array into an JSON array which should be following pattern.
{{"url":url, "north":True "side":True}, {"url":url, "north":False, "side":True}}
I get the url parameter with this code. As you can see here, this code displays 3 checkboxes where you can select if the picture is north, on the side or if you want to select it.
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
xmlDoc = xmlHttp.responseXML;
pictureTemp = [document.getElementById("imgfilename")];
$('.login-form').append('<button onclick="sendAuswahl()">Send</button><br>');
for (var i = 0; i < xmlDoc.getElementsByTagName("imgfilename").length; i++) {
pictureTemp[i] = xmlDoc.getElementsByTagName("imgfilename")[i].childNodes[0].nodeValue;
$('.login-form').append('<input type="checkbox" name="north" value="North"><input type="checkbox" name="orientation" value="Side"><input type="checkbox" name="url" value='+ pictureTemp[i]+'><img src='+ pictureTemp[i]+' width="50%"></br>');
};
}
To get all ticked checkboxes, I use this code:
var arrayUrl = $("input[name='url']:checked").map(function(){
return this.value;
}).get()
var arrayNorth = $("input[name='north']:checked").map(function(){
return "True";
}).get()
var arrayOrientation = $("input[name='orientation']:checked").map(function(){
return "True";
}).get()
To convert the selection to a JavaScript object and to get the pattern which I described above, I use this:
var picture = {
"url" : arrayUrl,
"North" : arrayNorth,
"Side" : arrayOrientation
};
But when I alert the value of a selected image I get this:
{"url":http://www.example.com, "north":True "side":True}
And when I select 2 images I get this:
{"url":http://www.example.com, http://www.example2.com, "north":True "side":False}
Instead of this:
{{"url":http://www.example.com, "north":True "side":False}, {"url":http://www.example2.com, "north":False, "side":True}}
So my question is now: How can I adept the values in the pattern which I've described above?

var picture = [];
$.each(arrayUrl, function(index,val) {
val = {
"url" : val,
"North" : arrayNorth[index],
"Side" : arrayOrientation[index]
};
picture.push(val);
});

var picture = [];
$(arrayUrl).each(function(index) {
picture.push({
"url": arrayUrl[index],
"North": arrayNorth[index],
"Side": arrayOrientation[index]
});
});

Jquery autocomplete in jsp

I am new in jsp and so in javascript and i am trying to create an autocomplete form with two text fields. Also i want the second one to take some value automatic according to the value of the first one. Well, i did a little research and i found in another topic a code snippet. The think is that when i put it in a single jsp page in netbeans it doesn't works.I think something is missing. Can you please help with that. Thanks.
Here is my code:
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<body>
<input id='fruit' name='fruit' type='text'>
<input id='details' name='details' type='text'>
<script>
var x = [
{ label : 'apple', value : 'Delicious' },
{ label : 'kiwi', value : 'Yummy' },
{ label : 'kiwiooo', value : 'aaa' },
{ label : 'lemon', value : 'Sour' }
];
$( "#fruit" ).autocomplete({
source: x,
focus : function(){ return false; }
})
.on( 'autocompleteresponse autocompleteselect', function( e, ui ){
var t = $(this),
details = $('#details'),
label = ( e.type === 'autocompleteresponse' ? ui.content[0].label : ui.item.label ),
value = ( e.type === 'autocompleteresponse' ? ui.content[0].value : ui.item.value );
t.val( label );
details.val( value );
return false;
});
</script>
</body>
</html>
FIDDLE
UPDATED

Remove node function on parent element

I'm new to JS. I'm trying to delete the parent node with all the children by clicking a button. But the console tells me that undefined is not a function. What am I missing?
Fiddle:
http://jsfiddle.net/vy0d8bqt/
HTML:
<button type="button" id="output">Get contacts</button>
<button type="button" id="clear_contacts">clear contact</button>
<div id="output_here"></div>
JS:
// contact book, getting data from JSON and outputting via a button
// define a JSON structure
var contacts = {
"friends" :
[
{
"name" : "name1",
"surname" : "surname1"
},
{
"name" : "name2",
"surname" : "surname2"
}
]
};
//get button ID and id of div where content will be shown
var get_contacts_btn = document.getElementById("output");
var output = document.getElementById("output_here");
var clear = document.getElementById("clear_contacts");
var i;
// get length of JSON
var contacts_length = contacts.friends.length;
get_contacts_btn.addEventListener('click', function(){
//console.log("clicked");
for(i = 0; i < contacts_length; i++){
var data = contacts.friends[i];
var name = data.name;
var surname = data.surname;
output.style.display = 'block';
output.innerHTML += "<p> name: " + name + "| surname: " + surname + "</p>";
}
});
//get Children of output div to remove them on clear button
//get output to clear
output_to_clear = document.getElementById("output_here");
clear.addEventListener('click', function(){
output_to_clear.removeNode(true);
});

You should use remove() instead of removeNode()
http://jsfiddle.net/vy0d8bqt/1/
However, this also removes the output_to_clear node itself. You can use output_to_clear.innerHTML = '' if you like to just delete all content of the node, but not removing the node itself (so you can click 'get contacts' button again after clearing it)
http://jsfiddle.net/vy0d8bqt/3/

You want this for broad support:
output_to_clear.parentNode.removeChild(output_to_clear);
Or this in modern browsers only:
output_to_clear.remove();
But either way, make sure you don't try to remove it after it has already been removed. Since you're caching the reference, that could be an issue, so this may be safer:
if (output_to_clear.parentNode != null) {
output_to_clear.remove();
}
If you were hoping to empty its content, then do this:
while (output_to_clear.firstChild) {
output_to_clear.removeChild(output_to_clear.firstChild);
}

I think using jQuery's $.remove() is probably the best choice here. If you can't or don't want to use jQuery, The Mozilla docs for Node provides a function to remove all child nodes.
Element.prototype.removeAll = function () {
while (this.firstChild) { this.removeChild(this.firstChild); }
return this;
};
Which you would use like:
output_to_clear.removeAll();
For a one-off given the example provided:
while (output_to_clear.firstChild) { output_to_clear.removeChild(output_to_clear.firstChild); }