I am trying make a dialog box using model. But I am not getting an output. Here is my code
Header Files
<head id="Head1" runat="server">
<title></title>
<link href="css/jquery-ui.css" rel="stylesheet" />
<script src="js/jquery-3.1.1.js"></script>
<script src="js/jquery-ui.js"></script>
<%--<script src="js/jquery-ui.min.js"></script>--%>
<script src="js/Report-Filter.js"></script>
<script src="js/ReportTotalSalesPivot.js"></script>
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/jquery-ui.min.css" rel="stylesheet" />
<link href="css/Accordian-Hide-Show.css" rel="stylesheet" />
<script src="js/Accordian-Hide-Show.js"></script>
<link href="css/ReportTotalSalesPivot-style.css" rel="stylesheet" />
</head>
Inside Body
<input id="btnSave opener" class="btn btn-info" type="button" value="SAVE" />
<div id="wrapper">
<p>Some txt goes here</p>
</div>
Jquery code
$(document).ready(function () {
$('#wrapper').dialog({
autoOpen: false,
title: 'Basic Dialog'
});
$('#opener').click(function () {
$('#wrapper').dialog('open');
return false;
});
});
Please don't suggest this fiddle. From here only i got the code. I think the problem with arranging links in head tag.
I got error message. I think that error is not related to this model.
Error msg
jquery-3.1.1.js:6170 GET http://localhost:55047/css/images/ui-icons_444444_256x240.png 404 (Not Found)
Change the button id to one without spaces. You cannot use a space inside an id. It looks like you are using it in the same way as class, where you can add multiple values.
<input id="btnSave" class="btn btn-info" type="button" value="SAVE" />
Then the modal will open if you modify the jQuery listener.
$('#btnSave').click(function () {
$('#wrapper').dialog('open');
});
And those images you are missing can be downloaded here. They are included in the UI download.
You need to arrange the Header Tag like below. Below are working code. Header file sequence is important.
<html>
<head>
<title>Bootstrap Modal PopUp</title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-theme.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$("#showmodal").click(function () {
$('#myModal').modal('show');
});
});
</script>
</head>
<body>
<button id="showmodal" class="btn btn-info btn-lg" type="button">Open Modal</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
This is the test modal pop-up.
</div>
<div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Close</button></div>
</div>
</div>
</div>
</body>
</html>
Related
.daterangepicker {
SingleDatepicker: true,
showdropdowns: true,
autoupdateinput: true,
parentE1: #modaldialogid
}
I have an input textbox with a calendar in a button. This textbox with calendar in a button will be shown in a modaldialog box which is popping from jQuery.
Also the above code snippet is called in the client side scripting for the calendar textbox.
Issue: modal dialog box is getting closed on click of the textbox near the calendar control but whereas the calendar button is clicked this issue doesn't occur and am getting the calendar dropdown.
I think it is due to the ID entered in the parentE1: parameter. How to show the input id without #
<!DOCTYPE html>
<html lang="en">
<head>
<title>Modal</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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style>
html, body, .modal-content{
height: 100%;
overflow: auto;
}
</style>
</head>
<body>
<div class="container">
<!-- 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="myModal" 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">
<div>
<input type="text" name="daterange" value="01/01/2018 - 01/15/2018" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(function() {
$('input[name="daterange"]').daterangepicker({
opens: 'left'
}, function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
});
</script>
</body>
</html>
Modal is working in Firefox but not in Chrome, I added the code below.
The following is my app.js :
$('.test').on('click', function (event) {
event.preventDefault();
$('#join-req').modal();
});
HTML :
Join to my Group
The modal :
<div class="modal fade" tabindex="-1" role="dialog" id="join-req">
<div class="modal-dialog">
<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">Join Request</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="post-body">Join request to expert</label>
<textarea class="form-control" name="join-body" id="join-body" rows="5"></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" id="modal-save">Submit request</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
The following are the Bootstrap and jquery links :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="{{ URL::to('src/css/main.css') }}">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="{{ URL::to('src/js/app.js') }}"></script>
Thanks in advance
I can think of 3 possible causes of your problems, given that no errors are shown in your console.
JQuery could have been loaded twice.
check for inclusions of files which may already have been included in the others.
The .js files which you are referencing might not be in the right order,
make sure JQuery is loaded and only then Bootstrap .
Your JQuery doesn't work well with your current Bootstrap version. Try upgrading either of the 2 or both.
Here is my test.php page. I need pass the data on the x variable to uid variable.
When i run the code it gives me success alert also. But also giving an error saying,
Notice: Undefined variable: uid in
C:\wamp64\www\FinalFinalFinalProject\test.php on line 47 Call Stack #TimeMemoryFunctionLocation 10.0012235232{main}( )...\test.php:0 ">
<?php
$user = "anuradha";
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="StyleSheets/leave.css">
<script type="text/javascript">
$(document).ready(function(){
$(".btn-info").click(function(){ // Click to only happen on announce links
var x = $(this).data('id');
$.ajax({
type: "POST",
url: 'test.php',
data: { x : x },
success: function(data)
{
alert("success!");
}
});
});
});
</script>
</head>
<body>
<button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#myModal1" data-id="abc">Detail View</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" 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">Leave Application</h4>
</div>
<form method="post" action="">
<div class="modal-body">
<?php
if(isset($_POST['x']))
{
$uid = $_POST['x'];
}
?>
<input type="text" class="form-control" id="username" value="<?php echo $uid; ?>">
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default">Update</button>
</div>
</form>
</div>
</div>
</div>
<!-- Modal -->
</body>
</html>
Please help me.
As I see you need data-id value inside the input , well you can do this using JQuery only , why you are doing ajax?
<script type="text/javascript">
$(document).ready(function(){
$(".btn-info").click(function(){ // Click to only happen on announce links
var x = $(this).data('id');
$("#username").val(x);
});
});
</script>
I am trying to create a web application but I am having some trouble in sending the data to servlet in tomcat server.
whenever i click on Admin button then a modal window comes up.
In modal window i will enter the year which i want to send to the servlet on clicking the send button in modal window.
But i am not able to connect server since i am using
$.post(....) function in sublime.
<html>
<head>
<link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-10">
<h1 class="text-center">Admin portal</h1>
</div>
</div>
</div>
<div class="container">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myCreateDatabase">CreateDatabase</button>
<div class="modal fade" id="myCreateDatabase" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="text-center">create database</h4>
</div>
<div class="modal-body">
Year: <input type="text" name="year" id="yearvalue"><br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"> close</button>
<button type="submit" id="submitForm" class="btn btn-default">Send</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#submitForm").click(function(event) {
var name = $("#yearvalue").val();
$.post('http://localhost:9280/dummy.html', function(data) {
/*optional stuff to do after success */
alert("i maskd");
})
});
$("#myCreateDatabase").modal("hide");
});
</script>
</body>
</html>
You will need to pass your form data like name as below:
$.post('http://localhost:9280/dummy.html',{name:name}, function(data) { ..
Reference: https://api.jquery.com/jquery.post/
I want to show errors using Freeow or Modal alert. The PHP is using AJAX to fill some select input dropdowns. I'm using noConflict and creating one variable for each plugin (Freeow and Modal).
The JavaScript alert works, but the call to show Freeow or Modal doesn't work. What am I doing wrong?
<script type="text/javascript" src="./prototype.js"></script>
<script type="text/javascript" src="../jQuery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="../bootstrap/3.1.1/js/bootstrap.js"></script>
<script type="text/javascript" src="../bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript"> var jq = jQuery.noConflict(); </script>
<script type="text/javascript"> var jm = jQuery.noConflict(); </script>
<script type="text/javascript" src="../Freeow/jquery.freeow.min.js"></script>
<?PHP if ($valid === false) { ?>
<script>
alert("before Freeow call");
jq("#freeow").freeow("My Title", "Here's a message");
alert("before modal call");
jm('#myModal').modal('show');
</script>
<?PHP } ?>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="../bootstrap/3.1.1/css/bootstrap.css" rel="stylesheet">
<link href="../bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="../bootstrap/3.1.1/js/bootstrap.js" rel="stylesheet">
<link href="../bootstrap/3.1.1/js/bootstrap.min.js" rel="stylesheet">
<link href="../Freeow/style/freeow/freeow.css" rel="stylesheet" type="text/css" >
</head>
<body>
<div id="freeow" class="freeow freeow-top-right"></div>
<div id="myModal" 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>
</body>
</html>
I inspected the JS file demo.js on the freeow demo page and compared with the code in your question. As gre_gor mentioned, the <script> tags are added outside the <html> tags. Move those inside the HTML (either in the <head> or <body> tag) in order to have the JavaScript run properly.
Additionally, the JavaScript code should wait until the document is ready (e.g. after the DOMContentLoaded event) before trying to utilize the freeow extensions. jQuery's .ready() can be used for that.
The major change I added was wrapping the JavaScript to call the freeow method in the following block:
(function ($) {
$(document).ready(function() {
//code here to utilize the freeow extensions
jq("#freeow").freeow("My Title", "Here's a message");
//etc...
});
)(jq);
See the demonstration in the snippet below.
var jq = jQuery.noConflict();
(function($) {
$(document).ready(function() { //wait until DOM is ready
console.log("before Freeow call");
jq("#freeow").freeow("My Title", "Here's a message");
console.log("before modal call");
jm('#myModal').modal('show');
});
})(jq);
<script data-require="prototype#*" data-semver="1.7.1+0" src="//cdnjs.cloudflare.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script data-require="jquery#*" data-semver="1.9.1" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<link data-require="bootstrap#3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.1" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://web.archive.org/web/20160410115841/http://pjdietz.com/includes/component/jquery-plugins/freeow/jquery.freeow.min.js"></script>
<link rel="stylesheet" href="https://web.archive.org/web/20160410134722/https://pjdietz.com/includes/component/jquery-plugins/freeow/style/freeow/freeow.css" />
<script type="text/javascript">
var jq = jQuery.noConflict();
</script>
<script type="text/javascript">
var jm = jQuery.noConflict();
</script>
<div id="freeow" class="freeow freeow-top-right"></div>
<div id="myModal" 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>