Spring-boot delete javascript confirmation message - javascript

in my Springboot system i need to have a javascript popup message to confirm delete when i select the delete button. However currently it deletes the record without poping up a confirmation message when i click the delete button.Can someone help me to solve this? Thank you.
Subject view Html file
<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<!-- Nav Bar header code-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<script type="text/javascript" src="webjars/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script type="text/javascript" src="webjars/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="#{js/main.js}" src="../static/js/main.js"></script>
<link rel="icon" href="../../favicon.ico"/>
<link rel="stylesheet" href="webjars/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css "/>
<!-- Bootstrap core CSS -->
<link href="../static/css/bootstrap.css" rel="stylesheet" th:href="#{/css/bootstrap.css}"/>
<!-- End of Nav Bar header code-->
<link rel="stylesheet" type="text/css" href="static/css/view.css" th:href="#{/css/view.css}">
<meta charset="UTF-8">
<title>Subject Details</title>
</head>
<body>
<!-- Nav Bar body code-->
<div class="containerr">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div>
<!-- End of Nav Bar body code-->
<h1>Subject Details</h1>
<h2>Add a new Subject</h2>
<h2>Upload a CSV File</h2>
<div class="container" style="margin-top:30px">
<br><br>
<table border="1">
<thead>
<tr>
<th>Subject Code</th>
<th>Name</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr th:each="subject : ${subjectDetails}">
<td th:text="${subject.subjectCode}">Code</td>
<td th:text="${subject.name}">Name</td>
<td>
<a th:href="#{'/subject/edit/' + ${subject.id}}">Edit</a>
</td>
<td>
<a th:href="#{subject/delete/(id=${subject.id})}" class="btn btn-danger delBtn">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="myForm">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<P class ="alert alert-danger">
Are you sure you want to delete?
</P>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
Delete
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="../static/js/bootstrap.js" th:href="#{/js/bootstrap.js}"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
</body>
</html>
Subject Controller
#RequestMapping("/subject/delete")
public String deleteProduct(Long id){
subjectDAO.delete(id);
return "redirect:/subject";
}
main.js
$(document).ready(function () {
$('.table .delBtn').on('click',function (event) {
event.preventDefault();
var href=$(this).attr('href');
$('#myModal #delRef').attr('href',href);
$('#myModal').modal();
});
});

You can use an alert to confirm or cancel when you click the delete button.
function myFunction() {
var txt;
if (confirm("Want to delete!")) {
txt = "Deleted!";
// Do the delete when you click ok
} else {
txt = "Cancel!";
// If you click cancel, remove the alert box
}
console.log(txt);
}

Related

Bootstrap5 modal not showing

I'm building a simple webpage with a navbar and table. The table rows are generated from a simple JS script fetching data asynchronously from a DB.
I decided to use Bootstrap5 for convenience, but i'm stuck because even though the page correctly builds and displays, the modals aren't shown.
Each table row has a final <td> with two buttons: a "discard row" button which removes the row from the table and an update button, which is supposed to show me a modal to edit content and update the DB.
here is what i've got:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<title>My new page</title>
</head>
<body>
<div class="container-fluid">
<!-- Modal -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="updateModalLabel">Update</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
my modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Oversonic</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="reload()">Reload</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- Content -->
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10" id="main-content">
<div class="row my-3" id="header"><h2>Conversation logs:</h2></div>
<div class="row" id="content">
<table class="table table-hover" id="main-table">
<thead>
<tr>
<th scope="col">datetime</th>
<th scope="col">user:</th>
<th scope="col">response:</th>
<th scope="col">data</th>
<th scope="col">location/th>
<th scope="col">buttons</th>
</tr>
</thead>
<tbody id="loaded-content">
<!-- dynamically filled -->
</tbody>
</table>
</div>
</div>
<div class="col-lg-1"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script src="resources/loading-spinner.js"></script>
<script src="resources/script.js"></script>
</body>
</html>
as for the js these are the functions:
const table_body = document.getElementById("loaded-content");
function populateTable (file) {
// Populate the table with data from the file's rows
file.forEach(row => {
const new_row = document.createElement("tr");
for (const key in row) {
const new_td = document.createElement("td");
if (key == "timestamp") {
new_td.textContent = new Date(row[key]).toDateString();
} else {
new_td.textContent = row[key];
}
new_row.appendChild(new_td);
}
// Create buttons: update and discard
const btn_update = document.createElement("button");
const btn_discard = document.createElement("button");
const updateButton = addTextandAttributes(btn_update, "<img src=\"resources/cloud-plus-fill.svg\"></img>", {"type":"button", "class":"btn btn-outline-info btn-sm mt-1 me-2", "data-toggle": "modal", "data-target": "#updateModal"});
const discardButton = addTextandAttributes(btn_discard, "<img src=\"resources/x-circle.svg\"></img>", {"type": "button", "class":"btn btn-outline-dark btn-sm mt-1", "onclick": "deleteRow(this)"});
// Create cell to store buttons and append it to each row
const buttonsCell = document.createElement("td");
buttonsCell.appendChild(updateButton);
buttonsCell.appendChild(discardButton);
new_row.appendChild(buttonsCell);
table_body.appendChild(new_row);
});
}
function deleteRow(element) {
try {
const idx = element.rowIndex
var row = element.parentElement.parentElement
console.log(row)
table_body.deleteRow(idx)
} catch (error) {
console.log(`Could not delete row! (${error})`)
}
}
here is a picture of a sample row:
the delete row button works as expected.
the problem here is that when i click the update button nothing happens, even though i added the modal's id to the aria attribute in the buttons (as you can see from the js populateTable function.
Don't forget that the data- attributes have change to data-bs- in Bootstrap 5.
When the button is dynamically created, set the correct attributes:
const updateButton = addTextandAttributes(btn_update,
"<img src=\"resources/cloud-plus-fill.svg\"></img>", {
"type":"button",
"class":"btn btn-outline-info btn-sm mt-1 me-2",
"data-bs-toggle": "modal",
"data-bs-target": "#updateModal"
});
Demo
Modal Form not showing up
This is how you do it with Bootstrap5 and JavaScript only:
let elem = document.getElementById('exampleModalId')
let modal = new Modal(elem)
modal.show()

Prevent modal from flashing during page loading

I have scanned several other posts relating to this, but I cannot work out a working solution sadly.
Any help greatly appreciated.
I am trying to stop the modals flashing visibility briefly while the page is loading. I have a 3D model that loads using OpenwebGL, so need a few seconds to load. The modals flashing at the start looks untidy.
I'm not sure of the best approach to stop the modals from loading until the 3d model has finished loading.
This is the HTML code for the page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Verge3D Web Interactive</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta property="og:type" content="website">
<meta name="generator" content="Verge3D 3.0.1">
<script src="ie_compat.js"></script>
<script src="webxr-polyfill.js"></script>
<script>var polyfill = new WebXRPolyfill();</script>
<script src="ammo.js"></script>
<script src="v3d.js"></script>
<script src="City_20_01c.js"></script>
<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>
<link rel="stylesheet" type="text/css" href="City_20_01c.css">
</head>
<body>
<div id="container">
<div id="fullscreen_button" class="fullscreen-button fullscreen-open" title="Toggle fullscreen mode"></div>
</div>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal01" role="dialog" >
<div class="modal-dialog" style="display:none">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Add any html and CSS Element here. Images , Video, Text, etc</p>
</br>
<img src="http://avologypro.com/wp/expleo/wp-content/uploads/2020/02/Screenshot-2020-02-09-13.25.13.png" width="325px" height="170px">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="container">
<h2>Modal Example 02</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal02" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Automotive 02</p>
<p>Add any html and CSS Element here. Images , Video, Text, etc</p>
</br>
<img src="http://avologypro.com/wp/expleo/wp-content/uploads/2020/02/Screenshot-2020-02-09-13.25.13.png" width="325px" height="170px">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Me again.
Ok appreciate a lot of questions on the forum regarding this topic, but didn't find an easy fit.
I eventually figured out a solution using the following from various ideas combined.
So for anyone else trying to fix this issue in the future try the following:
Put the modal div's in a new div. Make the parent div invisible using a style comment in the header. Add this to the opening body comment onload="showdiv();",
Then add a function showdiv script at the bottom of your body.
Here is the same HTML above with the new adjustments:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Verge3D Web Interactive</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta property="og:image" content="https://cdn.soft8soft.com/images/player_socials.jpg">
<meta property="og:type" content="website">
<meta name="generator" content="Verge3D 3.0.1">
<!-- favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="media/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="media/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="media/favicon-16x16.png">
<link rel="manifest" href="media/manifest.json">
<link rel="mask-icon" href="media/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<script src="ie_compat.js"></script>
<script src="webxr-polyfill.js"></script>
<script>var polyfill = new WebXRPolyfill();</script>
<script src="ammo.js"></script>
<script src="v3d.js"></script>
<script src="City_20_01c.js"></script>
<link rel="stylesheet" type="text/css" href="City_20_01c.css">
<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>
<style>
#modaloff {
visibility: hidden;
}
</style>
</head>
<body onload="showdiv();">
<div id="container">
<div id="fullscreen_button" class="fullscreen-button fullscreen-open" title="Toggle fullscreen mode"></div>
</div>
<div id="modaloff">
<div class="container" id="modaloff01" >
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal01" role="dialog" >
<div class="modal-dialog" >
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Add any html and CSS Element here. Images , Video, Text, etc</p>
</br>
<img src="http://avologypro.com/wp/expleo/wp-content/uploads/2020/02/Screenshot-2020-02-09-13.25.13.png" width="325px" height="170px">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h2>Modal Example 02</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal02" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header 02</h4>
</div>
<div class="modal-body">
<p>Automotive 02</p>
<p>Add any html and CSS Element here. Images , Video, Text, etc</p>
</br>
<img src="http://avologypro.com/wp/expleo/wp-content/uploads/2020/02/Screenshot-2020-02-09-13.25.13.png" width="325px" height="170px">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function showdiv() {
setTimeout(function () {
document.getElementById("modaloff").style.visibility = "visible";
}, 5000);
}
</script>
</body>
</html>

open one modal and disable the other on page load

I am stuck in a small but weird problem. I have two modals on my page, I want to load the first modal when the page loads, I have done the code to click a button and open the modal but both the modals come up. It has a effect of opening from left to right, I want to keep that so I had added the class in the jquery code. I just want to load the modal that has the id="ModalLogin". As you can see both the modals load when button is clicked. Below is the snippet. Please help.
$('.btn').click(function() {
$('.modal')
.prop('class', 'modal fade') // revert to default
.addClass($(this).data('direction'));
$('.modal').modal('show');
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://www.topconsumerreviews.com/new-common-code/new-style.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<ul class="product-rankings-font" style="list-style: none;padding-left: 18px;padding-bottom: 10px;padding: 10px;">
<li>Select2 </li>
<!-- <li>Activate Modal</li> -->
<li style="text-align: center;padding-top: 5px;"><a class='btn btn-primary btn clos' style="width: 160px;" id="bty" data-direction='left'>bty</a></li>
</ul>
<!---- Forgot Password Popup --->
<div class="modal fade" id="ModalForgotPassword" role="dialog">
<div class="modal-dialog" style="width: 15%;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Slider 2</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<button class="btn btn-primary">Option 4</button>
</div>
<div class="form-group">
<button class="btn btn-primary">Option 5</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!---- Forgot Password Popup --->
<!---- Login Popup --->
<div class="modal fade" id="ModalLogin" role="dialog">
<div class="modal-dialog" style="width: 15%;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="font-size: 18px;text-align: center;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color: black;">Text Sample 1</h4>
<h4 class="modal-title" style="color: black;">Text Sample 2</h4>
</div>
<div class="modal-body" style="font-size: 16px">
<form action="comparelist.php" method="post">
<ul id="answers-type1" class="myclass" style="list-style: none;padding-right: 10px;padding-left: 10px;">
<li class="module form-check-label" style="background: #668693;" value="Listol" data-dismiss="modal" data-toggle="modal" id="forgotPassword" data-target="#ModalForgotPassword"><span>Option 1</span></li>
<li class="module form-check-label" style="background: #668693;"><span>Option 2</span></li>
</ul>
</div>
</div>
</div>
</div>
<!---- Login Popup --->
</body>
</html>
I would like to offer another way to use modals: pure CSS.
here is the reference: click here
The idea is you don't need any js,
each modal will be in a div wrapper with id. like this:
<div id="modalWrapper">
and then you will have a hyperlink where ever you want
<a href="#modalWrapper">
and the trick is with CSS -
you initially set the position of the modal as absolute and unseen (left:-999em)
and then with the target selector, you bring the modal to the center:
#modalWrapper:target {
left:0;
transition:etc..
}
and when you do like this - you will open only the desired modal with the button.
hope this will make some help for you.
my first answer on SO

My bootstrap modal isn't working

Question
I'm making a reservation plugin for a website. I want a modal for a datepicker, but from my perspective everything seems right. But when I click the modal-button, nothing happens. I've searched on the internet en dubble checked my css/js links but I think everything is the right place.
Does anyone know what I'm doing wrong and help me in the right direction? Thanks
MY CODE
testpage_modal.php
<?php /* Template name: Modal template */ ?>
<?php get_header(); ?>
<div id="content" role="main">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- HERO
================================================== -->
<div class="row home-area-hero">
<div class="container-large">
<img src="" class="paint-stripe" />
<div class="container visual-hero" style="background-image:url('');">
<div class="visual-hero-content">
<h3><?php the_title();?></h3>
</div>
</div>
</div>
</div><!-- end HERO -->
<!-- STRATEGIES
================================================== -->
<div class="row page-area-6">
<div class="container">
<label>Selecteer uw gewenste datum<span style="color:red;"> *</span></label><br>
<input type="text" name="datum" value="" required>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-default btn-md" data-toggle="modal" data-target="#my_btn">Kies datum > <span class="glyphicon glyphicon-calendar"></span></button>
<!-- Modal -->
<div id="my_modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div><!-- end CONTENT -->
<?php endwhile; endif; ?>
<?php
get_footer(); ?>
header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>Title</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link rel="stylesheet" type="text/css" href="css/style.css" >
footer.php
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery.min.js"><\/script>')</script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#my_btn").click(function(){
$("#my_modal").modal('show');
});
});
</script>
</body>
</html>
button data-target & modal id should be match otherwise your modal not worked.
<button type="button" class="btn btn-default btn-md" data-toggle="modal" data-target="#my_btn">Kies datum > <span class="glyphicon glyphicon-calendar"></span></button>
<!-- Modal -->
<div id="my_btn" class="modal fade" role="dialog">
</div>
Your data-target doesn't match the modals:
<button type="button" class="btn btn-default btn-md" data-toggle="modal" data-target="#my_btn">Kies datum > <span class="glyphicon glyphicon-calendar"></span></button>
Should be:
<button type="button" class="btn btn-default btn-md" data-toggle="modal" data-target="my_modal">Kies datum > <span class="glyphicon glyphicon-calendar"></span></button>
Or if you want to use the javascript, then you should give your button the ID = "my_btn", like this
<button type="button" class="btn btn-default btn-md" id="my_btn">Kies datum > <span class="glyphicon glyphicon-calendar"></span></button>
No need to use this JS code. Just remove those lines:
<script type="text/javascript">
$(document).ready(function(){
$("#my_btn").click(function(){
$("#my_modal").modal('show');
});
});
</script>
and replace following line for your button:
<button type="button" class="btn btn-default btn-md" data-toggle="modal" data-target="#my_modal">Kies datum > <span class="glyphicon glyphicon-calendar"></span></button>

No action clicking on Bootstrap popup

I need to implement a pop up window on clicking one link.
My HTML Code snippet:
<head>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="/stylesheets/script.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel='stylesheet' href='/stylesheets/bootstrap-theme.css' />
<link rel='stylesheet' href='/stylesheets/bootstrap-theme.min.css' />
<link rel='stylesheet' href='/stylesheets/bootstrap.css' />
<link rel='stylesheet' href='/stylesheets/bootstrap.min.css' />
</head>
<body style="overflow-x:hidden">
<!--Header-->
<div id = "header">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/kanbannew">Welcome</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Add Card</li>
<li>Project Status</li>
<li>Logout</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div id="myModal" 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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
$('#myModal').on('show.bs.modal', function (event) {
var li = $(event.relatedTarget) // Button that triggered the modal
var recipient = li.data('whatever') // Extract info from data-* attributes
var modal = $(this)
modal.find('.modal-title').text(recipient)
})
</script>
</body>
Clicking on 'Add Card' button of the header, I want to show a pop up where user can input some title and description and submit the same. But this sample modal is not even opening. Any advice? Thanks.
Your data-target="#myModal" is referring to a <div> that should have an id='myModal'
Hence change this line
<div class="modal fade">
to
<div id="myModal" class="modal fade">
and it should work.
Note: You are missing the bootstrap.css file.
Update:
you should load jQuery first. Remove your scripts and links and load it in this manner:
<link rel='stylesheet' href='/stylesheets/bootstrap.min.css' />
<link rel='stylesheet' href='/stylesheets/bootstrap-theme.css' />
<link rel='stylesheet' href='/stylesheets/bootstrap-theme.min.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">
</script>
<script type="text/javascript" src="/stylesheets/script.js"></script>
Follow this pattern. Your style sheet should always be above your JS script.It is a good practice and a right way to place style sheet in the head section. Your Jquery core file should always be the first JS file to load as the Page is called which binds all the rest of your JS files. Try these files in similar pattern and remove all the other head files for now. click here for example http://www.bootply.com/Zdq6rSSvUs
<link rel='stylesheet' href='/stylesheets/bootstrap.min.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

Categories