jQuery datepicker not working in cshtml page - javascript

I am trying to implement a simple datepicker in jQuery but I am getting an error like 'datepicker not a function'. Really donot understand why and not able to know where I made the mistake. I have also added jQuery in the bundles and the bundle script is rendered in _Layout page and the script is added in the view but no luck. Could anybody help on what the problem is.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Reports</title>
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/themes/base/datepicker.css" rel="stylesheet" />
<link href="~/Content/themes/ui-lightness/jquery-ui.ui-lightness.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.12.4.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(function () {
var j = $.noConflict(true);
$("#fromdate").datepicker();
});
});
</script>
</head>
<body>
<div class="container">
<!-- Form Starts-->
<form name="PTTReport" style="padding-top:20px">
<div class="panel panel-primary">
<div style="padding-bottom:25px" class="panel-heading fixed_panel">
<span>Report Filters</span>
</div>
<div class="panel-body">
<div class="row">
#*From*#
<label class="col-sm-1">From</label>
<div class="col-sm-2">
<div class="input-group">
<input type="text" class="form-control" id="fromdate">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div><!-- /input-group -->
</div>
#*To*#
<label class="col-sm-1">To</label>
<div class="col-sm-2">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div><!-- /input-group -->
</div>
</div>
<!--Submit Button-->
<div class="col-sm-10"></div>
<div class="col-sm-2">
<button type="submit" class="btn btn-primary text-center">View Projects</button>
</div>
</div>
</div>

Console error clearly shows that it cant find file paths.
try this:
jQuery .css and .js files source
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
JS
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
Body of HTML
<body>
<p>Enter Date: <input type = "text" id = "datepicker"></p>
</body>

try the following:
var $j = jQuery.noConflict();
$j("#fromdate").datepicker();

Always check your browser console and network calls to make certain its loading all required files or not first.
$.datepicker() is not a function.
It clearly shows that it can't recognize the base script where this function is defined. Using ~ to define relative paths certainly is not loading your jquery/jquery-ui scripts. If you want to make sure you can check this code here and it works!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Reports</title>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"
integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw="
crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$(function () {
//var j = $.noConflict(true);
$("#fromdate,#todate").datepicker();
});
});
</script>
</head>
<body>
<div class="container">
<!-- Form Starts-->
<form name="PTTReport" style="padding-top:20px">
<div class="panel panel-primary">
<div style="padding-bottom:25px" class="panel-heading fixed_panel">
<span>Report Filters</span>
</div>
<div class="panel-body">
<div class="row">
#*From*#
<label class="col-sm-1">From</label>
<div class="col-sm-2">
<div class="input-group">
<input type="text" class="form-control" id="fromdate">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div><!-- /input-group -->
</div>
#*To*#
<label class="col-sm-1">To</label>
<div class="col-sm-2">
<div class="input-group">
<input type="text" class="form-control" id="todate">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div><!-- /input-group -->
</div>
</div>
<!--Submit Button-->
<div class="col-sm-10"></div>
<div class="col-sm-2">
<button type="submit" class="btn btn-primary text-center">View Projects</button>
</div>
</div>
</div>
I added jquery and jquery-ui from cdn and are working fine, make sure you added your jquery-ui script tag after jquery.
Updated JS Bin is here.
What to do next
Use '/' as relative path for linking your css and scripts that will solve your problem.

Related

Add hours and minutes from button in datatimepicker time picker

I'm using the bootstrap ready date time picker from http://eonasdan.github.io/bootstrap-datetimepicker/ .
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'HH:mm'
});
});
And this:
<div class="row">
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:10m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:15m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:20m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:30m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:45m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">01h:00m</button>
</div>
</div>
<div class="row">
<div class='col-sm'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3' style="width: 40%">
<input id="timepicker" name="timepicker" type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
I've 6 buttons that when I click on its time it automatically changes the time in the datapicker.
I can't do the function that updates the time, what an idea?
For setting as text value use $("#datetimepicker3").find("input").val(text); and for setting as time value use $('#datetimepicker3').data("DateTimePicker").date(text);
1. Bind the click event on each button by class.I used .btn as example.
2. Get button text by $(this).text() and replace/remove h and m to set the value as text on datetimepicker.
3. set the value using $("#datetimepicker3").find("input").val(text);
$(".btn").on('click', function(e) {
var text = $(this).text().replace("h","").replace("m","");
$("#datetimepicker3").find("input").val(text);
//$('#datetimepicker3').data("DateTimePicker").date(text);//select based on requirement
});
Working snippet for your code:
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'hh:mm'
});
});
$(".btn").on('click', function(e) {
var text = $(this).text().replace("h","").replace("m","");
//$('#datetimepicker3').data("DateTimePicker").date(text);
$("#datetimepicker3").find("input").val(text);
});
<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="./css/prettify-1.0.css" rel="stylesheet">
<link href="./css/base.css" rel="stylesheet">
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<div class="row">
<div class='col-sm-1'>
<button type="button" id="button1" class="btn btn-secondary btn-sm">00h:10m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:15m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:20m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:30m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:45m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">01h:00m</button>
</div>
</div>
<div class="row">
<div class='col-sm'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3' style="width: 40%">
<input id="timepicker" name="timepicker" type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
You can set time with date function:
$('#datetimepicker3').data("DateTimePicker").date("00:25");

How to create a confirm box?

I want to create a confirm box before insert any information on my database
I want to get a confirm message on clicking Add. If the user selects 'Ok' then Add is done, else if 'Cancel' is clicked nothing happens.
this is my html5 code
<script>
var option = "êtes-vous sûr de vouloir ajouter ce RDV?";
$('#btnAdd').on('click', function(e){
confirmDialog(option, function(){
//My code to Add
});
});
function confirmDialog(message, onConfirm){
var fClose = function(){
modal.modal("hide");
};
var modal = $("#confirmModal");
modal.modal("show");
$("#confirmMessage").empty().append(message);
$("#confirmOk").one('click', onConfirm);
$("#confirmOk").one('click', fClose);
$("#confirmCancel").one("click", fClose);
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Add RDV</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<!-- Modal dialog -->
<div id="frmTest" tabindex="-1">
<!-- CUTTED --><div class="modal-body">
<form method="post" id="insert-form">
<label>Nom</label>
<input type="text"id="name" class="form-control" required/>
<label>Prenom</label>
<input type="text"id="lname" class="form-control" required/>
<label>Date</label>
<input type="text"id="date" class="form-control" required/>
<label>Heure</label>
<input type="text"id="heure" class="form-control" required/>
</form>
</div>
<div id="step1" class="modal-footer">
<button type="button" class="glyphicon glyphicon-erase btn btn-default" id="btnAdd"> Add</button>
</div>
</div>
<!-- Modal confirm -->
<div class="modal" id="confirmModal" style="display: none; z-index: 1050;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"style="background-color:green;color:white;text-align:center">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" >Confirmation!</h4>
</div>
<div class="modal-body" id="confirmMessage">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" id="confirmOk">Ok</button>
<button type="button" class="btn btn-danger" id="confirmCancel">Cancel</button>
</div>
</div>
</div>
</div>
</body>
</html>
my php code is in the same page with my html and javascript code how shall i pricise to javascript which code need to execute
You aren't adding the event listeners:
$("#confirmOk").one('click', onConfirm);
It should be:
$("#confirmOk").on('click', onConfirm);
Also, onConfirm function is undefined.

bootstrap modal disappearing

I am having issues creating a module where it displays if the submission is valid (based on factors outside of the code- ex. the length of a string is acceptable).
When everything passes the test submits and then the modal pops up but disappears in about .5 seconds. Is there a way to make it stay longer?
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="faviconmoney.ico"/>
<meta charset="utf-8">
<title>Employee Info</title>
<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" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div>
<ul class="nav nav-pills">
<li role="presentation" class="active">Expenses</li>
<li role="presentation">Employee Data</li>
<li role="presentation">Logout</li>
</ul>
<hr />
</div>
<div>
<form role="form" method="post" id="user">
<div class="col-md-4">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" name="username" value="${user.uUserName}">
</div>
<div class="form-group">
<label for="first name">First Name:</label>
<input type="text" class="form-control" id="first name" name="firstname" value="${user.uFirstName}">
</div>
<div class="form-group">
<label for="last name">Last Name:</label>
<input type="text" class="form-control" id="last name" name="lastname" value="${user.uLastName}">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email" value="${user.uEmail}">
</div>
<button type="submit" class="btn btn-default" id="modelSubmit1" a href="#myModal" data-toggle="modal" datatarget="#myModal">Submit</button>
</div>
</form>
</div>
<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">
Your changes have been submitted and updated!
</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</body>
</html>
Load jquery(.min).js before bootstrap(.min).js.
As a rule of thumb, don't expect files from different versions of the same library/plugin to work well together. You are using Bootstrap .css from v.3.7.7 and .js from version v3.1.0.
Working example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<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">
Your changes have been submitted and updated!
</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close
</button>
</div>
</div>
<!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
Submit
As you can see, I'm using your code in the above example, linking the required dependencies in their correct order and the modal doesn't go away.
If this doesn't help you, you'll need to reproduce the bug here so we could pinpoint its source.
Edit, based on addition to question: Your modal does not disappear. It is dumped by browser, together with the page, because you are submitting a form simultaneously with displaying the modal. Submitting the form causes your page to refresh the page in its entirety. You need to:
Prevent conventional form submission:
$('form#user').submit( function(e){
e.preventDefault();
// send your data here in an $.ajax()
})
send the data async (via $.ajax()) and parse the result into your existing page.
For help on how to do that, see this question - and its answers.
Below is the solution with the explanation.
HTML Form Submission has a set process that cannot be modified. We can stop the default form submission action and use our script instead.
HTML Form Submission Process
HTML Form has an Action file defined with the form itself in action along with method and other attributes.
This ensures that once the form is submitted, the browser will move to the action file and process based on the HTML Form Input values. Since the browser is moving away from the Form page, therefore any UI object on the Form page will end immediately.
In your case, you are not supposed to move away from the page. Instead you have to prevent the default Form Submit action and use Ajax call to process user input via an external file and then show the result. Below is the code that works and also displays the entered Username in the Modal Title.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="faviconmoney.ico"/>
<meta charset="utf-8">
<title>Employee Info</title>
<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" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div>
<ul class="nav nav-pills">
<li role="presentation" class="active">Expenses</li>
<li role="presentation">Employee Data</li>
<li role="presentation">Logout</li>
</ul>
<hr />
</div>
<div>
<form role="form" method="post" id="user">
<div class="col-md-4">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" name="username" value="${user.uUserName}">
</div>
<div class="form-group">
<label for="first name">First Name:</label>
<input type="text" class="form-control" id="first name" name="firstname" value="${user.uFirstName}">
</div>
<div class="form-group">
<label for="last name">Last Name:</label>
<input type="text" class="form-control" id="last name" name="lastname" value="${user.uLastName}">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email" value="${user.uEmail}">
</div>
<!-- <button type="submit" class="btn btn-default" id="modelSubmit1" a href="#myModal" data-toggle="modal" datatarget="#myModal">Submit</button> -->
<button type="submit" class="btn btn-default" id="modelSubmit1">Submit</button>
</div>
</form>
</div>
<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">
Username Entered is <strong><span id="username_value">UserName</span></strong>.
</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<script type="text/javascript">
$('form#user').submit( function(e){
e.preventDefault();
var username = $('#username').val();
var dataString = "username="+username;
// $('#myModal').modal({ show: false});
$.ajax({
type: "POST",
url: "form-submission.php", // Name of the php files
data: dataString,
success: function(html)
{
$("#username_value").html(html);
$('#myModal').modal('show');
}
});
});
</script>
</body>
</html>
Note that I have used <span id="username_value"> to display the entered text in the middle of an HTML text.
Below is the code of external PHP file that you can use to process data entered. Which means, the modal will only show once the entry is processed successfully.
<?php
if ($_POST) {
$username_value = $_POST['username'];
echo $username_value;
}
?>
Hope this helps.

Add click action to search bootsrap

I used following code to add search options in navigation bar. it's showing but i didn't get click action for this,eg : i want get action from javascript while user click on enter button in search and user click on search button.
<div class="col-xs-12 col-sm-4">
<div><h6>Search book here</h6></div>
<form role="search">
<div class="input-group form-group" id="search-form">
<input type="text" class="form-control" placeholder="Search title" name="search" id="search" >
<div class="input-group-btn">
<button class="btn btn-default" type="submit" id='search-button'><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
Thanks advance.
Yes because you need to supply it with a ng-click directive made by angularjs. You can do:
var app = angular.module('YourApp', [])
app.controller('myCtrl', ["$scope",
function($scope) {
$scope.search= function() {
alert("Searching")
}
}
])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.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">
<!-- 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">
<!-- 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>
<div ng-app="YourApp" ng-controller="myCtrl" class="col-xs-12 col-sm-4">
<div>
<h6>Search book here</h6>
</div>
<form role="search">
<div class="input-group form-group" id="search-form">
<input type="text" class="form-control" placeholder="Search title" name="search" id="search">
<div class="input-group-btn">
<button class="btn btn-default" ng-click="search()" type="submit" id='search-button'><i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
Or
Using on-click provided by vanilla.js:
function search(){
alert("Searching");
}
<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">
<!-- 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>
<div class="col-xs-12 col-sm-4">
<div>
<h6>Search book here</h6>
</div>
<form role="search">
<div class="input-group form-group" id="search-form">
<input type="text" class="form-control" placeholder="Search title" name="search" id="search">
<div class="input-group-btn">
<button class="btn btn-default" onclick="search()" type="submit" id='search-button'><i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>

get dropdown text from bootstrap modal

i try to get dropdown text value from bootstrap modal, when i call val() it done nicely, but when i call text() to retrieve dropdown text, it is returning stack of dropdown text
this my code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".category-modal">Select Category</button>
<!-- hidden fields to store modal result in -->
<div class="form-group">
<label for="main-pages" class="col-lg-4 control-label">this should contain index from page dropdown : </label>
<input type="text" id="main-pages">
</div>
<div class="form-group">
<label for="main-sub-pages" class="col-lg-4 control-label">this should contain text from sub-page dropdown : </label>
<input type="text" id="main-sub-pages">
</div>
<div class="modal fade category-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form method="post" action="" class="form-horizontal">
<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="myModalLabel">Category</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="text-center">
<h4>Pages</h4>
</div>
</div>
<div class="col-lg-4">
<div class="text-center">
<h4>Sub Pages</h4>
</div>
</div>
<div class="col-lg-4">
<div class="text-center"></div>
<h4></h4>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<select id="pages" name="pages" class="form-control" size="6">
<option value="1">Hello</option>
<option value="2">Kon'nichiwa</option>
<option value="3">Assalamualaikum</option>
<option value="4">Annyeonghaseyo</option>
<option value="5">Ciao</option>
</select>
</div>
<div class="col-lg-4">
<select id="sub-pages" name="pages" class="form-control" size="6">
<option value="1">Hello</option>
<option value="2">Kon'nichiwa</option>
<option value="3">Assalamualaikum</option>
<option value="4">Annyeonghaseyo</option>
<option value="5">Ciao</option>
</select>
</div>
<div class="col-lg-4">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="login()">Save changes</button>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
//called when user clicks login
function login() {
$("#main-pages").val($("#pages").val());
$("#main-sub-pages").val($("#sub-pages").text());
$(".category-modal").modal("hide");
}
$('.category-modal').on('hidden', function() {
console.log('page : '+$("#main-pages").val());
console.log('sub-page : '+$("#main-sub-pages").text());
});
</script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
note : you need to move the cursor on second text input to see dropdown text
Change
console.log('page : '+$("#main-pages").val());
console.log('sub-page : '+$("#main-sub-pages").text());
To This
console.log('page : '+$("#main-pages :selected").val());
console.log('sub-page : '+$("#main-sub-pages :selected").text());
solved!!
this is the solution
change this line
<script type="text/javascript">
//called when user clicks login
function login() {
$("#main-pages").val($("#pages").val());
$("#main-sub-pages").val($("#sub-pages").text());
$(".category-modal").modal("hide");
}
$('.category-modal').on('hidden', function() {
console.log('page : '+$("#main-pages :selected").val());
console.log('sub-page : '+$("#main-sub-pages :selected").text());
});
</script>
to this
<script type="text/javascript">
//called when user clicks login
function login() {
var subPagesSelect = document.getElementById("sub-pages");
var selectedText = subPagesSelect.options[subPagesSelect.selectedIndex].text;
$("#main-pages").val($("#pages").val());
$("#main-sub-pages").val(selectedText);
$(".category-modal").modal("hide");
}
$('.category-modal').on('hidden', function() {
console.log('page : '+$("#main-pages :selected").val());
console.log('sub-page : '+$("#main-sub-pages :selected").text());
});
</script>
why i got all dropdown content, because what i call was an object not content of that object Correct me if im wrong

Categories