Modal does not close

Modal does not close - javascript

When pressing the "Confirm" button, it executes the function and the action, but the event of closing the modal does not execute it.
This is my code:
<script type="text/javascript">
$("document").ready(function() {
var actsel = $("#act_selected").val();
$("#habilitaract_mensaje").html("¿You want to end the activity No. <strong>" + actsel + "</strong>?");
$("#btn_actconfirmar").click(function() {
if (habHabitacion()) {
$('#modal_habilitaract').modal('hide');
}
});
});
</script>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">Enable Activity</h4>
</div>
<div class="modal-body">
<h5><span id="habilitaract_mensaje"></span></h5>
<br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btn_actconfirmar">
<span class="texto-sm"><span class="glyphicon glyphicon-ok"></span> Confirm</span>
</button>
</div>

I think the problem comes from your import of bootstrapp or the definition of the div of the modal
Look at mine:it works correctly
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$("document").ready(function() {
var actsel = $("#act_selected").val();
$("#habilitaract_mensaje").html("¿You want to end the activity No. <strong>" + actsel + "</strong>?");
$("#btn_actconfirmar").click(function() {
alert("welcome");
});
});
</script>
<div align="right">
<button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add</button>
</div>
<div id="add_data_Modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×
</span></button>
<h4 class="modal-title">Enable Activity</h4>
</div>
<div class="modal-body">
<h5><span id="habilitaract_mensaje"></span></h5>
<br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btn_actconfirmar">
<span class="texto-sm"><span class="glyphicon glyphicon-ok"></span> Confirm</span>
</button>
</div>
</div>
</div>
</div>

If habHabitacion function returns boolean true then modal window should be close. Please check what habHabitacion return.

Related

Dynamically update a buttons onclick inside a Bootstrap Modal

I'm trying to pass a value into a Bootstrap Modal and then display it when a button is clicked, however nothing is displaying when I click the button.. Can anyone help fix the issue?
I believe the issue is on the line:
$(e.currentTarget).find('button[id="save"]').onclick = function() { alert(id); };
JSFiddle: http://jsfiddle.net/9m13c4rx/
HTML
Edit
<div class="modal" id="my_modal">
<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">Close</span></button>
<h4 class="modal-title">Click Save!</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button id="save" type="save" class="btn btn-primary" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JavaScript
$('#my_modal').on('show.bs.modal', function(e) {
var id = $(e.relatedTarget).data('id');
$(e.currentTarget).find('button[id="save"]').onclick = function() { alert(id); };
});

i have fixed your code
$('#my_modal').on('show.bs.modal', function(e) {
var id = $(e.relatedTarget).data('id');
$("#save").click(function(){
alert(id);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
Edit
<div class="modal" id="my_modal">
<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">Close</span></button>
<h4 class="modal-title">Click Save!</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button id="save" type="save" class="btn btn-primary" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

The issue is onclick is a vanilla JavaScript property for processing click events on a given element, but you are trying to implement that on a jQuery object, use jQuery's .click() instead.
Update: The best solution is to write the button click event outside the modal event handler function.
$('#save').click(function() { alert(id); });
If you still want the code to be inside the modal event then you can use flag variable based on which you can execute the button click event.
var flag = false; // set the flag to false
$('#my_modal').on('show.bs.modal', function(e) {
var id = $(e.relatedTarget).data('id');
if(!flag){ // check the flag
$(e.currentTarget).find('button[id="save"]').click(function() { alert(id); });
flag = true; // set the flag to true
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Edit
<div class="modal" id="my_modal">
<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">Close</span></button>
<h4 class="modal-title">Click Save!</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button id="save" type="save" class="btn btn-primary" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Pre-populate modal textarea with text

Currently a button opens a modal that includes a text box. I need have that text box pre-populated, so I have attempted to mess around with the modal with no luck.
I have tried the following and nothing appears to happen.
function testFunc(){
$('#contactUsDlg').modal('show');
$('#contactUsDlg').on('shown.bs.modal', function {
$('#message-text').text("test");
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" name="btn-ask" id="nonconform-btn" data-form-action-url="${newMessageUrl}"
data-pns="<%=OrderStatusPortletConstants.MESSAGE_CENTER_PORTLET_NAMESPACE %>"
data-use-ajax="true"
class="btn btn-submit btn-ask contact-us-dlg"
data-hidden-fields="message-order-id,message-source-url"
data-message-order-id="${selectedOrder.id}" data-message-source-url="${sourceUrl}" >
Contact Us
</button>

This is a possible solution basen on your snippets (not complete, IMHO)
$(document).ready(function() {
$('#contactUsModal').on('show.bs.modal', function(e) {
var text = $(e.relatedTarget).data('default-text');
$(this).find('#message-text').text(text);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<button type="button" name="btn-ask" class="btn btn-submit btn-ask contact-us-dlg" data-form-action-url="${newMessageUrl}" data-pns="<%=OrderStatusPortletConstants.MESSAGE_CENTER_PORTLET_NAMESPACE %>" data-use-ajax="true" data-hidden-fields="message-order-id,message-source-url"
data-message-order-id="${selectedOrder.id}" data-message-source-url="${sourceUrl}" data-toggle="modal" data-target="#contactUsModal" data-default-text="Initial contact us textarea modal content">
Contact Us
</button>
<div class="modal fade" id="contactUsModal" tabindex="-1" role="dialog" aria-labelledby="contactUsModalLabel">
<div class="modal-dialog" role="document">
<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" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>

If you haven't already, you should look into using jQuery UI. Here you can use something like the following:
<script src='jquery-3.2.1.min.js'></script>
<script src='jquery-ui-1.12.1.custom/jquery-ui.js'></script>
<link href='jquery-ui-1.12.1.custom/jquery-ui.css' rel='stylesheet' type='text/css'></link>
<link href='jquery-ui-1.12.1.custom/jquery-ui.theme.css' rel='stylesheet' type='text/css'></link>
<input id='mybutton' type='button' value='click me' />
<div id='result'>
<p id='firstp'></p>
<p id='secondp'></p>
</div>
<script>
$(function() {
$('#result').dialog({
open: function(event, ui) {
$('#resultp').html('[this is my text]');
}
});
});
$('#mybutton').on('click', function(evt) {
$('#secondp').html('[this is my second text]');
});
</script>

How to load a Modal with JQuery (.load) into in it at the same time once button is pressed?

In this scenario I would like to preserve bandwidth by when a modal opens then it loads the import_audit_table into a Div in the Modal. Is this possible?
<script>
$(document).ready(function(){
$('#import_audit_div1').click(function(){
$('#import_audit_table').load("edit_audits.php?action=import");
});
});
</script>
<input type="button" class="btn btn-default" value="Modal Opener" id="import_audit_div1" data-toggle='modal' data-target='#import_audit_div'/>
<div class="modal" id="import_audit_div" role="dialog">
<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">Title</h4>
</div>
<div class="modal-body">
<h3>
<div id="import_audit_table">
</div></h3>
</div>
<div class="modal-footer">
<form method = "POST">
<input type="button" id="yes_delete" value="Yes " name="deleteaudit" />
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</form>
</div>
</div>
</div>
</div>

Bootstrap Collapse Widget not working

I need to have used Collapse in bootstrap to hide some information and display once button is click but I don't know that wrong on this one why it is not working.
<div id="myModal6" class="modal fade mdl" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title title_modal">Sample Data
<span data-widget="collapse" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle pull-right btn_details" role="button" aria-controls="toggle-pane-88" id="toggle-89" aria-expanded="false">Toggle</span>
</h2>
</div>
<div class="modal-body">
<p class="toggle-collapsed" aria-hidden="true" id="toggle-pane-88" aria-expanded="false" aria-labelledby="toggle-89">This is my content!
</p>
<div class="row">
<div class="col-md-6">
<p class="headline_text">Sample again</p>
<p style="text-align:center"><img src="img/samp.jpg"
</div>
<div class="col-md-6">
<p class="headline_text"> </p>
<p style="text-align:center"><img src="img/samp21.jpg"/> </p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I also include here files needed in bootstrap:
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<script src="dist/js/app.min.js" type="text/javascript"></script>

If you are just trying to put a collapse panel inside your modal you need to add a target div for #toggle-pane-88. See example.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade mdl" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title title_modal">Sample Data
<span data-widget="collapse" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle pull-right btn_details" role="button" aria-controls="toggle-pane-88" id="toggle-89" aria-expanded="false">Toggle</span>
</h2>
</div>
<div class="modal-body">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#toggle-pane-88">Simple collapsible</button>
<div id="toggle-pane-88" class="collapse">
<p class="headline_text">Sample again</p>
<p style="text-align:center">
<img src="img/samp.jpg" </div>
<p class="headline_text"> </p>
<p style="text-align:center">
<img src="img/samp21.jpg" />
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>

.click() sometimes works and sometimes does not

the problem I am having is I am trying to apply a click function on a div to a element inside a iframe, it works sometimes but sometimes it doesn't work and it's very random. Here is my code where I apply the click method:
<script type="text/javascript">
var yammerFrame = parent.parent.document.getElementsByTagName("frame")[1].contentDocument.getElementsByTagName("frame")[0].contentDocument.getElementsByTagName("iframe")[0];
$(yammerFrame).load(function() {
var yammerMessages = parent.parent.document.getElementsByTagName("frame")[1].contentDocument.getElementsByTagName("frame")[0].contentDocument.getElementsByTagName("iframe")[0].contentWindow.document.getElementById('yammerMessages');
$(document).ready(function() {
$(yammerMessages).click(function() {
$('#myModal').modal('show');
});
});
});
</script>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="text-align: center">
<button type="button" class="close" data-dismiss="modal">×</button>
<span>
<img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Yammer_logo.png" alt="Yammer" style="width: 200px;height: 50px;">
</span>
</div>
<div class="modal-body" style="text-align: center">
<h4 id="modal-body-sender" style="font-weight:bold"></h4>
<h4 id="modal-body-date"></h4>
<div id="modal-body-well" class="well">
<h4 id="modal-body-message" style="color:black;word-wrap: break-word;"></h4>
</div>
</div>
<div class="modal-footer">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-primary" onclick="open_win()">Go To Post</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="css/Site.css" type="text/css" />
</head>
<body>
<span id="yammer-login"></span>
<div id="yammerDiv">
<div id="yammerHeader">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Yammer_logo.png" alt="Yammer" height="17px;" width="50%">
</div>
<div id="yammerMessages" style="margin-top: 25px;">
<img id="loading-gif" src="http://i559.photobucket.com/albums/ss36/madszckey01/speakker/buffering.gif">
<div id="text-wrapper" style="width: 100%; height: 76%;">
<span id="message"></span>
</div>
<span id="sender"></span>
</div>
<div id="yammerButtons" style="display:none">
<button id="previous" type="button" class="btn btn-default btn-xs" aria-label="Left Align" onclick="onPrevious()" dataenter code here-toggle='tooltip' data-placement='top' data-original-title="Previous">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</button>
<input type="checkbox" id="myCheck" onclick="autoscroll()" data-toggle='tooltip' data-placement='top' data-original-title="Auto-Scroll" class='checkbox'>
<button id="next" type="button" class="btn btn-default btn-xs" aria-label="Right Align" onclick="onNext()" data-toggle='tooltip' data-placement='top' data-original-title="Next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</button>
</div>
</div>

Try this function with live.
$(yammerMessages).live('click', function() {
$('#myModal').modal('show');
});

Develop Reference

JavaScript is the programming language of the Web.

Modal does not close - javascript

If habHabitacion function returns boolean true then modal window should be close. Please check what habHabitacion return.

Related

Dynamically update a buttons onclick inside a Bootstrap Modal

Pre-populate modal textarea with text

How to load a Modal with JQuery (.load) into in it at the same time once button is pressed?

Bootstrap Collapse Widget not working

.click() sometimes works and sometimes does not

Categories

Resources