It is not copying buttons when appending table row - javascript

I am having trouble copying buttons into an appended row:
I have a jsfiddle: http://jsfiddle.net/Bjqr6/37/
In the jsfiddle, if you click on the "Open Grid" link and select either "True or False" button or "Yes or No" button, it will display those buttons at the bottom.
Now turn one of those buttons on by clicking on it (button will turn green)
Now the problem is that if you click on the "Add Question" button to append you buttons into a table row, you will see it does not copy the buttons into the table row.
Does anyone know why it does not copy the buttons and append them in the row?

I basically added
var $ans = context.find('.answerBtnsOn');
var $answer = $("<div class='answer'>Answer:<br/></div>").append($ans.val());
See http://jsfiddle.net/Bjqr6/40/. Is this what you want?

Related

Uncheck radio button datatable with pagination

I have a datatable with radio buttons for every row, my problem is that when i check the radio button in first page for example and go to another page and check another radio button i sow that the first one (in page one) still checked.
Expected : When i select a row, then i change the page in the table, and if i re-select a row, the value of the previous page must be deselected.
I'm using this https://datatables.net/examples/data_sources/js_array
thinks

Visible table after click submit

I would like show table after click button submit. I made function hide table and onload in body and second function show table and put it in submit button . Then table is visible only moment. So it is bad solution.
give your table a
display:none
in the css
then in Javascript , you capture the form submit , and change the display property of the element to block

text inputs don't show or hide when it should do

I have a jsfiddle here: http://jsfiddle.net/ybZvv/22/
The situation I have is that if you click on "Select All Answers" button, it will turn on all the letter buttons (al trun green). Now if you click on the "Add Question" button it appends the buttons from the top into a table row. You will see a bunch of text inputs appear below the table, this shows the values of all of the buttons which are turned on in the appended row.
This is fine. But the problem is below:
The problem though is that if you click on the "Remove All Answers" button IN THE APPENDED ROW, then all of the buttons are turned off which is fine but it does not remove/hide the text inputs for all of those values which buttons are turned off.
If you then click on the "Select All Answers" button IN THE APPENDED ROW, then it turns all ofthe buttons in the row but no text input appears showing all of the values which buttons are turned on.
So my question is that if the user clicks on the "Select All Answers" button in an appended table row, how can we get it to display all of the text inputs of the buttons which are turned on in that row?
Also if the user clicks on the "Remove All Answers" button in the appended row, I want it to remove all of the text inputs of those buttons turned off within that row. How can this be achieved?
The solution is to "trigger" a click on the buttons instead of simply taking off one class and adding another.
So instead of
$('.answerBtns:visible', context).removeClass('answerBtnsOff').addClass('answerBtnsOn');
you should use:
$('.answerBtnsOff:visible', context).trigger('click');
to simulate a click on the button to do proper handling.
Here's the edited fiddle

Append row when clicking corresponding add button

Here almost we have completed the functionality.When we clicking on add button of each row will create a new table in a row.Here the problem is while clicking the first main add button
its appending to next row of the second main row.
It should come in order while clicking the corresponding row means the sub table row should come.
See it in action here
Screenshot
http://img28.imageshack.us/img28/5499/immwa.png
try:
in addEvent function
e.innerHTML = '<button onClick="addSubRow('+row+',this);">Add</button>';
in addSubRow function:
$(html).insertAfter($(self).parent().parent())
example:
in action

similar to accordion issue but not using accordion

I have 4 div sections.
<div id= section1> Edit Button
continue button<br/>
</div <br/>
<div id= section2> Edit Button
<br/>
continue button<br/>
</div<br/>
<div id= section3> Edit Button
<br/>
continue button<br/>
</div<br/>
<div id= section4> Edit Button
<br/>
continue button<br/>
</div<br/>
in this scenario when a continue button for a respective section is clicked I will go to the next section where user has to enter inputs in text boxes.
on clicking continue I hide the controls and show a div with all inputs entered by user are written into it.
on clicking edit will show controls section of respective section and hides all other controls sections and edit buttons making user to enter only one section details but nt other sections.
so this happens with each and every section.
my problem is: sections are dynamic.. I can show or hide sections so in that case how do I maintain the continue and edit button functionality?
I need suggestions to achieve this functionality.
Assign a class for edit button and continue button first.
Then write an event handler for the button, hide all first and then make visible the button which was clicked.
Pseudo code:
// hide all button defined by their class name
$(".editButtonClass, .continueButtonClass").hide();
// --> if clicked button is a edit button do your job
if( $(this).hasClass("editButton")) {
// do your job
// --> the button which was clicked should be visible
$(this).show();
}
This is a generic approach so it should work for dynamic elements.

Categories