Contrôle ASP.NET en mode JQuery

Question

Ok, je suis nouveau sur JQuery, j'ai un modal qui contient un contrôle asp: Literal. Le littéral est contrôlé par le lien sur lequel vous cliquez pour activer le modal. Donc, j'avais espéré que ce serait aussi simple que de donner la valeur littérale en cliquant sur le lien, mais ce n'est pas ça.

J'espère: la valeur du littéral est définie lors du chargement de la page. Je dois donc la placer dans un panneau de mise à jour afin qu'elle change lorsque le lien est cliqué.

Ou cela pourrait être: Comme pour javascript, vous devez définir de manière dynamique la valeur du littéral avec JQuery onClick.

Merci pour votre aide.

MISE À JOUR

Voici le code HTML pour le modal:

<div class="modal-holder" id="landing-page-modal" style="display:none">
  <div class="modal">
    <div class="modal-t">
      <a href="#" class="modal-close">
        <img src="images/modal-close.gif" border="0" alt="" />
      </a>
      <div class="modal-scroll">
        <a href="#" class="modal-top-arrow">
          <img src="images/modal-arr-t.gif" alt="" />
        </a>
        <a href="#" class="modal-bottom-arrow">
          <img src="images/modal-arr-b.gif" alt="" />
        </a>
      </div>
      <div class="modal-b">
        <div class="modal-content">
          <h2><asp:Label ID="lblModal" Text="Title" runat="server" /></h2>
          <p>
            <asp:Literal ID="litModal" Text="Test Data Lives Here For Now" runat="server" />
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Voici le JQuery qui active le modal quand un lien est cliqué:

$('.article a, #menu a, #features a').click(function(){
  $('.modal-holder').css({'display': 'block'});
  return false;
});

$('.modal-close').click(function(){ 
  $('.modal-holder').css({'display': 'none'}); 
});

Je veux savoir comment changer la valeur de & "litModal &"; contrôle dans le modal avant qu'il ne soit actif.

Answer 1

Bon, vous avez donc un littéral dans votre <p>. Cela signifie que vous n'avez pas de sélecteur / descripteur direct, comme vous le feriez lorsqu'il s'agissait d'une étiquette avec un identifiant.

Mais vous pouvez dire que c'est le <div class="modal-content"> dans le landing-page-modal, toutes les parties de l'élément avec l'ID <=>:

"#landing-page-modal div.modal-content p"

Vous devez donc modifier votre fonction pour que tout soit visible:

$('.article a, #menu a, #features a').click( function(clickTarget){
  // set the text of the <p> to whatever you like. I took 
  // the text of the element that was clicked by the user.
  $('#landing-page-modal div.modal-content p').text( $(clickTarget).text() ); 

  // now make the whole thing visible
  $('#landing-page-modal').css({'display': 'block'});
  return false;
});

Answer 2

Si vous souhaitez que le modal change côté client lorsque le lien est cliqué, vous devez le définir dans le gestionnaire onClick pour le lien. Je suppose que le texte modal est basé sur la balise d'ancrage sur laquelle l'utilisateur a cliqué. litModal va se transformer en une étendue du côté du client, donc nous le trouvons ainsi.

    $('.article a, #menu a, #features a').click(function(anchor){
             var val = jQuery(anchor).text();
            // modify val as needed
            $('span#litModal').text(  val );
            $('.modal-holder').css({'display': 'block'});
            return false;
    });
    $('.modal-close').click(function(){ $('.modal-holder').css({'display': 'none'}); });

Remarque: je pars du principe que vous n’avez qu’un seul de ces éléments par page. Sinon, vous devrez trouver comment référencer le modal particulier qui s'applique au lien en question.