I'm using FullCalendar 4.3.1 . Calendar is displayed correctly but, I can´t add event dynamically. And I get this error:
When using JQuery:
TypeError: $(...).fullCalendar is not a function
I try it without JQuery and still not working:
TypeError: document.getElementById(...).fullCalendar is not a function
I have this page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href = 'libs/fullcalendar/core/main.css' rel = 'stylesheet' />
<link href = 'libs/fullcalendar/daygrid/main.css' rel = 'stylesheet' />
<link href = 'libs/fullcalendar/timegrid/main.css' rel = 'stylesheet' />
<link href = 'libs/fullcalendar/list/main.css' rel = 'stylesheet' />
<script src='libs/fullcalendar/core/main.js'></script>
<script src='libs/fullcalendar/core/locales/sk.js'></script>
<script src='libs/fullcalendar/interaction/main.js'></script>
<script src='libs/fullcalendar/daygrid/main.js'></script>
<script src='libs/fullcalendar/timegrid/main.js'></script>
<script src='libs/fullcalendar/list/main.js'></script>
<script src='libs/fullcalendar/moment/main.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['moment', 'interaction', 'dayGrid', 'timeGrid', 'list'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
locale: 'sk'
});
calendar.render();
});
function addEventToCalendar()
{
$('#calendar').fullCalendar('renderEvent', {
title: 'dynamic event',
start: new Date(),
allDay: true
});
//not working too
/*
document.getElementById('calendar').fullCalendar('renderEvent', {
title: 'dynamic event',
start: new Date(),
allDay: true
});
*/
}
</script>
</head>
<body>
<div style="margin-top: 10px">
<a onclick="addEventToCalendar()">
<i class="fas fa-calendar-alt calendarButtonText"></i> Add event
</a>
</div>
<div id='calendar' ></div>
</body>
</html>
Where is the problem?
I don't think you're accessing the calendar object correctly.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>
Add an event dynamically - Demos | FullCalendar
</title>
<link href='/assets/demo-to-codepen.css' rel='stylesheet' />
<style>
html, body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 40px auto;
}
</style>
<link href='https://unpkg.com/#fullcalendar/core#4.3.1/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/#fullcalendar/daygrid#4.3.0/main.min.css' rel='stylesheet' />
<script src='/assets/demo-to-codepen.js'></script>
<script src='https://unpkg.com/#fullcalendar/core#4.3.1/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/daygrid#4.3.0/main.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid' ],
defaultView: 'dayGridMonth',
header: {
center: 'addEventButton'
},
customButtons: {
addEventButton: {
text: 'add event...',
click: function() {
var dateStr = prompt('Enter a date in YYYY-MM-DD format');
var date = new Date(dateStr + 'T00:00:00'); // will be in local time
if (!isNaN(date.valueOf())) { // valid?
calendar.addEvent({
title: 'dynamic event',
start: date,
allDay: true
});
alert('Great. Now, update your database...');
} else {
alert('Invalid date.');
}
}
}
}
});
calendar.render();
});
</script>
</head>
<body>
<div class='demo-topbar'>
</div>
<div id='calendar'></div>
</body>
</html>
Review the source code on this demo page:
https://fullcalendar.io/docs/Calendar-addEvent-demo
Related
The code below highlights a row in a table when the mouse cursor is over a map marker.
This works, but not for all map markers, although there are values in the log.
I've tried using the trim() function on marker.on, but that's clearly not the problem. What could be the problem?
now the selection is like this
AAA no
BBB Yes
CCC no
DDD Yes
FFF-no
Mapscript
<script>
function createmaprker(dataArray) {
var map = L.map('viewmap').setView([51.56, -0.12], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
for (var i = 0; i < dataArray.length; i++) {
var marker = L.marker([dataArray[i][5], dataArray[i][6]]).addTo(map);
marker.bindPopup("Book: " + dataArray[i][2] + "<br>" + "Pages: " + dataArray[i][3]);
marker.on("mouseover", function(e) {
var popup = e.target.getPopup();
var content = popup.getContent();
var tr = $("#data-table").find("td").filter(function() {
return $(this).text() == content.split("<br>")[0].split(": ")[1];
}).closest("tr");
tr.addClass("highlight");
});
marker.on("mouseout", function(e) {
var popup = e.target.getPopup();
var content = popup.getContent();
var tr = $("#data-table").find("td").filter(function() {
return $(this).text() == content.split("<br>")[0].split(": ")[1];
}).closest("tr");
tr.removeClass("highlight");
});
}
}
</script>
code.gs
function doGet() {
return HtmlService.createTemplateFromFile('Index').evaluate();
}
function getData() {
var values=[['111', '1111', 'AAA', '752', 'Hardcover', '51.55', '-0.11'], ['222', '5555', 'BBB',' 1040', 'Hardcover', '51.55', '-0.10'], ['333', '777','CCC', '846', 'Hardcover', '51.565', '-0.11'], ['444', '888', 'DDD','258','Paperback', '51.56', '-0.12'], ['555', '555',' FFF',' 789','Hardcover', '51.55', '-0.13']]
return values;
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
Scriptdata
<script>
google.script.run.withSuccessHandler(showData).getData();
function showData(dataArray){
console.log(dataArray);
createmaprker(dataArray);
$(document).ready(function(){
$('#data-table').DataTable({
data: dataArray,
columns: [
{"title":"Rating"},
{"title":"Reviews"},
{"title":"Book"},
{"title":"Pages"},
{"title":"Type"},
{"title":"Longitude"},
{"title":"Latitude"},
]
});
});
}
</script>
index
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
<?!= include('Scriptdata'); ?>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="" />
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<style>
body {
margin: 0;
padding: 0;
}
#viewmap {
width: 60%;
height: 60vh;
left: 0%;
margin: auto;
}
#text {
font-family: Georgia, 'Times New Roman', Times, serif;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<br>
<div class="row">
<table id="data-table" class="table table-striped table-sm table-hover table-bordered">
</table>
</div>
</div>
<div id="viewmap"></div>
<?!= include('Mapscript'); ?>
</body>
</html>
The problem is that the DataTables zebra-striping style is interfering with your attempts to highlight the rows with dark grey stripes.
One fix for this is to remove table-striped from your HTML table definition.
If you want to keep your zebra striping, you will need to add !important to your highlighting style:
.highlight {
background-color: yellow !important;
}
You can see an example of this in the official DataTables documentation: Highlighting rows and columns.
Click on the "CSS" tab on that page to see the style example they are using.
There is also a small typo in the data set here: ' FFF' - note that extra space before the first F.
I have the following jsfiddle
https://jsfiddle.net/3qge41b0/
$('#myP').click(function() {
GetMap();
});
function GetMap() {
var text = '<html lang="en"> <head> <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css"> <style> .map { height: 400px; width: 100%; } </style> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js" asynchronous=false defer=true id="oljs" onload="LoadMap"></script' + '> <title>OpenLayers example</title> </head> <body> <h2>My Map</h2> <div id="map" class="map"></div> <script type="text/javascript" defer=true> function LoadMap() { var map = new ol.Map({ target: "map", layers: [new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 10}) }); console.log(map) }; $(function() { LoadMap() });</script' + '> </body></html>';
$("#myDIV").html(text);
}
$('#myP2').click(function() {
GetMap2();
});
function GetMap2() {
var text = '<html lang="en"> <head> <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css"> <style> .map { height: 400px; width: 100%; } </style> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js" asynchronous=false defer=true id="oljs" onload="LoadMap"></script' + '> <title>OpenLayers example</title> </head> <body> <h2>My Map</h2> <div id="map" class="map"></div> <script type="text/javascript" defer=true> function LoadMap() { var map = new ol.Map({ target: "map", layers: [new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 10}) }); console.log(map) }; setTimeout( function() { LoadMap() }, 10);</script' + '> </body></html>';
$("#myDIV").html(text);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1>My Web Page</h1>
<button id="myP">Click me.</button>
<button id="myP2">Or Click me.</button>
<div id="myDIV" style="width=100%;height=100%">This is a div element.</div>
</body>
</html>
$('#myP').click(function() { GetMap(); });
function GetMap()
{
var text = '<html lang="en"> <head> <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css"> <style> .map { height: 400px; width: 100%; } </style> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js" asynchronous=false defer=true id="oljs" onload="LoadMap"></script'+'> <title>OpenLayers example</title> </head> <body> <h2>My Map</h2> <div id="map" class="map"></div> <script type="text/javascript" defer=true> function LoadMap() { var map = new ol.Map({ target: "map", layers: [new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 10}) }); console.log(map) }; $(function() { LoadMap() });</script'+'> </body></html>';
$("#myDIV").html(text);
}
$('#myP2').click(function() { GetMap2(); });
function GetMap2()
{
var text = '<html lang="en"> <head> <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css"> <style> .map { height: 400px; width: 100%; } </style> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js" asynchronous=false defer=true id="oljs" onload="LoadMap"></script'+'> <title>OpenLayers example</title> </head> <body> <h2>My Map</h2> <div id="map" class="map"></div> <script type="text/javascript" defer=true> function LoadMap() { var map = new ol.Map({ target: "map", layers: [new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 10}) }); console.log(map) }; setTimeout( function() { LoadMap() }, 10);</script'+'> </body></html>';
$("#myDIV").html(text);
}
As you can see its just a div which is loaded dynamically with a html string.
The problem is, that the first button ends up in an error, because the ol.js library seems not be loaded. If I put a timeout in, it works (GetMap2). Also if you hit the first button a second time.
But I find this is rather a workaround than a solution. What if the connection is slow and the library takes more than 100 ms to load?
Is there a possibility to get the event when the library is loaded? I tried a lot of different ways of appending or adding the html string. Nothing worked. The ready or load event on the ol.js is not firing correctly.
Does anybody have an idea how to solve this?
Kind regards
Nico
With jquery you can use getScript to ensure the script is fully loaded.
$.getScript("https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js", function(){ LoadMap(); });
https://api.jquery.com/jQuery.getScript/
Example: https://jsfiddle.net/usc23yt6/#&togetherjs=9NyczI3xx7
I have kendo grid separately in a fiddle,
I have delete function seprately in a fiddle
when I select ThreeDots in each row in the grid it should show delete in small popup and when you click delete confirmation popup should open up.
after I click yes it should delete that particular row and when I slect no it should not
delete.
trying to display my confirmation box for delete in jquery way..providing that code below
can you guys tell me how to combine my code.
providing code and fiddle below
http://jsfiddle.net/cjyh8Lyc/4/
https://jsfiddle.net/9qpLukrL/
<div class="sports">
<div class="kendopobUpBox kendoWindow kPopupConfirmationBox">
<div class="row kendoPopUpGridCollection kendoPopUpContent lineHeightInputs">
<div class="kendoContent">Are you sure you want to upload file</div>
</div><div class="clearFloat"></div>
<div class="row kendoPopUpFooter textAligncenterImp">
<button class="commonBtn" type="button" id ="playerDocumentOk" (click)="uploadFile($event,document.value)">OK</button>
<button class="clearBtn" type="button" id ="playerDocumentCancel" (click)="cancel()">Cancel</button>
</div><div class="clearFloat"></div>
</div>
</div>
$('.sports').show();
$('.sports').hide();
#runningDocumentsPopup .sports {
position: relative;
}
.sports .kPopupConfirmationBox {
display: block;
z-index: 3;
left: calc(50% - 175px);
width: 350px;
position: absolute;
}
.sports {
display: none;
}
Not sure what is the purpose of your having delete function in the separate since kendo has built in function that can remove the row.You can attach a javascript function to delete(your code in a separate file for.
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="grid"></div>
<script>
var data = [
{ Id: 1, Name: "Decision 1", Position: 1 },
{ Id: 2, Name: "Decision 2", Position: 2 },
{ Id: 3, Name: "Decision 3", Position: 3 }
];
var dataSource = new kendo.data.DataSource({
//data: data,
transport: {
read: function(e) {
e.success(data);
},
update: function(e) {
e.success();
},
create: function(e) {
var item = e.data;
item.Id = data.length + 1;
e.success(item);
}
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
Name: { type: "string" },
Position: { type: "number" }
}
}
}
});
var grid= $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: false,
editable : true,
navigatable: true,
toolbar: ["save","cancel", "create"],
columns: ["Id", "Name", "Position",{template:"<a class='mybutton'><span class=''></span>ThreeDots</a>"}]
}).data("kendoGrid");
grid.element.on('click','.mybutton',function(){
//var dataItem = grid.dataItem($(this).closest('tr'));
//alert(dataItem.Name + ' was clicked');
//built in kendo function to remove row
grid.removeRow($(this));
})
</script>
</body>
</html>
Jsbin Demo demo with delete confirmation
UPDATE: I have email-form as id and still have the same issue.
I have a form that when I submit, should pop-open and display a colorbox, but the code opens the colorbox, but in the blink of an eye, the page refreshes?
Here is my code:
<html data-wf-page="546cd4ede4d" data-wf-site="5d0115c4ca7148">
<head>
<meta charset="utf-8">
<title>Request Form</title>
<meta content="Request a now." name="description">
<meta content="Request Thingy" property="og:title">
<meta content="Request a thingy now." property="og:description">
<meta content="summary" name="twitter:card">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/sdfj.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script type="text/javascript">
WebFont.load({
google: {
families: ["Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic","Varela Round:400","PT Sans:400,400italic,700,700italic"]
}
});
</script>
<script src="js/modernizr.js" type="text/javascript"></script>
<link href="images/favicon2.png" rel="shortcut icon" type="image/x-icon">
<link href="images/myfav.png" rel="apple-touch-icon">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-526-3'], ['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://thingyss.com/css/colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
#wrapper {
position: relative;
display: inline-block;
width: 100%;
z-index: 1;
}
#wrapper input {
padding-right: 14px;
}
#wrapper:after {
content: "*";
position: absolute;
right: 15px;
top: +12px;
/*color: #ed9900;*/
color: #39a2e2;
z-index: 5;
}
</style>
</head>
<body class="requestbody">
<form id="email-form" name="email-form">
..........
<div class="form_half_div right">
<div class="centered">
<input class="rounded_btn w-button w-preserve-3d" type="submit" value="Request Now" data-wait="Finding..." wait="Finding...">
</div>
</div>
</form>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBpz8DQg&v=3.exp&libraries=places">
</script>
<script src="js/socket.io.min.js"></script>
<script type="text/javascript" src="js/mystuff.js"></script>
<script src="https://checkout.stripe.com/checkout.js"></script>
<script src="js/autoNumeric.js"></script>
<script src="js/jquery.colorbox-min.js"></script>
<script>
$(document).ready(function() {
setTypes();
initialize();
$("#email-form").submit(function(){
requestTruckWarning(); // creates a colorbox
e.preventDefault(); // trying to prevent page from refreshing but never hits this breakpoint?
return false;
});
document.onkeypress = stopReturnKey;
});
function initialize() {
var options = {
types: ['(cities)'],
componentRestrictions: {country: "us"}
};
var mapOptions = {
center: { lat: 39.707187, lng: -100.722656},
zoom: 14,
draggable: false,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
google.maps.event.addListener(map, 'click', function() {
map.setOptions({draggable: true});
});
bootstrapHome(map);
}
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,
geolocation));
});
}
}
</script>
<!-- <script src="js/jquery-2.1.1.js"></script> -->
<script src="js/main.js"></script>
<!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
</body>
</html>
You forget to pass the event variable e as parameter to submit callback:
$("#email-form").submit(function(e){ //Here
requestTruckWarning(); // creates a colorbox
e.preventDefault(); // trying to prevent page from refreshing but never hits this breakpoint?
});
In your callback function, you're missing the passed parameter e (the event object):
$('#email-form').submit(function (e) {
requestTruckWarning() // Creates a colorbox
e.preventDefault() // This now works, because `e` exists
})
Additionally, it looks like some other answers (credit to Jai) have pointed out that #email-form does not refer to an element in your document. That must be fixed before the above code will run successfully.
Your form does not have any ID named #email-form. Either add the ID attribute:
<form id='#email-form'>
or change the selector:
$('form').submit(function(){
and as other answers are also mentioned you have to pass e as event in the submit callback.
$('form').submit(function(e){ // <-------here
Yet other two changes has to be done as suggest above.
There are actually two problems here. As #Jai said, you do no have an id attribute set for the form, so jQuery is looking for the element with id='email-form', and finding nothing, so the code doesn't execute. Even if it did execute, it wouldn't stop the form submit, because while you are using e.preventDefault, the 'e' in this case is the event object, which is a thing that you need to have passed in to your event handler. Add the id to your for, then change the declaration for your event handler like so:
$("#email-form").submit(function(e){
I'm trying to grab the <title> tag in Codemirror and set it's value as a input[type=text] value. However I keep getting an integer instead of the text.
In this sample it's "HTML5 canvas demo". Of course it changes.
DEMO
$(document).ready(function() {
var dest = $(".projectname");
var editorTitle = editor.getValue().search("<title>");
dest.val(editorTitle).val(dest.val().split(" ").join(""));
});
var delay;
// Initialize CodeMirror editor
var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
mode: 'text/html',
tabMode: 'indent',
styleActiveLine: true,
lineNumbers: true,
lineWrapping: true,
autoCloseTags: true,
foldGutter: true,
dragDrop : true,
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
});
// Live preview
editor.on('change', function() {
clearTimeout(delay);
delay = setTimeout(updatePreview, 300);
});
function updatePreview() {
var previewFrame = document.getElementById('preview');
var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;
preview.open();
preview.write(editor.getValue());
preview.close();
}
setTimeout(updatePreview, 300);
.CodeMirror, iframe {
border: 1px solid black;
}
.CodeMirror, iframe, .projectname {
float: left;
}
.CodeMirror {
width: 50%;
}
iframe {
width: 49%;
height: 300px;
border-left: 0;
}
.projectname {
width: 99.4%;
}
<!DOCTYPE html>
<html>
<head>
<title>Codemirror: Grab Title Value</title>
<meta charset='utf-8'>
<meta name='viewport' content='initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='IE=9' />
<link type='text/css' rel='stylesheet' href='http://necolas.github.io/normalize.css/3.0.1/normalize.css'/>
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
<script src='http://codemirror.net/lib/codemirror.js'></script>
<link rel='stylesheet' href='http://codemirror.net/lib/codemirror.css'>
<link rel='stylesheet' href='http://codemirror.net/addon/fold/foldgutter.css' />
<script src='http://codemirror.net/javascripts/code-completion.js'></script>
<script src='http://codemirror.net/javascripts/css-completion.js'></script>
<script src='http://codemirror.net/javascripts/html-completion.js'></script>
<script src='http://codemirror.net/mode/javascript/javascript.js'></script>
<script src='http://codemirror.net/mode/xml/xml.js'></script>
<script src='http://codemirror.net/mode/css/css.js'></script>
<script src='http://codemirror.net/mode/htmlmixed/htmlmixed.js'></script>
<script src='http://codemirror.net/addon/edit/closetag.js'></script>
<script src='http://codemirror.net/addon/edit/matchbrackets.js'></script>
<script src='http://codemirror.net/addon/selection/active-line.js'></script>
<script src='http://codemirror.net/keymap/extra.js'></script>
<script src='http://codemirror.net/addon/fold/foldcode.js'></script>
<script src='http://codemirror.net/addon/fold/foldgutter.js'></script>
<script src='http://codemirror.net/addon/fold/brace-fold.js'></script>
<script src='http://codemirror.net/addon/fold/xml-fold.js'></script>
<script src='http://codemirror.net/addon/fold/comment-fold.js'></script>
</head>
<body>
<div>
<input type="text" class="projectname" placeholder="Find title tag in editor and add what's inside it here..." />
</div>
<textarea id='code' name='code'><!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>HTML5 canvas demo</title>
</head>
<body>
hello world!
</body>
</html></textarea>
<iframe id='preview'></iframe>
</body>
</html>
The integer you are getting is the index of "<" in the title tag. To get the title you can use regEx.
var content = editor.getValue();
var openTagIndex = content.search(/<title/);
var closeTagIndex = content.search(/<\/title>/);
var titleTag = content.slice(openTagIndex , closeTagIndex);
var editorTitle = titleTag.slice(titleTag.search(/>/) + 1);