2010-01-23 1 views
0

Я использую Simple Modal с asp.net MVC. Я установил его с помощью демонстрации OSX, которая загружает представление в диалог.Использование SimpleModal и ASP.NET MVC

Javascript я использую:

jQuery(function($) { 

    $("input.ema, a.ema").click(function(e) { 
     e.preventDefault(); 
     $("#osx-modal-content").modal({ 
      appendTo: 'form', 
      overlayId: 'osx-overlay', 
      containerId: 'osx-container', 
      closeHTML: '<div class="close"><a href="#" class="simplemodal-close">X</a></div>', 
      minHeight: 80, 
      opacity: 65, 
      position: ['0', ], 
      overlayClose: true, 
      onOpen: OSX.open, 
      onClose: OSX.close, 
      onShow: OSX.show 

     }); 
    }); 

    var OSX = { 
     container: null, 
     open: function(d) { 
      var self = this; 
      $.ajax({ 
       url: "/Message/UserMessage/", 
       type: 'GET', 
       dataType: 'html', // <-- to expect an html response 
       success: doSubmitSuccess 
      }); 
      function doSubmitSuccess(result) { 
       $('div#osx-modal-data').html(result); 
      } 

      self.container = d.container[0]; 
      d.overlay.fadeIn('slow', function() { 
       $("#osx-modal-content", self.container).show(); 
       $('div#osx-modal-title').html("Send Email"); 
       var title = $("#osx-modal-title", self.container); 
       title.show(); 

       d.container.slideDown('slow', function() { 
        setTimeout(function() { 
         var h = $("#osx-modal-data", self.container).height() + 
         title.height() + 
         20; // padding 
         d.container.animate({ 
          height: h 
         }, 200, function() { 
          $("div.close", self.container).show(); 
          $("#osx-modal-data", self.container).show(); 

         }); 
        }, 300); 
       }); 
      }) 

     }, 
     close: function(d) { 
      var self = this; 
      d.container.animate({ 
       top: "-" + (d.container.height() + 20) 
      }, 500, function() { 
       self.close(); // or $.modal.close(); 
      }); 
     }, 
     show: function(d) { 
      var self = this; 
      $("#txtEmail", self.container).hide(); 
      }); 

     } 
    }; 


}); 

На функции шоу я пытаюсь скрыть поле txtEmail, но он не кажется, чтобы быть в состоянии найти его.

HTML, который собирается в диалог является

<%@ Page Language="VB" Inherits="System.Web.Mvc.ViewPage" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>CreateMessage</title> 
</head> 
<body> 
    <div> 

     <p> 
      <input id="txtEmail" type="text" style="width: 90%" /></p> 
     <p> 
      <textarea id="TextArea1" cols="20" rows="5"></textarea></p> 
     <p> 
      <input id="submitmsg" type="submit" value="Send" /></p> 
    </div> 
</body> 
</html> 

Может кто-нибудь помочь мне в этом?

Спасибо,

ответ

1

Я считаю, что вызов AJAX не завершен к тому времени метод show вызывается и, таким образом, элемент не существует в то время, что вы собираетесь, чтобы скрыть его. Вероятно, вы должны переместить весь код после вызова ajax в обработчике open в обратный вызов ajax вместе с кодом, чтобы скрыть элемент txtEmail.

var OSX = { 
    container: null, 
    open: function(d) { 
     var self = this; 
     $.ajax({ 
      url: "/Message/UserMessage/", 
      type: 'GET', 
      dataType: 'html', // <-- to expect an html response 
      success: function(html) { 
       $('div#osx-modal-data').html(result) 
             .find("#txtEmail") 
             .hide(); 
       ...rest of code to display the dialog... 
      } 
     }); 
+0

Это имело бы смысл, но я совершенно новый для jquery, так где же будет обратный вызов ajax? Извините, если это глупый вопрос. – DanielJaymes

+0

В вашем случае это метод 'doSubmitSuccess', который, кстати, вы можете просто написать inline как значение свойства success. Я добавлю немного кода для демонстрации. – tvanfosson

+0

Спасибо, что работает. – DanielJaymes