Question

I have declared a function for showing a dialog box in jQuery

<script type="text/javascript">
function showDialog(str,strtitle)
 {
if(!strtitle) strtitle='Error message';
$('#dialog').dialog('destroy');
$('#dialog').show();
$('#dialog').html(str);
$("#dialog").dialog({
    resizable: false,
    width: 400,
    color: '#BF5E04',
      open: function () {
                    $(this).parents(".ui-dialog:first").find(".ui-dialog
                                titlebar").addClass("ui-state-error");},

    buttons: {"Ok": function() { 
    $(this).dialog("close");    }},

    overlay: { opacity: 0.2, background: "cyan" },title:strtitle});}
   </script>

And I’m calling this function, in another javascript code:

   <script type="text/javascript">
    var myFile = document.getElementById('myfile');
    //binds to onchange event of the input field
    myFile.addEventListener('change', function() {
    //this.files[0].size gets the size of your file.
     var  size = this.files[0].size;
     document.write(showDialog('size','File Size Exceeds')); 
      });
     </script>

When I execute the function, it writes Undefined, Why the dialog box is not showing. The first function is declred in the head, and the second in the body portion.

Answer 1

document.write() is writing what is returned by showDialog(). Since that function isn’t returning anything, it will write Undefined.

The document.write() is not necessary, just simply call showDialog().