Utilisation de SimpleModal et ASP.NET MVC

J'utilise Simple Modal avec asp.net MVC. Je l'ai installé en utilisant la démo OSX, qui charge une vue dans la boîte de dialogue.Utilisation de SimpleModal et ASP.NET MVC

Le javascript J'utilise est:

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(); 
      }); 

     } 
    }; 


});

la fonction spectacle que je suis en train de cacher la boîte txtEmail, mais il ne semble pas être capable de le trouver.

Le code HTML qui va dans la boîte de dialogue est

<%@ 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>

Quelqu'un peut-il me aider à ce sujet?

Merci,

Source

2010-01-23 DanielJaymes

je crois que l'appel AJAX n'a pas terminé au moment où la méthode show est invoquée et donc l'élément n'existe pas au moment où vous allez cacher. Vous devez probablement déplacer tout le code suivant l'appel ajax dans le gestionnaire open dans le rappel ajax, avec le code pour masquer l'élément 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... 
      } 
     });

Source

2010-01-23 15:00:27 tvanfosson

Cela aurait du sens, mais je suis assez nouveau pour jquery, alors où serait l'appel ajax être? Désolé si c'est une question idiote. – DanielJaymes

Dans votre cas, c'est la méthode 'doSubmitSuccess' - que vous pouvez écrire en ligne en tant que valeur de la propriété success. Je vais ajouter un peu de code pour démontrer. – tvanfosson

Remerciez ce travail. – DanielJaymes

Utilisation de SimpleModal et ASP.NET MVC

Répondre

Questions connexes