asp.net mvc 3 - jQuery dialog for a partial view is not opening modal -

i have built jquery dialog show partial view entering data.

i have built action link:

    @html.actionlink("add new service provider", "partialnewcust", "customer", null,    new { @class = "addserviceproviderlink" }) 

i have controller action:

public actionresult partialnewcust()         {         return partialview();         } 

and div / jquery code:

<div id="addserviceprovdialog" title="add service provider"></div>   <script type="text/javascript"> var linkobj; $(function () {     $(".addserviceproviderlink").button();      $('#addserviceprovdialog').dialog(     {         autoopen: false,         width: 400,         resizable: false,         modal: true,         buttons:         {             "add": function () {                 $("#addproviderform").submit();             },             "cancel": function () {                 $(this).dialog("close");             }         }     });      $(".addserviceproviderlink").click(function () {         linkobj = $(this);         var dialogdiv = $('#addserviceprovdialog');         var viewurl = linkobj.attr('href');         $.get(viewurl, function (data) {             dialogdiv.html(data);             //validation             var $form = $("#addproviderform");             // unbind existing validation             $form.unbind();             $form.data("validator", null);             // check document changes             $.validator.unobtrusive.parse(document);             // re add validation changes             $form.validate($form.data("unobtrusivevalidation").options);             //open dialog             dialogdiv.dialog('open');             return false;         });      });  }); 

the partial view renders fine opens new page , not come modal dialog.

what doing wrong.

on side note: autocomplete code not working jquery datetime picker is...

$(document).ready(function()  { $(".date").datepicker(); } );   $(document).ready(function () { $("#custbyname").autocomplete(     {         source: function (request, response) {             $.ajax(             {                 url: "/cases/findbyname", type: "get", datatype: "json",                 data: { searchtext: request.term, maxresults: 10 },                 contenttype: "application/json; charset=utf-8",                 success: function (data) {                     response($.map(data, function (item) {                         return {                             label: item.customername,                             value: item.customername,                             id: item.customerid                         }                     })                     );                 }             });         },         minlength: 3     });  }); 

my guess misplaced return false statement in button's click handler, default behavior not prevented expect, , link followed:

$(".addserviceproviderlink").click(function () {     ...     $.get(viewurl, function (data) {         dialogdiv.html(data);         ...         dialogdiv.dialog('open');          // return statement should in "click" handler,         // not in success callback of .get() method !         return false;     });  }); 

your code should be:

$(".addserviceproviderlink").click(function () {     ...     $.get(viewurl, function (data) {         ...     });      // return here prevent default click behavior     return false; });