Member Avatar for Catherine King

How to pass the linkbutton text to the modal popup. Now Im only getting a empty popup

<script type="text/javascript">
$("#linkbutton1").click(function(){ 
var text =$("#linkbutton1).val();
$("#modal_body").html(text);
});
function openModal() {
    $("#myModal").modal('show');
    }
</script>
<div>
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
               <div class="modal-header">
                 <h4 class="modal-title">
                        Modal Title</h4>
                </div>
                <div class="modal-body">
                <p id="modal_body" runat="server"></p>
         </div>
                <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div></div></div></div>


<asp:GridView>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton id="linkbutton1" runat="server" Text='<%#Eval("Content").ToString().Length>10 ? Eval("Content").ToString().Substring(0,10): Eval("Content").ToString()%>'
CommandArgument='<%#Eval("Content")%>' data-toggle="modal" data-target="#myModal" >
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</asp:GridView>
  • 2 Contributors
  • 1 Reply
  • 955 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by Dani

Dani AI

Generated

— the empty popup almost always comes from a combination of a client-side error and ASP.NET id/attribute behavior. The original script has a syntax error and uses .val() on a LinkButton (anchors do not expose .val()), selecting #linkbutton1 won't reliably match buttons generated inside a GridView, and CommandArgument is a server-side property (not emitted as a client data-attribute). was right to point toward the modal show event, but the handler needs to read the element that actually triggered the modal.

Recommended fixes and a minimal pattern that works in a GridView:

  • Emit the content into a data attribute that will be present on the rendered anchor (escape single quotes). Give the link a class and prevent its postback if the modal is purely client-side.
  • Use Bootstrap's show.bs.modal event and event.relatedTarget to get the clicked element, then use .data('content') or .text() as a fallback.
  • If the modal body element has runat="server", use its ClientID when selecting from jQuery.

Example markup (inside the GridView ItemTemplate):

<asp:LinkButton runat="server" CssClass="open-modal"
  data-content='<%# Eval("Content").ToString().Replace("'", "&#39;") %>'
  data-toggle="modal" data-target="#myModal"
  OnClientClick="return false;">
  <%# Eval("ShortText") %>
</asp:LinkButton>

Example client script:

$('#myModal').on('show.bs.modal', function(e) {
  var trigger = $(e.relatedTarget);
  var html = trigger.data('content') || trigger.text();
  $('#modal_body').html(html);
  // If modal_body is runat="server": $("#<%= modal_body.ClientID %>").html(html);
});

Extra notes: check the browser console for syntax errors (a single missing quote stops the script), avoid trying to select a GridView child by a fixed id, and choose whether the link should post back at all (remove postback or add server-side handling as needed).

Member Avatar for Dani

Remove the entire <script> section in the code you posted and instead use this:

<script type="text/javascript">
// This executes right before displaying the modal
$('#myModal).on('show.bs.modal', function (event) {
    var text = $("#linkbutton1").text();
    $("#modal_body").html(text);
});
</script>

There's no need for the openModal() function because you're not using it anywhere anyways.

Edited by Dani
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.