Develop Reference

docent display pop up with table id

When I click on my button "Select" it should show me the HTML popup, and for some reason is not happening.
Could it be some id problem or hard code?
The main idea is to click and bring some kind of list reading from a random array list.
Below: my .js with the call back id and display.
Any ideas?
<!-- This hosts all HTML templates that will be used inside the JavaScript code -->
<table class ="cls-{id} active-{active}" style="display: none;" width="100%" id="rowTemplate">
<tr class ="bb cls-{id} active-{active}">
<td class="active-{active}" id="{id}-question" width="70%">{question}</td>
<td class="cls-{id} active-{active}" width="30%">
<button class="buttons" step="0.01" data-clear-btn="false" style="background: #006b54; color:white !important ;" id="{id}-inspectionResult"></button>
</td>
</tr>
</table>
<div id="projectPopUp" class="popup-window" style="display:none">
<div class="popuptitle" id="details-name"></div>
<table width="100%" id="detailsgrid">
<tr>
<td style="text-align:left">Start Time</td>
<td> <select id="details-startTime" data-role="none"></select></td>
</tr>
<tr>
<td style="text-align:left">End Time</td>
<td> <select id="details-endTime" data-role="none"></select></td>
</tr>
</table>
<div>
<button class="smallButton" onClick="closeProjectPopup()">Cancel</button>
<button class="smallButton" onClick="submitProjectPopup()">Submit</button>
</div>
</div>
<table style="display: none;" id="sectionRowTemplate">
<tr width="100%" class="bb cls-{id}-row2 sectionheader">
<td class="cls-{id}" colspan="3">{question}</td>
</tr>
</table>
Javascript code:
var buildQuestionnaire = function(){
parseInitialDataHolder();
for (var i = 0; i < ARRAY_OF_QUESTIONS.length; i++){
var id = i;
var data = {
id: id,
question: ARRAY_OF_QUESTIONS[i].question,
inspectionResult: '',
active: true
};
var initialdata = initialdataholder[id];
if(initialdata) {
data = initialdata;
}
dataholder.push(data);
if (typeof ARRAY_OF_QUESTIONS[i].header == 'undefined') {
$('#questionsTable tbody').append(Utils.processTemplate("#rowTemplate tbody", data));
$("#" + id + "-inspectionResult").text(data.inspectionResult || 'Select');
$("#" + id + "-inspectionResult").click(resultHandler.bind(data));
updateActiveStatus(data);
commentvisibilitymanager(data);
}
else {
$('#questionsTable tbody').append(Utils.processTemplate("#sectionRowTemplate tbody", data));
}
}
}
//to show the popup
$('#projectPopUp').show();
//to close the popup
$('#projectPopUp').hide();
$(document).ready(function() {
buildQuestionnaire();
});

jQuery: loop through tbody elements and return div elements

I have many tbody elemnts like the one bellow, I try to loop through the tbody elements, then I look for the two div elements in order to give them the largest height of them:
<tbody class="form-row">
<tr class="grp-tr djn-tr form-row has_original">
<td style="" class="original">
<p>
</p>
</td>
<td class="grp-td djn-td">
<div class="grp-readonly">
</div>
</td>
<td class="grp-td djn-td">
<div class="grp-readonly">
</div>
</td>
</tr>
</tbody>
why the function bellow does not find div elements?? and how can I get the two div elements?
function myfunction() {
var elements = $(".form-row");
for (i = 0; i < elements.length - 2; i++) {
alert(elements[i].nodeName); // works well, it shows TBODY
var divs = $(elements[i].find("div.grp-readonly")); // Not working
// some code here
}
}
Thanks.

$(elements[i].find("div.grp-readonly")); is incorrect, because you must move .find outside of element elector (in other words messing up code).
Try using $.each for simplicity:
function myfunction() {
$(".form-row").each(function () {
var div = $(this).find('.grp-readonly');
console.log(div);
});
}
myfunction();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody class="form-row">
<tr class="grp-tr djn-tr form-row has_original">
<td style="" class="original">
<p>
</p>
</td>
<td class="grp-td djn-td">
<div class="grp-readonly">
</div>
</td>
<td class="grp-td djn-td">
<div class="grp-readonly">
</div>
</td>
</tr>
</tbody>
</table>

Jquery, not sure how to capture the elements i want

Im a php developer, very little experience with javascript/jquery.
Basically i have a textbox and a link with a href. When the user "keyup"s in the textbox i want the href in the link to append the value.
However i have multiple textboxes and links that should be changed together.
<tr>
<td>
<div class="chapter_update">
<form>
<input class="target" type="text">
</form>
</div>
</td>
</tr>
<tr>
<td>
<a class="link" href="/index.php/cases?id=5">The link</a>
</td>
</tr>
<tr>
<td>
<div class="chapter_update">
<form>
<input class="target" type="text">
</form>
</div>
</td>
</tr>
<tr>
<td>
<a class="link" href="/index.php/cases?id=5">The link</a>
</td>
</tr>
Okay so after seeing that basic set up, lets the the user type into the first text box "23-27". Now i want this to be added to the links href. So it will be appended with "&chapter=(WHAT EVER THEY TYPE IN THE TEXT BOX)".
How can i achieve this in jquery?.
I have tried a few things, my last attempt is below:
<script>
$('.target').keyup(function(){
var currentHref = $('.link').attr("href");
$(this).parents('tr').next('tr').closest('.link').attr("href", currentHref + $(this).val());
});
</script>
Any help would be great thank you.

You were on the correct path until searching for the .link. To search for direct/nested children in jQuery, use find()
$('input').keyup(function() {
var that = $(this);
that.closest('tr').next('tr').find('.link').attr('href', function() {
return $(this).attr('data-original-href') + that.val();
});
});
Also, note above we do not set the attribute with
$('.link').attr("href");
because there are many .link elements. We use $(this) in the context of the found .link element
Finally, use custom data-* attributes to preserve the original href like
<a class="link" href="/index.php/cases?id=5" data-original-href="/index.php/cases?id=5">The link</a>
$('input').keyup(function() {
var that = $(this);
that.closest('tr').next('tr').find('.link').attr('href', function() {
return $(this).attr('data-original-href') + that.val();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<table>
<tr>
<td>
<div class="chapter_update">
<form>
<input class="target" type="text">
</form>
</div>
</td>
</tr>
<tr>
<td>
<a class="link" href="/index.php/cases?id=5" data-original-href="/index.php/cases?id=5">The link</a>
</td>
</tr>
<tr>
<td>
<div class="chapter_update">
<form>
<input class="target" type="text">
</form>
</div>
</td>
</tr>
<tr>
<td>
<a class="link" href="/index.php/cases?id=5" data-original-href="/index.php/cases?id=5">The link</a>
</td>
</tr>
</table>

Try this, it is working actually.
$.each($('.link'), function(){
$(this).attr('default', $(this).attr('href'));
});
$('.target').keyup(function (e) {
var input = $(this);
var closestlink = input.closest('tr').next('tr').find('.link');
var linkHref = closestlink.attr('href'); // You aren't using this actually, but just in case you need to use the current href, not the default.
var defaultHref = closestlink.attr('default');
closestlink.attr('href', defaultHref + input.val());
});
https://jsfiddle.net/e8uLc9nm/1/
Another option would be removing this part
$.each($('.link'), function(){
$(this).attr('default', $(this).attr('href'));
});
And adding via HTML a default tag for your link or something else with the default value, this way you won't need to use jQuery to set the default value.

Try this
$(document).ready(function() {
$('#txt').keyup(function(e) {
$("a").attr("href", $("a").attr("href") + String.fromCharCode(e.which).toLowerCase());
$("div").html($("a").attr("href"));
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txt" />
some text for link
<div>
</div>

Find parent sibling td hidden value

I want to find parent sibling td hidden value when clicking correctAttempt class in div.
<tr th:each="m : ${markWiseResultModel}">
<td th:text="${m.id}" align="center"></td>
<td class="topicTD">
<input type="hidden" class="topicId" th:value="${m.topic.id}"/>
<div th:text="${m.topic.name}" align="center"></div>
</td>
<td data-toggle="modal" style="background:#b8d1f3;">
<div class="correctAttempt" th:text="${m.correctAttemptCount}" align="center" ></div>
</td>
<td th:text="${m.correctAttemptPercent}" align="center" style="background:#99FF99;"></td>
<td th:text="${m.wrongAttemptCount}" align="center" style="background:#b8d1f3;"></td>
<td th:text="${m.wrongAttemptPercent}" align="center" style="background:#99FF99;"></td>
<td th:text="${m.correctTotalCount}" align="center" style="background:#b8d1f3;"></td>
<td th:text="${m.correctTotalPercent}" align="center" style="background:#99FF99;"></td>
<td th:text="${m.wrongTotalCount}" align="center" style="background:#b8d1f3;"></td>
<td th:text="${m.wrongTotalPercent}" align="center" style="background:#99FF99;"></td>
</tr>
<script>
$(document).ready(function(){
$('.correctAttempt').click(function(){
var id = $(this).parents('td').siblings('.topicTD').find(".topicId").val();
alert(id);
$('#correctOutOfAttempt').modal('show');
});
});
</script>
Already tried script with no success.

Try this-
Demo
$(document).ready(function(){
$('.correctAttempt').click(function(){
var id= $(this).parent().prev('.topicTD').find(".topicId").val();
alert(id);
$('#correctOutOfAttempt').modal('show');
});
});

Try this one.
<script>
$(document).ready(function(){
$('.correctAttempt').click(function(){
var id= $(this).parent().prev('.topicTD').find(".topicId").val();
alert(id);
$('#correctOutOfAttempt').modal('show');
});
});
</script>

You can use closest to get the parent tr element, then you need to find the .topicId. Try this:
<script>
$(document).ready(function(){
$('.correctAttempt').click(function(){
var id = $(this).closest('tr').find(".topicId").val();
alert(id);
$('#correctOutOfAttempt').modal('show');
});
});
</script>
The advantage of using closest instead of traversing rigidly by parent is that you can change your tr and td structure without having to amend the JS code, so long as the classnames remain the same.
Example fiddle

changing elements in a list

I would like to have the text after the "Question:" and "Answer:" change into text input upon clicking the Edit_Question button. I don't know a good way to make this work. Here is the code I have:
<script type="text/javascript">
<!--
$("li div").hide();
$("li h3").click(function(){
$(this).next("div").slideToggle("fast").siblings("div").slideUp("fast");
})
//-->
</script>
<ul class="Question_List">
<?php foreach($FAQS as $FAQ) { ?>
<li>
<h3><u><strong><i>Question:</i></strong><?php echo $FAQ['question'];?></u></h3>
<div>
<h4><strong><i>Answer:</i></strong><?php echo$FAQ['answer'];?></h4>
<table style='max-width: 250px;'>
<tbody>
<tr>
<td><strong>Pages:</strong><select><option>1</option><option>2</option></select>
<td><input type='button' class="Edit_Question" value='edit'/></td>
<td><input type='button' class="Delete_Question" value='delete'/></td>
</tr>
</tbody>
</table>
</div>
</li>
<?php } ?>
<li><br><input type="button" class="New_Question" value="NEW"/></li>
</ul>

Just disable/enable the textbox and style the disabled version:
HTML:
<button id="edit">Edit</button>
<input id="myinput" type="text" disabled="disabled" value="My Value"/>
CSS:
input:disabled {
background-color:#fff;
border:none;
}
JavaScript:
document.getElementById("edit").onclick = function() {
document.getElementById("myinput").disabled = "";
};

First of all, you are missing a closing </td> tag after your page <select>. If you want to make it easy to select the text of your questions and answers, wrap them in an element. In my example, I wrapped them in a <span> element and gave them question and answer classes respectively.
Try a demo: http://jsfiddle.net/v3yN7/
HTML:
<li>
<h3><u><strong><i>Question:</i></strong><span class="question">What should I ask?</span></u></h3>
<div>
<h4><strong><i>Answer:</i></strong><span class="answer">This is a rather short answer</span></h4>
<table style='max-width: 250px;'>
<tbody>
<tr>
<td><strong>Pages:</strong><select><option>1</option><option>2</option></select></td>
<td><input type='button' class="Edit_Question" value='edit'/></td>
<td><input type='button' class="Delete_Question" value='delete'/></td>
</tr>
</tbody>
</table>
</div>
</li>
Javascript:
$('.Edit_Question').click(function() {
// Find the <li> element the whole clicked thing is wrapped in
var $item = $(this).closest('li');
// Select all question and answer wrappers
$item.find('.question,.answer').each(function() {
var $this = $(this);
// Get the question/answer text
var txt = $this.text();
// Empty the wrapper and replace them with an input box
$this.empty().append($('<input type="text" />').val(txt));
});
});
I assumed you just want a simple input box for editing, but it can be easily changed to a <textarea> if needed.
As to what happens next, I'll leave it up to you. :)

just copy this code to your page without damading your script.
<script type="text/javascript">
<!--
var editBox = false;
$("li div").hide();
$("li h3").click(function(){
$(this).next("div").slideToggle("fast").siblings("div").slideUp("fast");
});
$('.Edit_Question').click(function() {
if(editBox)
{
$('.edit_area').css({'display':''});
editBox = true;
} else {
$('.edit_area').css({'display':'none'});
editBox = false;
}
});
//-->
</script>
<ul class="Question_List">
<?php foreach($FAQS as $i => $FAQ) { ?>
<li>
<h3><u><strong><i>Question:</i></strong><?php echo $FAQ['question'];?></u></h3>
<div>
<h4><strong><i>Answer:</i></strong><?php echo$FAQ['answer'];?></h4>
<table style='max-width: 250px;'>
<tbody>
<tr id="edit_area" style="display:none;">
<td colspan=3><textarea cols=20 rows=5 name="editTextBox"></textarea></td>
</tr>
<tr>
<td><strong>Pages:</strong><select><option>1</option><option>2</option></select>
<td><input type='button' class="Edit_Question" value='edit'/></td>
<td><input type='button' class="Delete_Question" value='delete'/></td>
</tr>
</tbody>
</table>
</div>
</li>
<?php } ?>
<li><br><input type="button" class="New_Question" value="NEW"/></li>