Question

I have a div containing a form. I use that div as a dialog using jquery UI dialog.

There are buttons in the form. I want to call methods from my JS file attached to the view when buttons are clicked.

Somehow the dialog can not find the functions.

HTML

<div id="Applon" title="Edit Slab" style="width: 100%; background-color: #33CCCC;">
<form action="\" id="frmDtl">
....
......


<button id="dtlCancel"  type="button" onclick="this.parent.CancelDetails()" style="font-weight: bold; color: #3333FF; width:60px;">
<div><span>Cancel</span></div>  
</button>
</form>
</div>

JS file

$(function() {
//  Dialog

    $("#Applon").dialog({
        autoOpen: false,
        height: 370,
        width: 650,
        modal: true,
        buttons: {

            Close: function() {
                $(this).dialog('close');
                //$('input:visible:enabled:first').focus();
            }
        },
        close: function() {
        }
    });
});

    function CancelDetails() {
        ....
    }

I am using this in a MVC2 view in VS2008. The view has two forms one of which is a dialog.

How do i make the dialog find my functions in the JS file when button is clicked ?

Please Help.

Answer 1

First, try and go away from inline Javascript and use selectors to fire off your functions. For instance,

$(function() {
   $("#dtlCancel").click(function(){
     CancelDetails();
  });
});

You can place this in your modal content if it is from a separate resource (PartialView).

Also, is your dialog an IFrame or just a modal? If it is just a modal, it is still part of the page it came from and does not need references to “parent”. Consider it a well-placed div that appears to be another page.

EDIT

Looking at your JS code file, it still looks like you are missing the closing brace for your $(function(){ statement

Your Code:

$(function() {
//  Dialog

    $("#Applon").dialog({
        autoOpen: false,
        height: 370,
        width: 650,
        modal: true,
        buttons: {

            Close: function() {
                $(this).dialog('close');
                //$('input:visible:enabled:first').focus();
            }
        },
        close: function() {
        }
    });
//From your code above (next line)
    }
//Replace the above with this - basically add a ); after the curly brace
});

    function CancelDetails() {
        ....
    }