Freitag, 25. November 2011

Toggle the damn button...

I know, I will be killed by my test manager(for creating moving targets), but I have to choose between html buttons (could be disabled) and template based buttons(no way to be disabled but stylish!!!). I decided to go for template based buttons and hide them (Sorry for the testteam).

I really don't like buttons that ask me if I really want to do something (delete) and tell me later that I should have picked something as a target first (0 rows deleted). So in the best possible world I would disable the delete button as long as no record is marked (checkbox) checked and enable the button otherwise. Unfortunatly that does not work, so I hide/show the button instead.

To be able to toggle the delete button I have to identify the button. Firebug shows these credetials.

<a id="B3926323806548112" class="uButton" role="button" href="javascript:apex.confirm(htmldb_delete_message,'DELETE');"><span>Delete</span> </a>

I don't want to deal with cryptic id's so I set the the attribute Static Id of the button to P3_DELETE_BUTTON. Aaahhh much better.

<a id="P3_DELETE_BUTTON" class="uButton" role="button" href="javascript:apex.confirm(htmldb_delete_message,'DELETE');"><span>Delete</span> </a>

Now I'm able to hide the button already during page start(I'm sure that there is no marked record when the page loads). I simply add this code

$('#P3_DELETE_BUTTON').hide();

to the JavaScript/Execute when Page Loads section. A Test shows that the button is not visible.

To do the toggling I add some functions to the JavasScript/Function and Global Variable Declaration section. (And I'm even more a Novice to JavaScript then to APEX)

var htmldb_delete_message='"DELETE_CONFIRM_MSG"';
var headername;

function onclick_all(self,button,name){
  //global variable to store the name of the header in the checkbox
  headername = self.name;
  $f_CheckFirstColumn(self); 
  if (self.checked){
    $(button).show();
    return;
  }else{
    $(button).hide();
    return;
  }
}

function onclick_single(self,button){
  if (self.checked){
    $(button).show();
    return;
  }else{
    var checkboxes = document.getElementsByName(self.name);
    if (headername) document.getElementsByName(headername)[0].checked = false;
    var boxes = checkboxes.length;
    for (i = 0; i < boxes; i++) {
      if (checkboxes[i].checked) return;
    }
    $(button).hide();
    return;
  }
}

So pleace have mercy! I have also added some functionality to uncheck the header whenever a single record is unchecked.

I have to capture the onClick event of the checkboxes. To do this I add thechange the call to apex_item funtcion to

SELECT apex_item.checkbox2(1
                          ,runid
                          ,'onclick="onclick_single(this,''#P3_DELETE_BUTTON'')"') as 
       chk
      ,...

Runing the query in the SQLDeveloper returns the following output.

<input type="checkbox" name="f01" value="4" onclick="onclick_single(this,'#P3_DELETE_BUTTON')" />

So I change the Column Heading of column CHK to

<input type="Checkbox" name="f01_header" onclick="onclick_all(this,'#P3_DELETE_BUTTON');">

Fine!

Source

Keine Kommentare:

Kommentar veröffentlichen