We Keep Coding

Can’t identify object attribute: Uncaught ReferenceError: fat is not defined

I’m building a simple application to calculate BMI as part of an JS exercise and can’t get past this error when I create an object to read inputs of my form. The error I get is the one in the title. Uncaught ReferenceError: fat is not defined at HTMLButtonElement.
var button = document.querySelector("#button-add");
button.addEventListener("click", function() {
event.preventDefault();
var form = document.querySelector("#add-form");
var patient = getFormPatient
console.log(patient);
var patientTr = document.createElement("tr");
var nameTd = document.createElement("td");
var weightTd = document.createElement("td");
var heightTd = document.createElement("td");
var fatTd = document.createElement("td");
var bmiTd = document.createElement("td");
nameTd.textContent = name;
weightTd.textContent = weight;
heightTd.textContent = height;
fatTd.textContent = fat;
bmiTd.textContent = calculateBmi(weight, height);
patientTr.appendChild(nameTd);
patientTr.appendChild(weightTd);
patientTr.appendChild(heightTd);
patientTr.appendChild(fatTd);
patientTr.appendChild(bmiTd);
var table = document.querySelector("#patients-table");
table.appendChild(patientTr);
})
function getFormPatient(form) {
var patient = {
name: form.name.value,
weight: form.weight.value,
fat: form.fat.value,
height: form.height.value
}
return patient;
}
<header>
<div class="container">
<h1 class="title">Queensland Nutrition</h1>
</div>
</header>
<main>
<section class="container">
<h2>My clients</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Weight(kg)</th>
<th>Height(m)</th>
<th>Fat Percentage (%)</th>
<th>BMI</th>
</tr>
</thead>
<tbody id="patients-table">
<tr class="patients">
<td class="info-name">Paulo</td>
<td class="info-weight">100</td>
<td class="info-height">2.00</td>
<td class="info-fat">10</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">João</td>
<td class="info-weight">80</td>
<td class="info-height">1.72</td>
<td class="info-fat">40</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">Erica</td>
<td class="info-weight">54</td>
<td class="info-height">1.64</td>
<td class="info-fat">14</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">Douglas</td>
<td class="info-weight">85</td>
<td class="info-height">1.73</td>
<td class="info-fat">24</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">Tatiana</td>
<td class="info-weight">46</td>
<td class="info-height">1.55</td>
<td class="info-fat">19</td>
<td class="info-bmi">0</td>
</tr>
</tbody>
</table>
</section>
<section class="container">
<h2 id="titulo-form">Add New Patient</h2>
<form id="add-form">
<div class="grupo">
<label for="nome">Name:</label>
<input id="nome" name="name" type="text" placeholder="enter patient's name" class="campo">
</div>
<div class="grupo">
<label for="peso">Weight:</label>
<input id="peso" name="weight" type="text" placeholder="enter patient's weight" class="campo campo-medio">
</div>
<div class="grupo">
<label for="altura">Height:</label>
<input id="altura" name="height" type="text" placeholder="enter patient's height" class="campo campo-medio">
</div>
<div class="grupo">
<label for="gordura">Fat Percentage:</label>
<input id="gordura" name="fat" type="text" placeholder="enter patient's fat percentage" class="campo campo-medio">
</div>
<button id="button-add" class="botao bto-principal">Adicionar</button>
</form>
</section>
</main>
<script src="js/bmi-calc.js" type="text/javascript"></script>
<script src="js/form.js" type="text/javascript"></script>
I thought I might be making a mistake with variable names, but reviewed them and can’t find any. Any ideas on what I’m doing wrong here?
------------------------- EDIT ---------------------
adding code for the calculateBmi function to make it clearer. That's literally all the code I have for the exercise.
var patients = document.querySelectorAll(".patients");
function calculateBmi(weight, height) {
var bmi = 0;
bmi = weight / (height * height);
return bmi.toFixed(2);
}
for (var i = 0; i < patients.length; i++) {
var patient = patients[i];
var tdWeight = patient.querySelector(".info-weight");
var weight = tdWeight.textContent;
var tdHeight = patient.querySelector(".info-height");
var height = tdHeight.textContent;
var tdBmi = patient.querySelector(".info-bmi");
var validWeight = true;
var validHeight = true;
if (weight <= 0 || weight >= 700) {
validWeight = false;
tdBmi.textContent = "Invalid weight";
patient.classList.add("invalid-patient");
}
if (height <= 0 || height >= 3) {
validHeight = false;
tdBmi.textContent = "Invalid height";
patient.classList.add("invalid-patient");
}
if (validHeight == true && validWeight == true) {
var bmi = calculateBmi(weight, height);
tdBmi.textContent = bmi;
}
}

You have no variables name, weight, height, or fat. I think you meant patient.name, etc.
But you didn't call the function in
var patient = getFormPatient
You need parentheses with the argument after it.
var button = document.querySelector("#button-add");
button.addEventListener("click", function() {
event.preventDefault();
var form = document.querySelector("#add-form");
var patient = getFormPatient(form);
console.log(patient);
var patientTr = document.createElement("tr");
var nameTd = document.createElement("td");
var weightTd = document.createElement("td");
var heightTd = document.createElement("td");
var fatTd = document.createElement("td");
var bmiTd = document.createElement("td");
nameTd.textContent = patient.name;
weightTd.textContent = patient.weight;
heightTd.textContent = patient.height;
fatTd.textContent = patient.fat;
bmiTd.textContent = calculateBmi(patient.weight, patient.height);
patientTr.appendChild(nameTd);
patientTr.appendChild(weightTd);
patientTr.appendChild(heightTd);
patientTr.appendChild(fatTd);
patientTr.appendChild(bmiTd);
var table = document.querySelector("#patients-table");
table.appendChild(patientTr);
})
function getFormPatient(form) {
var patient = {
name: form.name.value,
weight: form.weight.value,
fat: form.fat.value,
height: form.height.value
}
return patient;
}
<header>
<div class="container">
<h1 class="title">Queensland Nutrition</h1>
</div>
</header>
<main>
<section class="container">
<h2>My clients</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Weight(kg)</th>
<th>Height(m)</th>
<th>Fat Percentage (%)</th>
<th>BMI</th>
</tr>
</thead>
<tbody id="patients-table">
<tr class="patients">
<td class="info-name">Paulo</td>
<td class="info-weight">100</td>
<td class="info-height">2.00</td>
<td class="info-fat">10</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">João</td>
<td class="info-weight">80</td>
<td class="info-height">1.72</td>
<td class="info-fat">40</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">Erica</td>
<td class="info-weight">54</td>
<td class="info-height">1.64</td>
<td class="info-fat">14</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">Douglas</td>
<td class="info-weight">85</td>
<td class="info-height">1.73</td>
<td class="info-fat">24</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">Tatiana</td>
<td class="info-weight">46</td>
<td class="info-height">1.55</td>
<td class="info-fat">19</td>
<td class="info-bmi">0</td>
</tr>
</tbody>
</table>
</section>
<section class="container">
<h2 id="titulo-form">Add New Patient</h2>
<form id="add-form">
<div class="grupo">
<label for="nome">Name:</label>
<input id="nome" name="name" type="text" placeholder="enter patient's name" class="campo">
</div>
<div class="grupo">
<label for="peso">Weight:</label>
<input id="peso" name="weight" type="text" placeholder="enter patient's weight" class="campo campo-medio">
</div>
<div class="grupo">
<label for="altura">Height:</label>
<input id="altura" name="height" type="text" placeholder="enter patient's height" class="campo campo-medio">
</div>
<div class="grupo">
<label for="gordura">Fat Percentage:</label>
<input id="gordura" name="fat" type="text" placeholder="enter patient's fat percentage" class="campo campo-medio">
</div>
<button id="button-add" class="botao bto-principal">Adicionar</button>
</form>
</section>
</main>
<script src="js/bmi-calc.js" type="text/javascript"></script>
<script src="js/form.js" type="text/javascript"></script>

Your object patient has all the params,
so use patient.field_name to get the value.
var button = document.querySelector("#button-add");
button.addEventListener("click", function() {
event.preventDefault();
var addForm = document.querySelector("#add-form");
var patient = getFormPatient(addForm)
console.log(patient);
var patientTr = document.createElement("tr");
var nameTd = document.createElement("td");
var weightTd = document.createElement("td");
var heightTd = document.createElement("td");
var fatTd = document.createElement("td");
var bmiTd = document.createElement("td");
nameTd.textContent = patient.name;
weightTd.textContent = patient.weight;
heightTd.textContent = patient.height;
fatTd.textContent = patient.fat;
bmiTd.textContent = calculateBmi(weight, height);
patientTr.appendChild(nameTd);
patientTr.appendChild(weightTd);
patientTr.appendChild(heightTd);
patientTr.appendChild(fatTd);
patientTr.appendChild(bmiTd);
var table = document.querySelector("#patients-table");
table.appendChild(patientTr);
})
function getFormPatient(form) {
var patient = {
name: form.name.value,
weight: form.weight.value,
fat: form.fat.value,
height: form.height.value
}
console.log(patient);
return patient;
}

How to capture interaction between jquery Dialog and Parent

I have a call in the parent HTML which invokes a javascript call.
<div class="data">
<form:input title="Building" styleClass="content contractorDisable" maxlength="5" size="6" path="fireImpairForm.bldCode" />
<a href="javascript:winOpen('LookupLocation.htm','bld')">
<img src="image/search.gif" border="0" alt="Click here to find Building"></a>
</div>
The javascript used for the modal window previously was using a window.showModal where the code has been commented as shown in the javascript code below.
I am looking to have a replacement for this same call through Jquery and using the jQuery dialog code.
and this is the javascript call that is called which encapsulates a jquery dialog popup. Previously I was able to set a value in the parent input text value to whatever was selected in the modalDialog window using the return object of modalwindow.That code is now commented out to show what it was and what the implementation I am looking for in its place. I am looking for some replacement for that implementation using jQuery dialog. My Dailog is encapsulating another jsp which is a table so I am not able to return the value back to the parent form.
function winOpen(urlVal, type) {
var printNames = new Object();
var ind = [document.forms[0].elements["fireImpairForm.statusId"].selectedIndex].value;
ind = document.forms[0].elements["fireImpairForm.facility"].selectedIndex;
var facilityCode = document.forms[0].elements["fireImpairForm.facility"].item(ind).value;
var sub = facilityCode.substring(((facilityCode).indexOf("-")) + 1, (facilityCode).length);
var params = "?bldCode=" + document.forms[0].elements["fireImpairForm.bldCode"].value + "&floorCode=" + document.forms[0].elements["fireImpairForm.floorCode"].value + "&campusCode=" + sub + "&check=" + "check" + "&facilityCode=" + facilityCode;
/*
retObj = window.showModalDialog(urlVal+params,"","scroll:no;status:no;dialogWidth:620px;dialogHeight:600px;unadorned:yes;resizable=yes");
if (retObj != null) {
document.forms[0].elements["fireImpairForm.bldCode"].value=retObj.code;
}
*/
}
var page = urlVal + params;
var $dialog = $('<div></div>')
.html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
.dialog({
autoOpen: false,
modal: true,
height: 625,
width: 500,
title: "Buildings"
});
$dialog.dialog('open');
}
The LookupLocation.htm spring controller returns a jsp
<BODY topmargin=0 leftmargin=0 bottommargin=0 rightmargin=0>
<center>
<form name="locForm">
<input type="hidden" name="code" />
<DIV style="overflow:auto;clear:both; width:100%; height:525px; border :1px solid;">
<TABLE onkeydown="if (event.keyCode=='13') return returnToParent()" cellpadding="0" cellspacing="1" id="resultTable" width="100%">
<TBODY>
<c:if test="${empty resultList}">
<tr>
<td bgcolor="buttonface"><b>No data found</b></td>
</tr>
</c:if>
<c:if test="${!empty resultList}">
<tr>
<td> </td>
</tr>
<tr>
<td class="label">Search:</td>
<td class="content">
<input name="searchFld" type="text" size=15 onChange="">
</td>
<td class="content">
<input type="button" value="Find" onclick="findString(document.locForm.searchFld.value)">
</td>
</tr>
<tr>
<td nowrap class="searchTableHeader" align="center" STYLE="color:white">Select</td>
<td nowrap class="searchTableHeader" align="center" STYLE="color:white">Location Code</td>
<td nowrap class="searchTableHeader" align="center" STYLE="color:white">Description</td>
</tr>
<c:set var="evenCount" value="${0}" />
<c:forEach var="result" varStatus="i" items="${resultList}">
<c:set var="evenCount" value="${evenCount+1}" />
<c:choose>
<c:when test="${evenCount % 2 == 0}">
<tr id='row${evenCount}' class="even_row">
</c:when>
<c:otherwise>
<tr id='row${evenCount}' class="odd_row">
</c:otherwise>
</c:choose>
<td width="5%" align="center" class="content">
<input type="radio" name="radioValue" onclick='highlight(${evenCount}); setLookupValuesOne("${result.code}");returnToParent();'>
</td>
<td width="15%" nowrap class="content">
<c:out value="${result.code}" />
</td>
<td nowrap class="content">
<c:out value="${result.description}" />
</td>
</tr>
</c:forEach>
</c:if>
</TBODY>
</TABLE>
</DIV>
</form>
</center>
</BODY>
Any help will be much appreciated.
I have looked at several implementation of jQuery Dialogs and I am not able to piece together how I can have parent form interaction between the jQuery Dialog.
UPDATED :adding the rendered HTML requested by Mark
Here is the updated rendered HTML.
Normal behaviour was , when radio button is selected, the window closed and returned the selected object which was set to a input value on the parent form but now the return object is not getting captured and I can not set the input value fireImpairForm.bldCode
<html>
<BODY topmargin=0 leftmargin=0 bottommargin=0 rightmargin=0>
<center>
<form name="locForm">
<input type="hidden" name="code" />
<DIV style="overflow:auto;clear:both; width:100%; height:525px; border :1px solid;">
<TABLE onkeydown="if (event.keyCode=='13') return returnToParent()" cellpadding="0" cellspacing="1" id="resultTable" width="100%">
<TBODY>
<tr>
<td> </td>
</tr>
<tr>
<td class="label">Search:</td>
<td class="content">
<input name="searchFld" type="text" size=15 onChange="">
</td>
<td class="content">
<input type="button" value="Find" onclick="findString(document.locForm.searchFld.value)">
</td>
</tr>
<tr>
<td nowrap class="searchTableHeader" align="center" STYLE="color:white">Select</td>
<td nowrap class="searchTableHeader" align="center" STYLE="color:white">Location Code</td>
<td nowrap class="searchTableHeader" align="center" STYLE="color:white">Description</td>
</tr>
<tr id='row1' class="odd_row">
<td width="5%" align="center" class="content">
<input type="radio" name="radioValue" onclick='highlight(1); setLookupValuesOne("PC ");returnToParent();'>
</td>
<td width="15%" nowrap class="content">PC </td>
<td nowrap class="content">10150 Place</td>
</tr>
<tr id='row2' class="even_row">
<td width="5%" align="center" class="content">
<input type="radio" name="radioValue" onclick='highlight(2); setLookupValuesOne("ON ");returnToParent();'>
</td>
<td width="15%" nowrap class="content">ON </td>
<td nowrap class="content">1019 Building</td>
</tr>
<tr id='row3' class="odd_row">
<td width="5%" align="center" class="content">
<input type="radio" name="radioValue" onclick='highlight(3); setLookupValuesOne("OG ");returnToParent();'>
</td>
<td width="15%" nowrap class="content">OG </td>
<td nowrap class="content">19137 Building</td>
</tr>
<tr id='row4' class="even_row">
<td width="5%" align="center" class="content">
<input type="radio" name="radioValue" onclick='highlight(4); setLookupValuesOne("TO ");returnToParent();'>
</td>
<td width="15%" nowrap class="content">TO </td>
<td nowrap class="content">2011 Building</td>
</tr>
<tr id='row5' class="odd_row">
<td width="5%" align="center" class="content">
<input type="radio" name="radioValue" onclick='highlight(5); setLookupValuesOne("TT ");returnToParent();'>
</td>
<td width="15%" nowrap class="content">TT </td>
<td nowrap class="content">30133 4 nw Street Building</td>
</tr>
<tr id='row6' class="even_row">
<td width="5%" align="center" class="content">
<input type="radio" name="radioValue" onclick='highlight(6); setLookupValuesOne("TH ");returnToParent();'>
</td>
<td width="15%" nowrap class="content">TH </td>
<td nowrap class="content">13939 Warehouse</td>
</tr>
<tr id='row7' class="odd_row">
<td width="5%" align="center" class="content">
<input type="radio" name="radioValue" onclick='highlight(7); setLookupValuesOne("N2 ");returnToParent();'>
</td>
<td width="15%" nowrap class="content">N2 </td>
<td nowrap class="content">40th Avenue Warehouse</td>
</tr>
</TBODY>
</TABLE>
</DIV>
</form>
</center>
</BODY>
</html>
Here the jscript calls if that helps.
I am having a time trying to format the three jscript calls . If you need it I will paste it somehow. They are not really important though for what I am asking. The first is highlighting grey and white background depending on selected row number odd or even. The next ones I have added
function returnToParent() {
//var defer=$.Deferred();
if (document.forms[0].code.value == null || document.forms[0].code.value == "") {
alert("Please select a row.");
return false;
}
var rowObj = new Object();
rowObj.code = document.forms[0].code.value;
if (window.showModalDialog) {
self.returnValue = rowObj;
} else {
//opener.setData(rowObj);
}
//defer.resolve("true");//this text 'true' can be anything. But for this usage, it should be true or false.
//$(window.opener.document).forms['dialogForm'].dailogFormVal.val=document.forms[0].code.value;
//$(window.opener.document).find().val(document.forms[0].code.value);
var parent = $(window.frameElement).parent();
parent.find("#dailogFormVal").val(document.forms[0].code.value);
$(this).dialog("close");
}
function setLookupValuesOne(codeValue) {
document.forms[0].code.value = codeValue;
var parent = $(window.frameElement).parent();
parent.find("#dailogFormVal").val(document.forms[0].code.value);
//$(window.parent.document.getElementById("dailogFormVal")).val(document.forms[0].code.value);
//$(window.opener.document).forms['dialogForm'].getElementById['dailogFormVal'].value=codeValue;
The finally ending "}" is not getting added to the jscript code.
Updated to show the modified jScript
console.clear();$dialog.append("<iframe id='dialogframe' style='border: 0px; width: 100%;height:100% '/>");$dialog.dialog({autoOpen: false, modal: true,width: "auto", height: "auto", title: "Buildings", buttons: [{
text: "Close", click: function() { $(this).dialog('close'); } }]});function winOpenDlg(urlVal, type) { var printNames = new Object(); var ind =[document.forms[0].elements["fireImpairForm.statusId"].selectedIndex].value; ind = document.forms[0].elements["fireImpairForm.facility"].selectedIndex; var facilityCode = document.forms[0].elements["fireImpairForm.facility"].item(ind).value; var sub = facilityCode.substring(((facilityCode).indexOf("-"))+1,(facilityCode).length); if (type == 'floor') { if (document.forms[0].elements["fireImpairForm.bldCode"].value.length <= 0) { alert('Please select a building.'); }else { var params="?bldCode="+document.forms[0].elements["fireImpairForm.bldCode"].value+"&campusCode="+sub+"&facilityCode="+facilityCode;
}
} else if (type == 'room') {
if (document.forms[0].elements["fireImpairForm.bldCode"].value.length <= 0) {
alert('Please select a building.');
}else if (document.forms[0].elements["fireImpairForm.floorCode"].value.length <= 0) {
alert('Please select a floor.');
}else {
var params="?bldCode="+document.forms[0].elements["fireImpairForm.bldCode"].value+"&floorCode="+document.forms[0].elements["fireImpairForm.floorCode"].value+"&campusCode="+sub+"&check="+"check"+"&facilityCode="+facilityCode;
}
} else {
var params="?campusCode="+sub+"&facilityCode="+facilityCode;
}var page = urlVal + params; $('#dialogframe').attr('src', page);// yours would do this // here I create a sample set of text to inject //var sample = '<div id="findem">Hi I am found</div>';var dialogBody = $("#dialogframe").contents().find("body");//$($dialog.find('#dialogframe')[0].contentWindow.document.body);//$('#dialogframe').attr('src', page);// yours would do this // I do this for simplicity and demonstration//dialogBody.html("<div id='original'>First Text </div>"); //dialogBody.append(sample);// add a click event to the dialog contents, you would do different things dialogBody.on('click', '[id^=row]', function() { console.log("triggered !!");
console.log(this.id + ":" + this.innerHTML); // id of element clicked document.forms[0].elements["fireImpairForm.bldCode"]=document.forms[0].elements[this.id].value;}); $dialog.dialog('open');}
Updated to show latest Javascript
I updated my code and removed any reference to my src location but even then the same error comes up.
EditFireImpair.htm?permitIk=301 Uncaught TypeError: Cannot read property 'contentWindow' of undefined
Defined below is the java script code I inserted almost unchanged from what you posted. The dialog does not open up as it does on your fiddle page.
<script>
console.clear();
var $dialog = $('#mydialog');
$dialog.append("<iframe id='dialogframe' style='border: 0px; width: 100%;height:100% '/>");;
$dialog.dialog({
autoOpen: false,
modal: true,
width: "auto",
height: "auto",
title: "Buildings",
buttons: [{
text: "Close Me",
click: function() {
$(this).dialog('close');
}
}]
});
function winOpenNewDlg(urlVal, type) {
var printNames = new Object();
var ind =[document.forms[0].elements["fireImpairForm.statusId"].selectedIndex].value;
ind = document.forms[0].elements["fireImpairForm.facility"].selectedIndex;
var facilityCode = document.forms[0].elements["fireImpairForm.facility"].item(ind).value;
var sub = facilityCode.substring(((facilityCode).indexOf("-"))+1,(facilityCode).length);
if (type == 'floor') {
if (document.forms[0].elements["fireImpairForm.bldCode"].value.length <= 0) {
alert('Please select a building.');
}else {
var params="?bldCode="+document.forms[0].elements["fireImpairForm.bldCode"].value+"&campusCode="+sub+"&facilityCode="+facilityCode;
}
} else if (type == 'room') {
if (document.forms[0].elements["fireImpairForm.bldCode"].value.length <= 0) {
alert('Please select a building.');
}else if (document.forms[0].elements["fireImpairForm.floorCode"].value.length <= 0) {
alert('Please select a floor.');
}else {
var params="?bldCode="+document.forms[0].elements["fireImpairForm.bldCode"].value+"&floorCode="+document.forms[0].elements["fireImpairForm.floorCode"].value+"&campusCode="+sub+"&check="+"check"+"&facilityCode="+facilityCode;
}
} else {
var params="?campusCode="+sub+"&facilityCode="+facilityCode;
}
var page = urlVal + params;
//$('#dialogframe').attr('src', page);// yours would do this
// here I create a sample set of text to inject
var sample = '<div id="findem">Hi I am found</div>';
var dialogBody = $($dialog.find('#dialogframe')[0].contentWindow.document.body);
// $('#dialogframe').attr('src', page);// yours would do this
// I do this for simplicity and demonstration
dialogBody.html("<div id='original'>First Text </div>");
dialogBody.append(sample);
// add a click event to the dialog contents, you would do different things
dialogBody.on('click', '*', function() {
console.log("triggered !!");
console.log(this.id + ":" + this.innerHTML); // id of element clicked
document.forms[0].elements["fireImpairForm.bldCode"]=document.forms[0].elements[this.id].value;
});
$dialog.dialog('open');
}
</script>
and this is the HTML
<div style="display:none; visibility:hidden;">
<div id="mydialog">
<input type="hidden" id="bldCode" />
</div>
</div>
<a href="javascript:winOpenNewDlg('LookupLocation.htm','bld')">
<img src="image/search.gif" border="0"
alt="Click here to find Building"></a>

Ok rather than dig into your details let us start with a very simplified example with some comments: See and play with it here: https://jsfiddle.net/MarkSchultheiss/kkwpb5b7/
EDIT: Note how I put a click event in my code on the dialog content. This is similar to your 'click something/event of something etc) that you wish to do.
I put a simple svg icon in, yours is a gif (so we have something to click).
Markup (for my examples, yours differs a bit)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="data">
<form:input title="Building" styleClass="content contractorDisable" maxlength="5" size="6" path="fireImpairForm.bldCode" />
<a class='lookuplocation' data-url="LookupLocation.htm" ,data-type="bld">
<img border="0" alt="Click here to find Building">
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<circle cx="50" cy="50" r="25" stroke="black" stroke-width="5" fill="red" />
</svg>
</a>
</div>
<div style="display:none; visibility:hidden;">
<div id="mydialog">
</div>
</div>
Now see my "hidden" dialog wrapper? let's use that rather than some in-line script and then inject some content into that (you would use the src)
var $dialog ={};
$(document).ready(function()(
$dialog = $('#mydialog');
$dialog.append("<iframe id='dialogframe' style='border: 0px; width: 100%;height:100% '/>");;
$dialog.dialog({
autoOpen: false,
modal: true,
width: "auto",
height: "auto",
title: "Buildings",
buttons: [{
text: "Close Me",
click: function() {
$(this).dialog('close');
}
}]
});
});
function winOpen(urlVal, type) {
var params = '?bldCode=howdy'; // put your stuff in here
var page = urlVal + params;
// $('#dialogframe').attr('src', page);// yours would do this
// here I create a sample set of text to inject
var sample = '<div id="findem">Hi I am found</div>';
var dialogBody = $($dialog.find('#dialogframe')[0].contentWindow.document.body);
// $('#dialogframe').attr('src', page);// yours would do this
// I do this for simplicity and demonstration
dialogBody.html("<div id='original'>First Text </div>");
dialogBody.append(sample);
// add a click event to the dialog contents, you would do different things
dialogBody.on('click', '*', function() {
console.log("triggered !!");
console.log(this.id + ":" + this.innerHTML); // id of element clicked
});
$dialog.dialog('open');
}
// took this out of the markup because I don't like them there.
$('.data').on('click', 'a.lookuplocation', function() {
winOpen($(this).data('url'), $(this).data('type'));
});

Add dynamic control in javascript

I have a textbox and a plus button. When the user clicks on the plus button a new row will added with textbox and minus button, and the text area have underline like this
[ text ] +
text -
--------------------------------
So I tried something like this:
function AddNote() {
var xtbl = document.getElementById("tblMain");
var xrowcount = xtbl.rows.length;
var xrow = xtbl.insertRow(xrowcount);
var xcell0 =xrow.insertCell(0);
var xcell1 = xrow.insertCell(1);
var xcell2 = xrow.insertCell(2);
var newlabel = document.createElement("Label");
newlabel.id = "id" + xrowcount
newlabel.innerHTML = document.getElementById("txtReleaseNote").value;
xcell1.appendChild(newlabel);
var newlabel1 = document.createElement("Label");
newlabel1.id = "lblminus" + xrowcount
newlabel1.innerHTML="<h2>-</h2>"
xcell1.setAttribute("colspan", 2);
xcell1.setAttribute("borderBottom", "1px solid #0000FF");
xcell2.appendChild(newlabel1);
}
<table id="tblMain" align="center" width="100%" cellpadding="0" cellspacing="0" style="table-layout: fixed; text-align: left; margin-top:10px;">
<colgroup>
<col style="width: 50px;">
<col style="width: 145px;">
<col style="width: 350px;">
<col style="width: 100px;">
<col style="width: auto;">
<!-- Use "width: auto;" to apply the remaining (unused) space -->
<col style="width: 50px">
</colgroup>
<tbody>
<tr><td></td><td>Release Notes</td><td><asp:TextBox
id="txtReleaseNote" TextMode="MultiLine" Rows="3" runat="server" MaxLength="15"
Width= "100%" CssClass="TextBoxBorder"></asp:TextBox></td>
<td style="padding-left:15px; Color:RGB(33,88,103);"> <h2 id="lblplus"
onclick="AddNote()" style="cursor: pointer; vertical-align:text-top;" > + </h2> </td> </tr>
</tbody>
</table>
The minus button vertically not equal to the plus symbol. What am I doing wrong?
How assign color for minus symbol?
I am using asp.net 2008 CSS 2.1

This answer is explain how to fix the UI.
The open issue here is how to save it to the server because you are using ASP.NET and this framework doesn't support dynamic inputs by default. You can read the answer here http://forums.asp.net/t/1611284.aspx?How+to+get+value+from+dynamically+added+html+input+
function AddNote() {
var xtbl = document.getElementById("tblMain");
var xrowcount = xtbl.rows.length;
var xrow = xtbl.insertRow(xrowcount);
var xcell0 =xrow.insertCell(0);
var newlabel = document.createElement("Label");
newlabel.id = "id" + xrowcount
newlabel.innerHTML = document.getElementById("txtReleaseNote").value;
var xcell1 = xrow.insertCell(1);
xcell1.setAttribute("colspan", 2);
xcell1.setAttribute("style", "border-bottom:1px solid #0000FF");
xcell1.appendChild(newlabel);
var xcell2 = xrow.insertCell(2);
xcell2.setAttribute('style', 'padding-left:15px; color:RGB(33,88,103);');
var newlabel1 = document.createElement("label");
newlabel1.id = "lblminus" + xrowcount
newlabel1.innerHTML="<h2 style='cursor:pointer;margin:0;' onclick='removeRow(this)'>-</h2>"
xcell2.appendChild(newlabel1);
}
function removeRow(elm) {
var row = elm.parentNode.parentNode.parentNode;
row.parentNode.removeChild(row);
}
<table id="tblMain" align="center" width="100%" cellpadding="0" cellspacing="0" style="table-layout: fixed; text-align: left; margin-top:10px;">
<colgroup>
<col style="width: 50px;">
<col style="width: 145px;">
<col style="width: 350px;">
<col style="width: 100px;">
<col style="width: auto;">
<!-- Use "width: auto;" to apply the remaining (unused) space -->
<col style="width: 50px">
</colgroup>
<tbody>
<tr>
<td></td>
<td>Release Notes</td>
<td>
<textarea id="txtReleaseNote" rows="3" class="TextBoxBorder"></textarea>
<!-- <asp:TextBox id="txtReleaseNote" TextMode="MultiLine" Rows="3" runat="server" MaxLength="15" Width= "100%" CssClass="TextBoxBorder"></asp:TextBox>-->
</td>
<td style="padding-left:15px; color:RGB(33,88,103);">
<h2 id="lblplus" onclick="AddNote()" style="cursor: pointer; vertical-align:text-top;" > + </h2>
</td>
</tr>
</tbody>
</table>

It's work.
Html code :
<table>
<thead>
<tr>
<th>
Text
</th>
<th> <button type="button" data-bind="click: addNewRow" >
+
</button>
</th>
</tr>
</thead>
<tbody data-bind="template:{name:'tableRow', foreach: tableRows}">
</tbody>
<tfoot>
<tr>
<td colspan="4">
</td>
</tr>
</tfoot>
</table>
<script id="tableRow" type="text/html">
<tr>
<td>
<input type="text" style="width:40px;" data-bind="value: number, valueUpdate: 'keyup'" />
</td>
<td>
<button type="button" data-bind="click: function(){ $data.remove(); }">
-
</button>
</td>
</tr>
</script>
knockout.js
function tableRow(number, ownerViewModel) {
this.number = ko.observable(number);
this.remove = function() {
ownerViewModel.tableRows.destroy(this);
}
}
function tableRowsViewModel() {
var that = this;
this.tableRows = ko.observableArray([]);
this.addNewRow = function() {
this.tableRows.push(new tableRow('', that));
}
this.addNewRow();
//dependentObservable to represent the last row's value
this.lastRowValue = ko.dependentObservable(function() {
var rows = that.tableRows();
return rows.length ? rows[rows.length - 1].number() : null;
});
//subscribe to changes to the last row
this.lastRowValue.subscribe(function(newValue) {
if (newValue) {
that.tableRows.push(new tableRow('', that));
}
});
}
$(document).ready(function() {
ko.applyBindings(new tableRowsViewModel());
});
For More visit this:
http://jsfiddle.net/rniemeyer/f5f8s/

How to append json values to html[value]

I have Json like this. How to append the json values into html input values.
[{"user_id":"180",
"firstname":"anandhsp",
"lastname":"sp",
"email":"xyz#gmail.com",
"mobile":"9000000000",
"gender":null,
"hashcode":"2XXg3dfyuxjO9C4OvaWw",
"username":"anandhsp21",
"password":"64c20f8bb630eb5cb329fdd609c807b7:J6",
"emailverify":"TRUE",
"company_name":"xxx",
"address":"Chennai",
"city":"Chennai",
"state":"Tamilnadu",
"pincode":"637001",
"phone":"1234567890",
"website":"hello",
"nature":"hello",
"no_employe":"23",
"year":"2015",
"type":"Proprietor",
"authorized_person":"Anandh Sp",
"status":"",
"created":"2015-06-26 10:48:09",
"modified":"2015-06-11 11:24:39",
"logdate":"2015-06-26 05:18:09",
"lognum":"3",
"reload_acl_flag":"0",
"is_active":"1",
"extra":"N;",
"rp_token":null,
"rp_token_created_at":null,
"app_name":"",
"api_key":""}]
Html code
<div id="register_form" class="fieldset subgroupregister_form">
<div class="hor-scroll">
<table class="form-list" cellspacing="0">
<tbody>
<tr class="tr_tag">
<tr class="tr_application_id">
<tr class="tr_customer_id">
<tr class="tr_company_name">
<tr class="tr_address">
<td class="label">
<td class="value">
<input id="address" class=" input-text required-entry" type="text" value="" name="address">
</td>
</tr>
<tr class="tr_city">
<tr class="tr_state">
<tr class="tr_pincode">
<tr class="tr_mobile">
<tr class="tr_phone">
<tr class="tr_website">
<tr class="tr_nature">
<tr class="tr_no_employe">
<tr class="tr_year">
<tr class="tr_type">
<tr class="tr_authorized_person">
<tr class="tr_status">
</tbody>
</table>
</div>
</div>
</div>
I need to append the above values into input value
For example
<input id="address" class=" input-text required-entry" type="text" value="chennai" name="address">
I tried these Codes.But I did't got output.
jQuery('.ac_results ul li').bind('click',function(e)
{
var text = $(this).text();
jQuery.ajax({
type: 'get',
url: BASE_URL + 'admin/index/user_id',
data: {email: text},
dataType:'json',
success: function (data) {
var data = data[0];
$('#address').value = data.address;
$('#city').value = data.city;
$('#state').value = data.state;
$('#pincode').value = data.pincode;
$('#mobile').value = data.mobile;
$('#phone').value = data.phone;
$('#website').value = data.website;
$('#email').value = data.email;
$('#nature').value = data.nature;
$('#year').value = data.year;
$('#no_employe').value = data.no_employe;
$('#type').value = data.type;
$('#authorized_person').value = data.authorized_person;
}
});
});
Thanks In advance

Try val() function:
$('input').val(obj.item);
Check the following example
var obj = { test: 'test' }
$('#add').on('click', function() {
$('#inp').val(obj.test);
});
$('#res').on('click', function() {
alert($('#inp').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="inp" type="hidden" />
<button id="add">Add value</button>
<button id="res">Show input</button>

DOM javascript Navigation

I want to unhide the hidden divCommentBody div that belongs to the "checked" checkbox, but can't find it using javascript.
This is javascript function:
function ExpandClick(state) {
var TargetBaseControl = document.getElementById("commentsTable");
var Inputs = TargetBaseControl.getElementsByTagName('input');
for (var n = 0; n < Inputs.length; ++n) if (Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf('chkBox', 0) >= 0) { if (Inputs[n].checked == true) {
//Get divCommentBody div that belongs to this chekbox
}
}
}
This is the markup:
<table cellpadding="0" border="0" id="commentsTable">
<tr class="Comment">
<td class="CommentCheck">
<input id="ctl00_col2_rptComments_ctl01_chkBox" type="checkbox" name="ctl00$col2$rptComments$ctl01$chkBox" />
</td>
<td class="CommentBy" >
<span id="ctl00_col2_rptComments_ctl01_lblUserName" title="Posted by name">someone</span>
</td>
<tr>
<td colspan="100%">
<div id="ctl00_col2_rptComments_ctl01_divCommentBody" style="padding: 0 0 0 55px;display:none;background-color: #E8F1F4;">
</div>
</td>
</tr>
<tr class="Comment">
<td class="CommentCheck">
<input id="ctl00_col2_rptComments_ctl02_chkBox" type="checkbox" name="ctl00$col2$rptComments$ctl02$chkBox" />
</td>
<td class="CommentBy" >
<span id="ctl00_col2_rptComments_ctl02_lblUserName" title="Posted by name">marco</span>
</td>
<tr>
<td colspan="100%">
<div id="ctl00_col2_rptComments_ctl02_divCommentBody" style="padding: 0 0 0 55px;display:none;background-color: #E8F1F4;">
</div>
</td>
</tr>
</table>

You can get it like this:
var divId = Inputs[n].id.replace(/chkBox$/, 'divCommentBody');
var div = document.getElementById(divId);

Alternatively, if using Sizzle (jQuery example):
$('[id$="_divCommentBody"]')
Alternatively to my alternative, if the table structure won't be changing:
$('#commentsTable tr:last-child div')