I'm trying to set up fullCalendar in the laravel framework and for some reason it doesn't work.
I've made a separate prototype (no framework, just an index.html file) and when I copy that code, it suddenly doesn't work anymore...
I'm getting a Uncaught TypeError: $(...).fullCalendar is not a function error.
Can anyone tell me what I did wrong?
laravel:
app.blade.php
<!DOCTYPE html>
<html lang="<!DOCTYPE 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">
<meta name="description" content="">
<meta name="author" content="">
<title>Larabase</title>
<script src="{{ asset('bower/jquery/dist/jquery.js') }}"></script>
<script src="{{ asset('bower/moment/moment.js') }}"></script>
<script src="{{ asset('bower/moment/locale/nl.js') }}"></script>
<script src="{{ asset('bower/fullcalendar/dist/fullcalendar.js') }}"></script>
<script src="{{ asset('bower/fullcalendar/dist/lang/nl.js') }}"></script>
<link rel="stylesheet" href="{{ asset('bower/fullcalendar/dist/fullcalendar.css') }}"/>
<link rel="stylesheet" href="{{ asset('bower/fullcalendar/dist/fullcalendar.print.css') }}"/>
#stack('scripts_head_before')
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
{{-- Font Awesome --}}
{{--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">--}}
#stack('scripts_head_after')
</head>
<body>
#include('partials.nav')
<div class="container" style="margin-top: 30px;">
#include('partials.alert')
#yield('content')
</div><!-- /.container -->
#stack('scripts_footer_before')
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
{!! HTML::script('js/global.js') !!}
#stack('scripts_footer_after')
</body>
</html>
laravel: home.blade.php
#extends('app')
#section('content')
<div id='calendar'></div>
<script type="text/javascript">
var events = [
{
title: 'Meeting',
start: '2016-01-12T10:30:00',
end: '2016-01-12T11:30:00'
},
{
title: 'Meeting',
start: '2016-01-12T11:30:00',
end: '2016-01-12T12:30:00'
},
{
title: 'Meeting',
start: '2016-01-12T12:30:00',
end: '2016-01-12T13:30:00'
}
];
$(document).ready(function () {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
lang: 'nl',
eventLimit: true,
weekends: true,
firstDay: 1,
weekNumbers: true,
businessHours: {
start: '10:00', // a start time (10am in this example)
end: '18:00', // an end time (6pm in this example)
dow: [1, 2, 3, 4, 5]
// days of week. an array of zero-based day of week integers (0=Sunday)
// (Monday-Thursday in this example)
},
events,
dayClick: function (date, jsEvent, view) {
alert('Clicked on: ' + date.format());
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('Current view: ' + view.name);
// change the day's background color just for fun
$(this).css('background-color', 'red');
},
eventClick: function (calEvent, jsEvent, view) {
// alert('Event: ' + calEvent.title);
// alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
// alert('View: ' + view.name);
console.log('event', calEvent);
console.log('jsEvent', jsEvent);
console.log('View', view);
// change the border color just for fun
$(this).css('border-color', 'red');
}
});
});
</script>
#stop
index.html prototype (that works):
<html>
<head>
<title>Fullcalendar prototype</title>
<link rel='stylesheet' href='bower_components/fullcalendar/dist/fullcalendar.css'/>
<script src='bower_components/jquery/dist/jquery.min.js'></script>
<script src='bower_components/moment/min/moment.min.js'></script>
<script src='bower_components/fullcalendar/dist/fullcalendar.js'></script>
<script src='bower_components/fullcalendar/dist/lang/nl.js'></script>
<script src='bower_components/bootstrap/dist/js/bootstrap.min.js'></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
</head>
<body>
<h1>Fullcalendar prototype
<button id="addbutton" class="btn btn-default">+</button>
</h1>
<div id='calendar'></div>
<script type="text/javascript">
var events = [
{
title: 'Meeting',
start: '2016-01-12T10:30:00',
end: '2016-01-12T11:30:00'
},
{
title: 'Meeting',
start: '2016-01-12T11:30:00',
end: '2016-01-12T12:30:00'
},
{
title: 'Meeting',
start: '2016-01-12T12:30:00',
end: '2016-01-12T13:30:00'
}
];
$(document).ready(function () {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
lang: 'nl',
eventLimit: true,
weekends: true,
firstDay: 1,
weekNumbers: true,
businessHours: {
start: '10:00', // a start time (10am in this example)
end: '18:00', // an end time (6pm in this example)
dow: [1, 2, 3, 4, 5]
// days of week. an array of zero-based day of week integers (0=Sunday)
// (Monday-Thursday in this example)
},
events,
dayClick: function (date, jsEvent, view) {
alert('Clicked on: ' + date.format());
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('Current view: ' + view.name);
// change the day's background color just for fun
$(this).css('background-color', 'red');
},
eventClick: function (calEvent, jsEvent, view) {
// alert('Event: ' + calEvent.title);
// alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
// alert('View: ' + view.name);
console.log('event', calEvent);
console.log('jsEvent', jsEvent);
console.log('View', view);
// change the border color just for fun
$(this).css('border-color', 'red');
}
});
});
</script>
</body>
</html>
Write your code as below:-
app.blade.php
<!DOCTYPE html>
<html lang="<!DOCTYPE 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">
<meta name="description" content="">
<meta name="author" content="">
<title>Larabase</title>
<script src="{{ asset('bower/jquery/dist/jquery.js') }}"></script>
<script src="{{ asset('bower/moment/moment.js') }}"></script>
<script src="{{ asset('bower/moment/locale/nl.js') }}"></script>
<script src="{{ asset('bower/fullcalendar/dist/fullcalendar.js') }}"></script>
<script src="{{ asset('bower/fullcalendar/dist/lang/nl.js') }}"></script>
<link rel="stylesheet" href="{{ asset('bower/fullcalendar/dist/fullcalendar.css') }}"/>
<link rel="stylesheet" href="{{ asset('bower/fullcalendar/dist/fullcalendar.print.css') }}"/>
#stack('scripts_head_before')
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
{{-- Font Awesome --}}
{{--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">--}}
#stack('scripts_head_after')
</head>
<body>
#include('partials.nav')
<div class="container" style="margin-top: 30px;">
#include('partials.alert')
#yield('content')
</div><!-- /.container -->
#stack('scripts_footer_before')
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
{!! HTML::script('js/global.js') !!}
#stack('scripts_footer_after')
// ADD another yield section here.
#yield('external_script')
</body>
</html>
home.blade.php
#extends('app')
#section('content')
<!-- Add only div here -->
<div id='calendar'></div>
#stop
#section('external_script')
<!-- Here is your script-->
<script type="text/javascript">
var events = [
{
title: 'Meeting',
start: '2016-01-12T10:30:00',
end: '2016-01-12T11:30:00'
},
{
title: 'Meeting',
start: '2016-01-12T11:30:00',
end: '2016-01-12T12:30:00'
},
{
title: 'Meeting',
start: '2016-01-12T12:30:00',
end: '2016-01-12T13:30:00'
}
];
$(document).ready(function () {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
lang: 'nl',
eventLimit: true,
weekends: true,
firstDay: 1,
weekNumbers: true,
businessHours: {
start: '10:00', // a start time (10am in this example)
end: '18:00', // an end time (6pm in this example)
dow: [1, 2, 3, 4, 5]
// days of week. an array of zero-based day of week integers (0=Sunday)
// (Monday-Thursday in this example)
},
events,
dayClick: function (date, jsEvent, view) {
alert('Clicked on: ' + date.format());
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('Current view: ' + view.name);
// change the day's background color just for fun
$(this).css('background-color', 'red');
},
eventClick: function (calEvent, jsEvent, view) {
// alert('Event: ' + calEvent.title);
// alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
// alert('View: ' + view.name);
console.log('event', calEvent);
console.log('jsEvent', jsEvent);
console.log('View', view);
// change the border color just for fun
$(this).css('border-color', 'red');
}
});
});
</script>
#stop
Hope it will help you :)
Related
until recently I used an old version of fullcalendar, (in this case V4) in which to be able to filter events loaded from a database I used the function calendar.rerenderEvents(), this is not in version 5 and I I would like to know if there is any way to be able to filter as I did before, since the possible solutions that I have seen would be either through queries or by working with the event object loaded from the database
Next I will leave an example of how to do to be able to filter with version 4
<html>
<head>
<title>Calendar</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{$conf.titulos.inicial}</title>
<link id="logonsgs" rel='icon' type="image/ico" href='web/img/produccion.ico' />
<!-- CSS -->
<link type="text/css" rel="stylesheet" href="web/css/material-icons.css" />
<link type="text/css" rel="stylesheet" href="web/css/material.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="web/css/materialize.css" media="screen,projection" />
<link href='librerias/fullcalendar4.4/daygrid/main.css' rel='stylesheet' />
<link href='librerias/fullcalendar4.4/timegrid/main.css' rel='stylesheet' />
<link href='https://cdn.jsdelivr.net/npm/#fullcalendar/core#4.4.2/main.min.css' rel='stylesheet' />
<link href='librerias/fullcalendar4.4/list/main.css' rel='stylesheet' />
<link href='librerias/fullcalendar4.4/bootstrap/main.css' rel='stylesheet' />
<!-- <link type="text/css" rel="stylesheet" href="librerias/fullcalendar/main.css" media="screen,projection" />-->
<link type="text/css" rel="stylesheet" href="web/css/dataTables.material.min.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="web/css/jquery-confirm.css" />
<!-- <link type="text/css" rel="stylesheet" href="web/css/jquery.dataTables.min.css" /> -->
<!-- Scripts-->
<script src="web/js/jquery.min.js"></script>
<script src="web/js/material.min.js"></script>
<script src="web/js/jquery-3.5.1.js"></script>
<script src="web/js/jquery-confirm.js"></script>
<script src="web/js/jquery.dataTables.min.js"></script>
<script src="web/js/dataTables.material.min.js"></script>
<script src="librerias/jsPDF/jspdf.min.js"></script>
<script src="librerias/jsPDF/jspdf.debug.js"></script>
<script src='librerias/fullcalendar4.4/main.min.js'></script>
<link href='librerias/fullcalendar4.4/fullcalendar.print.css' rel='stylesheet' media='print' />
<link href="librerias/fullcalendar4.4/icon.vc" rel="stylesheet">
</head>
<body>
<div class="mdl-grid ancho-min-500">
<div class="card mdl-shadow--4dp margen_inferior-20 util-center ancho-liberacion">
<table background="web\img\imagen2.jpg">
<tbody>
<tr>
<td width="5%"><button type="button" id="inici" class="boton_ini"><img
src="web/img/logo_SEKURIT_2020_color#2x-8.png" class="sekurit"></button></td>
<td width="32.5%"></td>
<td width="25%">
<div align="center"><label class="mdl-color-text--white">{$conf.titulos.inicial}</label>
</div>
<div align="center"><label class="mdl-color-text--white">{$conf.titulos.inicial_2} -
{$conf.botones.inicial_4}</div>
</td>
<td width="32.5%"></td>
<td width="5%"> <img src="web/img/OPEX_RVB.png" align="left" width="70" height="70"></td>
</tr>
</tbody>
</table>
<table>
<tr>
<td>
<div><label class="color_letra-negro">Linea</label></div>
<div>
<select id="Linea" class="mdl-textfield__input ">
<option value="" selected></option>
<option value="all">TODOS</option>
<option value="GT">GT</option>
<option value="BKT1">BKT1</option>
<option value="BKT2">BKT2</option>
</select>
</div>
</td>
</tr>
</table>
<div class="row no-gutters">
<div class="col">
<div id='calendar' class=""></div>
</div>
</div>
<div>
<div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--8-col-tablet mdl-cell--4-col-phone centro">
<br><br>
<button id="bot_salir" type="button"
class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--accent">
<i class="material-icons">keyboard_arrow_left</i>
</button>
<div class="mdl-tooltip" data-mdl-for="bot_salir" style="text-transform: uppercase;font-size:12px">
{$conf.mensajes.salir_1}</div>
</div>
<script>
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd;
}
if (mm < 10) {
mm = '0' + mm;
}
today = yyyy + '-' + mm + '-' + dd;
let calendar;
let date_picker;
let filter_linea = "all";
let filter_archivo = "all";
let filter_estado = "all";
let filter_equipo = "all";
$(document).ready(function() {
var calendarEl = $("#calendar").get(0);
let today = new Date();
calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ["core", "interaction", "dayGrid", "timeGrid", "list", "bootstrap",
"moment"
],
initialView: 'dayGridMonth',
locales: 'es',
initialDate: today,
timeZone: "local",
theme: "bootstrap",
showNonCurrentDates: false,
height: 900,
customButtons: {
printButton: {
icon: 'print',
click: function() {
window.print();
}
}
},
header: {
left: 'prevYear,prev,today,next,nextYear, printButton',
center: ' title ',
right: 'dayGridMonth,timeGridWeek,timeGridDay, listDay,listWeek,listMonth,listYear'
},
views: {
listDay: {
buttonText: 'DIA'
},
listWeek: {
buttonText: 'SEMANA'
},
listMonth: {
buttonText: 'MES'
},
listYear: {
buttonText: 'AÑO'
}
},
defaultDate: today,
navLinks: false,
businessHours: false,
editable: false,
selectable: false,
eventLimit: false,
lazyFetching: false,
eventSources: [{
url: "web/calendario/cargareventoGTLIB.php"
}, ],
eventRender: function(info, event, element, view) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
if (filter_linea !== "all" && info.event.id !== filter_linea) {
return false;
};
var showFacilities, shownumeros = true;
var numeros = $('#numero').val();
/* filters */
if (numeros.length > 0) {
shownumeros = info.event.title.toLowerCase().indexOf(numeros) >= 0;
}
return ['all', info.event.id].indexOf($('#Linea').val()) >= 0 &&
shownumeros;
},
date_picker,
weekNumbers: true,
eventDisplay: 'block'
});
calendar.render();
//inicio
$('#inici').click(function() {
$(location).attr('href', 'index.php?acc=login_in');
});
// SALIR
$('#bot_salir').click(function() {
$(location).attr('href', 'index.php?acc=calidad');
});
$(document).on("click", ".FiltLin-container .FiltLin", function(e) {
filter_linea = $(this).val();
calendar.rerenderEvents();
});
//visible
$('#Linea').on('change', function() {
calendar.rerenderEvents();
});
});
</script>
</body>
<footer>
<img src="web/img/logosg_m.png" alt="" class="floating-logo">
</footer>
</html>
Could something similar be done with V5?
clarification:
->What I tried so far was to work with the v4 function in v5 but it gives me an error like it doesn't exist, I also tried to work with the event object showing only those that met the filters but I couldn't find this object. and I would say that the error is from Js, since everything should be in the client
->The error is that calendar.rerenderEvents is not a function, so skip adding the error
I implemented this https://fancyproductdesigner.com/jquery/ which works fine. My query is when I the uploaded images on demo site it fix on the product's shape. For example, When I upload a logo on a cap the logo flexibly fixes on the shape of the cap. But in my integration, this is not working.
my code is:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fancy Product Designer</title>
<!-- Style sheets -->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- The CSS for the plugin itself - required -->
<link rel="stylesheet" type="text/css" href="css/FancyProductDesigner-all.min.css" />
<!-- Include required jQuery files -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<!-- HTML5 canvas library - required -->
<script src="js/fabric.min.js" type="text/javascript"></script>
<!-- The plugin itself - required -->
<script src="js/FancyProductDesigner-all.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
var $yourDesigner = $('#clothing-designer'),
pluginOpts = {
productsJSON: 'json/products.json', //see JSON folder for products sorted in categories
designsJSON: 'json/designs.json', //see JSON folder for designs sorted in categories
stageWidth: 1200,
editorMode: false,
smartGuides: true,
fonts: [{
name: 'Helvetica'
}, {
name: 'Times New Roman'
}, {
name: 'Pacifico',
url: 'Enter_URL_To_Pacifico_TTF'
}, {
name: 'Arial'
}, {
name: 'Lobster',
url: 'google'
}],
customTextParameters: {
colors: false,
removable: true,
resizable: true,
draggable: true,
rotatable: true,
autoCenter: true,
boundingBox: "Base"
},
customImageParameters: {
draggable: true,
removable: true,
resizable: true,
rotatable: true,
colors: '#000',
autoCenter: true,
boundingBox: "Base"
},
actions: {
'top': ['download', 'print', 'snap', 'preview-lightbox'],
'right': ['magnify-glass', 'zoom', 'reset-product', 'qr-code', 'ruler'],
'bottom': ['undo', 'redo'],
'left': ['manage-layers', 'info', 'save', 'load']
}
},
yourDesigner = new FancyProductDesigner($yourDesigner, pluginOpts);
});
</script>
</head>
<body>
<div id="main-container">
<h3 id="clothing">Clothing Designer</h3>
<div id="clothing-designer" class="fpd-container fpd-shadow-2 fpd-topbar fpd-tabs fpd-tabs-side fpd-top-actions-centered fpd-bottom-actions-centered fpd-views-inside-left"> </div>
<br />
</div>
</body>
</html>
In the same page I want to put multiple full calendars. The problem is that for each calendar (100 calendar in my page) the calendar js scripts are reloaded each time (full calendar.js, moment.js, jquery.js) and that is very bad for the loading speed. Is there a way to say to the navigator or the code : keep the first loading in memory and reuse it instead of reload new scripts.
There is the idea of my code :
page1.php :
<tbody>
<tr>
<th scope="row">Monday</th>
<td >
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="page2.php?cell=140?day=Monday"> </iframe>
</div>
</td>
and my page2.php :
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<script src="js/basket.full.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src='fullcalendar-3.9.0/lib/jquery.min.js'></script>
<script src="js/bootstrap.min.js"></script>
<script src='fullcalendar-3.9.0/lib/moment.min.js'></script>
<script src='fullcalendar-3.9.0/fullcalendar1.min.js'></script>
<link href='fullcalendar-3.9.0/fullcalendar1.min.css' rel='stylesheet' />
<link href='fullcalendar-3.9.0/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header:false,
defaultView: 'agendaDay',
aspectRatio: 1,
slotEventOverlap:false,
slotLabelFormat: 'H',
defaultDate: <?php echo json_encode($result[$dayNumber]); ?>,
allDaySlot:false,
navLinks: false, // can click day/week names to navigate views
editable: false,
eventLimit: false, // allow "more" link when too many events
eventRender:
function(event, element) {
element.find('.fc-title').append("<br/>" + event.activity);
},
views: {
agendaDay: {
minTime: "09:00:00",
maxTime: "19:00:00",
}},
eventSources: [
{
url: 'event.php?cell=<?php echo json_encode($cell);?>', // use the `url` property
textColor: 'black'
}]
});
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
My autocomplete works only on the condition that the Page is reloaded. If I navigate to the page through a link this does not work. I have inluded the source code and a demo I have used. In the demo I have changed the var data field in order to show the values I'm fetching in the application.
Note: This is for a Ruby on Rails application.
Can someone say what is wrong with this?
<script>
$(function() {
var doctors = <%== #doctors %>;
var data = doctors.map(function (a) {
return { label: a[0], id: a[1] };
});
$('#tags').autocomplete({
delay: 0,
source: data,
select: function(event, ui) {
$('#doctor_id').val(ui.item.id);
}
});
} );
</script>
HTML code:
<div class="row">
<div class="input-field col s12 m6">
<i class="material-icons prefix">textsms</i>
<label class="active" for="tags">Doctor</label>
<input id="tags" type="text" class="autocomplete" required/>
<input id="doctor_id" name="doctor_id" type="hidden" required/>
</div>
</div>
Demo : JSfiddle
i tried your code with the correct scripts it runs just fine have a look
here is the head part
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
here is your fiddle script
var data = [
{label: "Ann Perera", id: 1},
{label: "Sam Perera", id: 2},
{label: "John Perera", id: 3}
];
$('#tags').autocomplete({
delay: 0,
source: data,
select: function(event, ui) {
$('#doctor_id').val(ui.item.label);
}
});
} );
I am new into web devlopment. I am trying to use select2-bootstrap. It working fine. Just need a css help.
Initial display of widget :
There is an indent between the bars(between Search for a movie and No matches found)
After clicking on the widget it looks fine as shown here and thereafter the dent disappears even on subsequent use.
Can someone suggest how to remove the dent between two bars in the first pic above.
NOTE :
CSS Added : select2.css, select2-bootstrap.css and bootstrap.css
JS Added : bootstrap.js, jquery-1.9.1.js, select2.js
Also please suggest how to avoid the No matches found display immediately after page loads.
Here is the code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Twitter Bootstrap</title>
<link rel="stylesheet" type="text/css" media="screen"
href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="css/select2.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="css/select2-bootstrap.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/select2.js"></script>
<script type="text/javascript">
var contextPath = "<%=request.getContextPath()%>";
$(document)
.ready(
function() {
MultiAjaxAutoComplete('#e6',contextPath + "/getData");
$('#save').click(function() {
alert($('#e6').val());
});
});
</script>
<script type="text/javascript">
function MultiAjaxAutoComplete(element, url) {
$(element).select2({
placeholder : "Search for a movie",
//minimumInputLength : 1,
multiple : true,
ajax : {
url : url,
dataType : 'json',
data : function(term, page) {
return {
q : term,
page_limit : 10,
};
},
results : function(data, page) {
console.log("page = " + page);
return {
results : data.results
};
}
},
formatResult : formatResult,
formatSelection : formatSelection,
initSelection : function(element, callback) {
var data = [];
$(element.val().split(",")).each(function(i) {
var item = this.split(':');
data.push({
id : item[0],
country : item[1]
});
});
callback(data);
}
});
};
function formatResult(movie) {
return '<div>' + movie.country + '</div>';
};
function formatSelection(data) {
return data.country;
};
</script>
</head>
<body style="background-color: #F9F9F6">
<h1>Serach Movies</h1>
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<input type='hidden' id="e6" class="span8" />
</div>
<div class="span3">
<button id="save">Save</button>
</div>
</div>
</div>
</body>
</html>