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/
Related
Hello guys How are you I'm working now on a project and i Want to create a simple trick.
if input type file has a value show confirm message with yes or no before closing the modal
Note : if the user choose yes close the modal with clear the input value
HTML CODE :
<div class="modal fade" id="modal_a" tabindex="-1" role="dialog" aria-labelledby="modal_aLabel" aria-hidden="true"data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="uploadavatar">
<input type="file"
class="custom-file-input"
id="ID12"
name="avatar"
value=""
hidden />
<label role="button" class="btn" for="Upload_u_avatar">
Upload Now
</label>
</div>
</div>
</div>
</div>
</div>
JS CODE :
$(document).ready(function() {
$(document).on('hidden.bs.modal', '#modal_a', function (e) {
// Confirmation Here
});
});
I did not find any close button in your modal, that's why I used default bootstrap modal, here is my snippet, so upload some file, then try to submit form to see action:
<!DOCTYPE html>
<html>
<head>
<title>SlutProjekt </title>
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700%7CRaleway:400,700&display=swap"
rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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">
<!-- JS files: jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</head>
<style>
body {
/*color: white;*/
margin: 0px;
padding: 0;
}
</style>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" 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">
<form action="" class="test">
<input type="file"
class="custom-file-input"
id="Upload_u_avatar"
name="avatar"
value=""
hidden />
<label role="button" class="btn" for="Upload_u_avatar">
Upload File Now
</label>
</form>
</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>
<!--- Second Row -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script>
$(function(){
$(".custom-file-input").on('change', function(e){
var vidFileLength = $(this)[0].files.length;
if(vidFileLength > 0){
//There is some chosen file
var confirmation = confirm("Are you sure?");
if(confirmation){
$(".custom-file-input").val('');
$("[data-dismiss=modal]").trigger({ type: "click" });
}
}
})
})
</script>
</body>
</html>
I'm trying to show a modal dialog after the result of a "if" statement, without a button which could open it, is it there any way to show it using only the response of the condition statement?
Currently I'm developing in Model View Controller. so when i make the call i do something like this in the controller:
if($response == "success"){
<script>
$(function() {
$('#eventCreated').modal('show');
});
</script>
}
and the modal in the bottom of my view looks like this:
<div class="modal fade" id="eventCreated" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel">Great!</h4>
</div>
<div class="modal-body">
This is test
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">create</button>
</div>
</div>
</div>
</div>
hope this is helpful for you, after all its depends on response. I use response variable to show just demo
var response = "success";
if (response == "success") {
$('#eventCreated').modal('show');
}
$("button").click(function(){
var response = "success";
if (response == "success") {
$('#eventCreated').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/4.1.3/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.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="eventCreated">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Great!</h4>
</div>
<div class="modal-body">
This is test
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">create</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Try this:
if($response == "success"){
<script>
$('#eventCreated').modal('show');
</script>
}
Otherwise, you have to print the value of $response.
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 can I show a modal popup on my save button that tells the format of the inputted data is incorrect?
This is my code for my input field:
<input class="inputs len_md" name="number" ng-model="myModel.text" required ng-pattern="/^(\d)+$/" / >
My button is as follow:
<button type="submit" class="button" Save</button><br><br><br>
My Modal popup is
<div class="modal-dialog">
<div class="modal-content" ng-hide="incorrect_format" id="incorrect_format">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="cancel()">×</button>
<h6 class="modal-title" id="myModalLabel">Error</h6>
</div>
<div class="modal-body" >
<p><center>The format is incorrect.</center> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal" ng-click="cancel()">OK</button>
</div>
</div>
How can I display the popup on button click that checks the correct format validation? Im using angularjs btw. Thanks for any help
I just check validation from controller and show modal if it is wrong.
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input class="inputs len_md" name="number" ng-model="myModel.text" required ng-pattern="/^(\d)+$/" / >
<button type="submit" class="button" ng-click="upd_check()">Save</button><br><br><br>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="cancel()">×</button>
<h6 class="modal-title" id="myModalLabel">Error</h6>
</div>
<div class="modal-body" >
<p><center>The format of Max UDP Connection is incorrect.</center> </p>
<p><center>Please enter a number from 0~65535.</center> </p>
<p><center>(0 means no limit)</center> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal" ng-click="cancel()">OK</button>
</div>
</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope)
{
$scope.upd_check = function(value)
{
var patt = new RegExp("/^(\d)+$/");
var res = patt.test(value);
if(!res)
{
$("#myModal").modal('show');
}
}
});
</script>
</body>
</html>
If I understand correctly, you are trying to show this pop-up only when the user enters information that is not a number between 0 - 65535.
For this, you first need to add an ng-click event to the button which runs a function with the mymodel.text variable as a parameter. The function will determine whether or not the user entered a number (most basic validator). This could look like:
var validator = function(mymodel.text){
if (mymodel.text === NaN){
incorrect_format = false;
}
}
And would be called by the button like:
<button ng-click = "validator()" type="submit" class="button" Save</button><br><br><br>
This would then change the condition of the variable to false and would result in the ng-hide function ceasing to execute and showing the modal pop-up.
I tried to create modal window using Twitter Bootstrap with the following code
<link rel= "stylesheet" href = "/static/bootstrap/css/bootstrap.css" >
<script src ="/static/bootstrap/js/bootstrap-modal.js" ></script>
<script type = "text/javascript" src= "/static/bootstrap/js/bootstrap.js" ></script>
<script src="/static/js/jquery.js></script>
<div class="modal hide" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
<a class="btn" data-toggle="modal" href="#myModal"> Launch Modal </a>
But it still only shows one button. I click on the link and nothing happens, the modal window does not pop up. Please help me find out what I'm doing wrong?
P.S I just started learning it now. If you could please tell me where is my error is that would be great.
You're loading your bootstrap.js after bootstrap-modal.js.
As well, It's better to move them to the very end of <body>.
<html>
<head>
<link href="bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div id="example" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">?</a>
<h3>This is a Modal Heading</h3>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>You can add some text here.</p>
</div>
<div class="modal-footer">
Call to action
Close
</div>
</div>
<a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Open modal</a>
<script src="jquery.js"></script>
<script src="bootstrap-modal.js"></script>
</body>
</html>