javascript class sees multiple DOMs in each iteration? jquery .each getting confused - javascript

I have quite strange problem, I have simple quiz engine which should restart it self if user doesn't pass with 70% and more.
Everything works ok but when i re-init the script, in next iteration it seems like it sees all questin divs more times. (as many times as many times you failed) so it makes me a mess since every other calculation is based on that.
here is everything to see: http://jsfiddle.net/xdgrh/DhTQw/2/
You can replicate the issue if you choose B for the first question and anything else for other questions. Than it will tell you to click restart because you failed.
In next iteration again choose B and look in feedback. (i checked in log too, it reads everything like there is each question doubled.) And so on as many iterations you make, that many times it calculates everything
html here: (because it must be in post by stack rules)
(Focus should be in $('.btnNext').click... and in $(".box:visible input:radio").each(function(index, value)... there it counts things two-three.. more times.. depending on how may times you fail)
<div id="lliquizContent">
<div id="headerX">
<h1>Task 1: Work with Today's Client (Final task) </h1>
</div>
<div class="feedback">
<div class="feedback-title">
FEEDBACK TITLE
</div>
<div class="feedback-text">
FEEDBACK TEXT
</div>
<img src="/Resource/GetResource/CRSTechModule1/feedback.m1s29.1.png" border="0" />
<div style="clear:both;"> </div>
<div class="feedback-footer">
<div class="btnFeedbackNext">Next Question ></div>
<div class="score"><strong>Score: </strong><span class="score"></span> %</div>
</div>
</div>
<div class="box" type="1">
<div class="headerX">
<p>Task question 1 of 4</p>
</div>
<div class="question qsize1">
<div class="questionText">Based on Anne’s original email, how should you respond?</div>
<div class="answers">
<table>
<tr>
<td><input type="radio" name="" value="0" /> </td>
<td><label>Email Anne to set up a face-to-face meeting.</label></td>
<td>
<feedback>
<fbtitle>Incorrect. You did not select the best approach for responding to Dr. Anne Jones. Click Next to view the next question.</fbtitle>
<fbtext>"I’d like to be able to meet with you, but as I said in my original email, I am just too busy! Please email me your thoughts about homes that might be suitable for my situation."</fbtext>
</feedback>
</td>
</tr>
<tr>
<td><input type="radio" name="" value="1" /> </td>
<td><label>Email Anne and ask her to register on your website.</label></td>
<td>
<feedback>
<fbtitle>Correct! You selected the best approach for responding to Dr. Anne Jones. Click Next to view the next question.</fbtitle>
<fbtext>"Thanks for getting back to me. I’ll look at the two homes you mentioned and try to register on your website when I get a chance. I am very excited about getting a new home in Springfield. Thanks for helping me."</fbtext>
</feedback>
</td>
</tr>
<tr>
<td><input type="radio" name="" value="0" /> </td>
<td><label>Email Anne to qualify her as a possible lead.</label></td>
<td>
<feedback>
<fbtitle>Incorrect. You did not select the best approach for responding to Dr. Anne Jones. Click Next to view the next question.</fbtitle>
<fbtext>"I really don’t have any more information to give you at this time. As I wrote in my original email, I think new construction would be ideal for me. Can’t you just email me information on homes that are available? I don’t have a lot of time."</fbtext>
</feedback>
</td>
</tr>
</table>
</div>
</div>
<div style="clear: both;"> </div>
<div class="attachments">
<a id="transcript-button1" href="#" lliQuizTitle="Transcript 1 lliQuizTitle">Approach #1</a> |
<div style="display: none;" id="TRANSCRIPT-TEXT1" lliQuizTitle="Transcript 1 lliQuizTitle">transcript 1</div>
<a id="transcript-button2" href="#">Approach #2</a> |
<div style="display: none;" id="TRANSCRIPT-TEXT2" lliQuizTitle="Transcript 2 lliQuizTitle">transcript 2</div>
<a id="transcript-button3" href="#">Approach #3</a>
<div style="display: none;" id="TRANSCRIPT-TEXT3" lliQuizTitle="Transcript 3 lliQuizTitle">transcript 3</div>
</div>
<div class="btnContainer"><a class="btnNext">SUBMIT</a></div>
<div class="instructions">Select the correct answer then click the forward arrow to continue.</div>
<div class="rightAttachmentBox">
<a id="transcript-button4" href="#">Click here</a><br />
to see the email from<br />
Anne Jones
<div style="display: none;" id="TRANSCRIPT-TEXT4" lliQuizTitle="Transcript 4 lliQuizTitle" lliQuizTop="20" lliQuizLeft="200" lliQuizWidth="300" lliQuizHeight="300">
transcript 4 transcript 4 transcript 4
</div>
</div>
</div>
<div class="box" type="2">
<div class="headerX">
<p>Task question 2 of 4</p>
<div class="questionText">Based on Anne’s original email, how should you respond?</div>
</div>
<div class="questions qsize2">
<table>
<tr>
<td>
<div class="question"> <div class="questionText">Based on Anne’s original email, how should you respond?</div> <div id="answers"> <table> <tr> <td><input type="radio" name="" value="1" /> </td> <td><label>Email Anne to set up a face-to-face meeting.</label></td> <td id="fedback_content">Question response 1.</td> </tr> <tr> <td><input type="radio" name="" value="0" /> </td> <td><label>Email Anne to set up a face-to-face meeting.</label></td> <td id="fedback_content">Question response 2.</td> </tr> <tr> <td><input type="radio" name="" value="0" /> </td> <td><label>Email Anne to set up a face-to-face meeting.</label></td> <td id="fedback_content">Question response 3.</td> </tr> </table> </div> </div>
</td>
<td>
<div class="question"> <div class="questionText">Based on Anne’s original email, how should you respond?</div> <div id="answers"> <table> <tr> <td><input type="radio" name="" value="1" /> </td> <td><label>Email Anne to set up a face-to-face meeting.</label></td> <td id="fedback_content">Question response 1.</td> </tr> <tr> <td><input type="radio" name="" value="0" /> </td> <td><label>Email Anne to set up a face-to-face meeting.</label></td> <td id="fedback_content">Question response 2.</td> </tr> <tr> <td><input type="radio" name="" value="0" /> </td> <td><label>Email Anne to set up a face-to-face meeting.</label></td> <td id="fedback_content">Question response 3.</td> </tr> </table> </div> </div>
</td>
</tr>
<tr>
<td>
<div class="question"> <div class="questionText">Based on Anne’s original email, how should you respond?</div> <div id="answers"> <table> <tr> <td><input type="radio" name="" value="1" /> </td> <td><label>Email Anne to set up a face-to-face meeting.</label></td> <td id="fedback_content">Question response 1.</td> </tr> <tr> <td><input type="radio" name="" value="0" /> </td> <td><label>Email Anne to set up a face-to-face meeting.</label></td> <td id="fedback_content">Question response 2.</td> </tr> <tr> <td><input type="radio" name="" value="0" /> </td> <td><label>Email Anne to set up a face-to-face meeting.</label></td> <td id="fedback_content">Question response 3.</td> </tr> </table> </div> </div>
</td>
<td>
<div class="question"> <div class="questionText">Based on Anne’s original email, how should you respond?</div> <div id="answers"> <table> <tr> <td><input type="radio" name="" value="1" /> </td> <td><label>Email Anne to set up a face-to-face meeting.</label></td> <td id="fedback_content">Question response 1.</td> </tr> <tr> <td><input type="radio" name="" value="0" /> </td> <td><label>Email Anne to set up a face-to-face meeting.</label></td> <td id="fedback_content">Question response 2.</td> </tr> <tr> <td><input type="radio" name="" value="0" /> </td> <td><label>Email Anne to set up a face-to-face meeting.</label></td> <td id="fedback_content">Question response 3.</td> </tr> </table> </div> </div>
</td>
</tr>
</table>
</div>
<feedback>
<correct>
<fbtitle>Correct...</fbtitle>
<fbtext>"Text..."</fbtext>
</correct>
<incorrect>
<fbtitle>Incorrect...</fbtitle>
<fbtext>"Text...."</fbtext>
</incorrect>
</feedback>
<div style="clear: both;"> </div>
<div class="btnContainer"><a class="btnNext">SUBMIT</a></div>
<div class="instructions">Select the correct answer then click the forward arrow to continue.</div>
</div>
<div class="box qsize3" type="3">
<div class="headerX">
<p>Task question 3 of 4</p>
<p>Select the best Target group for you based on your data. Next, select your Rationale and click Submit to get your feedback. You may view your client analysis at any time to help you choose an approach.</p>
<div class="questionText">I’ve reviewed your client analysis and I have an idea of where you might be able to add a lot of value to your clients. But I want to know what you think.<br />
What target group do you think it makes the most sense for you to select? Why?</div>
</div>
<div class="questions qsize3">
<table>
<tr valign="top" >
<td>
<div class="question">
<div class="questionText">Target group</div>
<div id="answers">
<table>
<tr>
<td><input type="radio" name="" value="0" /></td>
<td><label> Doctors and nurses transferring to Springfield.</label></td>
<td>
<feedback>
<fbtitle></fbtitle>
<fbtext>I think you should focus on transfers into Springfield, however, I think that group may be a little too specific.</fbtext>
</feedback>
</td>
</tr>
<tr>
<td><input type="radio" name="" value="0" /></td>
<td><label>Home sellers with older homes looking to purchase new construction.</label></td>
<td>
<feedback>
<fbtitle></fbtitle>
<fbtext>I thought you didn’t like to work with this group.</fbtext>
</feedback>
</td>
</tr>
<tr>
<td>
<input type="radio" name="" value="0" />
</td>
<td><label>Home buyers looking for older homes outside of Springfield.</label></td>
<td>
<feedback>
<fbtitle></fbtitle>
<fbtext>I am not sure why you picked this group. I thought you liked new construction.</fbtext>
</feedback>
</td>
</tr>
<tr>
<td>
<input type="radio" name="" value="1" />
</td>
<td><label>First-time home buyers and transfers to the area looking for new construction.</label></td>
<td>
<feedback>
<fbtitle></fbtitle>
<fbtext></fbtext>
</feedback>
</td>
</tr>
</table>
</div>
</div>
</td>
<td>
<div class="question">
<div class="questionText">Rationale</div>
<div id="answers">
<table>
<tr>
<td><input type="radio" name="" value="1" /></td>
<td><label>I only want to focus on one specific group that is associated with the hospital.</label></td>
<td>
<feedback>
<fbtitle></fbtitle>
<fbtext>For the rest of this meeting, I think we should focus on first-time home buyers and transfers to the area looking for new construction.</fbtext>
</feedback>
</td>
</tr>
<tr>
<td><input type="radio" name="" value="0" /></td>
<td><label>I don’t want to pick between two of the buyer types with whom I enjoy working.</label></td>
<td>
<feedback>
<fbtitle></fbtitle>
<fbtext>For the rest of this meeting, I think we should focus on first-time home buyers and transfers to the area looking for new construction.</fbtext>
</feedback>
</td>
</tr>
<tr>
<td><input type="radio" name="" value="0" /></td>
<td><label>Older homes have a lot more character than new construction.</label></td>
<td>
<feedback>
<fbtitle></fbtitle>
<fbtext>For the rest of this meeting, I think we should focus on first-time home buyers and transfers to the area looking for new construction.</fbtext>
</feedback>
</td>
</tr>
<tr>
<td><input type="radio" name="" value="0" /></td>
<td><label>Springfield is not expanding and there aren't new construction homes.</label></td>
<td>
<feedback>
<fbtitle></fbtitle>
<fbtext>I agree that you should focus on first-time home buyers and transfers looking for new construction. But why did you select them?</fbtext>
</feedback>
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</div>
<feedback>
<correct>
<fbtitle>Correct! You selected an appropriate target market and the best rationale. Click Next to view the next question.</fbtitle>
<fbtext>"I agree! I think you will be very happy working with this group and it sounds like you are well on your way to becoming a new construction expert. This expertise will add value to the service you provide your clients."</fbtext>
</correct>
<incorrect>
<fbtitle>You have a red X next to each incorrect answer. You did not select the best choices here. Click Next to view the next question.</fbtitle>
<fbtext></fbtext>
</incorrect>
</feedback>
<div style="clear: both;"> </div>
<div class="btnContainer"><a class="btnNext">SUBMIT</a></div>
<div class="instructions">Select the correct answer then click the forward arrow to continue.</div>
</div>
<div class="box-fail">
Ponovo init... TRY AGAIN...MUST GET 70%+
</div>
<div class="box-success">
It's on, go on...</div>
</div>
And here is s:
var lliQuiz = {
message1: "message1",
message2: "",
feedbackImage: "/image/not/set",
score: 0,
currentTab: 0,
checkFormat: function() {
var $boxes = $('.box'), valid = $boxes.length > 0;
if (valid) {$boxes.each(function (idx, box) {
var $box = $(this),$qtns = $box.find('.question');
if ($qtns.length == 0) {
valid = false; return false;
} valid = $qtns.filter(function () {
return $(this).find('input[type="radio"]').length < 2;
}).length == 0; if (!valid) { return; }
})
}
if (valid) {return true;} else {return false;exit;}
},
createFeedback: function(boxVisible,type,farray,addScore) {
$('.feedback img').attr('src',lliQuiz.feedbackImage);
if (type == 1) {
$.each(farray, function(i,id){ // NE TREBA FOR EACH??? samo je jedno pitanje...
$('.feedback .feedback-title').text($('input[id='+id+']').nextInDOM('fbtitle').html());
$('.feedback .feedback-text').text($('input[id='+id+']').nextInDOM('fbtext').html());
});
}
if (type == 2) {
if (addScore == true) {
$('.feedback .feedback-title').text($(boxVisible).find('feedback > correct > fbtitle').html());
$('.feedback .feedback-text').text($(boxVisible).find('feedback > correct > fbtext').html());
} else {
$('.feedback .feedback-title').text($(boxVisible).find('feedback > incorrect > fbtitle').html());
$('.feedback .feedback-text').text($(boxVisible).find('feedback > incorrect > fbtext').html());
}
}
if (type == 3) {
if (addScore == true) {
$('.feedback .feedback-title').text($(boxVisible).find('feedback > correct > fbtitle').html());
$('.feedback .feedback-text').text($(boxVisible).find('feedback > correct > fbtext').html());
} else {
var text = "";
$.each(farray, function(i,id){
var br = (i == 0) ? "<br /><br />" : "";
text = text + " " + $('input[id='+id+']').nextInDOM('fbtext').html() + br;
});
$('.feedback .feedback-title').text($(boxVisible).find('feedback > incorrect > fbtitle').html());
$('.feedback .feedback-text').html('"'+text+'"');
}
}
return true;
},
checkAnswers: function() { return 5; },
init: function() {
$('.box, .box-success, .box-fail').fadeOut(100);
$('span.redx').remove();
lliQuiz.score = 0;
lliQuiz.currentTab = 0;
console.log('init poeni: '+lliQuiz.score);
// check format
if (lliQuiz.checkFormat()) {
$('.box:first').fadeIn(1000);
console.log( "LLI - HTML FORMAT OK!!!" );
} else {
$('#lliquizContent').html('<div style="color: red; font-size: 16px; font-weight: bold; text-align: center; width: 100%;">HTML FORMAT ERROR</div>');
console.log( "LLI - HTML FORMAT ERROR!!!" );
}
console.log( "LLI - Quiz Start!" );
var pointsPerQuestion = parseFloat(100 / $('.box').length).toFixed(2);
$(".question").each(function(index,value) {
var groupNumber = ++index;
$(":radio", this).attr("name", "group" + groupNumber).each(function(index,value){
$(this).removeAttr('checked').attr("id","id"+groupNumber+index).nextInDOM('label').attr("for","id"+groupNumber+index);
});
});
$('input').iCheck('uncheck');
$('input').iCheck({ checkboxClass: 'icheckbox_minimal-blue', radioClass: 'iradio_flat-blue' });
// lli idemo dalje...
$('.btnNext').click(function(e) {
e.preventDefault();
var status = true;
var addScore = false;
var carray = []; carray.length = 0;
var xarray = []; xarray.length = 0;
var farray = []; farray.length = 0;
lliQuiz.currentTab++;
$('span.redx').remove();
$(".box:visible input:radio").each(function(index, value){
if($("input:radio[name="+$(this).attr("name")+"]:checked").length == 0) {
status = false;
}
if(value.value == 1 && value.checked == true) {
carray.push($(this).attr("id"));
console.log($(this).attr("id"));
}
if (value.value == 0 && value.checked == true) {
xarray.push($(this).attr("id"));
console.log($(this).attr("id"));
}
if (value.checked == true) {
farray.push($(this).attr("id"));
console.log($(this).attr("id"));
}
});
if (carray.length == $(".box:visible .question").length) {
lliQuiz.score += parseInt(pointsPerQuestion);
if (lliQuiz.score == 99) $('span.score').text(100);
else
$('span.score').text(lliQuiz.score);
addScore = true;
} else {
addScore = false;
if (lliQuiz.score == 0) $('span.score').text(0);
}
if (status == false) {
$("#lliquizContent").block({ message: lliQuiz.message1 , theme: false, timeout: 2500, fadeOut: 400, overlayCSS: {opacity: 0.1, cursor: "default"}, css: {border: '1px solid #333',width: '200px', padding: '10px','border-radius': '7px', color: 'red', '-webkit-border-radius': '7px', '-moz-border-radius': '7px' } });
exit;
} else {
$("#lliquizContent").block({ message: false , theme: false, overlayCSS: {opacity: 0.1, cursor: "default"} });
$.each(xarray, function(i,id){
$('#'+id).prevInDOM('.questionText').prepend('<span class="redx">X</span>');
});
lliQuiz.createFeedback($(".box:visible"),$('.box:visible').attr('type'),farray,addScore);
$(".feedback").fadeIn(1000);
}
});
$('.btnFeedbackNext').click(function() {
console.log('feedback poeni: '+lliQuiz.score);
if ($('.box').length == lliQuiz.currentTab) {
$('.feedback').fadeOut(200);
$('#lliquizContent').unblock();
$('.box:visible').fadeOut(200);
if (lliQuiz.score >= 70) {
$('.box:visible').fadeOut(300);
$('.box-success').fadeIn(1000);
$.hurdleNext(false);
} else {
$('.box-fail').fadeIn(1000);
$.hurdleNext(true);
}
} else {
$('.feedback').fadeOut(300);
$('#lliquizContent').unblock();
$('.box:visible').fadeOut(function(){
$(this).next().fadeIn(1000);
return false;
});
}
});
},
test: function() { alert('lli test'); }
}
lliQuiz.message1 = "Please answer the questions before submiting!";
lliQuiz.feedbackImage = "feedback.m1s29.1.png";
lliQuiz.init();
$('#initButton').click(function(){
lliQuiz.score = 0;
lliQuiz.init();
});

When you click #initButton you are adding another click event handler to your buttons.
Before you init, you should use .unbind(); to clear the events.
$('#initButton').click(function(){
// remove click handler for elements
// use .unbind('click'); specifically to remove click events
$('.btnFeedbackNext').unbind('click');
$('.btnNext').unbind('click');
lliQuiz.score = 0;
lliQuiz.init();
});
Edit: In later versions of jQuery the preffered method is using .off();
Thanks to #AnthonyGrist for pointing that out :)
Here is an example Here

Related

show <div> with checkbox jquery

the script works and shows me the div, but only for one record, and I have 10 more records where it does nothing to select the check.
look:
It only works with the first check, but the rest is not possible, any solution?
the script
<script type="text/javascript">
function showContent() {
element = document.getElementById("content");
check = document.getElementById("check");
if (check.checked) {
element.style.display='block';
}
else {
element.style.display='none';
}
}
</script>
the view
<table class="table table-striped">
<thead>
<tr>
<td>ID</td>
<td>Nombre del Ingrediente</td>
<td>Proveedor</td>
<td>Agregar</td>
<td>Cantidad</td>
</tr>
</thead>
<tbody>
#foreach($ingredientes as $ingrediente)
<tr>
<td>{{$ingrediente->id}}</td>
<td>{{$ingrediente->nombre}}</td>
<td>{{$ingrediente->proveedor}}</td>
<td>
<label>
<input type="checkbox" name="check" id="check" value="" onchange="javascript:showContent()" />
</label>
</td>
<td>
<div class="form-group row">
<div class="col-sm-4">
<div class="dv" id="content" style="display:none;">
<input class="dvs" id="ex1" type="number" />
</div>
</div>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
The attribute id must be unique in a document. You can pass this object to the function by which you can target the relevant div element by class.
function showContent(el) {
var element = el.parentNode.parentNode.nextElementSibling.querySelector('.dv');
if (el.checked) {
element.style.display='block';
}
else {
element.style.display='none';
}
}
<table class="table table-striped">
<thead>
<tr>
<td>ID</td>
<td>Nombre del Ingrediente</td>
<td>Proveedor</td>
<td>Agregar</td>
<td>Cantidad</td>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>mnl</td>
<td>Test.....</td>
<td>
<label>
<input type="checkbox" name="check" id="check" value="" onchange="javascript:showContent(this)" />
</label>
</td>
<td>
<div class="form-group row">
<div class="col-sm-4">
<div class="dv" style="display:none;">
<input class="dvs" type="number" />
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>222</td>
<td>xyz</td>
<td>Test..</td>
<td>
<label>
<input type="checkbox" name="check" id="check" value="" onchange="javascript:showContent(this)" />
</label>
</td>
<td>
<div class="form-group row">
<div class="col-sm-4">
<div class="dv" style="display:none;">
<input class="dvs" type="number" />
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
the problem with your code at the moment is that you are trying to bind everything to the same ID, IDs should be unique identifiers, meaning there should be no duplication of them in your code on any given page.
You are binding the event to the first box and then subsequently, the content to first instance of the id content and check, subsequent bindings are not taken into account.
To remedy this, you must either select by class (not recommended) or instead, select by ID but dynamically generate the ID, you could do this by replacing the line
<input type="checkbox" name="check" id="check" value="" onchange="javascript:showContent()" />
with
<input type="checkbox" name="check" id="check-{{$ingrediente->id}}" value="" onchange="javascript:showContent('{{$ingrediente->id}}')" />
and again for the line <div class="dv" id="content" style="display:none;">
you can change this to
<div class="dv" id="content-{{$ingrediente->id}}" style="display:none;">
and then changing your showContent method to accept a parameter.
<script type="text/javascript">
function showContent(id) {
element = document.getElementById('content-' + id);
check = document.getElementById('check-' + id);
if (check.checked) {
element.style.display='block';
}
else {
element.style.display='none';
}
}
</script>
Good luck :)
You are using duplicate id for checkbox and div content for all row.
You should add more specific info for div's id and pass argument for showConent() function
<td>
<label>
<input type="checkbox" name="check" id="check" value="" onchange="javascript:showContent({{$ingrediente->id}})" />
</label>
</td>
<td>
<div class="form-group row">
<div class="col-sm-4">
<div class="dv" id="content-{{$ingrediente->id}}" style="display:none;">
<input class="dvs" id="ex1" type="number" />
</div>
</div>
</div>
</td>
<script type="text/javascript">
function showContent(id) {
element = document.getElementById(id);
check = document.getElementById("check");
if (check.checked) {
element.style.display='block';
}
else {
element.style.display='none';
}
}
</script>

document.getElementById('').display=block not working

In the following document, when someone clicks radios (which are in a table) function StOptnClkd is called. It accomplishes everything but the most important thing. There are two elements that need to switch from being diplayed to not displayed- namely, - AmxDisc and stOptnsTbl. These elements are displayed based on the selection on the radio buttons and check boxes.Please help me. I am a newbie trying to learn to code
I have attached the following code
<script type="text/javascript">
function StOptnClkd(clicked_id)
{
//alert(clicked_id)
var strvid = clicked_id;
var StVal = document.getElementById(strvid).value;
document.getElementById("STtypCptrd").checked="Checked";
document.getElementById("cntctpe").innerHTML=StVal;
document.getElementById('Autonote').value = document.getElementById('Autonote').value+"Spke to: " + StVal; + ", ";
document.getElementById("AmxDisc").display="Block" // this doesnt show
document.getElementById("stOptnsTbl").display="None" // this doesnt get hidden
}
</script>
<table id="stOptnsTbl" border cellspacing="50px" style="text-align: center; border: 1px solid black; border-collapse: collapse;float: left; display: none">
<tr> <!--All Party Options-->
<td width="110px" id ="CMOptn" class="stOptions">
<label class="container1" style="float:Left"><Strong> CM</Strong>
<input id= "optstCM" type="radio" value ="CM" Name="stPrtysel" onclick="StOptnClkd(this.id)">
<span class="checkmark1"></span>
</label>
</td>
<td width="110px" id ="UTPOptn" class="stOptions">
<label id="lblUPT" class="container1" style="float:Left"><Strong> UTP</Strong>
<input id= "optUTP" type="radio" value ="UTP" Name="stPrtysel" checked="checked" onclick="StOptnClkd(this.id)" >
<span class="checkmark1"></span>
</label>
</td>
<td width="110px" id ="SPOptn" class="stOptions">
<label id="lblSP" class="container1" style="float:Left;"><Strong> SP </Strong>
<input id= "optSP" type="radio" value ="SP" Name="stPrtysel" onclick="StOptnClkd(this.id)" >
<span class="checkmark1"></span>
</label>
</td>
<td width="110px" id ="SUPOptn" class="stOptions">
<label id="lblSUP" class="container1" style="float:Left;"><Strong> SUP </Strong>
<input id= "optSUP" type="radio" value ="SUP" Name="stPrtysel"onclick="StOptnClkd(this.id)" >
<span class="checkmark1"></span>
</label>
</td>
<td width="110px" id ="ATPOptn" class="stOptions">
<label id="lblATP" class="container1" style="float:Left;"><Strong> ATP </Strong>
<input id= "optATP" type="radio" value ="ATP" Name="stPrtysel"onclick="StOptnClkd(this.id)" >
<span class="checkmark1"></span>
</label>
</td>
<td width="110px" id ="ATTOptn" class="stOptions">
<label id="lblATT" class="container1" style="float:Left;"><Strong> ATT </Strong>
<input id= "optATT" type="radio" value ="AM" Name="stPrtysel" onclick="StOptnClkd(this.id)">
<span class="checkmark1"></span>
</label>
</td>
<td width="110px" id ="AMOptn" class="stOptions">
<label id="lblAM" class="container1" style="float:Left;"><Strong> AM </Strong>
<input id= "optAM" type="radio" value ="AM" Name="stPrtysel" onclick="StOptnClkd(this.id)" >
<span class="checkmark1"></span>
</label>
</td>
</span>
</span>
</tr>
</table>
<span width="100%" id="AmxDisc" style="display:none;">
has referred your account to for resolution.
EDIT: IT IS THERE, coudnt post all the code here, If you guys need the whole code tell me, I can mail it. or find a way to put it here
Edit2: I did the style.display change. It still doesnt do it. IN console, it shows error saying unexpected identfier at that line
document.getElementById("AmxDisc").style.display="block"

Cloning a tr and it is appearing at the top instead of at the placement of the tr defined

My tr is defined inside the table tag like this:
<table>
<tr>
<td>
<input type="text" name="customerid">
</td>
</tr>
<tr>
<td>
<div id="stlineitems">
<label for="stlineitems">Item(s)</label>
</td>
<td>
<div class="onlyleft">
<select name="get_Items" id="get_Items" class="selectItemsList" data-rule-required="true" data-msg-required="Choose Item">
<option></option>
</select>
</div>
<div class="moveboxleft">
<input type="text" class="inputwidth form-control rates_input" name="rate_items" data-rule-required="true" data-msg-required="Provide Rate or if not, provide 0 value" />
</div>
<br/>
<div class="nextitem">New Item
</div>
</td>
</tr>
</table>
Now, I am using the following snippet to create the cloned above code, all work but the placement is not right, I want it to be creating underneath the tr tag before this <div class="nextitem"> tag, not sure what I am doing wrong here
$('.createNewItemTag').click(function(){
var obj = $(this).parents('tr').first(),
clonedObj = $(obj[0].outerHTML);
clonedObj.find(".select2-container").remove();
clonedObj.find('.createNewItemTag').remove();
clonedObj.find('td').last().append("<a class='removeItem' href='javascript:void(0)';>Remove</a>");
clonedObj.find(".removeItem").click(function(){
$(this).parents('tr').first().remove();
});
console.log(obj);
obj.parents('table').append(clonedObj);
initSelect2ForNextItem(clonedObj.find(".selectItemsList").first());
});
If I understand your question, you want new cloned <tr> elements to be added BEFORE the element with the "new item" tag.
What we are going to do is utilize jQuery's built in .clone() method instead of doing it ourself. Once we have the cloned object we use your existing code to remove the New Item button and add the Remove button.
After we do that we'll utilize jQuery's .before() method to insert the new, cloned element before the original object. (You could use .after() if you wanted this to be inserted after the original object)
$('.createNewItemTag').click(function(){
var obj = $(this).parents('tr').first();
var clonedObj = obj.clone();
clonedObj.find(".select2-container").remove();
clonedObj.find('.createNewItemTag').remove();
clonedObj.find('td').last().append("<a class='removeItem' href='javascript:void(0)';>Remove</a>");
clonedObj.find(".removeItem").click(function(){
$(this).parents('tr').first().remove();
});
obj.before(clonedObj);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" name="customerid">
</td>
</tr>
<tr>
<td>
<div id="stlineitems">
<label for="stlineitems">Item(s)</label>
</div>
</td>
<td>
<div class="onlyleft">
<select name="get_Items" id="get_Items" class="selectItemsList" data-rule-required="true" data-msg-required="Choose Item">
<option></option>
</select>
</div>
<div class="moveboxleft">
<input type="text" class="inputwidth form-control rates_input" name="rate_items" data-rule-required="true" data-msg-required="Provide Rate or if not, provide 0 value" />
</div>
<br/>
<div class="nextitem">New Item
</div>
</td>
</tr>
</table>
You may also want to clear the inputs of the original object so that it is empty after the clone is created. (or clear the inputs of the cloned object, up to you).
References:
https://api.jquery.com/clone/
https://api.jquery.com/after/
Try below code
Use obj.parents('table').find("tr:eq(0)").after(clonedObj); instead of obj.parents('table').append(clonedObj);
$('.createNewItemTag').click(function() {
var obj = $(this).parents('tr').first(),
clonedObj = $(obj[0].outerHTML);
clonedObj.find(".select2-container").remove();
clonedObj.find('.createNewItemTag').remove();
clonedObj.find('td').last().append("<a class='removeItem' href='javascript:void(0)';>Remove</a>");
clonedObj.find(".removeItem").click(function() {
$(this).parents('tr').first().remove();
});
//console.log(obj);
obj.parents('table').find("tr:eq(0)").after(clonedObj);
//initSelect2ForNextItem(clonedObj.find(".selectItemsList").first());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" name="customerid">
</td>
</tr>
<tr>
<td>
<div id="stlineitems">
<label for="stlineitems">Item(s)</label>
</td>
<td>
<div class="onlyleft">
<select name="get_Items" id="get_Items" class="selectItemsList" data-rule-required="true" data-msg-required="Choose Item">
<option></option>
</select>
</div>
<div class="moveboxleft">
<input type="text" class="inputwidth form-control rates_input" name="rate_items" data-rule-required="true" data-msg-required="Provide Rate or if not, provide 0 value" />
</div>
<br/>
<div class="nextitem">New Item</div>
</td>
</tr>
</table>
Js Fiddle Demo : JSFiddle
Something like this?
$(document).on('click', '.createNewItemTag', function() {
var rw = $(this).parents('tr');
var ix = rw.index() +1; //remove +1 to insert above curr row
var obj= rw.clone();
obj.addClass('newcol').find('td:first-child').text('New Item');
$('table tr:nth-child('+ix+')').after(obj);
});
table{border-collapse:collapse;}
th,td{border:1px solid #ccc;}
.newcol td{background-color:palegreen;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td colspan="2"><input type="text" value="customerid"></td>
</tr>
<tr>
<td>
<div id="stlineitems"><label for="stlineitems">Item(s)</label></div>
</td>
<td>
<div class="onlyleft">
<select>
<option>Options go here</option>
</select>
</div>
<div class="moveboxleft">
<input type="text" value="Provide Rate" />
</div>
<br/>
<div class="nextitem">New Item
</div>
</td>
</tr>
</table>
Notes:
(1) Switched to using .on() to allow newly added rows to be cloned

Sharing a table cell between other cells HTML5

I am not sure of the best way of asking the question I would like the answer to but I will try my best. Please let me know if I am not clear or you need more information understanding what I want to achieve.
Currently, I have two tables one containing peoples name (represented by person1, person2 ....) and other a comment section. Please have a look here: https://dl.dropboxusercontent.com/u/53441658/peoplecomment.html.
The code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>PersonComment</title>
</head>
<script>
function toggleTable() {
var myTable = document.getElementById("commentfield");
myTable.style.display = (myTable.style.display == "table") ? "none" : "table";
}
</script>
<body>
<table width="300" border="1" id="people" onClick="toggleTable()">
<tbody>
<tr>
<td id="cell1"><div> Person1</div></td>
<td id="cell2"><div> Person2</div></td>
</tr>
<tr>
<td id="cell5"><div> Person3</div></td>
<td id="cell6"><div> Person4</div></td>
</tr>
<tr>
<td id="cell9"><div> Person5</div></td>
<td id="cell10"><div> Person6</div></td>
</tr>
</tbody>
</table>
<table width="300" border="1" id="commentfield">
<tbody>
<tr>
<td id="comment"><div contenteditable> Your comment here</div></td>
</tr>
</tbody>
</table>
</body>
</html>
Each cell in the first table, containing peoples name contains a function that toggles on and off table 2 the comment section (commentfield).
Aim of this table
When user click on cell it should allow them to put comment in the comment section and bind that comment with the cell they clicked and not sure this comment on another cell when clicked.
What I want to achieve:
I want to share the comment section between all the peoples, so say for example, if someone clicks on person1 and puts a comment, then someone else clicks on person2, I don't want the comment of person1 to show but instead I want the person to be able to add a new comment for person2. However, when say for example, I click on person1 again, I want the comment that was added to person was to be shown in the comment section.
Little scenario:
Screenshot 1 is how the app looks like currently.
Screenshots that has orange border on them shows that someone has clicked on person and added a comment.
Screenhots that has green border on them shows that someone has clicked on person and added a comment.
Screenhots that has yellow border on them shows that someone clicked on person1 and show the comment that was added for person1 and then they clicked on person2 and show the comment added for person2.
The last screenshot shows that person2 comment has been edited and now if someone clicks on this there will see the new comment.
Note:
The commentfield cell is editable, therefore allowing people to write stuff
One approach of this would be, saving the comment of each person in a variable allocated to them based on maybe the cell id and loading back the variable value to the comment section.
Having little to no knowledge of programming I am not sure how I can do this, any help is welcomed.
You could include forms tag and use them.
They will help to trigger wich contenteditable is to be seen (CSSS or JS)
here a CSS example of the idea
input+div[contenteditable],
input[name="person"] {
position: absolute;
right: 9999px;
}
input:checked + div {
position: static;
}
label {
/* optionnal*/
display: block;
}
/* trick to simulate js toggle */
table {
position: relative;
}
[for="hide"] {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4.7em;
background: rgba(0, 0, 0, 0.2);
pointer-events: none;
z-index: 1
}
:checked~[for="hide"] {
pointer-events: auto;
}
<form>
<table width="300" border="1" id="people" onClick="toggleTable()">
<tbody>
<tr>
<td id="cell1">
<div>
<!-- was the div usefull here ? if not; it can be avoided -->
<label for="c1">Person1</label>
</div>
</td>
<td id="cell2">
<div>
<label for="c2">Person2</label>
</div>
</td>
</tr>
<tr>
<td id="cell5">
<div>
<label for="c3">Person3</label>
</div>
</td>
<td id="cell6">
<div>
<label for="c4">Person4</label>
</div>
</td>
</tr>
<tr>
<td id="cell9">
<div>
<label for="c5">Person5</label>
</div>
</td>
<td id="cell10">
<div>
<label for="c6">Person6</label>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td id="comment" colspan="2">
<input type="radio" id="c1" name="person" />
<div contenteditable id="p1"> Your comment here person 1</div>
<input type="radio" id="c2" name="person" />
<div contenteditable id="p2"> Your comment here person 2</div>
<input type="radio" id="c3" name="person" />
<div contenteditable id="p3"> Your comment here person 3</div>
<input type="radio" id="c4" name="person" />
<div contenteditable id="p4"> Your comment here person 4</div>
<input type="radio" id="c5" name="person" />
<div contenteditable id="p5"> Your comment here person 5</div>
<input type="radio" id="c6" name="person" />
<div contenteditable id="p6"> Your comment here person 6</div>
<label for="hide"></label>
<input type="radio" id="hide" name="person" />
</td>
</tr>
</tfoot>
</table>
</form>

When I pass to another radio button both buton's values come

I want to do two radio buttons. Their names will be car and home. If I click car, an input box about the car section will be shown and if I click home, an input box about the home will be shown.
I have found an example about this and I have a problem about it. The codes are below.
<body>
<script type="text/javascript">
function toggleMe(obj, a)
{
var e=document.getElementById(a);
if(!e)return true;
e.style.display="block"
return true;
}
function toggleMe2(obj, a)
{
var e=document.getElementById(a);
if(!e)return true;
e.style.display="none"
return true;
}
</script>
<form name="theForm">
Type<br>
<input type="radio" name="married" value="yes" onclick="return toggleMe(this, 'Car')"> Car
<input type="radio" name="married" value="yes" onclick="return toggleMe(this, 'Home')"> Home<br>
<div id="Car" style="display: none; margin-left: 20px;">
<table>
<tr>
<td>Car InputBox</td>
<td style="text-align: right;"><input name="name" type="text"></td>
</tr>
</table>
</div>
<div id="Home" style="display: none; margin-left: 20px;">
<table>
<tr>
<td>Home InputBox:</td>
<td style="text-align: right;"><input name="name" type="text"></td>
</tr>
</table>
</div>
</form>
</body>
Output of these codes
If I click the car first, the input box of the car section is shown. If I click the home first, the input box of the home section is shown. After I click the car or home first (doesn't matter) if I click another one, both input boxes are shown.
How can I solve this problem? When I click home, the home input box should be shown and when I click car, the car input box should be shown as well. Not both of them.
HTML
<div>
<input type="radio" name="option" value="car" onclick="toggleInput(this)" /> Car
<input type="radio" name="option" value="home" onclick="toggleInput(this)" /> Home
</div>
<div id="car-input-group" class="hide">
Car InputBox
<input name="name" type="text" />
</div>
<div id="home-input-group" class="hide">
Home InputBox
<input name="name" type="text" />
</div>
Javascript
function toggleInput(obj){
var a =document.getElementsByClassName("hide");
for(var i=0; i<a.length; i++){
a[i].style.display = "none";
}
document.getElementById(obj.value + "-input-group").style.display = "block"
}
css
.hide{
display: none
}
Working example: http://plnkr.co/edit/wPdTldCXG0LTJWEtzIxE?p=preview
What about this? Using jquery it's easier. I made it universal, so you could add more radio buttons (using myradio and myinput css classes) without touching the JS.
$( "input.myradio" ).click(function() {
$( "div.myinput").hide();
$( "div#"+$(this).attr('id')).toggle( "slow", function() {
// Animation complete.
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="theForm">
Type<br>
<input id="Car" type="radio" name="married" class="myradio" value="yes" />Car
<input id="Home" type="radio" name="married" class="myradio" value="yes" />Home<br>
<div id="Car" class="myinput" style="display: none; margin-left: 20px;">
<table>
<tr>
<td>Car InputBox</td>
<td style="text-align: right;"><input name="name" type="text"></td>
</tr>
</table>
</div>
<div id="Home" class="myinput" style="display: none; margin-left: 20px;">
<table>
<tr>
<td>Home InputBox:</td>
<td style="text-align: right;"><input name="name" type="text"></td>
</tr>
</table>
</div>
</form>
JSFiddle

Categories

Resources