Bootstrap 4 File Input not working - javascript

I am using mdbootstrap(Bootstrap 4) free version in my php project. So it doesn't allow me to use input with type file. So I want use bootstrap 3 in that project for file upload functionality only.
Code Details are as follows:
I have created one template file. So in that I am rendering the required views at following line: <?php require_once ("content/" . $content . ".php"); ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="<?=base_url()?>assets/css/bootstrap.min.css" rel="stylesheet">
<link href="<?=base_url()?>assets/css/bootstrap-datepicker3.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="<?=base_url()?>assets/css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="<?=base_url()?>assets/css/style.css" rel="stylesheet">
<link rel="stylesheet" href="<?=base_url()?>assets/css/jquery.mCustomScrollbar.css">
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="<?=base_url()?>assets/js/jquery-3.1.1.min.js"></script>
</head>
<body>
<?php require 'common/cust_loader.php'; ?>
<?php require 'common/header.php'; ?>
<?php require 'common/popup.php'; ?>
<?php require_once ("content/" . $content . ".php"); ?>
<?php require 'common/footer.php'; ?>
<script type="text/javascript" src="<?=base_url()?>assets/js/bootstrap-datepicker.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="<?=base_url()?>assets/js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="<?=base_url()?>assets/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="<?=base_url()?>assets/js/mdb.min.js"></script>
<!-- custom scrollbar plugin -->
<script src="<?=base_url()?>assets/js/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript">
(function($){
$(window).on("load",function(){
$.mCustomScrollbar.defaults.scrollButtons.enable=true; //enable scrolling buttons by default
$.mCustomScrollbar.defaults.axis="yx"; //enable 2 axis scrollbars by default
$("#content-md").mCustomScrollbar({theme:"minimal-dark"});
$(".all-themes-switch a").click(function(e){
e.preventDefault();
var $this=$(this),
rel=$this.attr("rel"),
el=$(".content");
switch(rel){
case "toggle-content":
el.toggleClass("expanded-content");
break;
}
});
});
})(jQuery);
</script>
</body>
</html>
So in this file I have implemented mdbootstrap(bootstrap 4)
So for file upload I want to use bootstrap 3.
Means in short I want use bootstrap 3 in bootstrap 4 code.
Can anyone help me in this.
Thanks in advance.

Material Design for Bootstrap 4
<form>
<div class="file-field">
<div class="btn btn-primary btn-sm">
<span>Choose file</span>
<input type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Upload your file">
</div>
</div>
</form>
Bootstrap 3 - input file form
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
What happens when you try it with one of these two solutions? Do you have some error message in console?

Related

getting " Type Error : $(...).autocomplete is not a function" error using jQuery UI

I'm locked into a jQuery ui issue. I have done a form that I need to autocomplete all the field based on client id. It is like if I'm typing the id of an existing client, all the fields should be autofill with all that's client values from database table like fisrtname , last name, address, date-of-birth, but for the first i'm just trying to test if jquery Ui is working and I got the "$(...).autocomplete is not a function" error in console. It is not from Jquery because I have done also a notification system and i dysplay all notification with Jquery and it is working , I think That it's from jQuery UI. I have tried all possible solutions that I found with no success. Thank's in advance ! Good day to everybody! :)
This is My layouts.app
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="userId" content="{{Auth::check() ? Auth::user()->id : '' }}">
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="{{asset('jqueryui/jquery-ui.min.js')}}" type="text/javascript"></script>
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]); !!}
</script>
<!-- Fonts -->
{{-- <link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> --}}
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="{{asset('jqueryui/jquery-ui.min.css')}}">
<link rel="icon" type="image/png" sizes="16x16" href="{{asset('assets/images/favicon.png')}}">
<title>S.C. Amanet Stefany IFN S.R.L.</title>
<!-- Bootstrap Core CSS -->
<link href="{{asset('assets/plugins/bootstrap/css/bootstrap.min.css')}}" rel="stylesheet">
<!-- morris CSS -->
<link href="{{asset('assets/plugins/morrisjs/morris.css')}}" rel="stylesheet">
<!-- Custom CSS -->
<link href="{{asset('css/style.css')}}" rel="stylesheet">
<!-- You can change the theme colors from here -->
<link href="{{asset('css/colors/blue.css')}}" id="theme" rel="stylesheet">
{{-- <link href="{{ asset('css/app.css') }}" rel="stylesheet"> --}}
</head>
<body>
.... this is my content ....
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/app.js') }}"></script>
{{-- <script src="{{asset('assets/plugins/jquery/jquery.min.js')}}"></script> --}}
{{-- <script src="{{asset('js/jquery.js')}}"></script> --}}
<!-- Bootstrap tether Core JavaScript -->
<script src="{{asset('assets/plugins/bootstrap/js/popper.min.js')}}"></script>
<script src="{{asset('assets/plugins/bootstrap/js/bootstrap.min.js')}}"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="{{asset('js/jquery.slimscroll.js')}}"></script>
<!--Wave Effects -->
<script src="{{asset('js/waves.js')}}"></script>
<!--Menu sidebar -->
<script src="{{asset('js/sidebarmenu.js')}}"></script>
<!--stickey kit -->
<script src="{{asset('assets/plugins/sticky-kit-master/dist/sticky-kit.min.js')}}"></script>
<!--Custom JavaScript -->
{{-- <script src="{{asset('js/custom.js')}}"></script> --}}
<script src="{{asset('js/custom.min.js')}}"></script>
{{-- <script src="{{asset('js/jquery-ui.js')}}"></script> --}}
<!-- ============================================================== -->
<!-- This page plugins -->
<!-- ============================================================== -->
<!--sparkline JavaScript -->
<script src="{{asset('assets/plugins/sparkline/jquery.sparkline.min.js')}}"></script>
<!--morris JavaScript -->
<script src="{{asset('assets/plugins/raphael/raphael-min.js')}}"></script>
<script src="{{asset('assets/plugins/morrisjs/morris.min.js')}}"></script>
<!-- Chart JS -->
<script src="{{asset('js/dashboard1.js')}}"></script>
<!-- ============================================================== -->
<!-- Style switcher -->
<!-- ============================================================== -->
<script src="{{asset('assets/plugins/styleswitcher/jQuery.style.switcher.js')}}"></script>
</body>
</html>
This is my view with that form
<div class="form-group row ml-1 mb-1">
<label for="example-text-input" class="col-3 col-form-label pt-0" style="min-width: 80px;">Serie B.I./C.I.:</label>
<div class="col-3 pl-0">
<input class="form-control input-height pl-1 pr-1" name="serie" type="text" value="" id="">
</div>
<div class="col-4 pl-0">
<input class="form-control input-height pl-1 pr-1" name="nr_id" type="text" value="" id="cltId" > //this #cltId ----------
</div>
</div>
And this is my resource/js/app.js with the jQuery code that I need
$(document).ready(function(){
$("#cltId").autocomplete({
source: [
'Apple',
'Banana',
'Orange',
]
});
});
Any suggestion ? Have I added something that I shouldn't ? Have I write the code in wrong way ? I can not find the mistake ,any answer will help me lot.
Finally solved, I have moved all the jQuery code in app.js, I have run the command
npm install jquery-ui --save-dev
and I imported it in app.js like :
import $ from 'jquery';
window.$ = window.jQuery = $;
import 'jquery-ui/ui/widgets/autocomplete.js';
IMPORTANT ! note that the autocomplete.js from the ends is work for me because is the widget that I want to use , find out what widget you want and import it there after importing jquery :
Import 'jquery-ui/widgets/here is the widget that you want .js'
But before look to not import jquery anywhere else like layouts or any other js files like bootstrap.js for example.

Can't get basic select2 multiselect to function in my browser, using Laravel 5.8

I'm trying to incorporate select2 multi-select functionality in my application but can't seem to get it to work. I have included my code below. I have run through all of the basic issues that people usually face and my code should be loading in appropriate order.
View
#extends('layouts.layout')
#extends('layouts.navbar')
#section('content')
<fieldset>
<small class="errorMessage"></small>
<label for="tags">Tags</label>
<select name="tags" id="tagsList" class="select2-multi form-control" multiple="multiple">
#foreach($tags as $tag)
<option value="{{$tag->id}}">{{$tag->name}}</option>
#endforeach
</select>
</fieldset>
Layout file
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- CSS -->
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<link rel="stylesheet" href="{{asset('css/main.css')}}">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<link rel="stylesheet" href="{{asset('css/select2.min.css')}}">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=ZCOOL+XiaoWei" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito|Raleway" rel="stylesheet">
<!-- JavaScript -->
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
<title>Plant Lab</title>
</head>
<body>
#include('includes.messages')
#yield('jumbotron')
#yield('content')
<script src="{{asset('js/custom.js')}}"></script>
<script src="{{asset('js/select2.min.js')}}"></script>
</body>
</html>
Custom JS file
// Select 2
$(document).ready(function() {
$('.jselect2-multi').select2();
});
My browser is just rendering a regular HTML select form and the Select2 is not being applied. Where am I going wrong? Thank you!
make your input field name array,
<select name="tags[]" id="tagsList" class="select2-multi form-control" multiple="multiple">
#foreach($tags as $tag)
<option value="{{$tag->id}}">{{$tag->name}}</option>
#endforeach
</select>
You make a type mistake,
// Select 2
$(document).ready(function() {
$('.select2-multi').select2(); // class name should be select2-multi not jselect2-multi
});

How to use ckeditor in php

I am building a CMS system and I found that I can not configure the ckeditor script on my text area, can anyone help me to solve the issue
My code is below:
header.php
<?php ob_start(); // helps to buffer our project ?>
<?php include "../includes/db.php"?>
<?php include "functions.php"?>
<?php ob_start(); ?>
<?php session_start(); ?>
<?php
if (!isset($_SESSION['rl'])){
header("Location:../index.php");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Bootstrap Admin Template</title>we
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- FOR CHART API -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!-- CDN for TEXT EDITOR -->
<script src="https://cdn.ckeditor.com/ckeditor5/10.1.0/classic/ckeditor.js"></script>
</head>
<body>
<script>
DecoupledEditor
.create( document.querySelector( '#body' ) )
.then( editor => {
const toolbarContainer = document.querySelector( '#body' );
toolbarContainer.appendChild( editor.ui.view.toolbar.element );
} )
.catch( error => {
console.error( error );
} );
</script>
I used 'body' to ensure the code must apply on TEXTAREAS with id 'body'... here's code for text area:
<div class="form-group">
<label for="title">Post Content</label>
<textarea class="form-control" name="post_content" id="body" cols="30" rows="10"></textarea>
</div>
You have included Classic editor script in your header.php file and you are trying to access DecoupledEditor.create() method which will throw an error.
Ideally, you should use ClassicEditor.create() method
Use below code for header.php
<?php
ob_start();
include "../includes/db.php";
include "functions.php";
session_start();
if (!isset($_SESSION['rl'])) {
header("Location:../index.php");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Bootstrap Admin Template</title>we
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- FOR CHART API -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!-- CDN for TEXT EDITOR -->
<script src="https://cdn.ckeditor.com/ckeditor5/10.1.0/classic/ckeditor.js"></script>
</head>
<body>
I have removed your DecoupledEditor script from header.php
Now initialize ClassicEditor.create() script after your textarea
<div class="form-group">
<label for="title">Post Content</label>
<textarea class="form-control" name="post_content" id="body" cols="30" rows="10"></textarea>
</div>
<script>
ClassicEditor
.create(document.querySelector('#body'))
.catch(error => {
console.error(error);
});
</script>
Hope this will help you!!

I have this error : $(...).datepicker is not a function

I try to use a datepicker, but it doesn't work.
I have this error : $(...).datepicker is not a function
I use many frameworks and librairy (Adminlte, bootstrap, chartjs, datatable). And I think that there is a conflicts between they.
$(document).ready(function() {
$('#datepicker').datepicker();
$('#datepicker').on("changeDate", function() {
$('#my_hidden_input').val(
$('#datepicker').datepicker('getFormattedDate')
);
});
});
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Dashboard</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="./css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="./css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="./css/skin-black-light.css">
<!-- CSS Table -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<!-- My Style -->
<link rel="stylesheet" href="./css/style_general.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet/less" type="text/css" href="./less/dropdown.less" />
<link rel="stylesheet/less" type="text/css" href="./less/sprites.less" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini fixed">
<div class="form-group">
<label>Date</label>
<div class="input-group date margin-bottom-10" id="datetimepicker1">
<input type="text" class="form-control" id="date" name="date" placeholder="DD/MM/YYY">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
<!-- jQuery 2.2.3 -->
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="./js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="./js/app.min.js"></script>
<!-- ChartJS 1.0.1 -->
<script src="./js/Chart.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="./js/demo.js"></script>
<!-- SlimScroll 1.3.0 -->
<script src="./js/jquery.slimscroll.min.js"></script>
<!-- JS table -->
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="./js/test_table.js"></script>
<script src="./js/js.js"></script>
</body>
</html>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
var j = jQuery.noConflict();
j( function() {
j( "#datepicker" ).datepicker();
} );
</script>
Please try it this way. It is working fine. Same object is defined and used by jquery so its conflict try above trick its work fine..
I think datepicker is available in JQuery UI but you didn't include those library files. when I include the below files there is no such error $(...).datepicker
please include these file and check
[link] https://code.jquery.com/ui/1.12.1/jquery-ui.js
[link] https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css
Make sure that you include that datapicker.js library on the page that you use it on. Make sure that the link / local file exists. It may be a loaded from a different file if you are using bootstrap / framework.
This is the most common reason.
You can follow like this. This works for me.
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
The JS coding for the Date Picker I use.
<script>
$(document).ready(function(){
// alert ('Cliecked');
var date_input=$('input[name="orangeDateOfBirthForm"]'); //our date input has the name "date"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var options={
format: 'dd/mm/yyyy',
container: container,
changeYear: true,
changeMonth: true,
todayHighlight: true,
autoclose: true,
yearRange: "1930:2100"
};
date_input.datepicker(options);
});
</script>
The HTML Coding:
<input type="text" id="orangeDateOfBirthForm" name="orangeDateOfBirthForm" class="form-control validate" required>
<label data-error="wrong" data-success="right" for="orangeForm-email">Date of Birth</label>
If datepicker does not work due to conflict jquery, then try this way. It will work.
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
(function($){"use strict";
var $window=$(window)
var datepick=$('.date-pick')
if($(datepick).length){$(datepick).datepicker({format:"dd/mm/yyyy"});}
})(jQuery);
});
</script>
<script type="text/javascript" src="js/bootstrap-datepicker.js"></script> <!-- datepicker js-->
There is no conflict with using jQuery and Datepicker together.
This error - "$().datepicker is not a function" - is almost always a conflict because of a second instance of jQuery being loaded.
Look for a second instance of jQuery being loaded somewhere.
I have gone through all your js files.
Noted that you are using AdminLTe for your js and css.
In that case, check again the the example in Forms > Advanced Elements in left panel.
I think you missed out the bootstrap datepicker: Try searching for this js file in AdminLTe Example: <link rel="stylesheet" href="../../plugins/datepicker/datepicker3.css">
Inclue JqueryUI
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Want to get result from a radio button in popover

My code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h2>Hello</h2>
<button type="button" id="example" class="btn btn-danger" data-container="body" data-html="true" data-toggle="popover" data-placement="right" data-content="<form id='myform' class='form-horizontal'>
<input type='radio' id='rb1' name='keys' value='Adult' bind-value='key'>
Adult <br>
<input type='radio' id='rb2' name='keys' value='Child' bind-value='key'>
Child <br>
<input type='radio' id='rb3' name='keys' value='Concession' bind-value='key'>
Concession </form>" data-original-title="Select seat type">Hello
</button>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').popover();
$('#myform input').on('change', function() {
alert($('input[name=keys]:checked').val());
});
});
</script>
</body>
</html>
I want to display the value of selected radio button(placed in popover) in an alert. This code somehow doesn't bring up the alert at all. The popover is displayed perfectly and the radio buttons are displayed correctly too. Only the alert doesnt show up on selection of radio button in the popover. Please help!
The problem was with when to initialize the listener. The form does not exist untill the popup is shown. So you need to initialize the event listener after.
Here is the snippet:
$(document).ready(function() {
$('#example').popover();
$('#example').on('shown.bs.popover', function() {
$('#myform input').on('click', function() {
alert($('input[name=keys]:checked').val());
});
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
</head>
<body>
<h2>Hello</h2>
<button type="button" id="example" class="btn btn-danger" data-container="body" data-html="true" data-toggle="popover" data-placement="right" data-content="<form id='myform' class='form-horizontal'>
<input type='radio' id='rb1' name='keys' value='Adult' bind-value='key'>
Adult <br>
<input type='radio' id='rb2' name='keys' value='Child' bind-value='key'>
Child <br>
<input type='radio' id='rb3' name='keys' value='Concession' bind-value='key'>
Concession </form>" data-original-title="Select seat type">Hello
</button>
</body>
</html>
Something like this;
$("input:radio[name=keys]").click(function() {
var value = $(this).val();
alert(value);
});
Similar answer here;
In jQuery, how do I select an element by its name attribute?
$(document).ready(function(){
$('#example').popover();
$("form").find('input[type="radio"]').on('change', function() {
alert($('input[name=keys]:checked').val());
});
});
Here how i managed to get your goal completed.
above is my code for getting alert the value of the the selected radio button.

Categories