I want jquery or javascript code to get the data from excel and add them to array in jquery.
Example:
In column "A" there are names,
Kasun
Nirmala
Gemba
John
And I want to add then to
Var names=['Kasun', 'Nirmala','Gemba','John']
This is what I have tried. In this I get all data of excel to #res div. But I want to get them all to an array
alasql('SELECT * into html("#res") from xlsx("excel.xlsx")');
<script type="text/javascript" src="js/alasql.min.js"></script>
<script type="text/javascript" src="js/xlsx.core.min.js"></script>
<div id="res"></div>
You need to make a new cell in your excel file and use concatenate, there is a function helper the parts would be like:
FirstName, SecondName
=CONCATENATE("'",A1,"', ",B1,"'")
Will give you
'FirstName', 'SecondName'
Then wrap in square brackets
['FirstName', 'SecondName']
If your names are in a list even better just do:
=CONCATENATE("'",A1,"', ")
Then copy the formula across all rows, so you have something like:
'FirstName',
'SecondName',
'ThirdName',
Remove the last comma and wrap in square brackets again
['FirstName',
'SecondName',
'ThirdName']
Add this to your page
var names = ['FirstName',
'SecondName',
'ThirdName']
Related
line breaks or pharagraph not working in textarea output? for example i am using enter for pharagraph in textarea but not working in output? How can i do that?
$("#submit-code").click(function() {
$("div.output").html($(".support-answer-textarea").val());
}).next().click(function () {
$(".support-answer-textarea").val($("div.output").html());
});
.support-answer-textarea{width:100%;min-height:300px;margin:0 0 50px 0;padding:20px 50px;border-top:1px solid #deddd9;border-bottom:1px solid #deddd9;border-left:none;border-right:none;box-sizing:border-box;letter-spacing:-1px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<textarea id="support-answer-textarea" class="support-answer-textarea" placeholder="Destek Konusunu Cevapla!"></textarea>
<button type="submit" id="submit-code" class="btn btn-success">Submit Your Code</button>
<div class="output"></div>
The best and easy way to fix line breaks on the output use these simple css:
.support-answer-textarea {
white-space: pre-wrap;
}
When you hit enter in a <textarea>, you're adding a new line character \n to the text which is considered a white space character in HTML. HTML generally converts the sequence of all white spaces to a single space. This means that if you enter a single or a dozen of whitespace characters (space, new line character or tab) in a row, the only effect in resulting HTML is just a single space.
Now the solution. You can substitute the new line character (\n) to <br> or <p> tag using replace() method.
$("#submit-code").click(function() {
$("div.output").html($(".support-answer-textarea").val().replace(/\n/g, "<br>"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<textarea id="support-answer-textarea" class="support-answer-textarea"></textarea>
<button type="submit" id="submit-code">Submit Your Code</button>
<div class="output"></div>
for me, I had a e.preventDefault() for only Enter keypress on a parent element, this prevents a new line from adding.
If you are capturing an input from a textarea, sending it via ajax (saving to database, e.g. mysql) and then want to display the result in a textarea (e.g. by echoing via php), use the following three steps in your JS:
#get value of textarea
var textarea_value = $('#id_of_your_textarea').val();
#replace line break with line break input
var textarea_with_break = textarea_value.replace(/(\r\n|\n|\r)/gm, '
');
#url encode the value so that you can send it via ajax
var textarea_encoded = encodeURIComponent(textarea_with_break);
#now send via ajax
You can also perform all of the above in one line. I did it in three with separate variables for easier readability.
Hope it helps.
Posting this here as it took me about an hour to figure this out, fumbling together the solutions from the answers below (see for more details):
The .val() of a textarea doesn't take new lines into account
New line in text area
URL Encode a string in jQuery for an AJAX request
I got a currency exchange script from coinmill. I want to modify it to work nice in my page. I am a newbie in html/javascript programming thats why i am asking help on this one, pls.
<script src="http://coinmill.com/frame.js"></script>
<script>
var currency_round=true;
var currency_decimalSeparator='.';
var currency_thousandsSeparator=',';
var currency_thousandsSeparatorMin=3;
</script>
$199.00 (US) = <script>currency_show_conversion(199.00,"USD","GBP");</script> GBP<br>
<small>Currency data courtesy coinmill.com</small>
This scripts works fine but shows the conversion for the default value in the script. I need to replace the value ($199.00) to a value from a textbox of id "edit_1". Automatically after the user inserts the currency to exchange, the value will show in the page.
Thanks in Advance.
I am Stephen Ostermiller, and I run http://coinmill.com/. You can make this work with the JavaScript currency API from Coinmill:
Put on onchange event on the textarea
Get the value from the text area using this.value
use the currency_convert(value,from,to) method that is available in frame.js to convert it into the currency of your choice
Write the value to where you want it in the page, for example with document.getElementById('results').innerHTML
Putting it all together:
<script src="http://coinmill.com/frame.js"></script>
<script>
var currency_round=true;
var currency_decimalSeparator='.';
var currency_thousandsSeparator=',';
var currency_thousandsSeparatorMin=3;
</script>
<textarea id=edit_1 onchange="document.getElementById('results').innerHTML=currency_convert(this.value,'USD','GBP')"></textarea><br>
Converted into GBP:<div id=results></div>
<p><small>Currency data courtesy coinmill.com</small></p>
Whene I enter "273" into the textarea, I then see "Converted into GBP: 176.32" on the page.
You can test out a live example on jsfiddle: http://jsfiddle.net/wAxnq/
I have 3 typeahead fields:
They are as follows:
Country: |___________|
State: |___________|
City: |___________|
Here is the code for the second typeahead field (the rest are similar):
<input type="text" class="span3" style="margin: 0 auto;"
data-provide="typeahead" data-items="4"
data-source="["Alabama","Alaska",
<many more US states>
,"Wyoming"]">
Now ... I need both typeahead fields to look like dropdowns which can be achieved by following instructions here.. no problem.
https://github.com/danielfarrell/bootstrap-combobox
http://dl.dropbox.com/u/21368/bootstrap-combobox/index.html
The question I'm asking pertains to the "Last Option" below:
Note: I am building this in Rails, so ruby code would be nice...
Placeholder Case:
I need each of the drop down lists to have a default placeholder text which is grayed out.
eg:
Country: |_USA_______|
State: |_IOWA______|
City: |_DES MOINES____|
Missing Value Case:
If the user types in a City value that does not exist in the autocomplete, I want to show them a dropdown with a link..
eg: User types in "yahoo" in City field. This should result in the output "That city does not exist, click here to search for it"
Clicking on the above text should redirect me to Google.com
Error Case:
If nothing is selected in the first field (country).. the second field should have a default value in the dropdown: "Please select a Country to begin"
Last Option:
upon successful selection of a City, eg: San Francisco ... I want to make a redirect to a new html file like "mysite.com/datastore/calsan.html" (first three letters from each selection in lowercase appended together)
this final html file will be pre-generated and will have relevant statistics and fun facts about the city "San Francisco"... I'll also have fun facts for other cities pregenerated in the datastore folder.
See my snippets below
Placeholder case
<script type="text/javascript">
$(document).ready(function(){
$('.combobox').combobox({placeholder: "Type Something.."});
});
</script>
Last Option
<script type="text/javascript">
$('.combobox').change(function(){
if($(this).val().length > 0){
var fileName = $(this).val().substr(0,3); // this is for getting the first 3 characters, apply the same logic wherever necessary
window.location("/datastrore/" + fileName + ".html");
}
})
</script>
Last Option
There seems to be a simple way to do this with inline javascript and option value. I think I will be using this simpler way..
http://webdesign.about.com/od/javascript/f/blfaqddredirect.htm
Placeholder Case and All other Cases
http://harvesthq.github.com/chosen/
The above library solves all my issues and is very powerful! Its not for bootstrap but I don't mind until bootstrap has a comparable option.
The base Element object in dart:html has a property elements which is an implementation of List<E>. The add method appends elements to the DOM. I would like to prepend or insert an element into the DOM. None of the insert methods in ElementList are implemented. How can I do this?
So lets say you have this HTML snippet:
<body>
<div id='test'></div>
</body>
You can do this to insert an element before the div:
// Get the sibling that we want to insert before.
final el = query('#test');
// From the parent element, we call insertBefore, referencing the
// sibling that we want to insert the new element before.
document.body.insertBefore(new Element.tag('p'), el);
Now your HTML will be:
<body>
<p></p>
<div id='test'></div>
</body>
In addition to John's Answer. You can also use the syntax:
final el = query('#test');
// If you want an element
el.insertAdjacentElement('beforebegin', new Element.tag('p'));
// If you want to insert HTML tags
el.insertAdjacentHTML('beforebegin', '<p>Hello</p>');
// Insert just text
el.insertAdjacentText('beforebegin', 'Hello there');
You can use positional arguments: beforebegin, afterbegin, beforeend, afterend Which will place it before the beginning of the other element, just inside the beginning of the element, just inside the end of the element, or just outside the end of the element, respectively.
First, sorry about the title of this question. I thought about it for a long time and could do no better.
My question is: can jQueryUI's autocomplete feature provide suggestions from multiple database fields under one autocomplete field. For instance, I'd want to be able to type in "br" in the field and have both "briman057" and "Brian Johnson" appear as suggestions even though they are stored in separate database fields and are returned as two separate key value pairs of the same JSON item (ie. [{username : briman057, name : 'Brian Johnson']}). I'd then want the username value to be the one that populates the field when either it or the full name are selected. I know that one of the keys needs to be named "value" or "label" and that the key by that name is the one that is used to provide suggestions, but can I essentially have two "value" keys for one JSON item?
Yes, it can, because you provide your own custom callback as a datasource. That callback can implement the behaviour you desire.
Here's a demo of what I think you want.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript">
$(function() {
$('#myautocomplete').autocomplete({
source: function(request, response) {
// TODO: make suggestions actually depend on what the user types into the search box.
// You want two suggestions, one with 'briman57' and one with 'Brian Johnson', so we need two suggestions with different labels, but with the same value.
var suggestions = [
{ label: 'briman057' , value: 'briman057', username : 'briman057', name : 'Brian Johnson'},
{ label: 'Brian Johnson', value: 'briman057', username : 'briman057', name : 'Brian Johnson'}
];
response(suggestions);
},
select: function( event, ui ) {
alert('You have selected ' + ui.item.name + ' (' + ui.item.username + ')');
}
});
});
</script>
<input id="myautocomplete" title="Enter anything here."></input>
Take a look at the source code of the Remote JSONP datasource example for more inspiration.