Develop Reference

Read formatted text from form through javascript

class Storedata {
constructor(name, desc, price, qty) {
this.name = name;
this.desc = desc;
this.price = price;
this.qty = qty;
}
}
var arr = [];
var btnform = document.getElementById('clicktoadd');
var btnlist = document.getElementById('clicktoshow');
var rem = document.getElementById('main');
var cancelform;
var submit;
function addData() {
var proname = document.getElementById("inpname");
var prodesc = document.getElementById("inpdesc");
var propric = document.getElementById("inpprice");
var proqty = document.getElementById("inpqty");
arr.push(new Storedata(proname.value, prodesc.value, propric.value, proqty.value));
}
function showlist() {
var data = document.createElement('table');
data.setAttribute("id", "data");
data.innerHTML += "<tr><th>Product Name</th><th>Description</th><th>Price</th><th>Quantity</th><th></th></tr>";
for (let i = 0; i < arr.length; i++) {
data.innerHTML += ("<tr><td>" + arr[i].name + "</td><td>" + arr[i].desc + "</td><td>" + arr[i].price + "</td><td>" + arr[i].qty + "</td><td><button id=\"delete" + i + "\">Delete</button></tr>");
};
document.getElementById('listing').appendChild(data);
document.getElementById('showbutton').removeAttribute("hidden", false);
}
function removelist() {
var data = document.getElementById("data");
data.parentNode.removeChild(data);
}
function addformtopage() {
var form = document.createElement('div');
form.setAttribute("id", "remform");
form.innerHTML += "<div id=\"lblname\">Product Name:</div><input id=\"inpname\" type=\"text\"><div id=\"chkname\" hidden=\"true\">Enter a Product Name</div><div id=\"lbldesc\">Description:</div><textarea id=\"inpdesc\" rows=\"10\" cols=\"35\"></textarea><div id=\"chkdesc\" hidden=\"true\">Enter a Product Desciption</div><div id=\"lblprice\">Price in INR:</div><input id=\"inpprice\" type=\"number\"><div id=\"chkprice\" hidden=\"true\">Enter a Product Price</div><div id=\"lblqty\">Quantity:</div><input id=\"inpqty\" type=\"number\"><div id=\"chkqty\" hidden=\"true\">Enter a Product Quantity</div><br><br><button id=\"submitproduct\">Submit</button><button id=\"cancel\">Cancel</button>";
document.getElementById('panel').appendChild(form);
cancelform = document.getElementById('cancel');
submit = document.getElementById('submitproduct');
}
function validateform() {
var proname = document.getElementById("inpname");
var prodesc = document.getElementById("inpdesc");
var propric = document.getElementById("inpprice");
var proqty = document.getElementById("inpqty");
var errname = document.getElementById("chkname");
var errdesc = document.getElementById("chkdesc");
var errpric = document.getElementById("chkprice");
var errqty = document.getElementById("chkqty");
if ((proname.value) && (prodesc.value) && (propric.value) && (proqty.value)) {
errname.setAttribute("hidden", true);
errdesc.setAttribute("hidden", true);
errpric.setAttribute("hidden", true);
errqty.setAttribute("hidden", true);
return true;
}
if (proname.value) {
errname.setAttribute("hidden", true);
}
if (prodesc.value) {
errdesc.setAttribute("hidden", true);
}
if (propric.value) {
errpric.setAttribute("hidden", true);
}
if (proqty.value) {
errqty.setAttribute("hidden", true);
}
if (!proname.value) {
errname.removeAttribute("hidden", false);
}
if (!prodesc.value) {
errdesc.removeAttribute("hidden", false);
}
if (!propric.value) {
errpric.removeAttribute("hidden", false);
}
if (!proqty.value) {
errqty.removeAttribute("hidden", false);
}
return false;
}
function clearform() {
var proname = document.getElementById("inpname");
var prodesc = document.getElementById("inpdesc");
var propric = document.getElementById("inpprice");
var proqty = document.getElementById("inpqty");
proname.value = null;
prodesc.value = null;
propric.value = null;
proqty.value = null;
}
function removeform() {
var elem = document.getElementById("remform");
elem.parentNode.removeChild(elem);
}
function removebuttons() {
rem.setAttribute("hidden", true);
}
function showbuttons() {
rem.removeAttribute("hidden", false);
}
btnform.addEventListener('click', function() {
addformtopage();
removebuttons();
cancelform.addEventListener('click', function() {
showbuttons();
removeform();
});
submit.addEventListener('click', function() {
if (validateform()) {
alert("Values Added");
addData();
clearform();
}
});
});
btnlist.addEventListener('click', function() {
showlist();
removebuttons();
document.getElementById('showbutton').addEventListener('click', function() {
showbuttons();
removelist();
document.getElementById('showbutton').setAttribute("hidden", "true");
});
});
#chkname,
#chkdesc,
#chkprice,
#chkqty {
color: red;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 70%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
<!DOCTYPE HTML>
<html>
<head>
<link href="style.css" rel="stylesheet" />
<title>
JS Form
</title>
</head>
<body>
<div id="main">
<p><button id="clicktoadd">Add Product</button> <button id="clicktoshow">Show List</button></p>
</div>
<div id="panel">
</div>
<div id="listing">
</div>
<button id="showbutton" hidden="true">< Back</button>
<script src="script.js"></script>
</body>
</html>
I want to take input in form for description of the item as formatted text. And then output it in the same format as input, but right now I am getting text separated by space where should be there. Please help..
Steps to perform
1. Run this code snippet.
2. Click on 'Add Product' button.
3. Fill the form (For testing give a description of more than one line) and Submit.
4. Click on 'Cancel' button to return.
5. Click on 'Show List' button.
6. Observe Description column.
This is output I am getting separated by spaces
This is form input I am providing

Well, you have two options. Add a <pre> tag:
for (let i = 0; i < arr.length; i++) {
data.innerHTML += ("<tr><td>" + arr[i].name + "</td><td><pre>" + arr[i].desc + "</pre></td><td>" + arr[i].price + "</td><td>" + arr[i].qty + "</td><td><button id=\"delete" + i + "\">Delete</button></tr>");
};
This way it will display the new lines and you keep your string clean.
Or you can replace the new lines with <br> this way:
for (let i = 0; i < arr.length; i++) {
data.innerHTML += ("<tr><td>" + arr[i].name + "</td><td>" + arr[i].desc.replace(/\n/g, "<br>") + "</td><td>" + arr[i].price + "</td><td>" + arr[i].qty + "</td><td><button id=\"delete" + i + "\">Delete</button></tr>");
};
Remember that the new lines are not shown by default in HTML, if you want a new line put a <br>
Test it online
Hope it helps! :)

Add this into your code:
var text = arr[i].desc;
text = text.replace(/\n/g, '<br />');
JSfiddle
See JavaScript: How to add line breaks to an HTML textarea? too.

getJSON JSON Array - Search Functionality Crashing Client

I'm running into a problem when trying to add in the search functionality, showList().
It seems to bog down the client so much that Chrome wants to kill the page each time I type into the input field. I'm clearly a novice JS writer, so could I be running an infinite loop somewhere I don't see? Also, any advice to get the search functionality working properly would be hugely appreciated. I don't think I'm using the correct selectors below for the show/hide if statement, but I can't think what else to use.
$(document).ready(function(){
showList();
searchBar();
});
function showList() {
$("#show-records").click(function(){
$.getJSON("data.json", function(data){
var json = data;
$("show-list").append("<table class='specialists'>")
for(var i = 0; i < json.length; i++) {
var obj = json[i],
tableFormat = "</td><td>";
$("#show-list").append("<tr><td class=1>" +
obj.FIELD1 + tableFormat +
obj.FIELD2 + tableFormat +
obj.FIELD3 + tableFormat +
obj.FIELD4 + tableFormat +
obj.FIELD5 + tableFormat +
obj.FIELD6 + tableFormat +
obj.FIELD7 + tableFormat +
obj.FIELD8 + "</td></tr>");
$("show-list").append("</table>");
}
//end getJSON inner function
});
//end click function
});
//end showList()
};
function searchBar() {
//AJAX getJSON
$.getJSON("data.json", function(data){
//gathering json Data, sticking it into var json
var json = data;
for(var i = 0; i < json.length; i++) {
//putting the json objects into var obj
var obj = json[i];
function contains(text_one, text_two) {
if (text_one.indexOf(text_two) != -1)
return true;
}
//whenever anything is entered into search bar...
$('#search').keyup(function(obj) {
//grab the search bar content values and...
var searchEntry = $(this).val().toLowerCase();
//grab each td and check to see if it contains the same contents as var searchEntry - if they dont match, hide; otherwise show
$("td").each(function() {
if (!contains($(this).text().toLowerCase(), searchEntry)) {
$(this).hide(400);
} else {
$(this).show(400);
};
})
})
}
});
};
body {
background-color: lightblue;
}
tr:first-child {
font-weight: bold;
}
td {
padding: 3px;
/*margin: 10px;*/
text-align: center;
}
td:nth-child(6) {
padding-left: 50px;
}
td:nth-child(7) {
padding-left: 10px;
padding-right: 10px;
}
#filter-count {
font-size: 12px;
}
<html>
<head>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script language="javascript" src="process.js"></script>
<link rel="stylesheet" type="text/css" href="./mystyle.css">
</head>
<body>
<a href="#" id='show-records'>Show Records</a><br>
<label id="searchBar">Search: <input id="search" placeholder="Enter Specialist Name"></label>
<span id="search-count"></span>
<div id="show-list"></div>
</body>
</html>

Problem appears to be that you can't treat append as if it was a text editor and you are writing html.
Anything that gets inserted needs to be a proper element ... not a start tag, then some text...then a close tag.
We can however modify your code slightly to produce html strings and then add that at the end
$.getJSON("data.json", function(data){
var json = data;
var html="<table class='specialists'>")
for(var i = 0; i < json.length; i++) {
var obj = json[i],
tableFormat = "</td><td>";
html+= "<tr><td class=1>" +
obj.FIELD1 + tableFormat +
obj.FIELD2 + tableFormat +
obj.FIELD3 + tableFormat +
obj.FIELD4 + tableFormat +
obj.FIELD5 + tableFormat +
obj.FIELD6 + tableFormat +
obj.FIELD7 + tableFormat +
obj.FIELD8 + "</td></tr>";
}
html+= '</table>';
$("#show-list").html(html);
//end getJSON inner function
});

Save As... dialog box in HTA

I have an HTA file and I would like to make a function that saves a file. Is there any way in HTML, JavaScript or VBScript to open a Save As... dialog box so that the user can choose where and under what name they want to save the file?

You can use GetSaveAsFileName method of Microsoft Excel Application object to open a Save As... dialog box.
The example below shows how to do this:
<html>
<head>
<title>Create text file</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Javad">
<script language="javascript">
var excel = new ActiveXObject("Excel.Application");
var fso = new ActiveXObject("Scripting.FileSystemObject");
var shell = new ActiveXObject("Shell.Application");
function createTextFile(content)
{
event.returnValue = false;
shell.MinimizeAll();
var path = excel.GetSaveAsFileName(fso.GetAbsolutePathName("My text file"), "Text files (*.txt;*.log),*.txt;*.log,All files (*.*),*.*", 1, "Save As...");
window.focus();
if (!path) return;
var ts = fso.OpenTextFile(path,2,true);
ts.WriteLine(content);
ts.Close();
}
</script>
<HTA:Application windowstate="maximize">
</head>
<body>
<form onsubmit="createTextFile(this.cnt.value)">
Content of the text file: <input type="text" name="cnt" value="Hello."><br>
<button type="submit">Create text file</button>
</form>
</body>
</html>
In the example above, there are a text field and a submit button in a form.
The user should type something in the text field and click on the button.
When the user clicks on the button, this program opens a Save As... dialog box and lets the user choose where he/she wants to save the text file.
Then this program creates a text file at the specified location, and writes the value of the field in the text file.
Note: When the Save As... dialog box is opened, it doesn't receive the focus. I don't know why. Maybe it's one of the bugs of Excel 2007. So the code shell.MinimizeAll() is written at Line 14, in order to remove the focus from all windows so the Save As... dialog box can receive the focus.
As I said, there's this problem in Excel 2007. Maybe this bug is fixed in later versions of Excel.

Below is an example of HTA file that shows how to open choose file dialog using both JS and VBS with small "sandbox":
<html>
<head>
<script language="javascript">
function OpenDialogJs() {
output.innerText = d.object.openFileDlg(i.value, null, f.value, t.value);
}
</script>
<script language="vbscript">
Sub OpenDialogVbs()
output.innerText = d.object.openFileDlg(i.value, , f.value, t.value)
End Sub
</script>
</head>
<body>
<object id="d" classid="clsid:3050f4e1-98b5-11cf-bb82-00aa00bdce0b" width=0 height=0></object>
Initial dir <input id="i" type="text" value="C:\*"></input><br>
Filter <input id="f" type="text" value="All files (*.*)|*.*|Microsoft Word (*.doc;*.docx)|*.doc;*.docx"></input><br>
Title <input id="t" type="text" value="Save As..."></input><br>
<input type="button" value="Open / js" onclick="OpenDialogJs()"></input>
<input type="button" value="Open / vbs" onclick="OpenDialogVbs()"></input>
<div id="output"></div>
</body>
</html>

Assuming you are able to do the open and copy parts, here is an (untried in quite a while I'm afraid) routine demonstrating the use of the save as common dialogue in VBScript that should work in an HTA.
Sub SaveAs
Dim oDLG
Set oDLG=CreateObject("MSComDlg.CommonDialog")
With oDLG
.DialogTitle="SaveAs"
.Filter="Scripts|*.vbs;*.hta;*.wsf;*.js|Text Files|*.txt|All files|*.*"
.MaxFileSize=255
.ShowSave
If .FileName<>"" Then
FileName=.FileName
Save
End If
End With
Set oDLG=Nothing
DisplayTitle
End Sub
Note however the comments from How can I use the common Save As dialog from VBScript? that indicate you may need to install either a license into the registry or track down and install Visual Studio or HTML Help. VS is now available in a number of free versions so this is much less of an issue that it used to be.

Here's a way to make an own Save As dialog box in hta:
var folder = new ActiveXObject("WScript.Shell").SpecialFolders("mydocuments"); //The default folder in which the file is saved, in this case My Documents
function saveAs(ext){ //ext is the file extension without a dot, for exampe: html, NOT .html
var s = window.showModalDialog("saveas.hta?" + ext, window, "dialogWidth:609px; dialogHeight:386px");
return s;
}
saveas.hta:
<html>
<head>
<title>Save as</title>
<meta http-equiv="MSThemeCompatible" content="yes" />
<style type="text/css">
body, td {
margin: 8px;
font-family: tahoma;
font-size: 10pt;
}
button.normal {
position: absolute;
left: 11px;
border: none;
padding: 2px;
background: none;
width: 100%;
font-size: 8pt;
}
button.hover {
position: absolute;
left: 11px;
width: 100%;
font-size: 8pt;
}
</style>
<script type="text/javascript">
var fso = new ActiveXObject("Scripting.FileSystemObject");
var ws = new ActiveXObject("WScript.Shell");
var span = new Array();
window.onload = function(){
document.body.getElementsByTagName("select")[0].innerHTML = "<option value='." + location.href.split("?")[1] + "' selected>" + location.href.split("?")[1] + " file (*." + location.href.split("?")[1] + ")</option>"
if(!fso.FolderExists(window.dialogArguments.folder)){window.dialogArguments.folder = window.dialogArguments.defaultFolder}
path.value = window.dialogArguments.folder;
lit_fold(path.value);
path.blur();
namn.focus();
}
function spara(){
if(!new ActiveXObject("Scripting.FileSystemObject").FileExists(((path.value == "file://") ? ws.SpecialFolders("Appdata") + "\\Microsoft\\Windows\\Network Shortcuts" : path.value) + "\\" + namn.value.replace(/\"/gi,"") + ((namn.value.indexOf("\"") == -1) ? type.getElementsByTagName("option")[type.selectedIndex].value : "")) || confirmYesNo("The file " + ((path.value == "file://") ? ws.SpecialFolders("Appdata") + "\\Microsoft\\Windows\\Network Shortcuts" : path.value) + "\\" + namn.value.replace(/\"/gi,"") + ((namn.value.indexOf("\"") == -1) ? type.getElementsByTagName("option")[type.selectedIndex].value : "") + " already exists.\nDo you want to replace it?")){
var retourne = new Object();
window.returnValue = ((path.value == "file://") ? ws.SpecialFolders("Appdata") + "\\Microsoft\\Windows\\Network Shortcuts" : path.value) + "\\" + namn.value.replace(/\"/gi,"") + ((namn.value.indexOf("\"") == -1) ? type.getElementsByTagName("option")[type.selectedIndex].value : "");
window.close();
}
}
function kolla(){
if(new ActiveXObject("Scripting.FileSystemObject").FolderExists(path.value) || path.value == "file://"){
window.dialogArguments.folder = path.value;
lit_fold(path.value);
}
else{
alert("Could not find this folder");
path.value = window.dialogArguments.folder;
}
}
function lit_fold(chemin){
if(chemin == "file://"){
ok.disabled = !fso.FolderExists(ws.SpecialFolders("Appdata") + "\\Microsoft\\Windows\\Network Shortcuts");
list.innerHTML = "";
span = new Array();
var alphabet = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
for(i = 0; i < 26; i++){
if(fso.DriveExists(alphabet[i] + ":\\")){
var l = span.length;
span[l] = document.createElement("span");
span[l].onclick = function(){
var wse = window.event.srcElement;
if(wse.tagName == "IMG"){wse = window.event.srcElement.parentElement}
for(i = 0; i < span.length; i++){
span[i].style.background = "none";
span[i].style.color = "black";
}
wse.style.background = "rgb(1,153,255)";
wse.style.color = "white";
}
span[l].ondblclick = function(){
path.value = window.event.srcElement.value;
kolla();
lit_fold(path.value);
}
span[l].style.width = "100%";
span[l].innerHTML = "<img src='drive" + (fso.GetDriveName(fso.GetSpecialFolder(0)) == alphabet[i] + ":" ? fso.GetDrive(alphabet[i] + ":").DriveType + "bis" : fso.GetDrive(alphabet[i] + ":").DriveType) + ".png' width='16' height='16' value='" + alphabet[i] + ":\\'/> " + fso.GetDrive(alphabet[i] + ":").VolumeName + " (" + alphabet[i] + ":)<br/>";
span[l].value = alphabet[i] + ":\\";
list.appendChild(span[l]);
}
}
if(fso.FolderExists(ws.SpecialFolders("Appdata") + "\\Microsoft\\Windows\\Network Shortcuts")){
chemin = ws.SpecialFolders("Appdata") + "\\Microsoft\\Windows\\Network Shortcuts";
var ff = new Enumerator(fso.GetFolder(chemin).subfolders);
for(; !ff.atEnd(); ff.moveNext()){
var l = span.length;
span[l] = document.createElement("span");
span[l].onclick = function(){
var wse = window.event.srcElement;
if(wse.tagName == "IMG"){wse = window.event.srcElement.parentElement}
for(i = 0; i < span.length; i++){
span[i].style.background = "none";
span[i].style.color = "black";
}
wse.style.background = "rgb(1,153,255)";
wse.style.color = "white";
}
span[l].ondblclick = function(){
path.value = window.event.srcElement.value;
kolla();
lit_fold(path.value);
}
span[l].style.width = "100%";
span[l].innerHTML = "<img src='folder.png' width='16' height='16' value='" + ff.item() + "'/> " + fso.GetFolder(ff.item()).Name + "<br/>";
span[l].value = new String(ff.item());
list.appendChild(span[l]);
}
ff = new Enumerator(fso.GetFolder(chemin).files);
for(; !ff.atEnd(); ff.moveNext()){
if(fso.getExtensionName(ff.item()) == location.href.split("?")[1]){
var l = span.length;
span[l] = document.createElement("span");
span[l].onclick = function(){
var wse = window.event.srcElement;
if(wse.tagName == "IMG"){wse = window.event.srcElement.parentElement}
for(i = 0; i < span.length; i++){
span[i].style.background = "none";
span[i].style.color = "black";
}
wse.style.background = "rgb(1,153,255)";
wse.style.color = "white";
namn.value = wse.value.slice(0,-4);
}
span[l].ondblclick = spara;
span[l].style.width = "100%";
span[l].innerHTML = "<img src='file.png' width='16' height='16'/> " + fso.getBaseName(ff.item()) + "<br/>";
span[l].value = new String(ff.item() + " ").slice(chemin.length,-1).replace("\\","");
list.appendChild(span[l]);
}
}
}
}
else{
ok.disabled = false;
list.innerHTML = "";
span = new Array();
var ff = new Enumerator(fso.GetFolder(chemin).subfolders);
for(; !ff.atEnd(); ff.moveNext()){
var l = span.length;
span[l] = document.createElement("span");
span[l].onclick = function(){
var wse = window.event.srcElement;
if(wse.tagName == "IMG"){wse = window.event.srcElement.parentElement}
for(i = 0; i < span.length; i++){
span[i].style.background = "none";
span[i].style.color = "black";
}
wse.style.background = "rgb(1,153,255)";
wse.style.color = "white";
}
span[l].ondblclick = function(){
path.value = window.event.srcElement.value;
kolla();
lit_fold(path.value);
}
span[l].style.width = "100%";
span[l].innerHTML = "<img src='folder.png' width='16' height='16' value='" + ff.item() + "'/> " + fso.GetFolder(ff.item()).Name + "<br/>";
span[l].value = new String(ff.item());
list.appendChild(span[l]);
}
ff = new Enumerator(fso.GetFolder(chemin).files);
for(; !ff.atEnd(); ff.moveNext()){
if(fso.getExtensionName(ff.item()) == location.href.split("?")[1]){
var l = span.length;
span[l] = document.createElement("span");
span[l].onclick = function(){
var wse = window.event.srcElement;
if(wse.tagName == "IMG"){wse = window.event.srcElement.parentElement}
for(i = 0; i < span.length; i++){
span[i].style.background = "none";
span[i].style.color = "black";
}
wse.style.background = "rgb(1,153,255)";
wse.style.color = "white";
namn.value = wse.value.slice(0,-4);
}
span[l].ondblclick = spara;
span[l].style.width = "100%";
span[l].innerHTML = "<img src='file.png' width='16' height='16'/> " + fso.getBaseName(ff.item()) + "<br/>";
span[l].value = new String(ff.item() + " ").slice(chemin.length,-1).replace("\\","");
list.appendChild(span[l]);
}
}
}
}
document.onkeydown = function(){
if(window.event.keyCode == 13){
spara();
}
if(window.event.keyCode == 27){
window.close();
}
if(window.event.keyCode == 116){
lit_fold(path.value);
}
}
</script>
</head>
<body bgcolor="buttonface" ondragstart="return false">
<table width="100%">
<tr>
<td width="15%">Folder:</td>
<td width="85%"><input type="text" id="path" onchange="kolla()" style="width:100%" />
</tr>
<tr height="258px">
<td valign="top">
<button class="normal" onmouseover="window.event.srcElement.className = 'hover'" onmouseout="window.event.srcElement.className = 'normal'" onclick="path.value = ws.SpecialFolders('Desktop'); kolla()" title="Desktop" style="top:40px"><img src="desktop.png" width="32" height="32" onmouseover="document.body.getElementsByTagName('button')[0].className='hover'" onmouseout="document.body.getElementsByTagName('button')[0].className='normal'" /><br />Dektop</button><br />
<button class="normal" onmouseover="window.event.srcElement.className = 'hover'" onmouseout="window.event.srcElement.className = 'normal'" onclick="path.value = ws.SpecialFolders('MyDocuments'); kolla()" title="My documents" style="top:90px"><img src="mydocs.png" width="32" height="32" onmouseover="document.body.getElementsByTagName('button')[1].className='hover'" onmouseout="document.body.getElementsByTagName('button')[1].className='normal'" /><br />My documents</button><br />
<button class="normal" onmouseover="window.event.srcElement.className = 'hover'" onmouseout="window.event.srcElement.className = 'normal'" onclick="path.value = 'file://'; kolla()" title="Computer" style="top:140px"><img src="computer.png" width="32" height="32" onmouseover="document.body.getElementsByTagName('button')[2].className='hover'" onmouseout="document.body.getElementsByTagName('button')[2].className='normal'" /><br />Computer</button>
</td>
<td><div id="list" style="width:100%; height:100%; background:white; overflow:scroll; padding:4px"></div></td>
</tr>
<tr>
<td>File name:</td>
<td><input type="text" id="namn" style="width:100%" onfocus="for(i = 0; i < span.length; i++){span[i].style.background = 'none'; span[i].style.color = 'black'}" /></td>
</tr>
<tr>
<td>Type:</td>
<td>
<select id="type" style="width:100%"></select>
</td>
</tr>
<tr>
<td> </td>
<td style="text-align:right">
<button id="ok" onclick="spara()" style="width:94px">Save</button>
<button onclick="window.close()" style="width:86px">Cancel</button>
</td>
</tr>
</table>
</body>
</html>
You can make your own icons or download these:
computer.png:
desktop.png:
drive0.png:
drive1.png:
drive2.png:
drive2bis.png:
drive3.png:
drive4.png:
drive5.png:
file.png:
folder.png:
mydocs.png:

Getting 0x800a138f - JavaScript runtime error: Unable to get property 'client' of undefined or null reference

I'm making a chat application using SignalR API. I'm getting error as:
0x800a138f - JavaScript runtime error: Unable to get property 'client'
of undefined or null reference
Here is my code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="/Css/ChatStyle.css" />
<link rel="stylesheet" href="/Css/JQueryUI/themes/base/jquery.ui.all.css">
<!--Script references. -->
<!--Reference the jQuery library. -->
<script src="/Scripts/jquery-1.8.2.min.js"></script>
<script src="/Scripts/ui/jquery.ui.core.js"></script>
<script src="/Scripts/ui/jquery.ui.widget.js"></script>
<script src="/Scripts/ui/jquery.ui.mouse.js"></script>
<script src="/Scripts/ui/jquery.ui.draggable.js"></script>
<script src="/Scripts/ui/jquery.ui.resizable.js"></script>
<!--Reference the SignalR library. -->
<script src="/Scripts/jquery.signalR-1.0.0.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
setScreen(false);
// Declare a proxy to reference the hub.
var chatHub = $.connection.chatHub;
registerClientMethods(chatHub);
// Start Hub
$.connection.hub.start().done(function () {
registerEvents(chatHub)
});
});
function setScreen(isLogin) {
if (!isLogin) {
$("#divChat").hide();
$("#divLogin").show();
}
else {
$("#divChat").show();
$("#divLogin").hide();
}
}
function registerEvents(chatHub) {
$("#btnStartChat").click(function () {
var name = $("#txtNickName").val();
if (name.length > 0) {
chatHub.server.connect(name);
}
else {
alert("Please enter name");
}
});
$('#btnSendMsg').click(function () {
var msg = $("#txtMessage").val();
if (msg.length > 0) {
var userName = $('#hdUserName').val();
chatHub.server.sendMessageToAll(userName, msg);
$("#txtMessage").val('');
}
});
$("#txtNickName").keypress(function (e) {
if (e.which == 13) {
$("#btnStartChat").click();
}
});
$("#txtMessage").keypress(function (e) {
if (e.which == 13) {
$('#btnSendMsg').click();
}
});
}
function registerClientMethods(chatHub) {
// Calls when user successfully logged in
chatHub.client.onConnected = function (id, userName, allUsers, messages) {
setScreen(true);
$('#hdId').val(id);
$('#hdUserName').val(userName);
$('#spanUser').html(userName);
// Add All Users
for (i = 0; i < allUsers.length; i++) {
AddUser(chatHub, allUsers[i].ConnectionId, allUsers[i].UserName);
}
// Add Existing Messages
for (i = 0; i < messages.length; i++) {
AddMessage(messages[i].UserName, messages[i].Message);
}
}
// On New User Connected
chatHub.client.onNewUserConnected = function (id, name) {
AddUser(chatHub, id, name);
}
// On User Disconnected
chatHub.client.onUserDisconnected = function (id, userName) {
$('#' + id).remove();
var ctrId = 'private_' + id;
$('#' + ctrId).remove();
var disc = $('<div class="disconnect">"' + userName + '" logged off.</div>');
$(disc).hide();
$('#divusers').prepend(disc);
$(disc).fadeIn(200).delay(2000).fadeOut(200);
}
chatHub.client.messageReceived = function (userName, message) {
AddMessage(userName, message);
}
chatHub.client.sendPrivateMessage = function (windowId, fromUserName, message) {
var ctrId = 'private_' + windowId;
if ($('#' + ctrId).length == 0) {
createPrivateChatWindow(chatHub, windowId, ctrId, fromUserName);
}
$('#' + ctrId).find('#divMessage').append('<div class="message"><span class="userName">' + fromUserName + '</span>: ' + message + '</div>');
// set scrollbar
var height = $('#' + ctrId).find('#divMessage')[0].scrollHeight;
$('#' + ctrId).find('#divMessage').scrollTop(height);
}
}
function AddUser(chatHub, id, name) {
var userId = $('#hdId').val();
var code = "";
if (userId == id) {
code = $('<div class="loginUser">' + name + "</div>");
}
else {
code = $('<a id="' + id + '" class="user" >' + name + '<a>');
$(code).dblclick(function () {
var id = $(this).attr('id');
if (userId != id)
OpenPrivateChatWindow(chatHub, id, name);
});
}
$("#divusers").append(code);
}
function AddMessage(userName, message) {
$('#divChatWindow').append('<div class="message"><span class="userName">' + userName + '</span>: ' + message + '</div>');
var height = $('#divChatWindow')[0].scrollHeight;
$('#divChatWindow').scrollTop(height);
}
function OpenPrivateChatWindow(chatHub, id, userName) {
var ctrId = 'private_' + id;
if ($('#' + ctrId).length > 0) return;
createPrivateChatWindow(chatHub, id, ctrId, userName);
}
function createPrivateChatWindow(chatHub, userId, ctrId, userName) {
var div = '<div id="' + ctrId + '" class="ui-widget-content draggable" rel="0">' +
'<div class="header">' +
'<div style="float:right;">' +
'<img id="imgDelete" style="cursor:pointer;" src="/Images/delete.png"/>' +
'</div>' +
'<span class="selText" rel="0">' + userName + '</span>' +
'</div>' +
'<div id="divMessage" class="messageArea">' +
'</div>' +
'<div class="buttonBar">' +
'<input id="txtPrivateMessage" class="msgText" type="text" />' +
'<input id="btnSendMessage" class="submitButton button" type="button" value="Send" />' +
'</div>' +
'</div>';
var $div = $(div);
// DELETE BUTTON IMAGE
$div.find('#imgDelete').click(function () {
$('#' + ctrId).remove();
});
// Send Button event
$div.find("#btnSendMessage").click(function () {
$textBox = $div.find("#txtPrivateMessage");
var msg = $textBox.val();
if (msg.length > 0) {
chatHub.server.sendPrivateMessage(userId, msg);
$textBox.val('');
}
});
// Text Box event
$div.find("#txtPrivateMessage").keypress(function (e) {
if (e.which == 13) {
$div.find("#btnSendMessage").click();
}
});
AddDivToContainer($div);
}
function AddDivToContainer($div) {
$('#divContainer').prepend($div);
$div.draggable({
handle: ".header",
stop: function () {
}
});
////$div.resizable({
//// stop: function () {
//// }
////});
}
</script>
</head>
<body>
<div id="header">
SignalR Chat Room
</div>
<br />
<br />
<br />
<div id="divContainer">
<div id="divLogin" class="login">
<div>
Your Name:<br />
<input id="txtNickName" type="text" class="textBox" />
</div>
<div id="divButton">
<input id="btnStartChat" type="button" class="submitButton" value="Start Chat" />
</div>
</div>
<div id="divChat" class="chatRoom">
<div class="title">
Welcome to Chat Room [<span id='spanUser'></span>]
</div>
<div class="content">
<div id="divChatWindow" class="chatWindow">
</div>
<div id="divusers" class="users">
</div>
</div>
<div class="messageBar">
<input class="textbox" type="text" id="txtMessage" />
<input id="btnSendMsg" type="button" value="Send" class="submitButton" />
</div>
</div>
<input id="hdId" type="hidden" />
<input id="hdUserName" type="hidden" />
</div>
</body>
</html>

You are referring to the client object of an undefined object. So I have been searching inside your code for
.client
These were the results:
chatHub.client.onConnected
chatHub.client.onNewUserConnected
chatHub.client.onUserDisconnected
chatHub.client.messageReceived
chatHub.client.sendPrivateMessage
So, if you look at the results, it becomes obvious that chatHub is undefined somewhere. This is how you initialize it:
var chatHub = $.connection.chatHub;
I wonder what is inside $.connection. Are you missing a script from your html?

A couple of things...
You're using an old signalr version, have you tried upgrading to the latest?
Otherwise; I had a similar problem, I had to solve it by setting up the connection without the generated proxy (/signalr/hubs).
See this link http://www.asp.net/signalr/overview/guide-to-the-api/hubs-api-guide-javascript-client and instead of setting it as a "generated proxy", implement it without it. (Search for "Without the generated proxy")

Performing a POST in window.open()

I'm trying to open a popup and I'd like to send data using the post method when it opens.
Can anyone help me.
I am getting "Uncaught syntax error. Unexpected token }"
function MapIt(){
var ListIds = selected_Listings.join();
if (navigator.appName == "Microsoft Internet Explorer") {
var opts = "screenX=0,screenY=0,width=" + screen.width + ",height=" + screen.height;
} else {
var opts = "outerWidth=" + screen.availWidth + ",outerHeight=" + screen.availHeight + ",screenX=0,screenY=0";
}
var urlStr = "http://www.dev.theabc.com/bingmaps/Map ";
$('<form action=' + urlStr + ' ' + ' target="submission" onsubmit="window.open("", "Map",' + opts + ' "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes");return true;" method="post"><input type="hidden" name="listid" value="' + ListIds + '"></form>').submit();
}

After knowing that you don't realy wanted a post.
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript'>
$(function(){
MapIt = function() {
ListIds = '1234';//selected_Listings.join();
if (navigator.appName == "Microsoft Internet Explorer") {
var opts = "screenX=0,screenY=0,width=" + screen.width + ",height=" + screen.height;
} else {
var opts = "outerWidth=" + screen.availWidth + ",outerHeight=" + screen.availHeight + ",screenX=0,screenY=0";
}
$('#myHidden').val(ListIds);
window.open('opener.html','Map', opts+',toolbar=no,location=no,directories=no,status=no,menubar=yes,scrollbars=yes,resizable=no');
}
});
</script>
</head>
<body>
<button id="run" onclick="MapIt()">run</button>
<input type="hidden" id="myHidden">
</body>
</html>
An then in your opener.html
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript'>
$(function(){
var listIds = window.opener.document.getElementById('myHidden').value;
$('#valuesRead').text(listIds);
});
</script>
</head>
<body>
<span id="valuesRead"></span>
</body>
</html>
BEWARE This has in some browsers (Chrome for one) security objections if you run it locally

Actually... your syntax is wrong in the form
It should look like this
$('<form action="'+urlStr+' target="submission" onsubmit="window.open(\'http://www.google.com\',\'Map\',\''+opts+',toolbar=no,location=no,directories=no,status=no,menubar=yes,scrollbars=yes,resizable=no\');return true;" method="post"><input type="hidden" value="'+ListIds+'"></form>').submit();
You have to escape the " inside the string... oh and a coma is missing after the opts...
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript'>
$(function(){
MapIt = function() {
ListIds = '1234';//selected_Listings.join();
if (navigator.appName == "Microsoft Internet Explorer") {
var opts = "screenX=0,screenY=0,width=" + screen.width + ",height=" + screen.height;
} else {
var opts = "outerWidth=" + screen.availWidth + ",outerHeight=" + screen.availHeight + ",screenX=0,screenY=0";
}
var urlStr = "http://wwwd.dev.theabc.com/bingmaps/Map";
$('<form action="'+urlStr+' target="submission" onsubmit="window.open(\'http://www.google.com\',\'Map\',\''+opts+',toolbar=no,location=no,directories=no,status=no,menubar=yes,scrollbars=yes,resizable=no\');return true;" method="post"><input type="hidden" value="'+ListIds+'"></form>').submit();
}
});
</script>
</head>
<body>
<button id="run" onclick="MapIt()">run</button>
</body>
</html>