ASP.Net UpdatePanel + Gridview + Hyperliens + plugin jQuery nyroModal - nouvelle ouverture de la fenêtre entière, mais je veux juste un modal

StackOverflow https://stackoverflow.com/questions/856311

Question

J'ai un UpdatePanel avec un GridView à l'intérieur.

Le Gridview a une TemplateColumn ayant un lien hypertexte.

En utilisant jQuery au début de la page, je mets tous ces liens pour devenir des hyperliens modal nyroModal. C'est à dire. donc quand vous cliquez dessus, la page cible est chargée dans un dialogue modal. Ce code est: 

<script type="text/javascript">
    $(document).ready(function(){
        $(".modal").nyroModal();
    });
</script>

Si je retire le UpdatePanel, le code nyroModal ci-dessus fonctionne parfaitement bien. Mais avec l'UpdatePanel là, il enfourne les appels nyroModal et ouvre les liens que les fenêtres de toutes nouvelles premières / onglets dans Firefox. Le UpdatePanel essaie d'être trop intelligent et lancer un postback etc.

Dois-je inscrire en quelque sorte l'appel nyroModal pour chaque bouton au moment du rendu ou quelque chose à dire .Net / UpdatePanel pour « rester loin l'enfer »? J'ai joué un peu avec RegisterClientScriptBlock etc mais ne peut pas sembler pour le rendre heureux. Il semble que ce tracas pour enregistrer script côté client avec le code côté serveur .Net. Je trouve lourd et frustrant:)

Merci beaucoup pour toute suggestion ou idée.

Était-ce utile?

La solution

essayez ceci: 

<script type="text/javascript">
    $(document).ready(function(){
        /*
            This binds a callback to the click event of all 
            elements with the 'modal' class, even ones that are
            updated inside an UpdatePanel.
        */
        $(".modal").live('click', function(){
            /*
                When the element is clicked, open the nyroModal dialog
                manually. (If the element is a link, nyroModal will 
                automatically get the content based on the link's href attribute.)
            */
            $(this).nyroModalManual();
        });
    });
</script>

Modifier

J'ai créé une page qui semble fonctionner très bien. Le code source complet est ci-dessous.

Remarque: Il y a une chose importante que je ne l'ai pas dans le code ci-dessus. J'ai oublié de prévenir le lien de réellement changer l'emplacement du navigateur, donc notez le dans le code evt.preventDefault(); ci-dessous (Désolé que: P). 

<%@ Page Language="C#" %>
<script runat="server">
  public void Page_Load()
  {
    BindGridViewUrls();
  }

  public void GridViewUrls_PageIndexChanging(object sender, GridViewPageEventArgs e)
  {
    GridViewUrls.PageIndex = e.NewPageIndex;
    BindGridViewUrls();  
  }

  public void BindGridViewUrls() {
    var Urls = new[]{
      new {UrlText="Google", Url="http://google.com"},
      new {UrlText="Stack Overflow", Url="http://stackoverflow.com"},
      new {UrlText="XKCD", Url="http://xkcd.com"},
      new {UrlText="Google Reader", Url="http://google.com/reader"},
      new {UrlText="reddit", Url="http://reddit.com"},
      new {UrlText="Hacker News", Url="http://news.ycombinator.com"},
      new {UrlText="Ubuntu", Url="http://ubuntu.com"},
      new {UrlText="Twitter", Url="http://twitter.com"},
      new {UrlText="YouTube", Url="http://youtube.com"},
      new {UrlText="Wikipedia", Url="http://en.wikipedia.org"},
      new {UrlText="Coding Horror", Url="http://codinghorror.com"},
      new {UrlText="Mozilla", Url="http://mozilla.org"},
      new {UrlText="jQuery", Url="http://jquery.com"},
      new {UrlText="NyroModal", Url="http://nyromodal.nyrodev.com/"},
    };
    GridViewUrls.DataSource = Urls;
    GridViewUrls.DataBind();
  }
</script>
<!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>UpdatePanel Test</title>
  <script 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
  </script>
  <script src="jquery.nyroModal-1.4.2.js"></script>
  <script>
    $(function(){
      $('.modal').live('click', function(evt){
        $(this).nyroModalManual({minWidth:750});
        evt.preventDefault();
      });
    });
  </script>
</head>
<body>
  <form runat="server">
  <div>
    <asp:ScriptManager runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel runat="server">
      <ContentTemplate>
        <asp:GridView runat="server" ID="GridViewUrls" AllowPaging="true"
          PageSize="5" OnPageIndexChanging="GridViewUrls_PageIndexChanging">
          <Columns>
            <asp:HyperLinkField DataTextField="UrlText"
              DataNavigateUrlFields="Url" ControlStyle-CssClass="modal"
            />
          </Columns>
        </asp:GridView>
      </ContentTemplate>
    </asp:UpdatePanel>
  </div>
  </form>
</body>
</html>

Autres conseils

Je vous suggère d'utiliser la boîte de dialogue de l'interface utilisateur jquery.

Reportez-vous cela pour comment l'utiliser: http://jqueryui.com/demos/dialog

Je l'ai mis en place quelque chose de semblable à ce que vous voulez en utilisant le dialogue et il fonctionne très bien.
Il vous suffit d'ajouter l'arrière de dialogue à la forme comme ceci: 

jQuery(".modal").each(function() {
      var popup = jQuery(this);
      popup.parent().appendTo(jQuery("form:first"));
});
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top