Dienstag, 29. November 2011

Toggle the damn Button with Dynamic Actions...

I was just done with the javaScript stuff when I ran into a blog showing how to trigger a Dynamic Action the jQuery style.So I decided to switch from the good old pure javaScript to Dynamic Actions.

I soon (after some hours, jQuery experience even less then Novice) found out that the jQuery Selector could be like this:

input[id^=runid] I think this will mean something like "fire on the input element with id starting with runid"

So I change my query a little bit...

SELECT apex_item.checkbox2(1
                          ,runid
                          ,p_item_id => 'runid'||runid) as 
       chk
      ,...

and the column header as well!

<input type="Checkbox" name="runidAll" id="runidAll" value="All"/>

And believe me or not I find the wanted tags when I check the result with firebug.

I remove everything from the Page/JavaScript/Function an Global Variable Declaration section except:

var htmldb_delete_message='"DELETE_CONFIRM_MSG"';

and I keep the line:


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

in the Page/JavaScript/Execute when Page Loads section. I could hide the button initialy by running the false action on startup, but I don't want to hide the button once for every displayed record.

Next I create an advanced Dynamic Action.

  • Name => Checkbox checked
  • Event => Change
  • Selection Type => jQuery Selector
  • jQuery Selector => input[id^=runid]
  • Condition => JavaScript expression
  • Value => this.triggeringElement.checked

The Action fires when a Checkbox is changed and returns true if the checkbox is checked.
I create a True Action connected to the Dynamic Action

if (this.triggeringElement.value=="All") $f_CheckFirstColumn(this.triggeringElement); 
$('#P3_DELETE_BUTTON').show();

and a False Action as well

if (this.triggeringElement.value=="All") {
  $f_CheckFirstColumn(this.triggeringElement);
}else{
  $("#runidAll")[0].checked = false;
}

var checkboxes = document.getElementsByName(this.triggeringElement.name);
var boxes = checkboxes.length;
for (i = 0; i < boxes; i++) {
  if (checkboxes[i].checked) return;
}
$('#P3_DELETE_BUTTON').hide();

Both Actions execute JavaScript Code and the Fire On Page Load flag is set to no!

This solution works as designed and looks a little leaner then the pure JavaScript Solution.

Source (forget about Page 4 for now)

Keine Kommentare:

Kommentar veröffentlichen