We Keep Coding

How to enable disabled fields using jQuery?

function disableField()
{
var Count = $('#dataTable tr').length;
if (Count == 2){
$("input").not('.DeleteButton').prop('disabled', false);
}else{
$("input").prop('disabled', false);
}
}
//--------------------------------------------------
var regex = /^([a-zA-Z0-9 _-]+)$/;
var cindex = 0;
var quicklink = '' ;
$(document).on('click','.Buttons', function(addrow) {
var count = $('table tr:last input:text').filter((_,el) => el.value.trim() == "").length;
if(count || !$('.id_100 option[value=code]').attr('selected','selected')){
alert("Please fill the current row");
return false;
}
var $tr = $('#dataTable tbody tr:last');
var $clone = $tr.clone(true);
cindex++;
$clone.find(':input').not('select').not('.DeleteButton').val('').attr('disabled', true);
$clone.attr('id', 'id'+(cindex) ); //update row id if required
//update ids of elements in row
$clone.find("*").each(function() {
var id = this.id || "";
if(id != ""){
var match = id.match(regex) || [];
if (match.length == 2) {
this.id = this.name + (cindex);
}
}
});
$tr.after($clone);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table cellspacing="0" cellpadding="0" border="0" id="mainbox" class="mainbox"><tr><td>
<div class="toppanel"><ul><li></li></ul></div>
<div class="abcd"> <!--mainbox middlepanel start-->
<table cellspacing="0" cellpadding="0" border="0" id="maintable" class="maintable">
<tr>
<td valign="top">
<div id="pageheadingpanel">
<div id="pageheading">Quick Link Widget Configuration</div>
<div id="pageheadingdate"><xsl:call-template name="formatted_date"/></div>
</div>
</td>
</tr>
<tr>
<td height="100%" valign="top">
<div class="y_scroll" id="contentarea">
<div class="contentarea"><!--contentarea start-->
<span id="box" class="box"> <!--rounded curve/border start-->
<div class="middlepanel"> <!--contentarea box middlepanel start-->
<div style="display:block" id="textBox1" >
<span id="box1" class="box">
<div class="toppanel"><ul><li></li></ul></div>
<div class="middlepanel">
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" name="dataTable" class="graphtable">
<thead>
<tr>
<td class="headingalign" width="16%">Links</td>
<td class="headingalign" width="32%">Desciption</td>
<td class="headingalign" width="16%">Image</td>
<td class="headingalign" width="16%">URL</td>
<td class="headingalign" width="05%"></td>
</tr>
</thead>
<tbody>
<tr id="id0" class="vals" name="id0">
<td>
<div class="id_100">
<select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField()" >
<option value="">Select</option>
<xsl:for-each select="values from local db">
<xsl:sort order="ascending" select="description"/>
<option value="{description}">
<xsl:value-of select="description"/>
</option>
</xsl:for-each>
</select>
</div> </td>
<td>
<input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext1" size="85" value="{//RESPONSE}" />
</td>
<td>
<input id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext2" size="35" value="{//RESPONSE}" />
</td>
<td>
<input id="fldurl" name="fldurl" maxlength="15" disabled="true" class="objinputtext3" size="35" value="{//RESPONSE}" />
</td>
<td>
<input tabindex="6" value="Delete Row" disabled="true" class="DeleteButton" type="button" />
</td>
</tr>
</tbody>
</table>
<div class="buttonarea">
<ul>
<li><input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" /></li>
</ul>
</div>
I have a table with a drop-down column in it. Whenever i change the values of drop-down my corresponding fields get enabled. The problem i am getting is if i change the values of my drop-down of previous row the columns of current row also get enabled.Any help will be appreciated. Thanks.
Edit:I have added 'Add Row' function too in my code.

I have added some changes in your disableField function. Pass parameter(this) disableField(this) in that function on chnage event.
function disableField(elem)
{
var Count = $('#dataTable tr').length;
if (Count == 2){
$(elem).closest('tr').find("input").not('.DeleteButton').prop('disabled', false);
}
else{
$(elem).closest('tr').find("input").prop('disabled', false);
}}
//--------------------------------------------------
var regex = /^([a-zA-Z0-9 _-]+)$/;
var cindex = 0;
var quicklink = '' ;
$(document).on('click','.Buttons', function(addrow) {
var count = $('table tr:last input:text').filter((_,el) => el.value.trim() == "").length;
if(count || !$('.id_100 option[value=code]').attr('selected','selected')){
alert("Please fill the current row");
return false;
}
var $tr = $('#dataTable tbody tr:last');
var $clone = $tr.clone(true);
cindex++;
$clone.find(':input').not('select').attr('disabled', true);
$clone.attr('id', 'id'+(cindex) ); //update row id if required
//update ids of elements in row
$clone.find("*").each(function() {
var id = this.id || "";
if(id != ""){
var match = id.match(regex) || [];
if (match.length == 2) {
this.id = this.name + (cindex);
}
}
});
$tr.after($clone);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table cellspacing="0" cellpadding="0" border="0" id="mainbox" class="mainbox"><tr><td>
<div class="toppanel"><ul><li></li></ul></div>
<div class="abcd"> <!--mainbox middlepanel start-->
<table cellspacing="0" cellpadding="0" border="0" id="maintable" class="maintable">
<tr>
<td valign="top">
<div id="pageheadingpanel">
<div id="pageheading">Quick Link Widget Configuration</div>
<div id="pageheadingdate"><xsl:call-template name="formatted_date"/></div>
</div>
</td>
</tr>
<tr>
<td height="100%" valign="top">
<div class="y_scroll" id="contentarea">
<div class="contentarea"><!--contentarea start-->
<span id="box" class="box"> <!--rounded curve/border start-->
<div class="middlepanel"> <!--contentarea box middlepanel start-->
<div style="display:block" id="textBox1" >
<span id="box1" class="box">
<div class="toppanel"><ul><li></li></ul></div>
<div class="middlepanel">
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" name="dataTable" class="graphtable">
<thead>
<tr>
<td class="headingalign" width="16%">Links</td>
<td class="headingalign" width="32%">Desciption</td>
<td class="headingalign" width="16%">Image</td>
<td class="headingalign" width="16%">URL</td>
<td class="headingalign" width="05%"></td>
</tr>
</thead>
<tbody>
<tr id="id0" class="vals" name="id0">
<td>
<div class="id_100">
<select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField(this)" >
<option value="">Select</option>
<xsl:for-each select="values from local db">
<xsl:sort order="ascending" select="description"/>
<option value="{description}">
<xsl:value-of select="description"/>
</option>
</xsl:for-each>
</select>
</div> </td>
<td>
<input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext1" size="85" value="{//RESPONSE}" />
</td>
<td>
<input id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext2" size="35" value="{//RESPONSE}" />
</td>
<td>
<input id="fldurl" name="fldurl" maxlength="15" disabled="true" class="objinputtext3" size="35" value="{//RESPONSE}" />
</td>
<td>
<input tabindex="6" value="Delete Row" disabled="true" class="DeleteButton" type="button" />
</td>
</tr>
</tbody>
</table>
<div class="buttonarea">
<ul>
<li><input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" /></li>
</ul>
</div>

All in all there is to much extraneous code so the following answer has different code yet can be applied to the clunky code provided in question. I recommend that your code be more streamlined like the following demo provided in this answer.
Here's some suggestions:
If you are using multiple form controls (ex. <button>, <input>, <textarea>, <select>, etc), wrap everything into a <form>
If you have multiple tags (aka elements) that the user can click, submit, reset, change, input, etc register the events to the <form>
In order to find the exact form control that was clicked, changed, etc. use the Event.target property to find it or this keyword and the Event.data parameter.
$('form selector').on('event type', Event.data, callback function)
The #id and [name] attributes are unnecessary unless you are using certain Web APIs such as HTMLFormControlsCollection or HTMLFormElement
Never use event attributes (ex onchange="callback()") when using jQuery. Use the proper jQuery method or .on() method.
// jQuery method
$(selector).click(callback)
// .on() method
$(selector).on('click', callback)
Minor details:
The [type] attribute does not apply to the <select> tag.
Use <th> instead of <td> within <thead>
[maxlength] of 500 is ridiculous. Use <textarea> instead of <input>
Details are commented in demo
/*
Register form.io to the 'submit', 'click', and 'change' events
Note the callback function does not have `()` suffixed because it would be
interpreted as: "run function now"
The callback function doesn't run immediately it runs when a registered event is triggered.
*/
$('.io').on('submit click change', eventHandler);
// Define the counter
let counter = 0;
// Always pass the Event Object when defining a callback function
function eventHandler(event) {
// The Event Object has several properties...
// Get the type of event triggered (ie submit, change, or click)
let eType = event.type;
/*
Get the origin element of event
if 'submit' target will be <form>
if 'click' target will be <button>
if 'change' target will be <select>
*/
let eNode = event.target;
// Pass the event type through a switch() function...
switch (eType) {
// if type is 'submit'...
case 'submit':
// Create a deep clone of the first row
let clone = $('.grid tr:first-child').clone(true, true);
// Add clone as the last child of the <tbody>
$('.grid').append(clone);
// On .each() elment with class '.data' found within the clone...
clone.find('.data').each(function(i) {
// disable it
this.disabled = true;
// remove its value
this.value = '';
});
// Increment the counter by 1
counter++;
// Dereference the clone and assign id as row+counter
clone[0].id = `row${counter}`;
/*
Prevent default behavior:
Reset <form>
Send data to a server
*/
event.preventDefault();
// Stop event from bubbling any further up the event chain
event.stopPropagation();
// ...otherwise skip this case and continue onto the next case
break;
// if type is 'click'...
case 'click':
// if the clicked element (ie <button>) has class: '.del'...
if ($(eNode).hasClass('del')) {
// Get the clicked <button>'s ancestor <tr>
let row = $(eNode).closest('tr');
// if that <tr> is NOT the first <tr>...
if (row.index() !== 0) {
// remove the <tr>
row.remove();
}
}
event.stopPropagation();
break;
// if type is 'change'...
case 'change':
// if changed element (ie <select>) class is '.type'...
if ($(eNode).hasClass('type')) {
// Get the changed <select>'s ancestor <tr>
let row = $(eNode).closest('tr');
// if changed <select>'s value is NOT "X" return true otherwise return false
let pick = eNode.value !== "X" ? true : false;
/*
On .each() element with class .data within the <tr>
disable the .data if <select>'s value is "X"
Otherwise enable the .data
and then remove the .data value
*/
row.find('.data').each(function(i) {
this.disabled = !pick;
this.value = '';
});
}
event.stopPropagation();
break;
default:
event.stopPropagation();
break;
}
}
:root {
font: 400 3vw/1.2 Arial
}
form {
width: max-content;
margin: 10px auto
}
table {
table-layout: fixed;
border-collapse: separate;
border-spacing: 4px;
width: 90vw
}
th:first-of-type {
width: 20%
}
th:nth-of-type(2) {
width: 35%
}
th:nth-of-type(3) {
width: 35%
}
th:last-of-type {
width: 10%
}
td {
padding: 0 8px
}
select,
textarea,
button {
display: block;
min-width: 97%;
min-height: 1.2rem;
font-size: initial;
}
select {
padding: 2px 0 2px 2px
}
textarea {
resize: vertical;
overflow-y: auto;
overflow-x: hidden
}
<form class='io'>
<table>
<thead>
<tr>
<th>Type</th>
<th>Desciption</th>
<th>Image/URL</th>
<th><button>➕</button></th>
</tr>
</thead>
<tbody class='grid'>
<tr>
<td>
<select class='type'>
<option value="X" default></option>
<option value="GDS">Guides</option>
<option value="PRO">Promos</option>
<option value="TEM">Templates</option>
<option value="VID">Videos</option>
</select>
</td>
<td><textarea class='desc data' rows='1' cols='20' disabled></textarea></td>
<td><textarea class='urls data' rows='1' cols='20' disabled></textarea></td>
<td><button class='del' type='button'>❌</button></td>
</tr>
</tbody>
</table>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

how to check the dynamic values using if condition in jquery?

I have tried to validate the user input from the contenteditable in jquery. I don't know exactly where I made the mistake. Please advise.
$(function() {
$("#p28-textid39").hide();
$(".result").click(function() {
$("#p28-textid39").show();
var data_answer = $(this).attr("data-answer");
var content = $(this).text();
if (content == data_answer) {
alert("correct");
} else {
alert("incorrect");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure id="bodyimage">
<img alt="" src="images/page0028.jpg" />
</figure>
<div id="parent-p28">
<p><span class="styleid2" id="p28-textid12">line is to write an ____________________.</span>
</p>
<p><span class="styleid9" id="p28-textid39">answer</span>
</p>
<div style="position:absolute;left:348px;top:278px;" class="act1">
<table>
<tr>
<td class="txt" data-answer="answer" contenteditable="true"></td>
<td><span class="show"> </span>
</td>
</tr>
<tr style="opacity:0;">
<td>____________________</td>
<td><span class="show"> </span>
</td>
</tr>
</table>
</div>
<div class="result" data-act="1" style="position:absolute;left:65px;top:173px;width:170px;height:125px;cursor:pointer;border:1px solid;">
</div>
</div>

case with incorrect use of 'this'
$(function() {
$("#p28-textid39").hide();
$(".result").click(function() {
$("#p28-textid39").show();
var data_answer = $(".txt").attr("data-answer");
var content = $("#p28-textid39").text();
if (content == data_answer) {
alert("correct");
} else {
alert("incorrect");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure id="bodyimage">
<img alt="" src="images/page0028.jpg" />
</figure>
<div id="parent-p28">
<p><span class="styleid2" id="p28-textid12">line is to write an ____________________.</span>
</p>
<p><span class="styleid9" id="p28-textid39">answer</span>
</p>
<div style="position:absolute;left:348px;top:278px;" class="act1">
<table>
<tr>
<td class="txt" data-answer="answer" contenteditable="true"></td>
<td><span class="show"> </span>
</td>
</tr>
<tr style="opacity:0;">
<td>____________________</td>
<td><span class="show"> </span>
</td>
</tr>
</table>
</div>
<div class="result" data-act="1" style="position:absolute;left:65px;top:173px;width:170px;height:125px;cursor:pointer;border:1px solid;">
</div>
</div>

As per my understanding user will be writing answer in <td class="txt" data-answer="answer" contenteditable="true"></td> which contains the reference answer to compare with; you may try below code:
$(function() {
$("#p28-textid39").hide();
$(".result").click(function() {
$("#p28-textid39").show();
var sibAnwserDiv = $(this).prevAll(".act1").first(); //grab the wrapper Div in which <table> is present
var targetTD = $(sibAnwserDiv).find("td.txt");
var data_answer = targetTD.data("answer"); //get the reference answer
var content = $.trim(data_answer.text()); //get the answer entered by user
if (content == data_answer) {
alert("correct");
} else {
alert("incorrect");
}
});
});

your code most be like this
$(function() {
$("#p28-textid39").hide();
$(".result").click(function() {
$("#p28-textid39").show();
var data_answer = $("#p28-textid39").attr("data-answer");
var content = $(".txt").text();
if (content == data_answer) {
alert("correct");
} else {
alert("incorrect");
}
});
});
line 6 and 7 most be change

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'));
});

How to submit a JSP form which includes another jsp form using jquery

Hi I have a pop dialog in jquery (Having Save and Cancel buttons) which is opening a jsp page having form action. inside this jsp I included another jsp with save button for this jsp having for action. Problem is: when I am saving 1st jsp without include 2nd jsp, it is working. But after include it not working. Below is my Code:
1st popup jsp:
function saveNewProcess() {
var selIndex = $('#prolistframe').contents().find('#selectedIndex').val();
/*if (selIndex === '') {
alert('Select a process type');
return;
}
*/
var pType = prolistframe.document.forms[0].proType.value;
if (pType == 0 || pType == "") {
alert("Select a process type to create new request.");
return;
}
$('#selectedIndex').val(selIndex);
if(flag==true){
return;
}
flag=true;
$('#processSaveDialog').dialog('destroy').remove();
var url = 'indexfields_new.jsp?id='+pType+'&hide=true&random='+Math.random();
$.get(url, function(data, textStatus) {
$("html, body").animate({ scrollTop: 0 }, "slow");
$("<div id='processSaveDialog'/>").dialog({
height: 700,
width: 950,
open:function(){
$(this).html(data);
flag=false;
},
buttons: {
"Save Process": function() {
saveProcess();
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
modal: true,
position:['middle',100],
resizable: false,
title: "Process Save Form"
});
});
}
function saveProcess(){
saveData();
}
function saveData(){
if(!checkMandatory()) return false;
$('#indexFields').val(getIndexFields());
if(!checkMandatory()) return false;
$('#indexFields').val(getIndexFields());
/* alert($('#processSaveForm').attr( 'action' )); */
$('#action').val("saveNewProcess");
$('#processSaveForm').attr('target','prolistframe');
$('#processSaveForm').attr('action',$('#processSaveForm').attr( 'action' ));
$('#processSaveForm').submit();
$('#processSaveForm').attr('target','');
alert("Processing Please Wait...");
setTimeout(function(){
alert("Process Saved Successfully");
window.document.getElementById('prolistframe').src = window.document.getElementById('prolistframe').src;
$('#processSaveDialog').dialog('destroy').remove();
}, 4000);
}
2nd jsp:
<body>
<form name="processSaveForm" id="processSaveForm" action="process" method="post" enctype="multipart/form-data">
<input type="hidden" name="action" id="action" value="saveNewProcess"/>
<table border="0" width="100%" style="float:left">
<%
int i=0,col=0;
for(ProcessIndex d:proIndex){
String fields = "";
String id = "";
int indexType = d.getDocumentIndexType().getId();
//System.out.println("index type::: "+indexType);
String required = "";
required=(d.getRequired()==1)?" mandatory":"";
if(indexType==DocumentIndexType.DATE){
fields="<input type=\'text\' name=\'idx" + i + "\' id=\'idx" + i + "\' alt=\'date:" + d.getId() + "\' class=\'date_field"+required+"\' readonly=\'readonly\'>" ;
}
else if(indexType==DocumentIndexType.TEXT){
fields="<input type=\'text\' name=\'idx" + i + "\' id=\'idx" + i + "\' alt=\'" + d.getId() + "\' class=\'text_field"+required+"\' >" ;
}else if(indexType==DocumentIndexType.DROP_DOWN){
fields="<select name=\'idx" + i + "\' id=\'idx" + i + "\' title=\'" + d.getId() + "\' class=\'drop_down"+required+"\'>";
fields += "<option value=\'\'>Select</option>";
List<ProcessIndexList> indList=processIndex.getProcessIndexList(d.getId());
for(ProcessIndexList ind:indList){
fields += "<option value=\'" + ind.getIndexValue() + "\'>" + ind.getIndexValue() + "</option>";
}
fields +="</select>";
}
if(col==0){
out.write("<tr>");
}
col++;i++;
out.write("<td class=\"lbtext\">"+d.getName()+"</td><td " + id + "valign=\"middle\" >"+ fields +"</td>");
if(col==1){
out.write("</tr>");
col=0;
}
}
%>
</table>
<table align="center" width="100%" border="0">
<tr><td> </td></tr>
<tr>
<td>
<div align="center" id="forms" style="display:<%=hide%>;">
<table align="center" border="0">
<tr>
<td align="center"><div id="content1"> <jsp:include page="../admin/newActivity.jsp"/> </div></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<input type="hidden" id="fieldCount" name="fieldCount" value="<%=i%>">
<input type="hidden" id="rights" name="rights" value="<%=rights %>">
</form>
</body>
My 3rd included jsp in 2nd jsp:
<body>
<form action="newActivity" name="newActivityForm" id="newActivityForm" method="post">
<input type="hidden" id="action" name="action"/>
<p>New Activity</p>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #a3a4a9;" id="main_table">
<tr>
<td width="10%" height="20" align="left" bgcolor="#c7cbd6" class="table1">
<input type="button" value="Save" onclick="saveNewActivity();"/>
</td>
</tr>
</table>
<table cellspacing="0" style="border: 1px solid black;" cellpadding="0" border="0" bgcolor="white" align="center" width="100%">
<tr><td colspan="100%"> </td></tr>
<tr>
<td colspan="6"><textarea name="dca_comments" id="dca_comments" cols="50" rows="5"></textarea></td>
<td colspan="6"><textarea name="dca_stamp" id="dca_stamp" cols="50" rows="5"></textarea></td>
</tr>
<tr><td colspan="100%"> </td></tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #a3a4a9;" id="main_table">
<tr>
<td width="10%" height="20" align="right" bgcolor="#c7cbd6" class="table1">
<input type="button" value="Save" onclick="saveNewActivity();"/>
</td>
</tr>
</table>
</form>
</body>
Please help me on this. Totally stucked... Thankx in advance...

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')