I don't know what I'm doing wrong but my hasFocus binding on a modal doesn't work. I looked at this jsfiddle example posted by #jasper-tey but when I pulled it out of a frame and wrote it as a standalone HTML page it wouldn't work.
I debugged the setFocus function and confirmed that the isFocused value is being set in the model. The binding seems to be correct and the parser isn't yelling at me. Yet the modal doesn't get focus in my code but it seems to work fine in the jsfiddle example. Any pointers on what I am missing would be most appreciated.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Input-focus in a Modalized Knockout Template</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<style id="compiled-css" type="text/css">
.container {
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<h4>Input-focus in a Bootstrap Modal</h4>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch modal</button>
<div class="modal fade" id="myModal" 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"></h4>
</div>
<div class="modal-body" data-bind="template: { name: 'bodyTemplateA'}"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-bind="click: setFocus">Set Focus</button>
</div>
</div>
</div>
</div>
</div>
<script id="bodyTemplateA" type="text/html">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" data-bind="value: name, hasFocus: isFocused" />
</div>
<div class="form-group">
<label>Type</label>
<input type="text" class="form-control" data-bind="value: type" />
</div>
</script>
<script type="text/javascript">
$(window).load(function(){
function mainModel (){
var self = this;
self.name = ko.observable("Blue border when in focus");
self.type = ko.observable();
self.header = ko.observable("This is a modal");
self.body = ko.observable('bodyTemplateA');
self.isFocused = ko.observable(false);
self.setFocus = function() {
data.isFocused(true);
}
}
var data = new mainModel();
ko.applyBindings(data);
$('#myModal').on('shown.bs.modal', function(){
data.isFocused(true);
});
});
</script>
</body>
</html>
I've changed the code and updated the knockoutjs import, from version 2.2.1 to version 3.1.0 and it worked.
The code that i changed:
var data = {
// var self = this;
name: ko.observable(),
type: ko.observable(),
header: ko.observable("This is a modal"),
body: ko.observable('bodyTemplateA'),
isFocused: ko.observable(false),
setFocus: function() {
data.isFocused(true);
},
}
ko.applyBindings(data);
$('#myModal').on('shown.bs.modal', function(){
data.isFocused(true);
});
Although I think the library version is the one causing trouble.
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 have a button with the code:-
<button type="button" name="btn-success" data-toggle="modal" data-target="#exampleModal" class="btn-success">Process</button>
with A Modal.
Now I want to change the button like this
<button type="button" name="btn-success" onclick="myFunction()" class="btn-success">Process</button>
And I want data-toggle="modal" data-target="#exampleModal"
to be executed in the function.
I tried
<script>
function myFunction(){
data-toggle="modal" data-target="#exampleModal";
};
</script>
But it didn't work. Can anyone teach me how to do that?
You can try this as your are using bootstrap.
<script>
function myFunction(){
$("#exampleModal").modal('toggle'); //see here usage
};
</script>
Your HTML
<button type="button" name="btn-success" onclick="myFunction()" class="btn-success">Process</button>
You are using bootstrap so better use modal('toggle')
function myFunction(){
$("#exampleModal").modal('toggle')
}
<button type="button" name="btn-success" onclick="myFunction()" class="btn-success">Process</button>
Working example
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style id="compiled-css" type="text/css">
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
</style>
<!-- TODO: Missing CoffeeScript 2 -->
<script type="text/javascript">
function myFunction() {
$("#exampleModal").modal('show')
}
</script>
</head>
<body>
<button type="button" name="btn-success" onclick="myFunction()" class="btn-success">Process</button>
<div id="exampleModal" 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>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent) {
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: ""
}], "*")
}
// always overwrite window.name, in case users try to set it manually
window.name = "result"
</script>
</body>
</html>
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 have a view and with this code in the head.
$(document).ready(function() {
$('#myModal').modal('show');
}
and the following HTML:
<div id="myModal" class="modal hide" role="dialog">
</div>
The controller has:
class Home extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->library('session');
}
public function index() {
$this->load->view('home');
}
}
When I run the view the modal does not appear. I am new CodeIgniter and do not understand why the modal does not work by simply running the index.php/home.
I am loading the bootstrap.js file in the footer in the correct order with jQuery. I have a Bootstrap alert working.
Is there a Library or Helper that has to be loaded in the controller?
I do not see any html or body tags on your view. Also not really to do any thing with codeigniter it self.
Here is script for auto show bootstrap on page load
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
And The View
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="modal fade" id="myModal">
<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">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 -->
</body>
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</html>