Develop Reference

Modal BootStrap can not get variable asp from codebehind

In MinhasVendas2.aspx :
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- dialog body -->
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal">×</button>
Forma de Pagamento
<%-- <%# Eval("desc_tp_pagamento") %>
teste--%>
</div>
<div class="modal-body">
Dados Pagto: <%=id_imobiliaria_pagamento%>
<label id="lblteste"></label>
</div>
<!-- dialog buttons -->
<div class="modal-footer"><button type="button" id="a.btn" class="btn btn-primary"data-dismiss="modal">OK</button></div>
</div>
</div>
</div>
<%--#modalformapagto fim--%>
codebehind:
public void gdvPagamentos_SelectIndexChanged(object sender, EventArgs e)
{
try
{
System.Threading.Thread.Sleep(1000);
List<pagamento> pagto = new List<pagamento>();
var id_imobiliaria_pagamento = gdvPagamentos.SelectedRow.Cells[0].Text;
//ClientScript.RegisterClientScriptBlock(this.GetType(), "", "myModal();", true);
ScriptManager.RegisterStartupScript
(Page,
this.GetType(),
"script",
"myModal();",
true);
}
catch(Exception ex){ }
}
Here is the script being triggered via codebehind:
<script type="text/javascript">
function myModal() {
$("#myModal").modal();
$("#myModal").on("show", function () { // wire up the OK button to dismiss the modal when shown
$("#myModal a.btn").on("click", function (e) {
console.log("button pressed"); // just as an example...
$("#myModal").modal('hide'); // dismiss the dialog
});
})
};
function myModalHide() {
$("#myModal").on("hide", function () { // remove the event listeners when the dialog is dismissed
$("#myModal a.btn").off("click");
})
};
function myModalHidden() {
$("#myModal").on("hidden", function () { // remove the actual elements from the DOM when fully hidden
$("#myModal").remove();
});
$("#myModal").modal({ // wire up the actual modal functionality and show the dialog
"backdrop": "static",
"keyboard": true,
"show": true // ensure the modal is shown immediately
})
}
;
</script>
I declare the variable id_imobiliaria_pagamento also outside the method and the data is recovered normal in codebehind.
But this same variable, with the modal open, and called in the html code inside the modal, shows nothing. Can anybody help me?

In the codebehind, inside the method I had declared the variable in a form (example var xxxxx) and out of the method I had defined as string ... with this was occurring the problem of not displaying it ... Strange that did not accuse error . I corrected for tb string inside the method and the contents of the variables came to be displayed.

Parent's stopPropagation is disabling grandchild's functionality

I have a modal which when open gets this jquery statement:
$(".modal-inner").on("click", function(e) {
e.stopPropagation();
});
The trouble is, nested within this modal body, I have a child element that I'm using Clipboard.js on so a user may copy text. HTML as follows:
<div class="modal-inner"> <!-- stopPropagation applied to parent -->
<div class="modal-close" for="modal-1"></div>
<h1>Let's Connect</h1>
<i class="e"></i>
<p>You can reach me at:</p>
<p class="em">
<input id="emailToCopy" value="this.email#gmail.com"/>
<!-- This grandchild's functionality is now disabled -->
<button class="clip-btn" id="thisClip" data-clipboard-action="copy" data-clipboard-target="#emailToCopy" value="clipBtn">copy email</button>
</p>
</div>
The stopPropagation on .modal-inner keeps the modal from closing if the user clicks inside. This in turn disables my button which executes a script when clicked. I need this button to bypass the stopPropagation from the parent element.

You could just check if the button is clicked, and stop propagation conditionally
$(".modal-inner").on("click", function(e) {
if ( $(e.target).closest('#thisClip').length > 0 ) { // this is the button
e.stopPropagation();
}
});

This is probably not elegant but I believe will work:
$(".modal-inner").on("click", function(e) {
if (!$("button").is(":hover")) e.stopPropagation();
});

You may try testing the event target id and tagName:
$('.modal-inner').on("click", function(e) {
//
// you may also use:
// if ( $(e.target).is('#thisClip') ) {
//
if (e.target.id = 'thisClip' && e.target.tagName == 'BUTTON') {
e.stopPropagation();
console.log('You clicked the button: stop propagation');
} else {
console.log('You did not click the button');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-inner"> <!-- stopPropagation applied to parent -->
<div class="modal-close" for="modal-1"></div>
<h1>Let's Connect</h1>
<i class="e"></i>
<p>You can reach me at:</p>
<p class="em">
<input id="emailToCopy" value="this.email#gmail.com"/>
<!-- This grandchild's functionality is now disabled -->
<button class="clip-btn" id="thisClip" data-clipboard-action="copy" data-clipboard-target="#emailToCopy" value="clipBtn">copy email</button>
</p>
</div>

Handling Errors Within a Modal

I have modal's that are loaded with a link (see below). Whenever there is an error loading the modal (i.e. loading the data in the modal via a wcf service call), there is just a grey screen, as if a modal is trying to open and no modal is loaded. An error is shown in chrome developer tools console which is expected
Additionally, if I click a modal link that loads properly, close that modal, and then click a modal link that generates an error, the previous modal is loaded.
How can I have it so either an error modal is loaded or so a user is redirected to the error page when an error occurs?
Layout (partial view)
<div class="container">
<div class="row">
<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content col-sm-8 col-lg-offset-2">
</div>
</div>
</div>
</div>
</div>
// some code here...
$(document).on('show.bs.modal', '.modal', function() {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function() {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
});
$('body').on('click', '.modal-link', function(e) {
e.preventDefault();
$(this).attr('data-target', '#modal-container');
$(this).attr('data-toggle', 'modal');
});
// Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
$('body').on('click', '.modal-close-btn', function() {
$('#modal-container').modal('hide');
});
//clear modal cache, so that new content can be loaded
$('#modal-container').on('hidden.bs.modal', function() {
$(this).removeData('bs.modal');

Focus on Input when Bootstrap Modal closes

After a blur event on an input field "bootbox1", I want to use a Bootstrap Modal for an message, after the modal closes the focus would go to the input field "bootbox2". But the input field does not get focus.
What am I doing wrong?
Demo
HTML
<input type="text" id="bootbox" />
<input type="text" id="bootbox2" />
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- dialog body -->
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal">×</button>Hello world!</div>
<!-- dialog buttons -->
<div class="modal-footer">
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
JS
$('#bootbox').on('blur', function checkSelection(e) {
$("#myModal").on("show", function () { // wire up the OK button to dismiss the modal when shown
$("#myModal a.btn").on("click", function (e) {
console.log("button pressed"); // just as an example...
$("#myModal").modal('hide');
$('#bootbox2').focus();
// dismiss the dialog
});
});
$("#myModal").on("hide", function () { // remove the event listeners when the dialog is dismissed
$("#myModal a.btn").off("click");
$('#bootbox2').focus();
});
$("#myModal").on("hidden", function () { // remove the actual elements from the DOM when fully hidden
$("#myModal").remove();
});
$("#myModal").modal({ // wire up the actual modal functionality and show the dialog
"backdrop": "static",
"keyboard": true,
"show": true // ensure the modal is shown immediately
});
});
//this works
$('#bootbox2').on('blur', function checkSelection(e) {
$('#bootbox').focus();
});

You need to wait for the hidden.bs.modal event to fire, not the hide.bs.modal.
According to the Bootstrap Docs for the event hide.bs.modal
This event is fired immediately when the hide instance method has been
called.
Whereas hidden.bs.modal
This event is fired when the modal has finished being hidden from the
user (will wait for CSS transitions to complete).
Since your focus is being called before the overlay has been removed the input cannot take the keyboard focus yet.

Closing jQuery Dialog box on button click

I have a jQuery dialog box that I use as a form, when I click the button it performs what it needs to, but does not close. How would I go about making it close on button click.
My current code looks like this:
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#HeatNameDiv').dialog({
autoOpen: false
});
});
$(document).ready(function () {
$('#Change_Heat_Name').click(function (e) {
e.preventDefault();
$('#HeatNameDiv').dialog('open');
});
});
</script>
Button that opens the dialog:
Heat Name<input type="text" name="heat_name" value="#Html.ValueFor(x => x.heatname)" class="search-query" placeholder="Search" style ="width:100px"/>
<button class="btn btn-success" id="Change_Heat_Name" value="Change_Heat_Name" name="action:Change_Heat_Name" type="button"> Change Heat Name</button>
Form inside the dialog box:
<div id="HeatNameDiv" title="Change Heat Name">
#using (Ajax.BeginForm("ChangeHeatName", "Home", FormMethod.Post, new AjaxOptions(){UpdateTargetId = "chemDiv", InsertionMode = InsertionMode.Replace, OnSuccess = "$(document).ready(function () { $('#ChangeHeatName').click(function () { $('#HeatNameDiv').dialog('close');});});" }))
{
<section>
Heat Name:<input type="text" name="heatName" value="#Html.ValueFor(x => x.heatname)" style ="width:100px"/>
Change to:<input type="text" name="updatedHeat" value="" style="width: 100px" />
<input type="submit" name="ChangeHeatName" value="Change" />
</section>
}

The close allows you to do exactly what it name suggests: close the dialog:
$('#HeatNameDiv').dialog('close');
Also you seem to be calling this function inside the click event of some #ChangeHeatName. Make sure that you have canceled the default action if this is an anchor or a submit button to avoid the browser redirecting away from the page:
$('#ChangeHeatName').click(function () {
$('#HeatNameDiv').dialog('close');
return false;
});

Put all your code in one $(document).ready() and try this
$(document).ready(function () {
$('#HeatNameDiv').dialog({
autoOpen: false
});
$('#Change_Heat_Name').click(function (e) {
e.preventDefault();
// This will open the dialog
$('#HeatNameDiv').dialog('open');
});
$('#ChangeHeatName').click(function (e) {
e.preventDefault();
// This will close the dialog
$('#HeatNameDiv').dialog('close');
});
});
DEMO HERE
Since the button in inside the dialog box, use the code below:
$('#ChangeHeatName').click(function (e) {
e.preventDefault();
$('.ui-icon-closethick').click();
});
DEMO HERE

Below is the code for button in dialog and close the dialog on click
jQuery(document).ready(function ($) {
$("#dialog").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$("#opener").click(function () {
$("#dialog").dialog("open");
});
$("#Closer").click(function () {
$("#dialog").dialog("close");
});
});
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
<button id="Closer">Close Dialog</button>
</div>
Open Dialog