Deselecting radios in multiple grids on the same form

gstullo

I have reviewed the following post and can get the deselect radio button to appear and work in the first grid that appears on our form however we have multiple grids and I cannot seem to get the code to work on subsequent grids.

Does anyone have any thoughts on this?

Thanks!

kristiak

What we do is to assign code=0 to the top button and call it "Nothing Selected". This works very well!

haensel

Hi

Do you alter the id for the anchor div?
<div id="UndoRadio_Col"></div>

e.g.
for the first group
<div id="UndoRadio_Col1"></div>

for the second group
<div id="UndoRadio_Col2"></div>

Regards,
Christian

gstullo

I have updated it at the top, tried updating it to match a few lines later and tried updating the code towards the end to indicate the correct column number(s) of the radio fields however nothing is working yet...

<div id="UndoRadio_Col1"></div> <script type="text/JavaScript" language="JavaScript" src="includes/jmesa/jquery.min.js"></script> <script> $.noConflict(); jQuery(document).ready(function($){ function Display_Undo_Buttons_In_Column(ColNo){ $('#UndoRadio_Col').parent().parent().parent().parent().find('tbody > tr:visible').each(function(i){ // only add the undo image, if it doesn't exist if ($(this).children('td:nth-child('+ColNo+')').find('.undoradio').length == 0){ //if the radio's are vertical, then br-tags exist, so put the undo button after the last br if ($(this).children('td:nth-child('+ColNo+')').children('br').length != 0){ $(this).children('td:nth-child('+ColNo+')').children('br').last().after("<img class='undoradio' title='Click to deselect entry' alt='Click to deselect entry' src='images/bt_Restore.gif'>"); } else{ //if the radio's are horizontal, add the undobutton after the last radio-button of the group $(this).children('td:nth-child('+ColNo+')').children('input[type=radio]').last().after("<img class='undoradio' title='Click to deselect entry' alt='Click to deselect entry' src='images/bt_Restore.gif'>"); } } }); }; function UndoRadio(){Gr $("img.undoradio").each(function (){ $(this).click(function (e){ var groupName = $(this).parent().find('input[type=radio]').attr('name'); var radioGroup1 = $(this).parent().parent().find('input[name="'+groupName+'"]'); for (i = 0; i < radioGroup1.length; i++){ radioGroup1[i].checked = false; } radioGroup1.change(); }); }); }; //repeat the procedure when the add-button is clicked $('.button_search').click(function(){ Display_Undo_Buttons_In_Column(2); UndoRadio(); }); //and run the procedure when the doc is loaded Display_Undo_Buttons_In_Column(2); UndoRadio(); }); </script></div>

haensel

Do you have any experience with javascript? You need to update the code also but it's a bit tricky for somebody without experience.

e.g. change
$('#UndoRadio_Col')
to
$('#UndoRadio_Col1')

I'm sorry but I currently have no time for a complete solution but I'll have a look at it later.

Regards,
Christian

gstullo

Thank you for the tip. I have it working now.

haensel

The solution might be helpful for somebody else if you don't mind to publish it.

Regards,
Christian

knelaus

Have a look at my comment: https://forums.openclinica.com/discussion/comment/17129/#Comment_17129

We are useing this solution in all our crf's

Regards,
Knud

haensel

Hi Knud

Putting most of the js code into an extra file is indeed more elegant and professional than putting it into the crf definitions.
If you add a short explanation to the openclinica wikibook more community members might be aware of it.

Regards,
Christian

gstullo

haensel said:

The solution might be helpful for somebody else if you don't mind to publish it.

Regards,
Christian

The solution is to add 1, 2, 3, etc. to the end of "_Col" in every instance of UndoRadio_Col for each group. Each group needs a 1, 2, 3. etc.

Then at the bottom of the code, change/add "Display_Undo_Buttons_In_Column(n) to each column number that has radio buttons in the group of interest. Like above, this must be updated for each group.

//repeat the procedure when the add-button is clicked $('.button_search').click(function(){ Display_Undo_Buttons_In_Column(2); UndoRadio(); }); //and run the procedure when the doc is loaded Display_Undo_Buttons_In_Column(2); UndoRadio(); });

haensel

Sounds as if the attentive reader can implement it.

Thank you and regards,
Christian