I have problem with hiding modal in bootstrap 4.
In my tmp function I have to close modal after that I need use method update_table(url)
HTML and JS
<div class="modal" id="Modal" tabindex="-1" role="dialog"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script type="text/javascript">
function abrir_modal(url) {
$('#Modal').load(url, function () {
$(this).modal('show');
});
return false;
}
function tmp(url) {
$('#Modal').on('shown.bs.modal', function (e) {
$("#Modal").modal('hide');
})
update_table(url);
}
function update_table(url) {
$.ajax({
type: "GET",
url: url
})
.done(function () {
refresh_table();
});
}
function refresh_table() {
$.ajax({
type: "GET",
url: "{% url 'Project:Task_Schedule_TableView' %}"
})
.done(function (response) {
$("#_appendHere").load("{% url 'Project:Task_Schedule_TableView' %}" + "#_appendHere");
});
};
function hide_modal() {
console.log($('#Modal').modal('name'))
$('#Modal').modal('hide');
console.log(33)
return false;
}
</script>
I don't know what is wrong but when I try use the hide_modal function instead of the tmp function, modal is hidden.
This is simple code for Bootstrap 4 Modal Pop Up which hide the pop up.
You can check this..
$('#Modal').modal('show');
function tmp(url) {
$("#Modal").modal('hide');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="modal" id="Modal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
When the pop up is shown call this function from browser console.. tmp('http://test/test'); it will hide the pop up. It same as Bootstrap 3
Step 1. Remove these lines from your code
$('#Modal').on('shown.bs.modal', function (e) {
$("#Modal").modal('hide');
})
Step 2. put the hide_modal function top of all code.
Then it will be appeared properly.
Related
How can I store a cookie when user closes this alert from bootstrap
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
I know how to do it with "onclick" , but is there another way without modifying the above code?
Use one of the alert events to trigger your code
Event
Description
close.bs.alert
This event fires immediately when the close instance method is called.
closed.bs.alert
This event is fired when the alert has been closed (will wait for CSS transitions to complete).
$(".alert").on("closed.bs.alert", (e) => {
console.log("here's where I would set a cookie")
// doesn't work in StackSnippet sandbox
// document.cookie = "favorite_framework=Bootstrap; SameSite=None; Secure";
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
so are you asking how to attach listeners to dom elements without modifying the elements?
<script>
$('.alert-dismissible button.btn-close').click(() => {
// cookie stuff here.
});
</script>
You can target them, the above is using jquery.
I'm doing some assignment for school, and I'm stuck at passing array from js to php.
I have to say I'm not some expert and I'm still learning. I can't figure out what am I missing. Hope someone will help me.
I try like this.
if(bets.length > 0) {
$.ajax({
url: "mybet.php",
method: "POST",
data: { bets : JSON.stringify( bets ) },
success: function(res) {
console.log(res);
}
});
}
and php file
if (isset($_POST['bets'])) {
$bets = json_decode($_POST['bets'], true);
print_r($bets);
}
bets is an array in js.. and I want if I click on button proceed to collect that array and pass to php so I can work with it. I'm getting undefined index for bets on line $bets = json_decode($_POST['bets']);
print_r($_POST) is empty
You are not sending a 'proceedBet' variable in your ajax request, either you send that variable by changing the data like this:
if(bets.length > 0) {
$.ajax({
url: "mybet.php",
method: "POST",
data: { bets : JSON.stringify( bets ), proceedBet: 'Some Value' },
success: function(res) {
console.log(res);
}
});
}
Or you have to change your condition to check if the bets exist like so:
if (isset($_POST['bets'])) {
$bets = json_decode($_POST['bets'], true);
print_r($_POST['bets']); // use print_r to check the data in the array
// User::redirect("ticket.php");
}
Hi here is an example I made for you:
first the html part is a simple modal to display data from request.php if the data I send from my js array is okay:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script
src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" id="btnDisplayModal" >
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal" >×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<br>
<div id="add-takeout-messages">
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
the javascript part is an ajax call which display data inside the modal when the request is done:
$(document).ready(function() {
var formData = {id:"1",name:"stan",lastname:"chacon",color:"blue"};
function _ajaxMessage(formData){
return $.ajax({
url: "request.php",
type: 'POST',
data:{data:JSON.stringify(formData)},
dataType: 'json'
})
}
$("#btnDisplayModal").on('click', function(){
_ajaxMessage(formData)
.done(function(response){
console.log(JSON.stringify(response));
$('#add-takeout-messages').empty();
$.each(response.messages,function(index,value){
console.log(index,value);
$('#add-takeout-messages').append('<div class="alert alert-success">' +
'<button type="button" class="close" data-dismiss="alert">×</button>' +
'<strong><i class="glyphicon glyphicon-ok-sign"></i></strong> From: '+ value.from + '<br>' + ' msg: ' + value.msg +
'</div>')
})
$("#myModal").modal();
})
})
})
The request.php file is simple like the request file you are already using, so I guess the problem you have is your array, maybe it has an invalid format and thats why it goes empty.
if (isset($_POST["data"])) {
$data = json_decode($_POST["data"],true);
if ($data["name"] == "stan") {
$array = [
"status"=>"success",
"messages"=> [
array('date' => "2019-04-11", 'msg'=>'Love you', 'from'=>'Annie' ),
array('date' => "2019-04-10", 'msg'=>'Have a nice day', 'from'=>'Annie' )
]
];
echo json_encode($array);
}
}
check your array ant let us know if that was the problem =)
Hiope it helps
Simple working example you can change the logic if needed.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
let bets = [1,2,3]; // This must come dynamically.
if(bets.length > 0) {
$.ajax({url: "server.php", method: "POST", data: { bets : JSON.stringify( bets) }, success: function(result){
$("#div1").html(result);
}});
}
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Send Ajax Request</button>
</body>
</html>
Server side
<?php
if (isset($_POST['bets'])) {
$bets = json_decode($_POST['bets'], true);
print_r($_POST['bets']);
}
I would like to display a text description box when I hover over the button and close it when not hovered. At the moment, when my button is hovered the text box displays, however I need to click off the screen to close it. When I try to use several buttons to show different message boxes, all the modals are opened and I need to click the screen many times to close it. How can I show the message box on hover and undisplay when the mouse is not hovered over. How can this be achieve for multiple buttons?
Below is what i have so far:
$(document).ready(function () {
"use strict";
$("#test1").hover(
function () {
$('.modal').modal({
show: true
});
},
function () {
$('.modal').modal('hide');
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<button class="btn login btn-primary" data-toggle="modal" data-target="#product1" id="test1">Test</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
This text box shown when mouse hover over the button
</div>
</div>
</div>
First major problem: when bootstrap displays this modal, it overwrites everything on the web page, including the Test button, which makes it out of reach of a mouseOut (the bottom of the modal dialog is over the button )
This is solved by bidding on the order of the display layers by placing a larger z-index css (I put 8000 and this also works only if the element uses a positioning)
As a result, this is no longer a true modal dialog, and the click on the Test button can be triggered, which is contrary to the spirit of using a modal dialog.
the BS4 doc on the subject => https://getbootstrap.com/docs/4.0/components/modal/#via-data-attributes
$(document).ready(function () {
"use strict";
$(".BtModals").hover(
function () {
let refID = '#' + $(this).data('modal_id');
$(refID).modal('show');
},
function () {
let refID = '#' + $(this).data('modal_id');
$(refID).modal('hide');
});
});
.BtModals:hover {
position:relative;
z-index: 8000;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<button class="btn login btn-primary BtModals" data-modal_id="Modal-t1" data-toggle="modal" data-target="#product1" >Test 1</button>
<button class="btn login btn-primary BtModals" data-modal_id="Modal-t2" data-toggle="modal" data-target="#product1" >Test 2</button>
<div id="Modal-t1" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
This text box shown when mouse hover over the button Test 1
</div>
</div>
</div>
<div id="Modal-t2" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
This text box shown when mouse hover over the button Test 2
</div>
</div>
</div>
New Answer:
"hover" method accepts second argument as handlerOut.
So you can do something like this:
$(document).ready(function () {
"use strict";
$("#test1").hover(
function () {
$('.modal').modal({
show: true
});
},
function () {
$('.modal').modal('hide');
});
});
Old Answer:
Since you use bootstrap, for such cases, you can use popover.
https://getbootstrap.com/docs/3.3/javascript/#popovers-examples
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
You can achieve it with CSS by setting a data attribute with the 'hover text' in the HTML for each button. If there are too many buttons to do it manually, or if they change dynamically, you can loop over them in JS and use .setAttribute("data-tip", "tip_content").
Here is an example of the HMTL and CSS:
<button data-tip="Show this on hover">My botton</button>
button:hover:after {
content: attr(data-tip);
color: red;
display: block;
position: absolute;
top: 20%;
}
Here is the codepen link if you want to see it live: https://codepen.io/CPC464/pen/KEbJJo
I want to open a modal with hash (example: www.example.com/#example.) This is my code below but the modal not showing. Thanks for your answer and I appreciate it.
$(document).ready(function() {
$('.popup').click(openModalPopupClick);
function openModalPopup(){
var hashText = window.location.hash.substr();
if (hashText){
$('#'+hashText).modal('show');
}
}
function openModalPopupClick(){
var hashText = $(this).attr('href');
if (hashText){
$(hashText).modal('show');
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
click
<div class="modal fade" id="regis-new-company" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
hashText allready have # so $('#'+hashText).modal('show'); should be $(hashText).modal('show'); and call openModalPopupClick function on ready. i have update your code.
$(document).ready(function() {
$('.popup').click(openModalPopupClick);
function openModalPopup(){
var hashText = window.location.hash.substr();
if (hashText){
$(hashText).modal('show');
}
}
openModalPopup();
function openModalPopupClick(){
var hashText = $(this).attr('href');
if (hashText){
$(hashText).modal('show');
}
}
});
Repository for Project
here is the repository to see what i have done so far. I got the clock and modal to combine nicely however the popup for the modal seems to be layered behind the modal itself. I know that jquery and angular don't play nice together. However i have gotten an older version of this to work with a modal however i need to use the newest version because the callbacks have information that i need. If anyone has suggestions i would really appreciate it! Thankyou!
Here are some code snip its from the repository
index.html inside the folder specified clockpicker-gh-pages:
<html>
<head>
<title>ClockPicker</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="dist/bootstrap-clockpicker.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/github.min.css">
</head>
<body ng-app="mymodal">
<div ng-controller="MainCtrl" class="container">
<button ng-click="toggleModal('Success')" class="btn btn-default">Success</button>
<button ng-click="toggleModal('Remove')" class="btn btn-default">Remove</button>
<button ng-click="toggleModal('Deny')" class="btn btn-default">Deny</button>
<button ng-click="toggleModal('Cancel')" class="btn btn-default">Cancel</button>
<modal visible="showModal">
<div class="input-group clockpicker">
<input type="text" class="form-control" value="09:30">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
<script type="text/javascript" class="ng-scope">$('.clockpicker').clockpicker();</script>
</modal>
</div>
<script src="../Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="dist/bootstrap-clockpicker.min.js"></script>
<script src="../Scripts/angular.js"></script>
<script src="app.js"></script>
</body>
</html>
and from this folder there is a modal app.js script that contains:
var mymodal = angular.module('mymodal', []);
mymodal.controller('MainCtrl', function ($scope) {
$scope.showModal = false;
$scope.buttonClicked = "";
$scope.toggleModal = function (btnClicked) {
$scope.buttonClicked = btnClicked;
$scope.showModal = !$scope.showModal;
};
});
mymodal.directive('modal', function () {
return {
templateUrl: 'userOptionsModal.html',
restrict: 'E',
transclude: true,
replace: true,
scope: true,
link: function postLink(scope, element, attrs) {
scope.$watch(attrs.visible, function (value) {
if (value == true)
$(element).modal('show');
else
$(element).modal('hide');
});
$(element).on('shown.bs.modal', function () {
scope.$apply(function () {
scope.$parent[attrs.visible] = true;
});
});
$(element).on('hidden.bs.modal', function () {
scope.$apply(function () {
scope.$parent[attrs.visible] = false;
});
});
}
};
});
also to format the modal window the html file that is specified as User options modal is the template for the modal window.
<div class="modal fade">
<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">{{ buttonClicked }} Hello world!</h4>
</div>
<div class="modal-body" ng-transclude>
</div>
</div>
</div>
</div>
please keep in mind most of the code that is listed here is within the folder labeled clockpicker-gh-pages. If this helps let me know!
In angular's directive documentation, it says the element passed into the link function for a directive is a "jqLite-wrapped element".
So in your example, it appears to me that the line of code $(element).on( ... ) should be element.on( ... ).
EDIT: I didn't see the $(element).modal( ... ) lines. Though I've never used modal before I believe that should be modified in the same way.
The other option would be to put an id on your angular directive template, and access it like this.
$('#myelementid').modal( ... ) and $('#myelementid').on( ... )