Why dialog just works for the first time to open my dialog box?

Question

I have a div (mvc4 razor):

<div onclick='dialogtrigger(this)'>send</div>

when user click on this div it goes to loading a view on popup dialog box and show it to user.

it works fine for the first time that user click it, after that when user close dialog box and want to reopen it again it gives me this error :

0x800a01b6 - JavaScript runtime error: Object doesn't 
support property or method 'dialog'

I clean my browser cache and check my script file if it can not support dialog why works for the first time?

my function code:

$.ajax({
    url: "OpenSendDialog",
    type: "GET",
})
.done(function (result) {
    $("#clientdetailmodal").html(result).dialog({
        autoOpen: true, modal: true, show: {
            effect: "blind",
            duration: 500
        }
    });
});
}

in my main view:

<div id="clientdetailmodal"></div>

and my controller:

 [HttpGet]
 public ActionResult OpenSendDialog()
  {
    return view();
  }

Answer 1

I think that a problem with your function and her scope...

look here, i hope that'll help you :

var dialogtrigger=null; // global scope
$(function() {
  dialogtrigger = function (){
      //replace with your ajax call
      $("#clientdetailmodal").html($('#content')).dialog({
          autoOpen: false, modal: true, show: {
              effect: "blind",
              duration: 500
          }
      });      
  }

$( "#opener" ).click(function() {
  // or destruct your modal on close and re-call your ajax
  $( "#clientdetailmodal" ).dialog( "open" );

});

});