Bootstrap modal is opening but not showing any data - asp.net

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

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 .

Related

Pause video after modal closes

I'm having trouble on getting the video to pause after my modal closes. I'm not an expert on javascript, although I understand enough to mess with it and tweak it to my needs.
I'm not sure where to put the new code to pause it once the user clicks the X button...
Can someone help me out? Thanks!
CODE:
<div class="dcontainer">
<div class="dhex">
<div class="dshape"></div>
</div>
<b>Walter</b></div>
<div class="orgchattitlehead">Head</div>
<button id="myBtnWalter"></button>
<div id="myModalWalter" class="modalWalter">
<div class="modal-contentWalter" style="text-align: left;">
<div class="title" style="text-align: left;">
<span style="font-size: 14pt;"><b><span style="font-size: 18pt;">Walter</span><br /></b></span><span style="font-size: 14pt;">2009 <br /></span><span style="font-size: 14pt;">University</span> <br /><span style="font-size: 14pt;"><br /></span>
<span class="closeWalter">×</span></div>
</div>
<div class="aboutvid" style="text-align: left;"><iframe width="374" height="210" src="https:///app/detail/video/8178476/embed" id="aboutvid" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<script>
var modalWalter = document.getElementById("myModalWalter");
var btn = document.getElementById("myBtnWalter");
var span = document.getElementsByClassName("closeWalter")[0];
btn.onmouseover= function() {
modalWalter.style.display = "block";
}
span.onclick = function() {
modalWalter.style.display = "none";
}
</script>
</div>
</div>

Bootstrap modal inside the repeater ASP.Net

I am trying to show the information in a modal from a repeater. My sample code is fllowing.
<asp:Repeater ID="rptData" runat="server" OnItemDataBound="rptData_ItemDataBound">
<HeaderTemplate>
<table class="table table-striped">
<thead class="bg-secondary text-info">
<tr>
<th>Name</th>
<th>Type of Membership</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><button type="button" class="btn btn-link" id="memberNameList"
data-toggle="modal" data-target="#memberDetailsModal" runat="server"></button></td>
<td><asp:Literal id="typeOfMembershipList" runat="server"></asp:Literal></td>
</tr>
<div class="modal fade" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header border-bottom-0">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-title text-center">
<h3 class="font-weight-bold" id="memberName" runat="server">Member Name</h3>
<p class="font-weight-bold mb-0" id="typeOfMembership" runat="server">General Member</p>
</div>
</div>
</div>
</div>
</div>
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</FooterTemplate>
</asp:Repeater>
I can get all the data from the database in the table in multiple rows. But when I click the button from any row to pop up the modal, it's showing the information from the first row only in the modal. I am getting that, the modal is binding only the information from the first row. I am not sure why.
You can use the same modal for every row. Pass the values using HTML data-* attributes to the modal and then, you can use jQuery to get the data and modify the modal dynamically.
Bootstrap Docs: Varying modal content

Asp.net bootstrap modal popup not working correctly

I'm trying to use asp.net grid row button for modal popup, its working for alert but cant call modal popup , how can i fix it?
<div id="confirm" class="modal hide fade">
<div class="modal-body">
Are you sure?
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
<button type="button" data-dismiss="modal" class="btn">Cancel</button>
</div>
</div>
<asp:Button ID="btnDeletes" ToolTip="Delete" CommandArgument="<%# Container.DataItemIndex %>" OnClick="btnDelete_Click1" OnClientClick="test();"
CssClass="GridDeletebtn" runat="server" />
<script>
function test()
{
$('#confirm').show();
alert('df');
}
</script>
When you call, alert('df'), thread will be blocked until you click the "Ok" button of the alert then the postback will happen followed by.
But when you show the modal dialog only (without alert), it won't block the thread and hence postback will happen immediately.
Hence your modal dialogue will be disappeared after postback.
When you add `return false' as below, it will stop the postback.
<asp:Button ID="btnDeletes" ToolTip="Delete" CommandArgument="<%# Container.DataItemIndex %>" OnClick="btnDelete_Click1" OnClientClick="test();return false;" CssClass="GridDeletebtn" runat="server" />
Script
<script>
function test()
{
$('#confirm').modal('show');
//alert('df');
}
</script>
Html
<div id="confirm" class="modal hide fade" tabindex="-1" role="dialog">
<div class="modal-body">
Are you sure?
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
<button type="button" data-dismiss="modal" class="btn">Cancel</button>
</div>
</div>
If you can share a URL that I can test. Then I will try it.
Moreover try to catch class name instead of id.
some thing like below.
$('.modal').show();
if you using gridview or repeater then call modal popup by below code
its working for me
<a class="btn btn-sm btn-warning" data-toggle="modal" data-target="#Remark_Modal<%# Eval("PrimaryID")%>">
<i class="fa fa-eye"></i> Details
</a>
<!--Modal-->
<div class="modal fade" id='Remark_Modal<%# Eval("PrimaryID")%>' role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content card-blue-fill">
<div class="modal-header card-header">
<button type="button" class="modal-close" data-dismiss="modal" aria-label="Close">
<i class="fa fa-2x fa-close"></i>
</button>
<h4 class="modal-title"><i class="fa fa-eye"></i> <%# Eval("MissionName")%></h4>
</div>
<div class="modal-body card-block">
<%# Eval("Remark")%>
</div>
</div>
</div>
</div>
Use a ScriptManager tag at the beginning of your modal, else your ScriptManager.RegisterStartupScript would not work. Below is the workaround that I use.
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><asp:Label ID="errorMessage" runat="server" Text=""></asp:Label></h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
Code-behind
private void showModal(string error)
{
message.Text = error;
upModal.Update();
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$(document).ready(function () {$('#myModal').modal();});", true);
}
Call the above showModal() function with appropriate message. You may have to add modal header & modal footer if needed.

Table inside form and both inside modal in Twitter Bootstrap does not display right, padding are missing

I have a situation here and perhaps solution is simple but I can't find a way out until now so I need some help.
I have this HTML code:
<div class="modal fade in" id="selectFabricante" tabindex="-1" role="dialog" aria-labelledby="selectFabricante" aria-hidden="false" data-backdrop="static" style="display: block; padding-right: 17px;"><div class="modal-backdrop fade in" style="height: 611px;"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Cerrar</span></button>
<h4 class="modal-title">Seleccione uno o más fabricantes</h4>
</div>
<div class="modal-body">
<form id="fabForm" method="post" class="form-horizontal bv-form" novalidate="novalidate"><button type="submit" class="bv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
<div class="form-group">
<div class="table-responsive">
<table class="table table-condensed">
<thead>
<tr>
<th><input type="checkbox" id="toggleChkSelFabricante" name="toggleChkSelFabricante"></th>
<th>Fabricante</th>
</tr>
</thead>
<tbody id="selFabricanteBody"><tr data-idproductosolicitud="1" data-id="1"><td><div class="checkbox"><label><input type="checkbox" name="fabLinkChoice[]" value="1"></label></div></td><td>Dist1</td><td>DR</td><td class="has_pais fabTd-1"><span id="14">México</span>, <span id="15">Nicaragua</span>, <span id="16">Panamá</span></td><td>1212212</td></tr><tr data-idproductosolicitud="1" data-id="1"><td><div class="checkbox"><label><input type="checkbox" name="fabLinkChoice[]" value="1"></label></div></td><td>Dist1</td><td>DR</td><td class="has_pais fabTd-1"><span id="14">México</span>, <span id="15">Nicaragua</span>, <span id="16">Panamá</span></td><td>1212212</td></tr></tbody>
</table>
</div>
</div>
<div>
<button type="button" class="btn btn-danger" data-dismiss="modal">Regresar</button>
<button type="submit" class="btn btn-primary" disabled="" id="btnAgregarSelFabricante"><i class="fa fa-save"></i> Agregar</button>
</div>
</form>
</div>
</div>
</div>
</div>
Which render as image below shows:
What can be wrong in that markup? I'm using latest version of Twitter Bootstrap. Any help? Advice?
Some clarifications:
I need the table inside the form because it's tabular data and semantic I think this is the right choice
I need the form because I'm using BootstrapValidator plugin and as says here in docs that the right markup, and I need to check at least one checkbox is checked before enable the submit button and allow send the form
Remove the element <div class="form-group"> and its end tag surrounding <div class="table-responsive">. That will fix the padding issue. You also have an issue with the checkbox class. If you remove the checkbox class from the <div> containing the checkbox it'll align properly.

Display Bootstrap Modal from Asp.Net Webforms

Need Suggestions, how to open a twitter bootstrap modal, from Asp.net Webform code behind?
I want to open the modal based on some requirement at the moment of the save. Once user click on the save button , it runs the validations in code behind and if there are any validation errors , display all errors in bootstrap modal dialog. This all should happen on Save button click.
I tried with below piece of code , but it prompts me java script error "Error: Object doesn't support property or method 'modal'". Thanks
Asp.Net Webforms 4.5
Bootstrap V3.0.1
JQuery-1.9.0.js
jquery-ui-1.8.24.js
Default.aspx
<asp:Content runat="server" ID="DisplayContent" ContentPlaceHolderID="DisplayContent">
<div class="container">
</div>
</asp:Content>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<div class="container">
<div class="btn-group">
<asp:Button ID="btnSubmit" class="btn-info" runat="server" Text="Submit"
OnClick="btnSubmit_Click"></asp:Button>
</div>
</div>
<%--Bootstrap Modal Dialog--%>
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Validation Errors List for HP7 Citation</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
</asp:Content>
Default.aspx.cs
protected void btnSubmit_Click(object sender, EventArgs e)
{
ScriptManager.RegisterClientScriptBlock(this, this.GetType(),"none", "
<script>$('#mymodal').modal('show');</script>", false);
}
Script order defined in master page
<asp:PlaceHolder ID="PlaceHolder1" runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
<%: Scripts.Render("~/bundles/jquery") %>
<%: Scripts.Render("~/bundles/bootstrap") %>
<%: Scripts.Render("~/bundles/common") %>
</asp:PlaceHolder>
First of all, I suggest you put your Modal in an UpdatePanel and set the Title and Body from CodeBehind. By this trick, you don't need to create a separate Modal for each button or each message. So I modify your code and add an UpdatePanel:
<div class="container">
<div class="btn-group">
<asp:Button ID="btnSubmit" class="btn-info" runat="server" Text="Submit"
OnClick="btnSubmit_Click"></asp:Button>
</div>
</div>
<!-- Bootstrap Modal Dialog -->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><asp:Label ID="lblModalTitle" runat="server" Text=""></asp:Label></h4>
</div>
<div class="modal-body">
<asp:Label ID="lblModalBody" runat="server" Text=""></asp:Label>
</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
and in CodeBehind:
protected void btnSubmit_Click(object sender, EventArgs e)
{
lblModalTitle.Text = "Validation Errors List for HP7 Citation";
lblModalBody.Text = "This is modal body";
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal();", true);
upModal.Update();
}
First, we set the Modal's Title and Body, then display it, and finally update the UpdatePanel.
A good practice to improve the page's loading speed is putting the Modal code at the end of the page, besides this helps you avoid any conflict with other UpdatePanels or elements.
A more advanced and tricky suggestion: Put the Modal code at the end of your MasterPage and write a global function to update it, and make your life even easier!
Troubleshooting:
If you get the Error:
Object doesn't support property or method 'modal'
a likely reason could be failing setup of Bootstrap, try to check your code with the official bootstrap sample.
If you still get the error, maybe you find these links helpful:
Geeks with Blogs
My Tec Bits

Resources