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.
Related
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
});
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 html file that wraps react component , below is the code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content=""><!--
<link rel="shortcut icon" href="assets/img/logo-fav.png"> -->
<title>Loyalty Multipolar</title>
<link rel="stylesheet" type="text/css" href="/lib/perfect-scrollbar/css/perfect-scrollbar.min.css"/>
<link rel="stylesheet" type="text/css" href="/lib/material-design-icons/css/material-design-iconic-font.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!--[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]-->
<link rel="stylesheet" href="/css/style.css" type="text/css"/>
<style type="text/css">
.modal-body {
max-height:400px;
overflow-y:auto;
}
</style>
</head>
<body>
<div id="root">
</div>
<script src="bundle.js"></script>
<script src="/lib/jquery/jquery.min.js" type="text/javascript"></script>
<script src="/lib/perfect-scrollbar/js/perfect-scrollbar.jquery.min.js" type="text/javascript"></script>
<script src="/js/main.js" type="text/javascript"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/lib/jquery.niftymodals/dist/jquery.niftymodals.js" type="text/javascript"></script>
<script type="text/javascript">
$.fn.niftyModal('setDefaults',{
overlaySelector: '.modal-overlay',
closeSelector: '.modal-close',
classAddAfterOpen: 'modal-show',
});
$(function(){
Plugins.init();
$('.admin').click(function(){//button modal
alert('alert');
});
});
</script>
</body>
</html>
and this is my admin page
import React, {Component} from 'react';
import CreateForm from '../Component/Admin/CreateForm';
class AdminPage extends Component {
render(){
return(
<div className="be-content">
<CreateForm/>
<div className="page-head">
<h2 className="page-head-title">Manage Admin</h2>
<ol className="breadcrumb page-head-nav">
<li>Admin</li>
<li className="active">Index</li>
</ol>
</div>
<div className="main-content container-fluid">
<div className="panel panel-flat">
<div className="panel-heading">
Admin
<button data-modal="create" className="btn btn-space btn-primary pull-right md-trigger admin">Create New</button>
</div>
<div className="panel-body">
</div>
</div>
</div>
<div className="modal-overlay"></div>
</div>
);
}
}
export default AdminPage;
my problem is :
i have page for admin, and within it there is a modal, i'm using modal to show a form , when we start page or type the route address from address bar eg: localhost:3000/admin modal is showing and all javascript function such as alert that i put (see above html file) is fired, but if i access the page from sidebar link the javascript function is disabled or doesn't work, example
i access / from sidebar link then i click /admin and i click button to show modal it doesn't show modal.
i'm using react route v4
and my question is exactly same like this but i want more simple,effective and efficient way.
Anyone can help? thank you.
I think the problem is in jQuery binding after DOM updates like here and you should rewrite this line:
$('.admin').click(function(){//button modal
to this:
$(document).on('','.admin',function(){//button modal
Basically, I am creating a list item that generated by jQuery script. I would like to have each list item with an icon chosen from font awesome.
My JS script to create a list and my HTML markup are as below:
<script type="text/javascript">
jQuery(document).ready(function() {
var menuID = 0;
var itemCount = 1;
$('.add-new-id').click(function() {
menuID = $('.menu-id').val();
$('.menu-id, .add-new-id').attr('disabled', 'disabled');
return false;
});
$('#new-parent').submit(function() {
var newParent = $('input.new-parent').val();
$('ol.example:last').append('<li>' + newParent + '<button class="btn btn-default" role="iconpicker"></button></li>');
itemCount++;
$('input.new-parent').val('');
return false;
});
$('body').on('click', 'button[role="iconpicker"]', function() {
$(this).iconpicker();
});
});
</script>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/elusive-icons-2.0.0/css/elusive-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/font-awesome-4.2.0/css/font-awesome.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/ionicons-1.5.2/css/ionicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/map-icons-2.1.0/css/map-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/material-design-1.1.1/css/material-design-iconic-font.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/octicons-2.1.2/css/octicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/typicons-2.0.6/css/typicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/weather-icons-1.2.0/css/weather-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css"/>
<title>Menu</title>
</head>
<body>
<div class="row">
<div class="container">
<div class="col-sm-12">
<form action="" id="new-parent">
<div class="input-group col-sm-4">
<input type="text" class="form-control new-parent" placeholder="Add parent menu">
<div class="input-group-btn">
<button class="btn btn-default add-new-parent" type="submit">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
</form>
<h4>Available Forms:</h4>
<ol class="example">
</ol>
<button class="btn btn-success" type="submit">Save</button>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/jquery-sortable-min.js"></script>
<!-- Icon picker script-->
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/js/iconset/iconset-all.min.js"></script>
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/js/bootstrap-iconpicker.js"></script>
<!-- end script-->
</body>
</html>
For each list item icon, I would like to use Bootstrap-Iconpicker from this site. However, it does not work fine for each generated list item as you can see from screen shot and on my site.
Popup Icon Picker
By clicking on left and right arrow, or typing in text box, it does not work at all.
Please kindly test it on my demo site:
I could not find to any way to figure it out.
Please kindly help, your suggestion and solution are very much appreciate, thanks.
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?