ASP.NET control in JQuery modal

Question

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.

Answer 1

I don't know how to do that with jQuery and UpdatePanels, but with Ra-Ajax it would be 5 lines of code. Just think of the ext:Window as a Panel, create a Ra Button and a Ra Label inside of it. Handle the Click event of the button and from the codebehind set the Label.Text property to whatever you wish...

Not an answer to your question but definitely an answer to your problem...

Answer 2

If you want the modal to change client-side when the link is clicked, you will need to set it in the onClick handler for the link. I'll assume that the modal text is based on the anchor tag that is clicked. litModal is going to turn into a span on the client side so we find it that way.

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

Note: I'm making the assumption that you only have one of these per page. If not, then you'll need to figure out how to reference the particular modal that applies to the link in question.

Answer 3

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