Combining JQuery and Normal Javascript

Question

I have 2 html regions on my page which just contain text that is used in JQuery dialog boxes.
At the moment one dialog is displayed onload and the other is displyed on an onblur event on a page item. I am trying to alter the onblur, so it only fires if the page item is null
In my header I have
**<script type="text/javascript" src="&JAVASCRIPT_DIR.jquery/jquery-1.3.2.js"></script>
**<link type="text/css" href="&CSS_DIR.jquery-ui-1.7.2.custom.css" rel="stylesheet" />
**<script type="text/javascript" src="&JAVASCRIPT_DIR.jquery/jqueryui/jquery-ui-1.7.2.custom.js"></script>
**<script type="text/javascript">
$(function() {
**This is the onload message
$message = $("#message");
$message.dialog({
bgiframe: true,
modal: true,
buttons:
{ "Ok": function()  { $(this).dialog("close"); } } });
**This is the onblur message
function notNull(object){ if(object.value=="")
$notnull = $("#notnull");
$notnull.dialog({
autoOpen: false,
bgiframe: true,
modal: true,
buttons:
{ "Ok": function()  { $(this).dialog("close"); } } })
**</script>
on page item
**onblur="notNull(this);"
The onload message fires ok but the onblur does not work.
Any ideas where I am going wrong please
Gus

Answer 1

Hello Gus,
Maybe [this blog post|http://roelhartman.blogspot.com/2008/12/apex-how-to-emphasis-required-fields.html] will help (shameless plug).
The function you're looking for is:
function checkRequiredField(pThis){
if (!(pThis.value)){
     alert('Field must be entered');
     setTimeout(function(){pThis.focus();}, 5);
}Recently I changed the code to :
$(function(){
  // Add the requiredField class to all Fields with Required Labels
  $(".t502RequiredLabelwithHelp").parent().parent().next().children()
    .not('[type=hidden], [class=radio_group], [class=display_only]')
    .addClass("requiredField")
    .attr("onblur",'checkRequiredField(this)');
function checkRequiredField(pThis){
  $(pThis).removeClass("alertField");
  if (!(pThis.value)){
    $(pThis).addClass("alertField");
    $(pThis).append('<div id="alert" title="Field must be entered">Please enter a valid value for this field.</div>');
    $("#alert").dialog({
                         bgiframe: true,
                   modal: true,
                   minHeight : 100,
                   buttons: {
                     Ok: function() {
                     $(this).dialog('close');
                     $("#alert").remove();
}That way I didn't need a roundtrip to the server anymore, just plain jQuery stuff.
Hopes this sets you in the right direction!
Greetings,
Roel
http://roelhartman.blogspot.com/
You can reward this reply by marking it as either Helpful or Correct ;-)