Jquery – ASP.NET control in JQuery modal

asp.net-3.5controlsjquery

Ok, I am new to JQuery, I have a modal that has a asp:Literal control in it. The literal is controled by whatever link is clicked to activate the modal. So, I had hoped it would be as easy as giving the literal value onClick of the link but that's not it.

I'm hoping: the value of the literal is set on the page load so I have to put it in an update panel so it will change when the link is clicked.

Or it could be: Like javascript you have to dynamically set the value of the literal with JQuery onClick.

Thank you for your help.

UPDATE

Here is the HTML for the 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>

Here is the JQuery that activates the modal when a link is clicked:

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

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

I want to know how to change the value of the "litModal" control within the modal before it is active.

Best Solution

Okay so you have a literal in your <p>. That means you have no direct selector/handle to it, like you would when it was a label with an ID.

But you can say it is the <p> inside the <div class="modal-content">, all part of the element with ID landing-page-modal:

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

So you need to modify your function that makes the whole thing 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;
});
Related Question