CODEWITHSUNDEEP
asp.netbootstrap-modal
Tay
Tay

Reputation: 300

Bootstrap modal is opening but not showing any data

Inside my page I have a grid which has an edit button. When I press that button I have to fetch its details data and then I need to show those inside a bootstrap modal.

first let me show you the modal,

<div id="template" class="modal fade ui-draggable ui-draggable-handle in" role="dialog" aria-hidden="true" tabindex="-1"
     style="overflow-y: hidden; padding-left: 16px;">
  <div class="modal-dialog setting-modal-dialog" style="width: 82% !important; margin-top: 2px !important;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×
          </span>
        </button>
        <h4 class="modal-title">Edit
        </h4>
      </div>
      <div class="modal-body" style="padding: 0">
        <div class="template-content" id="div01" style="">
          <div id="divTemplateCreatesettings" class="fieldset01">
            <table class="quiz-template-table">
              <tbody>
                <tr>
                  <td class="title">Header Text
                  </td>
                  <td class="title-data">
                    <asp:TextBox runat="server" ID="txtHeaderText" Width="326px" ClientIDMode="Static">
                    </asp:TextBox>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Now let me show you how I am calling this modal,

protected void btnEdit_OnClick(object sender, EventArgs e){
//calling and displaying data..
// No issue here..
// calling Modal..
ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "key00",
"openModal('');",
true);
}


function openModal(sender, args) {
        debugger;
        $('#template').modal('show');
        return false;
    }

Now everything is working as expected , modal is displaying but is't not showing any data.. Please help me . Thanks & Regards enter image description here

enter image description here

Upvotes: 1

Views: 417

Answers (1)

Tay
Tay

Reputation: 300

I have solved my issue,

First wrap the modal content inside an update panel like this,

<div id="template" class="modal fade ui-draggable ui-draggable-handle in" role="dialog" aria-hidden="true" tabindex="-1"
     style="overflow-y: hidden; padding-left: 16px;">
  <div class="modal-dialog setting-modal-dialog" style="width: 82% !important; margin-top: 2px !important;">
   <asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
            <ContentTemplate>
                  // .. rest of the code.. 
    <div class="modal-content">

and while calling

event_handler

{
ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "key00",
                        "openModal('');",
                        true);
 upModal.Update();
}

Now it will binding the data but there is an another issue, if there is any script present which is responible for any kind of work wont be working now.. because: Why Javascript not work after firing Updatepanel in asp.net??

and this link will help you to fix that problem .

Upvotes: 2

Related Questions