I 've written the following code snippet in Eclipse html form which include headings and titles in greek characters.
My problem is that these characters can't be correctly displayed in my web browser's page although I've set UTF-8 Encoding. Instead, they are displayed like question symbols (????).
My code snippet:
var product = $scope.product = []; // Custom JavaScript creates a JavaScript Object and binds it to the current AngularJS $scope of the form as a variable named "product".
$scope.addProduct = function () { // We make a function named "addProduct".
var product = {}; // We add a new "product" to the Array.
product.Category = $scope.Category;
product.Description = $scope.Description;
if (!!$scope.camForm.fields[0].element[0].files[0]) {
product.Details = $scope.camForm.fields[0].element[0].files[0].name; // We check whether a file is uploaded.
} else {
return; // If no file is uploaded, it returns "undefined".
}
product.Price = $scope.Price;
$scope.product.push(product); // We use the value of the "product" input field to add a new "product" to the Array.
$scope.Category = ""; // We clear the TextBox "���������".
$scope.Description = ""; // We clear the TextBox "���������".
$scope.Details = ""; // We clear the TextBox "������������".
$scope.Price = ""; // We clear the TextBox "����".
};
$scope.removeProduct = function (index) { // We make a function named "removeProduct".
var category = $scope.product[index].Category; // We find product's Category using "index" from the Array and binds it to the current AngularJS $scope of the form as a variable named "category".
$scope.product.splice(index, 1); // We use an index to remove a "product" from the Array.
}
$scope.isAddFormValid = function () { // We make a function named "isAddFormValid".
return ($scope.Category &&
$scope.Description &&
$scope.camForm.fields[0].element[0].files[0] &&
$scope.Price) ? true : false; // If all of the 4 parameters of variable "product" are added, the value will be "true", otherwise the value will be "false".
}
camForm.on('form-loaded', function() { // We hook into the lifecycle of Camunda SDK JS Form.
camForm.variableManager.createVariable ({ // We "create" (declare) a new process variable
name:'product', // named 'product' and
type:'json', // provide as type information 'json' used for serialization.
value:product
});
});
camForm.on('submit', function(evt) { // We hook into the lifecycle of Camunda SDK JS Form.
if (product.length<1) { // If no "product" is added,
evt.submitPrevented = true; // an event handler prevents the form from being submitted by setting the property "submitPrevented" to 'true'.
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form role="form" name="insertForm" accept-charset="utf-8">
<h2><b>����� ���������</b></h2> <!-- We set the heading of the HTML Table. -->
<div>
<table style="width:100%;">
<thead> <!-- We group the header content in the HTML Table. -->
<tr> <!-- The header content of the HTML Table is not repeated. -->
<th style="width:140px;">���������</th>
<th style="width:305px;">���������</th>
<th style="width:250px;">������������</th>
<th style="width:75px;" >���� (�)</th>
<th></th>
</tr>
</thead>
<tbody ng-repeat="x in product track by $index"> <!-- The HTML Table is populated from the JSON Array "product", using a "ng-repeat" directive which is assigned to each row of the Table in order to repeat all the objects of the Array. -->
<tr> <!-- Each row of the HTML Table consists of 4 HTML Input Form fields and 1 button. -->
<td><input style="width:140px;" type="text" value="{{x.Category}}" /></td>
<td><input style="width:305px;" type="text" value="{{x.Description}}" /></td>
<td><input style="width:250px;" type="text" value="{{x.Details}}" /></td>
<td><input style="width:75px;" type="number" value="{{x.Price}}" /></td>
<td><input type="button" ng-click="removeProduct($index)" value="Remove" /></td> <!-- The "ng-click" directive is assigned to the "Remove" button and calls the function named "removeProduct" with the current "$index" when this button is clicked. -->
</tr>
</tbody>
</table>
</div>
<hr> <!-- We separate the HTML content. -->
<div>
<h2><b>���������� ��� ������</b></h2> <!-- We set the heading of the HTML Form. -->
<div class="row"> <!-- We set the "1st row" of the HTML Form. -->
<div class="col-md-6"> <!-- We use "md" for "medium" screen devices of width equal to or greater than 992px and "6" for adding 6 columns. -->
<div class="form-group"> <!-- We use "form-group" for optimum spacing. -->
<label class="control-label" for="category">���������</label>
<div class="controls">
<input style="width:140px;" id="category" type="text" ng-model="Category" /> <!-- The "ng-model" directive binds the value of the "���������" input field to the created variable "Category" in AngularJS. -->
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="Description">���������</label>
<div class="controls">
<input style="width:305px;" id="Description" type="text" ng-model="Description" /> <!-- The "ng-model" directive binds the value of the "���������" input field to the created variable "Description" in AngularJS. -->
</div>
</div>
</div>
</div>
<div class="row"> <!-- We set the "2nd row" of the HTML Form. -->
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="Details">������������</label>
<div class="controls">
<input style="width:250px;"
id="Details"
type="file"
cam-variable-name="Details"
cam-variable-type="File"
cam-max-filesize="10000000" ng-model="Details" /> <!-- The "ng-model" directive binds the value of the "������������" input field to the created variable "Details" in AngularJS. -->
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="price">���� (�)</label>
<div class="controls">
<input style="width:75px;" id="price" type="number" ng-model="Price" /> <!-- The "ng-model" directive binds the value of the "���� (�)" input field to the created variable "Price" in AngularJS. -->
</div>
</div>
</div>
</div>
<div class="row"> <!-- We set the "3rd row" of the HTML Form. -->
<div class="col-md-4"> <!-- We use "md" for medium screen devices of width equal to or greater than 992px and "4" for adding 4 columns. -->
<div class="controls">
<input type="button" ng-click="addProduct()" ng-show="isAddFormValid()" value="Add" /> <!-- The "ng-show" directive shows the input element ("Add" button) only if the "isAddFormValid()" expression (function) returns "true". The "ng-click" directive is assigned to the "Add" button and calls the function named "addProduct()" when this button is clicked. -->
</div>
</div>
</div>
</div>
<script src="insert-products-and-specifications.js" charset="utf-8" cam-script type="text/form-script"></script> <!-- We call the external script file ("insert-products-and-specifications.js"). -->
</form>
</body>
</html>
Does anyone have any idea on this please?
Thanks,
Steve
The following works :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form role="form" name="startForm" accept-charset="utf-8">
<h2>Ώρα για προμήθειες</h2>
</form>
</body>
</html>
Try this one:
<!doctype html>
<html lang="el">
<head>
<meta charset="utf-8">
<title>Hello, world!</title>
</head>
<body>
<form role="form" name="startForm" accept-charset="utf-8">
<h2>Ώρα για προμήθειες</h2>
</form>
</body>
</html>
I managed to solve my issue.
I didn't modify something in my code.
The solution was to change some general settings in my eclipse editor.
For anyone who may face the same encoding issue in eclipse, I wrote the following steps:
check and maybe change the following preferences in your eclipse.
The encoding of the text editor should be UTF-8.
– General -> Editors -> Text Editors -> Spelling -> Encoding -> Default UTF-8
The encoding for the HTML files should be UTF-8. For that, you can configure to use the workspace encoding.
– Web -> HTML-Files -> Use workspace encoding
The encoding of your workspace should be UTF-8.
– General -> Workspace -> Text file encoding -> Other -> UTF-8
You should also check the encoding of your resource. For that, please click with the right mouse button on your eclipse project and choose Properties. In the new opened window, click on Resource and check the value of the Text file encoding
Related
I got this script to use it as a search engine, but when I tried to change the button to replace it with a CSS styled button (including fontawesome), the button doesn't call the results. I am a newbie and my javascript knowledge is limited.
<form name="searchengine">
<input type = text name ="keywords" placeholder ="Search..." style ="font-size:14px;hight:35px;width:240px;" value="" maxlength=40>
<input type = button name="go" Value=" 🔍 " style ="height:30px;width:35px;" onClick="search()">
</form>
I just adjusted the inline styling but I would like to replace it with this:
<form name="searchengine">
<input type="hidden" name="keywords" value="1">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="box">
<div class="container-4">
<input type="search" id="keywords" placeholder="Search..." />
<button class="icon"><i class="fa fa-search"></i></button>
</div>
</form>
I know that there is no onclick function assigned on the second example but I have searched everywhere and couldn't find an answer, I have tried different ways to make it "clickable" but with no success. Below are some examples of what I have done. Most come from Stackoverflow.
<span onClick="myFunction()"><i class="fa fa-search"></i></span>
<i class="fa fa-search" onclick="search()"></i>
Thanks in advance for your help. Please let me know if you require the full script.
Here is the entire script. Thanks for your help.
<html>
<title>
Search Engine
</title>
<head>
<script>
title = new Object();
desc = new Object();
links= new Object();
matched= new Object();
keywords= new Object();
found= new Object();
var temp=0;
// actual location or the item to be searched // description of he location
// actual link
// percentage match found
// keywords as parsed from the input
// # of titles present in the database
title[0]=14
//no of keywords after parsing
keywords[0]=0
//no of matches found.
found[0]=0
<!-- Begin List of Searchable Items -->
<!--put the list of the links and descriptions here!!-->
title[1]="Introduction FAQs Java JavaScript beginner"
desc[1]="JavaScript Primer (Part 1 of 2) "
links[1]="http://www.javascriptkit.com/primer1.htm"
matched[1]=0
title[2]="objects document function parameter last modified date"
desc[2]="JavaScript Primer (Part 2 of 2) "
links[2]="http://www.javascriptkit.com/primer2.htm"
matched[2]=0
title[3]="alert confirm prompt box pop up dialog"
desc[3]="Creating Alert, Confirm, and Prompt Boxes"
links[3]="http://www.javascriptkit.com/alert.htm"
matched[3]=0
title[4]="event handler onClick onLoad onMouseover onMouseout onUnload"
desc[4]="Understanding Event Handlers in JavaScript"
links[4]="http://www.javascriptkit.com/event.htm"
matched[4]=0
title[5]="object model tree accessing forms "
desc[5]="Accessing and Validating Forms Using JavaScript (Part 1 of 2)"
links[5]="http://www.javascriptkit.com/form1.htm"
matched[5]=0
title[6]="form validation onBlur onSubmit"
desc[6]="Accessing and Validating Forms Using JavaScript (Part 2 of 2)"
links[6]="http://www.javascriptkit.com/form2.htm"
matched[6]=0
title[7]="date object write html setTimeout function"
desc[7]="Creating Time Dependent Scripts using JavaScript (Part 1 of 2)"
links[7]="http://www.javascriptkit.com/time1.htm"
matched[7]=0
title[8]="live clock watermark"
desc[8]="Creating Time Dependent Scripts using JavaScript (Part 2 of 2)"
links[8]="http://www.javascriptkit.com/time2.htm"
matched[8]=0
title[9]="image preload rollover effect filter"
desc[9]="Images and JavaScript- Apples and Apples (Part 1 of 2)"
links[9]="http://www.javascriptkit.com/image1.htm"
matched[9]=0
title[10]="rollover effect"
desc[10]="Images and JavaScript- Apples and Apples (Part 2 of 2)"
links[10]="http://www.javascriptkit.com/image2.htm"
matched[10]=0
title[11]="new window open secondary reload close toolbar menubar status bar "
desc[11]="Windows and JavaScript"
links[11]="http://www.javascriptkit.com/window.htm"
matched[11]=0
title[12]="frames access object multiple"
desc[12]="Loading Two frames with one link."
links[12]="http://www.javascriptkit.com/twoframes.htm"
matched[12]=0
title[13]="selection list options array text vale"
desc[13]="I'll hava a double combo please (Part 1 of 2)"
links[13]="http://www.javascriptkit.com/combos1.htm"
matched[13]=0
title[14]="combo link box jump"
desc[14]="I'll hava a double combo please (Part 2 of 2)"
links[14]="http://www.javascriptkit.com/combos2.htm"
matched[14]=0
<!-- End list of Searchable items -->
function search(){
// get the input from the input by the user and strip it into keywords //
var skeyword=document.searchengine.keywords.value.toLowerCase();
var check=1;
var pos=0;
var i=0;
var j=0;
var itemp=0;
var config='';
while (true)
{
if (skeyword.indexOf("+") == -1 )
{
keywords[check]=skeyword;
break;
}
pos=skeyword.indexOf("+");
if (skeyword !="+")
{
keywords[check]=skeyword.substring(0,pos); check++;
}
else
{
check--;
break;
}
skeyword=skeyword.substring(pos+1, skeyword.length);
if (skeyword.length ==0)
{
check--;
break;
}
}
// the keywords have been put in keywords object.
keywords[0]=check;
//alert(check);
// matching and storing the matches in matched
for ( i=1; i<=keywords[0];i++)
{
for (j=1;j<=title[0];j++)
{
if (title[j].toLowerCase().indexOf(keywords[i]) > -1 )
{
matched[j]++;
}
}
}
// putting all the indexes of the matched records in found
for (i=1;i<=title[0];i++)
{
if (matched[i] > 0 )
{
found[0]++;
// increment the found
found[found[0]]=i;
}
}
//alert("found 0 " + found[0]);
// sort the list as per max percentage of matches
for (i=1;i<=found[0]-1;i++)
{
for(j=i+1;j<=found[0];j++)
{
if ( matched[found[i]]< matched[found[j]] )
{
temp= found[j];
found[j]=found[i];
found[i]=temp;
}
}
}
config='toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes'
output = window.open ("","outputwindow",config)
output.document.write('<title> Atlantis Direct Search Result </title>');
output.document.write('<BODY bgcolor=#ffffff text=#000000 link=#990099 vlink =#339966 >');
output.document.write('<center> <h1> Search Results </h1></center>');
output.document.write('<hr>');
output.document.write(' The Keyword(s) you searched :: '.big() );
for (i=1; i<=keywords[0]; i++)
{
output.document.write( keywords[i].bold() +" "); }
output.document.write('<br>');
if (found[0]==0)
{
output.document.write('<hr>');
output.document.write("<b>No matches resulted in this search </b> <br>");
output.document.write("You may close the results and reduce the length/number of the keywords <br>");
}
else
{
output.document.write(" <hr> <b> The Results of the search are : </b> ");
output.document.write( found[0] +" Entries found ".italics());
output.document.write("<table border=1 width=100%>");
for (i=1; i<=found[0];i++)
{
output.document.write("<tr><td valign=topbgcolor=#9999ff>");
output.document.write("<h3>" +i +"</h3>"); output.document.write("<td valign=top>");
itemp=found[i];
output.document.write(desc[itemp].bold() +"<br>" +links[itemp].link(links[itemp])+"<br>");
temp= (matched[itemp]/keywords[0])*100
output.document.write("<i> Matched with keywords :: "+temp+" % </i>" );
matched[itemp]=0
}
found[0]=0;
output.document.write("</table>");
}
output.document.write ('This search was created by © Satadip Dutta 1997'); output.document.write ("<hr>");
output.document.write ("<form><center>");
output.document.write ("<input type='button' value='Start Another Search' onClick = 'self.close()'>") ;
output.document.write ("</center></form>");
output.document.close();
}
</script>
<head>
<body bgcolor="#ffffff">
<center>
<H1>Search Engine</H1>
</center>
<hr>
This is a search engine implemented in Javascript. You will need a
Java Script enabled browser to run this search.
<hr>
<P>
</P>
<TABLE BORDER=0 CELLSPACING=5 CELLPADDING=5>
<TR>
<TD WIDTH="20%" ALIGN="left">
This search is NOT case sensitive.
</TD>
<TD WIDTH="80%" ALIGN="left">
Put "+" between keywords in a list if using more than one keywords.
</TD>
</TR>
</TABLE>
<form name="searchengine">
<center>
Keywords:
<input type = text name ="keywords" placeholder ="Search..." value="" maxlength=40>
<input type = button name="go" Value="Go ahead and find" onClick="search()">
<br>
</center>
</form>
<hr>
<!-- you can write more text/instructions out here. -->
</body>
<html>
Some points to consider:
You forgot to set the type of your button to submit
Links are normally place on the <head>
You should give your form an action
<head>
...
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
...
</head>
...
<form name="searchengine" action="doSomething">
<input type="hidden" name="keywords" value="1">
<div class="box">
<div class="container-4">
<input type="search" id="keywords" placeholder="Search..." />
<button type="submit" class="icon"><i class="fa fa-search"></i></button>
</div>
</div>
Hope it helps.
This code works just fine. Your link is messed up, why is it just // instead of https://? Your links should be in the head, if they aren't they aren't loaded before the body, which causes a split second of unstyled content to show before it reaches the stylesheet. Your form should have an action to perform and your search button should be of the type submit so it's a submit button for the form.
The below code and jsfiddle work just fine if you want to try them out.
Also, Dreamweaver is not that impressive, I recommend getting Netbeans instead, it does the same job but for free (all you really want from your web IDE is code completion so you don't have to write as much, and both Netbeans and Dreamweaver does this equally well except that Netbeans is better for more all-around programming for all kinds of languages).
https://jsfiddle.net/vfmrc40k/
<html>
<head>
<!-- Links go in the head, they are not scripts and this makes them load before the body so that you don't get a split second of unstyled content showing -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script>
function performSearch () {
alert('I am searching!')
// Use e.g. jQuery to get the value for the search box, it's easiest
}
</script>
</head>
<body>
<!-- Your form should have an action to perform, in this case a javascript function. It isn't just 'correct', it also makes it possible to press Enter to perform the search, because enter and the submit button both trigger the forms action. -->
<form name="searchengine" action="javascript:performSearch()">
<input type="hidden" name="keywords" value="1">
<div class="box">
<div class="container-4">
<input type="search" id="keywords" placeholder="Search..." />
<button type="submit" class="icon"><i class="fa fa-search"></i></button>
</div>
<!-- You forgot a </div> -->
</div>
</form>
</body>
</html>
I have a simple form requesting couple questions from the user. I am attempting to connect my FireBase account so the realtime database can get updated when the user presses the submit button. However, the database is not receiving any information. I have attached the code.
The problem is somewhere in the HTML or JavaScript. I have inserted random alerts to see if they would work, and I get them to come up. I removed some of the "dataLink.push" commands, due to my FireBase only containing 2 values (name, value). I am a beginner with FireBase.
var config = {
apiKey: "AIzaSyCdqgGdZH8bWSMiHEM7ZoeWSNfZ04uA3Y8",
authDomain: "errandboi-f1cf5.firebaseapp.com",
databaseURL: "https://errandboi-f1cf5.firebaseio.com",
storageBucket: "errandboi-f1cf5.appspot.com",
};
firebase.initializeApp(config);
// Creates a variable called databaseLink that links to our database.
var databaseLink = new Firebase('https://errandboi-f1cf5.firebaseio.com/');
// Create javascript variables that link our previous HTML IDs. Remember, we can't use regular HTML inside a script tag, so we need to use JQuery to reference any previous HTML. A $ means we are using JQuery
var messageField = $('#task');
var nameField = $('#name');
var contactField = $('#contact');
var locationField = $('#location');
var miscField = $('#misc');
var messageList = $('#example-messages'); // DELETE MAYBE?????
//alert(messageField);
// If the enter key is pressed, push the values in the text boxes to our database.
function push(){
alert("yo");
messageField.keypress(function (e) {
if (e.keyCode == 13) { //13 is the enter key's keycode
alert("yo");
if (messageField.val() == ""){ //Ensure that an activity was entered.
alert("Please let us know how we can help!");
}else{
//push data to firebase and then clear the text box
databaseLink.push({name:nameField.val(), value:messageField.val()});
messageField.val('');
}
}
}
});//end of keypress function
<DOCTYPE! html>
<html>
<head>
<meta charset="UTF-8">
<!--THIS IS NEEDED TO IMPORT FIREBASE LIBRARIES -->
<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
<!-- THIS IS JUST A NICE LOOKING FONT -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!--THIS IS NEEDED TO IMPORT JQUERY LIBRARIES -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<!-- THIS IS TO IMPORT MY JS FILE -->
<script src="index.js"></script>
<link href="style.css" rel="stylesheet" />
<title>ErrandBoi!</title>
</head>
<body>
<div id="container">
<header>
<h1 class="title">ErrandBoi</h1>
</header>
<div id="banner">
<h2>Your Helping Hand in Every Situation</h2>
</div>
<div id="content">
<p class="content">Ever have an emergency while you are in class? Life has got you all tied up but your tasks won't do themselves? Well, you are at the right place for help. Let ErrandBoi take the stress off your shoulders while you can do what really matters. Simply, fill out the form below with any* task that you may need help with and one of our drivers will help you out as soon as possible!</p>
<br><br><br><br><br><br><br><br><br>
<div class="form-style-5">
<form method="POST">
<fieldset>
<legend><span class="number">1</span> Your Information</legend>
<input type="text" name="field1" id="name" placeholder="Your Name *">
<input type="email" name="field2" id="contact"placeholder="Contact Information (Email, Phone Number, etc.) *">
<input type="location" name="field2" id="location" placeholder="Your Location (i.e. McNutt, Hodge Hall, exact address, etc.)*">
<input type="text" name="field3" id="misc" placeholder="Miscellaneous Information That May Be Important"></textarea>
<label for="job">Urgency:</label>
<select id="job" name="field4">
<optgroup label="Urgency level: just for us to prioritize properly">
<option value="Not Urgent">Low (ETA: Up to an hour)</option>
<option value="reading">Normal (ETA: Up to 45 mins)</option>
<option value="boxing">Critical (ETA: ASAP!)</option>
</optgroup>
</select>
</fieldset>
<fieldset>
<legend><span class="number">2</span>Task that needs completion</legend>
<input type="text" name="field3" id="task" placeholder="Let Us Know How We Can Help!*"></input>
</fieldset>
<input type="submit" value="Apply" onClick = "push()"/>
</form>
</div>
</div>
</div>
</body>
</html>
You are trying to mix Firebase v2 and Firebase v3. In order to make it work you should:
1) Import the right Firebase sdk (and remove the old one from your code)
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase.js"></script>
2) Get a reference to the firebase database
var databaseLink = firebase.database().ref();
NOTE: Firebase has been updated recently, the new documentation is at firebase.google.com (not firebase.com)
Hope it helps ;)
The Background
I have the following HTML document:
<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form</title>
<!-- Plugins CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-combobox.css">
</head>
<body class="one-page fixed-header">
<div class="page-box">
<div class="page-box-content">
<h3>Form 1</h3>
<div class="content">
<div class="combobox-container" id="employee-name-box">
<label for="addScheduleLoc">Location: <span class="required">*</span></label>
<select class="form-control combobox location" name="addScheduleLoc" id="addScheduleLoc" required>
<option value selected="selected">---Select Location---</option>
</select>
</div>
<div class="combobox-container" id="employee-name-box">
<label for="addScheduleTier">Tier: <span class="required">*</span></label>
<select class="form-control combobox tier" name="addScheduleTier" id="addScheduleTier" required>
<option value selected="selected">---Select Tier---</option>
</select>
</div>
</div>
<hr>
<h3>Form 2</h3>
<div id="changeScheduleModalBody" class="content">
<div class="combobox-container" id="employee-name-box">
<label for="chScheduleLoc">Location: <span class="required">*</span></label>
<select class="form-control combobox location" name="chScheduleLoc" id="chScheduleLoc" required>
<option value selected="selected">---Select Location---</option>
</select>
</div>
<div class="combobox-container" id="employee-name-box">
<label for="chScheduleTier">Tier: <span class="required">*</span></label>
<select class="form-control combobox tier" name="chScheduleTier" id="chScheduleTier" required>
<option value selected="selected">---Select Tier---</option>
</select>
</div>
</div>
</div>
<!-- .page-box-content -->
</div>
<!-- .page-box -->
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-combobox.js"></script>
<script src="js/testJavascript.js"></script>
</body>
</html>
There is an AJAX call to a server which retrieves some data after the page has loaded and puts the data into a variable and is used to populate the comboboxes. There are multiple comboboxes that should contain the same information (eg. All comboboxes with class "location" should contain the same list of locations). I have simulated this in the following javascript file. Please note that the initialization of the comboboxes must happen first because I may need to update the contents of the associated <select> element after the combobox is initialized.
//file: js/testJavascript.js
var options = {
locations: "<option id='1'>London</option><option id='2'>Los Angeles</option><option id='3'>Sydney</option>",
tiers: "<option id='1'>Upper</option><option id='2'>Middle</option><option id='3'>Lower</option>"
}
$(document).ready(function(){
$('.combobox').combobox({
bsVersion: '3'
}); //This statement cannot be moved.
$('select.location').append(options.locations);
$('select.tier').append(options.tiers);
});
The Problem
The problem that I'm running into is after I append the options to the <select> elements, the comboboxes aren't updated to show the most recent information. I realize that if I call $('.combobox').combobox({...}); after options are added, the combobox will be correct. But I may need to update the information in the comboboxes after the comboboxes are initialized the first time.
The Question
How can I get the comboboxes to update after I add options to the corresponding <select> tag and after they have already been initialized?
After some more research and fiddling around, I found that the following code works to refresh the combobox. (using the issue shown here)
$('select.location').each(function(){ //need to run in .each to refresh all the elements
$(this).data('combobox').refresh();
});
$('select.tier').each(function(){
$(this).data('combobox').refresh();
});
Try to refresh your combobox using the following code :
$('select.location', 'select.tier').data('combobox','refresh');
Hope this helps.
I have a spreadsheet which I have more than 1000 lines, each column is a field, one of the columns has the field called Domain, "which will be the value I need to query", my application using HTML will need to query using a Text box the HTML to a function, to search the Spreadsheet and return the values of the same line in the HTML.
Now here is the HTML Code:
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.blue-green.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<?!= include('WebPage.js'); ?>
<?!= include('Style'); ?>
</head>
<body ng-app="webApp">
<div ng-controller="webAppCtrl">
<div>
<md-toolbar class="md-theme-light">
<div class="md-toolbar-tools">
<div>DeLight App</div>
</div>
</md-toolbar>
<div id="body">
<div layout="row" layout-align="center start" layout-margin layout-fill layout-padding>
<div>
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3" />
<label class="mdl-textfield__label" for="sample3">Enter Domain</label>
</div>
</form>
</div>
</div>
<div layout="row" layout-align="center start" layout-margin layout-fill layout-padding>
<div id="leftContainer" class="md-whiteframe-z2" flex="50">
<md-toolbar class="md-theme-light">
<div class="md-toolbar-tools">
<div>Customer Info</div>
</div>
</md-toolbar>
Pull Customer Info here from Sheet
</div>
<div id= "rightContainer" class="md-whiteframe-z2" flex="50">
<md-toolbar class="md-theme-light">
<div class="md-toolbar-tools">
<div>Task List</div>
</div>
</md-toolbar>
<md-list-item>
<p>Verified Domain Owner</p>
<md-checkbox class="md-secondary"></md-checkbox>
</md-list-item>
<md-list-item>
<p>User Creation</p>
<md-checkbox class="md-secondary"></md-checkbox>
</md-list-item>
<md-list-item>
<p>Dual Delivery</p>
<md-checkbox class="md-secondary"></md-checkbox>
</md-list-item>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here is the Web App Function Scripts page:
function doGet(e) {
return HtmlService.createTemplateFromFile('Index').evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setTitle('Test')
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.getContent();
}
function testSheet(){
var ss = SpreadsheetApp.openById("abc123456");
Logger.log(ss.getName());
}
The problem that I have is that I don't know how I can store the information that the user submits to the Textbox so I can later search my spreadsheet using a snippet I found here which is:
function test(){
var sh = SpreadsheetApp.openById("abc123456");
var data = sh.getDataRange().getValues(); // read all data in the sheet
for(n=0;n<data.length;++n){ // iterate row by row and examine data in column A
if(data[n][0].toString().match('searchvariable')=='searchvariable'){ data[n][5] = 'YES'};// if column A contains 'xyz' then set value in index [5] (is column F)
}
Logger.log(data)
sh.getRange(1,1,data.length,data[0].length).setValues(data); // write back to the sheet
}
Any Ideas how can I achieve this?
Thank you
You need to get the data out of the form, then send the form values to a server side .gs script function using google.script.run.myFunctionName().
google.script.run - Client Side API
There are various ways that you can get the values out of the input fields. You can get the form as a whole, and send a modified form object to the server, or you can get the values individually.
If you get the form object, google changes the form object. The only way that a .gs function can get values out of the form object is by using the HTML name attribute. In other words, the only way you can get the form object strategy to work, is by giving every input field a name attribute with a name.
<input name='myNameGoesHere' class="mdl-textfield__input" type="text" id="sample3" />
The Google documentation shows putting the google.script.run code directly into the click attribute of the input button. You can try it that way, or put the code into a separate script tag.
<input type="button" value="Not Clicked"
onclick="google.script.run
.withSuccessHandler(updateButton)
.withUserObject(this)
.getEmail()" />
HTML code:
<script>
//Put an anonymous function into the browsers window object
window.callServer = function(theFormObject) {
google.script.run
.search(theFormObject);
</script>
<form>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input name='domain' class="mdl-textfield__input" type="text" id="sample3" />
<label class="mdl-textfield__label" for="sample3">Enter Domain</label>
<input type="button" value="Not Clicked" onclick="callServer(this.parent.parent)"/>
</div>
</form>
Code.gs
function search(myForm) {
//Look in VIEW menu, and LOGS menu Item to see if the form was passed in
Logger.log('myForm: ' + myForm);
var domain = myForm.domain;
Logger.log('domain: ' + domain);
}
I make a auto complete .First I download my data from server and then write anything on text field it filter with my stationCode.I have two thing in my json array stationCode and stationName array .Now I need to set the selected station code on input text field .Can you please tell me what is better way to set the value of station code on input text field whenever user select any row of autosuggest.
here is my code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/foundation.css" />
</head>
<body ng-app="myapp">
<div ng-controller="cnt">
<input type="text" ng-model="searchText.stationCode">
<table ng-show="searchText.stationCode && searchText.stationCode.length != 0">
<tr id="$index"ng-repeat= "a in d.data | filter:searchText" ng-click="getselectedRow(searchText)">
<td> {{a.stationCode}} </td>
<td> {{a.stationName}} </td>
</tr>
</table>
</div>
</body>
<script src="js/angular.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</html>
function cnt($scope,$http){
$http.get("http://184.106.159.143:8180/FGRailApps/jservices/rest/stationList")
.success(function (data) {
//alert(data);
$scope.d=data;
}).error(function(data){
alert("error")
});
$scope.getselectedRow=function(obj){
alert(obj.stationCode)
}
}
fiddle
http://jsfiddle.net/66z4dxsy/1/
Please disable web security of browser