We Keep Coding

How to find EOL's(end of line) in Jquery selectize?

I have a requirement, in which, when a user pastes a list of values from excel into jquery selectize, it should recognize each line as a value instead of identifing the entire list as one value.
say for example, when I paste the below list containing 2 values, selectize should identify 'bill gates' as one value and 'steve jobs' as another,but
by default, it identifies the entire list as one value('bill gates steve jobs').
List:
bill gates
steve jobs
I have shared a demo for your reference, let me know if there is a way to implement it. Thanks.

If you can edit your excel files to include ',' after each enter. Be it at new line or same line, it should add the values in a separate tag.
Try pasting:
bill gates,
steve jobs
bill gates,steve jobs
In your jsfiddle and it should work.

To fix this issue-- I cached all the pasted text and then modified it, before programmatically pasting it on the Selectize control. You can find the demo here.
HTML code:
<div class="demo">
<div class="control-group">
<label for="input-tags">Tags:</label>
<input type="text" id="input-tags" class="demo-default" value="awesome,neat">
</div>
</div>
Javascript code:
var pastedText = undefined;
['paste'].forEach(function (event) {
document.addEventListener(event, function (e) {
var str = undefined;
if (window.clipboardData && window.clipboardData.getData("Text"))
str = window.clipboardData.getData("Text");
else
if (e.clipboardData && e.clipboardData.getData('text'))
str = e.clipboardData.getData('text');
pastedText = str;
});
});
var onItemAddEventHandler = function (value, $item) {
var tempStr = undefined;
if (pastedText !== undefined) {
// Replace all newline chars to | (pipe).
tempStr = pastedText.replace(/(?:\r\n|\r|\n)/g, '|');
tempStr = tempStr.replace(/,/g, '|');
if (tempStr.length>0)
this.$control_input.val(tempStr);
pastedText = undefined;
this.removeOption(value);
$item.remove();
return;
}
if (value.indexOf("|") === -1)
return;
var tempItem = value;
value = value.replace(/,/g, '|');
value = value.split("|");
for (var i = 0; i < value.length; i++) {
if(value[i].trim()!="")
this.createItem(value[i].trim());
}
this.removeOption(tempItem);
$item.remove();
return;
}
$('#input-tags').selectize({
persist: false,
createOnBlur: true,
create: true,
onItemAdd: function (value, $item) {
onItemAddEventHandler.call(this, value, $item);
}
});

Encoding and Decoding JSON in Hidden HTML element

I am trying to build a custom control using HTML and JQuery. The control will display a text value. The user can enter a variety of key/value pairs. Currently, I have the following HTML
<input id="keyValue" type="text" />
<select id="keyName" name="keyName">
<option value="k1">Some Name</option>
<option value="key2">Another Name</option>
<option value="arg3">How about one more</option>
</select>
<input id="keyValuePairs" type="hidden" />
The value displayed in "keyValue" will change based on the option the user chooses. I'm trying to keep the mappings in keyValuePairs. In an attempt to do this, I have the following:
$('#keyName').on('change', function() {
var key = $('#keyName').val();
var keyValuePairs = $('#keyValuePairs').val();
if (keyValuePairs[key]) {
$('#keyValue').val(keyValuePairs[key]);
} else {
$('#keyValue').val('');
}
});
$('#keyValue').on('change', function() {
var key = $('#keyName').val();
var keyValuePairs = $('#keyValuePairs').val();
if (!keyValuePairs ) {
keyValuePairs = {};
}
keyValuePairs[key] = $(this).val();
$('#keyValuePairs').val(JSON.stringify(keyValuePairs));
});
For some reason, the text field always shows a blank string after I choose another key. I believe it has something to do with how I'm encoding or decoding the JSON. When I add console.log to the keyValuePairs I noticed that sometimes quotes are included and other times they're not. Yet, the code looks correct to me.
What am I doing wrong?

I believe you should JSON.parse $('#keyValuePairs').val() after you've read it (since you stringify the pairs when you set the value)
UPDATE:
You must also ensure that the value is not empty:
$('#keyName').on('change', function() {
var key = $('#keyName').val();
var val = $('#keyValuePairs').val();
if (val && val.length > 0) {
var keyValuePairs = JSON.parse(val);
if (keyValuePairs[key]) {
$('#keyValue').val(keyValuePairs[key]);
} else {
$('#keyValue').val('');
}
}
});
$('#keyValue').on('change', function() {
var key = $('#keyName').val();
var val = $('#keyValuePairs').val();
var keyValuePairs;
if (val && val.length > 0) {
keyValuePairs = JSON.parse(val);
} else {
keyValuePairs = {};
}
keyValuePairs[key] = $(this).val();
$('#keyValuePairs').val(JSON.stringify(keyValuePairs));
});

json_encode(#keyValuePairs) //encoding
json_decode(#keyValuePairs) //decoding
datatype : json

How do I input text via an HTML form and retrieve data from a JSON file as a response using Javascript?

I'm trying to make a little flashcard quiz game and I'm trying to implement a feature where someone can enter text into an input area and after they press enter the word "Correct" or "Incorrect" is flashed on the screen for 1 second before the input area is blank and the next question get loaded.
Here is a visual of what I am doing:
In particular, this is the HTML code that generates the input text area below:
<form id="answers">
<input type="text" name="inputtext" id="answer" style="width: 100%; height: 30px;" placeholder="Enter your answer..." onkeyup="checkAnswer(this,event);" autofocus><br>
</form>
This is the JSON file which is saved as: questionsAndAnswersItalian.json
[{"q":"What is the word for 'where' in Italian?","a":"Dove"},
{"q":"What is the word for 'when' in Italian?","a":"Quando"},
{"q":"What is the word for 'why' in Italian?","a":"Perché"}]
This is the javascript code that I've written which isn't working:
var jsonUrl = "questionsAndAnswersItalian.json";
var qs;
var numCards;
var maxIndex;
function checkAnswer(input, event){
if(event.keyCode == 13){
var answer = document.getElementById("answer").value.toLowerCase();
var questionNumber = 0;
for(var i = 0; i<jsonUrl.length; i++){
if(answer == jsonUrl[questionNumber]["a"].toLowerCase()){
setTimeout(correct_input, 1000);
input.value = "";
}else{
setTimeout(incorrect_input, 1000);
input.value = "";
}
questionNumber++;
}
}
}
function correct_input(){
input.value = "Correct!";
}
function incorrect_input(){
input.value = "Incorrect!";
}
function init() {
$.getJSON(jsonUrl, function(jsonObject) {
qs = jsonObject;
numCards = qs.length;
maxIndex = numCards-1;
displayCard();
});
}
The functions aren't working as I expected them to and I was wondering if someone could tell me where I am going wrong.
If you need more information to understand what I'm doing here please do not hesitate to ask!
Any help or advice would be much appreciated!
Thank you.

In this part :
for(var i = 0; i<jsonUrl.length; i++){
if(answer == jsonUrl[questionNumber]["a"].toLowerCase()){
setTimeout(correct_input, 1000);
input.value = "";
}else{
setTimeout(incorrect_input, 1000);
input.value = "";
}
questionNumber++;
}
You are looping through a String (jsonUrl), not your jsonObject. Use qs instead.
EDIT:
Here's a jquery code that works :
$('#answer').keyup(function(event) {
var code = event.keyCode || event.which;
if (code == 13) {
var answer = $(this).val().toLowerCase();
var goodAnswer = qs[currentCard].a.toLowerCase();
if (answer == goodAnswer) {
setTimeout(correct_input, 1000);
}
else {
setTimeout(incorrect_input, 1000);
}
$(this).val('');
}
});
Declare var currentCard = null; as global and set its value in displayCard() where I suppose you do a random or something like that.
With this code you have to remove onkeyup="checkAnswer(this,event);".
jsfiddle: http://jsfiddle.net/u7bkH/

the setTimeout function requires an asynchronous callback.
EDIT a more complete example, but note that it's only showing the way to correctly use setTimeout per your requirements. You'll need to complete with the appropiate check of correctness of the answer.
So, change your code to this
$('#answer').keyup(function(event) {
var code = event.keyCode || event.which;
if (code == 13) {
var input = $(this);
var answer = input.val().toLowerCase();
if (answer == "correct") {
input.val("Correct!");
}
else {
input.val("Incorrect!");
}
setTimeout(
function(){
input.val("");
},1000);
}
});

jquery custom validation script without plugin?

i used to use jquery validation plugin but because of lack of this plugin with wysiwyg plugins i wrote a simple script to validate my form
i tried to do it like this
function validateArticle(formData, jqForm, options) {
$('#errors').empty();
if ($('#editor').val() == 0) {
$('#errors').show();
$('#errors').append('<li>please enter your article body</li>');
return false;
}
if ($('#ArticleTitle').val() == 0) {
$('#errors').show();
$('#errors').append('<li>please enter your article title</li>');
return false;
}
$('#errors').hide();
return true ;
}
i found to 1 problem when it validate the form it's validating it field by field so the errors messages doesn't appear at once
i tried to do something like
var errors = [];
function validateArticle(formData, jqForm, options) {
$('#errors').empty();
if ($('#editor').val() == 0) {
errors.push('<li>please enter your article body</li>');
var invalid = 1 ;
return false;
}
if ($('#ArticleTitle').val() == 0) {
errors.push('<li>please enter your article title</li>');
var invalid = 1 ;
return false;
}
if(invalid == 1){
$.each(errors , function(i, val) {
$('#errors').append(errors [i]);
});
}
$('#errors').hide();
return true ;
}
i tried to push errors as array elements and loop through them in case of invalid is true
bu this one doesn't work at it all ?
is there any way to make it work ?

if ($('#editor').val() == 0) // This is checking if value is 0
This does not make sense..
Try
if ($('#editor').val() == '') //Instead check for empty string
EDIT
Also you seem to be hiding the error's div in the end.
$('#errors').hide();
Try this code Instead
$('#validate').on('click', function() {
var errors = [];
var html = '<ul>' ;
valid = true;
$('#errors').empty();
if ($('#editor').val() == '') {
errors.push('<li>please enter your article body</li>');
valid = false;
}
if ($('#ArticleTitle').val() == '') {
errors.push('<li>please enter your article title</li>');
valid = false;
}
if (!valid) {
html += errors.join('') + '</ul>'
$('#errors').append(html);
}
else{
$('#errors').hide();
}
return valid;
});​
DEMO

Dynamic form validation with ASP variables

I have 52 members in my database. When displayed in the admin panel, each one has a form associated with it so I can make notes for each member.
Each Member has an ID so I name each form on the page like this: "frmRepNotes<%=MemberList("MemberID")%>" based on the memberID from the database. This results in something like frmRepNotes67453. I now want to validate the form before saving the notes.
How can I use that number in the JavaScript?
function validate(strid)
{
var ErrorFound = 0
if (document.'+strid+'.taNotes.value == '')
{
ErrorFound = ErrorFound + 1
}
if (ErrorFound == 0)
{
document.'+strid+'.submit();
}
}
How can this be done?

Consider refactoring to be something like this?
function validate(strid)
{
var ErrorFound = 0;
var theForm = document.getElementById("frmRepNotes"+strid);
if (theForm.taNotes.value == '')
{
ErrorFound +=1;
}
if (ErrorFound == 0)
{
theForm.submit();
}
}