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>
Related
I want user to fill the form and after filling it, if the form is compatible with Validations(there can't be a null value) I want to show user a "Successfull" notification. But in this code, when I click on save button , it doesn't check the validations even though I didn't fill the form but still pushes "Successfull" notification. How can check the validations in Javascript. What am I missing here because I'm terrible at Javascript?
<head>
<meta charset="utf-8">
<meta name="viewport">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<link rel="stylesheet" href="~/css/site.css />
<script defer src="~/js/site.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<form method="post" asp-action="Create" id="form" >
<div class="form-group">
<label asp-for="Order">Order</label>
<input asp-for="Order" class="form-control" id="Order" >
#Html.ValidationMessageFor(m=>m.Order,"")
<span asp-validation-for="#Model.Order" class="text-danger"></span>
</div>
</br>
<div class="btn btn-primary" id="btnSave">
<p1>Save</p1>
</div>
<div class="btn btn-primary" id="btnSave">
<button class="btn btn-primary" style="visibility:visible" data-toggle="modal" data-target="#Modal1"> Button</button>
</div>
</form>
<div id="Modal1" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="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">
New product has been saved successfully.
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$(document).ready(function () {
//function checkFormValidateOrNot() {
// if ($(".field-validation-error").length > 0) {
// return false;
// }
// $(".form-control").each(function () {
// if ($(this).attr("data-val") == "true" && $(this).val() == "" &&
// $(this).is("select") == false) {
// return false;
// }
// });
// return true;
//}
$("#btnSave").click(function () {
//if (checkValidateOrNot() == true) {
//}
$('#Modal1').modal('show');
});
})
})
</script>
</body>
1.You can use validate() method which exists in jquery.validate.js to validate the form.
2.It is better for you to use the default version bootstrap and jquery in wwwroot folder. Otherwise, the modal will not display due to the compatibility of the nuget packages.
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
Whole working demo:
<head>
<meta charset="utf-8">
<meta name="viewport">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<link rel="stylesheet" href="~/css/site.css />
<script defer src="~/js/site.js"></script>
//modify here...
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<form method="post" asp-action="Create" id="form" >
<div class="form-group">
<label asp-for="Order">Order</label>
<input asp-for="Order" class="form-control" id="Order" >
#Html.ValidationMessageFor(m=>m.Order,"")
<span asp-validation-for="#Model.Order" class="text-danger"></span>
</div>
</br>
<div class="btn btn-primary" id="btnSave">
<p1>Save</p1>
</div>
<div class="btn btn-primary" id="btnSave">
<button class="btn btn-primary" style="visibility:visible" data-toggle="modal" data-target="#Modal1"> Button</button>
</div>
</form>
<div id="Modal1" class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="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">
New product has been saved successfully.
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$(document).ready(function () {
$("#btnSave").click(function () {
var validator = $("#form").validate();
var flag = validator.form();
if (flag) {
$('#Modal1').modal('show');
}
});
})
})
</script>
</body>
.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>
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 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>
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>