I am working on a demo Web Sockets application. I have the communication set up between the client and the server and they are able to exchange the information between them. I am interested in representing the chat history in the form of a scrollable, color differentiated UI. I initially went with a TextArea which was perfect. Only thing was I am unable to color code the server and user responses differently. I then fell back to LI elements from Bootstrap. But they are appearing very bloated and one more thing that I noticed is since they are part of an UL, I am not getting the scroll bar. So the user input textbox is getting pushed to the bottom of the page as and when there is more communication between the client and the server.
Request you to suggest me an alternative HTML construct which I can explore.
HTML:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>A WebSocket Example!</title>
</head>
<body>
<h1>Lets Chat!</h1>
<small id="subtextMessage" class="form-text text-muted">Great conversations happen over a socket!.</small>
<BR><BR>
<!-- Building the Form -->
<form class="" id="chatform" onsubmit="clearTextInput();return false">
<div class="form-group">
<label for="conversationHistory">Conversation History</label>
<ul class="list-group" id="conversationList">
</ul>
<textarea class="form-control" id="conversationHistoryTextArea" rows="10" readonly></textarea>
</div>
<div class="form-group">
<label for="labelMessage">Type your message</label>
<input type="text" class="form-control" id="inputMessageTextBox" aria-describedby="inputMessage">
</div>
<button type="submit" class="btn btn-primary" onclick="sendMessage()">Send Message</button>
</form>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="js/chatscript.js">
</script>
</body>
</html>
Javascript:
function clearTextInput()
{
$("#inputMessageTextBox").val("");
console.log( "Reached Here" )
}
function sendMessage() {
ws.send( $("#inputMessageTextBox").val() );
$("#conversationHistoryTextArea").val( $("#conversationHistoryTextArea").val() + "\n" + "YOU: " + $("#inputMessageTextBox").val() );
let li = document.createElement('li');
li.innerText = $("#inputMessageTextBox").val();
li.classList.add("list-group-item");
li.classList.add("list-group-item-info");
document.getElementById('conversationList').appendChild(li);
}
let ws = new WebSocket("ws://localhost:8000");
ws.onopen = function(event) {
console.log("Client: WebSocket request accepted.");
};
ws.onmessage = function(event) {
console.log("Received from the server" + event.data);
if( $("#conversationHistoryTextArea").val().trim().length > 0 )
$("#conversationHistoryTextArea").val( $("#conversationHistoryTextArea").val() + "\n" + "SERVER: " + event.data );
else
$("#conversationHistoryTextArea").val( "SERVER: " + event.data );
let li = document.createElement('li');
li.innerText = event.data;
li.classList.add("list-group-item");
li.classList.add("list-group-item-primary");
document.getElementById('conversationList').appendChild(li);
};
Please let me know if you have any suggestions.
You can use the HTML <p> element, and use CSS classes for each different party.
You can also use <span> but you will have to deal with the line break.
I am sure there are many other solutions for this.
Related
I followed this tutorial, https://www.youtube.com/watch?v=yZNPkcT4PKA&t=3s trying to create a form on a google spread sheet.
i followed all the steps, form loading script is working ok, form body displays ok, but form data after submission does not appear on spreadsheet as expected.
i must have missed something, but i went through the tutorial several times, and still can't figure it out
so here is the html code:
(the form code is taken from bootsrap)
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div>
<div class="form-group">
<label for="item-name">Item Name</label>
<input type="text" class="form-control" id="item-name">
</div>
<div class="form-group">
<label for="qty-recieved">Quantity Recieved</label>
<input type="text" class="form-control" id="qty-recieved">
</div>
<button type="submit" class="btn btn-primary" id="mainButton">Submit</button>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
-->
<script>
function afterButtonClicked(){
var item = document.getElementById("item-name");
var qty = document.getElementById("qty-recieved");
var rowData (item: item.value, qty: qty.value);
google.script.run.addNewRow(rowData);
}
document.getElementById("mainButton").addEventListener("click",addRow);
</script>
</body>
</html>
and the addNewRow(rowData) script: (in a separate script file)
i did make sure sheet name is "track"
function addNewRow(rowData) {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const ws = ss.getSheetByName("track");
ws.appendRow([rowData.item, rowData.qty]);
}
edited
so i finally figured out what was wrong - the google account i used for the spreadsheet didn't match the gogole account logged in on google chrome browser.
that is why the form submission didn't go through
hope that helps someone..
I'm guessing that addRow should be something like this
function addNewRow(e) {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const ws = ss.getSheetByName("track");
ws.appendRow([e.namedValues['item'],e.namedValues['qty']]);
}
And you will have to create an installable onFormSubmit trigger for spreadsheet for addNewRow()
onFormSubmit event object
I have html page name try1.html
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
</head>
<body>
<div id="join1">Join1</div>
<div id="join2">Join2</div>
<script src="script.js"></script>
</body>
</html>
and another html page name try2.html
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
</head>
<body>
<div><input type="text" id="val"></div>
<script src="script.js"></script>
</body>
</html>
I wanted to set the input value of try2.html with different value based on what I choose to click in try1.html using jquery(script.js) as below:
$(document).ready(function(){
$("#join1").click(function(){
$("#val").val("Z1");
$(location).attr("href", "try2.html");
});
$("#join2").click(function(){
$("#val").val("Z2");
$(location).attr("href", "try2.html");
});
});
Is there any mistake I have made which causes the value to not change? Thank You...
You can use GET parameter.
$(document).ready(function(){
$("#join1").click(function(){
$(location).attr("href", "try2.html?q=Z1");
});
$("#join2").click(function(){
$(location).attr("href", "try2.html?q=Z2");
});
});
Also you can change your input name.
<div><input name="q" type="text" id="val"></div>
Then you can get parameters.
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const ourValue = urlParams.get('q');
console.log(ourValue); //you can change your input value to ourValue.
document.getElementById('val').value = ourValue;
This is my code but doesn't work. How do I save data form inputs to json file and send to server?
<!DOCTYPE html>
<html>
<head>
<title>Registration</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<form id="myform" action="register.json">
<label>Vesete ime</label>
<input type="text" name="name" value="name">
<label>Vnesete password</label>
<input type="password" name="password" value="password">
<button id="btn" type="submit" value="submit">Potvrdi</button>
</form>
This is my script
<script type="text/javascript">
var x ={ "name":" ", "password":" "};
var myJSON = JSON.stringify(x);
document.getElementsByTagName("input").innerHTML = myJSON;
var xhr = new XMLHttpRequest();
xhr.open('POST', 'register', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onload = function () {
console.log(this.responseText);
};
xhr.send('name=name&password=password');
</script>
in the browser show this file:///var/www/html/register.json?name=marina&password=1234567 but not save in json file. Plese help me in the first tame work with json.
To save data to the server you need to:
Use a server! Your URL starts with file: which shows you are accessing a local file and not making an HTTP request to a server.
Write server-side code that will read the data you are sending and save it. Just making a request to a static file won't change anything (otherwise anyone could change any page on any website!). How you do this will depend on which server you use and which server-side programming language you pick. Use a search engine to find an introductory tutorial for server-side programming using the language of your choice. (e.g. for Perl, JavaScript, or Python).
I have included a php file using javascript function getApi() it working properly in my intel-xdk emulator but when i load it in to my android device it will not working properly
so pleas tell me what's wrong with my code , and my device is also connected with internet so it may able to retrive data from the server ,but it can't
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="app_framework/css/af.ui.min.css">
<link rel="stylesheet" type="text/css" href="app_framework/css/icons.min.css">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<title>Your New Application</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
</style>
<script src="intelxdk.js">
</script>
<script type="text/javascript">
/* This code is used to run as soon as Intel activates */
var onDeviceReady=function(){
//hide splash screen
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
function getApi() {
alert("Yes");
$.ajax({
type: "GET",
url: "http://exam.coreducation.in/api.php",
success: function(data){
var total = "";
var record = JSON.parse( data );
for(i=0; i<record.length; i++){
total += ("Contact: "+record[i]['contact']+", Name: "+record[i]['name']+", City: "+record[i]['city'] + "<br/>");
}
$('#ddata').html("<h4 style='text-align:center'>"+total+"</h4>")
}
});
}
</script>
<script type="application/javascript" src="app_framework/appframework.min.js"></script>
<script type="application/javascript" src="app_framework/appframework.ui.min.js"></script>
</head>
<body id="afui">
<!-- content goes here-->
<div class="uwrap" id="content">
<div class="upage panel" id="page0" data-header="none" data-footer="none">
<div class="upage-outer">
<div class="upage-content">
<div class="grid grid-pad urow uib_row_1 row-height-1" data-uib="layout/row">
<div class="col uib_col_1 col-0_12-12" data-uib="layout/col">
<div class="widget-container content-area vertical-col">
<a class="button widget uib_w_1 d-margins icon graph" data-uib="app_framework/button" onclick="return getApi();">GetApiData</a><span class="uib_shim">
</span>
<div id="ddata">DAta Will Show Here</div>
</div>
</div>
<span class="uib_shim"></span>
</div>
</div>
<!-- /upage-content -->
</div>
<!-- /upage-outer -->
</div>
</div>
<!-- /uwrap -->
</body>
</html>`enter code here`
The api is blocked due to Cross domain access, same reason why your code will not work in any browser. But there is a way to make it work in Intel XDK apps, just add <script src="xhr.js"></script> after your intelxdk.js script inclusion. It will then work on device.
More info about AJAX and XDK here: http://software.intel.com/en-us/html5/articles/how-to-access-JSON-data-in-HTML5-apps
I resolved similar problem using domain whitelistening.
In Intel XDK it can be done by following next steps:
Open Projects Tab
Expand Build Settings
Enter "*" (without quotes) to Domain List field.
Being new to Dojo I'm trying to initialize a Dijit form with values, e.g. read from storage, XHR etc.
However, invoking form.setFormValues() causes an error TypeError: invalid 'in' operand this.formWidgets thrown by http://yandex.st/dojo/1.7.3/dojox//form/manager/_Mixin.js
Is there anything I'm doing wrong or is this a Dojo issue? (The complete sample is also found here: http://pastebin.com/7LUHr3iA)
<!-- language-all: lang-html -->
`
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.3/dijit/themes/claro/claro.css" media="screen">
<script type="text/javascript">
dojoConfig = {async: true,parseOnLoad: true};
</script>
<script type="text/javascript" src="http://yandex.st/dojo/1.7.3/dojo/dojo.js"></script>
<script type="text/javascript">
require(["dijit/form/TextBox","dijit/form/Button","dojox/form/Manager",
"dojo/parser","dojo/dom","dijit/registry"], function () {});
</script>
</head>
<body class="claro">
<form id="myForm" method="post" data-dojo-type="dojox.form.Manager">
<label for="name">Name</label>
<input id="name" name="nameField" data-dojo-type="dijit.form.TextBox"/><br/>
<label for="surname">Surname</label>
<input id="surname" name="surnameField" data-dojo-type="dijit.form.TextBox"/><br/>
<button data-dojo-type="dijit.form.Button">Submit</button>
<script type="dojo/method" event="startup">
var form = dijit.byId("myForm");
form.setFormValues({
nameField: "Hello",
surnameField: "World"
});
</script>
</form>
</body>
</html>
`
Dojo 1.7 is asynchronous. Code should take the form:
require(["dependency"], function(dep) {
// use dependency
});
There is no reason to believe dojox/form/Manager would be loaded when you try to reference it further down the page.
The registry is the correct way to reference the widget, not 1.6 style code of the form dijit.byId. See livedocs.
See also the dojo/domReady! plugin.