How to convert javascript alert message into an Inline message in Apex Page

Question

Hi All. Im new to Apex.
Present Approach -
I have a dynamic report region developed using API's like APEX_ITEM etc. I am using java scripts to validate these dynamic items and popup alert messages as shown below -
function ValidateNotObservedCB(p_row_num)
var v_row_num = p_row_num;
var v_not_observed_cb_status = document.getElementById('f_notobserved_'+v_row_num).checked;
var v_not_in_district_cb_status = document.getElementById('f_notindistrict_'+v_row_num).checked;
var v_program_code = document.getElementById("f_program_code_"+v_row_num).value;
if ( (v_program_code.length>0)&& ( document.getElementById('f_notobserved_'+v_row_num).checked==true ))
     bold alert("You have already entered a program code.") bold
     document.getElementById('f_notobserved_'+v_row_num).checked=false ;
     document.getElementById('f_notobserved_'+v_row_num).value='N';
} else if ( (v_program_code.length==0)&& ( document.getElementById('f_notobserved_'+v_row_num).checked==true )) {
     document.getElementById('f_notobserved_'+v_row_num).value='Y';
     document.getElementById('f_notobserved_'+v_row_num).checked=true ;
} else
     document.getElementById('f_notobserved_'+v_row_num).checked=false ;
     document.getElementById('f_notindistrict_'+v_row_num).checked=false;
     document.getElementById('f_notindistrict_'+v_row_num).value='N';
     document.getElementById('f_notobserved_'+v_row_num).value='N';
Question/Issue - How can I convert these alert messages into Inline messages to show on the page, similar to what appears when we do Item Validations in APEX.
Waiting for responses as this is an urgent requirement.
Thanks in Advance,
Madhu

Answer 1

Hi,
I did with jQuery small sample
http://apex.oracle.com/pls/otn/f?p=40323:36
Page HTML header is
<script type="text/javascript">
$(function(){
  var lImg = $('<img alt="" class="pb" style="float: right;" src="/i/delete.gif"/>');
  var lMesg = $('<div id="MESSAGE" style="border-top: 1px solid rgb(142, 170, 142); border-bottom: 1px solid rgb(142, 170, 142); padding: 5px; background: rgb(235, 241, 235) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 450px;" class="t14notification"></div>');
  $('.pb').live('click',function(){
    $x_Remove("MESSAGE");
  $('#SUBMIT').click(function(){
    if($('#MESSAGE').length == 0){
      $('#t14Messages').children().append($(lMesg));
       $(lMesg).append($(lImg));
       $(lImg).after($('#P36_NOTIFICATION').val());
    }else{
       $('#MESSAGE').text('');
       $('#MESSAGE').append($(lImg));
       $(lImg).after($('#P36_NOTIFICATION').val());
</script>I do not know does it help. Using this depend much on theme, defined class and IDs.
Br, Jari