I using below code to add export functionality in datatable. i am unable to see export button, i am using master page. can anybody give some valuable remarks
$(document).ready(function () {
$('#tblOscarNominees').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaSorting": [[4, "desc"]],
"sDom": '<"H"Tfr>t<"F"ip>',
"oTableTools": {
"aButtons": [
"copy", "csv", "xls", "pdf",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": ["csv", "xls", "pdf"]
}
]
}
Below is the reference i set in master page
<link href="DataTables/media/css/TableTools_JUI.css" rel="stylesheet" type="text/css" />
<link href="DataTables/media/css/TableTools.css" rel="stylesheet" type="text/css" />
<link href="DataTables/css/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
<script src="../DataTables/js/jquery.js" type="text/javascript"></script>
<script src="../DataTables/js/jquery.dataTables.js" type="text/javascript"></script>
<script src="../DataTables/js/jquery.dataTables.editable.js" type="text/javascript"></script>
<script src="../DataTables/js/jquery.jeditable.js" type="text/javascript"></script>
<script src="../DataTables/js/jquery-ui.js" type="text/javascript"></script>
<script src="../DataTables/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../DataTables/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="../DataTables/js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
<script src="../DataTables/js/jquery.dataTables.columnFilter.js" type="text/javascript"></script>
<script src="DataTables/media/js/TableTools.js" type="text/javascript"></script>
<script src="DataTables/media/js/ZeroClipboard.js" type="text/javascript"></script>
Related
I'm trying to add the default mouse panning behavior to the map, but when trying to create an instance of MapEvents like this:
var mapEvents = new H.mapevents.MapEvents(map);
var behavior = new H.mapevents.Behavior(mapEvents);
I get this error:
Uncaught Error: events: map instance required
I'm developing an Angular app but i tried with a plain HTML page and the same happens.
Here is the code i'm using:
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
</head>
<body>
<div id="map" style="height: 500px; width: 500px;">
</div>
<script>
var platform = new H.service.Platform({
'apikey': 'REPLACED'
});
var defaultLayers = platform.createDefaultLayers();
var mapElement = document.getElementById('map');
var map = new H.Map(
mapElement,
defaultLayers.vector.normal.map,
{
zoom: 5,
center: {
lat: 0,
lng: 0
},
pixelRatio: window.devicePixelRatio || 1
}
)
console.log(map)
var ui = H.ui.UI.createDefault(map, defaultLayers)
var mapEvents = new H.mapevents.MapEvents(map);
var behavior = new H.mapevents.Behavior(mapEvents);
</script>
</body>
</html>
Can anyone else reproduce this issue?
You need to remove duplicated scripts importing.
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
I have done everything according to the documentation provided on https://fullcalendar.io/docs/google-calendar
I created a new calendar for this specific purpose.
I have purposely left the API key and calendarID blank
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar.min.css' rel='stylesheet' />
<link href='../fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script src='fullcalendar/gcal.js'></script>
<script>
$(function () {
$('#calendar').fullCalendar({
googleCalendarApiKey: '',
events: {
googleCalendarId: ''
}
});
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Solved Check comments for answer
I am trying to use bootstrap-select with my angular project but it does not appear at all.
My dependencies after installing the bootstrap-select package with bower:
<link rel="stylesheet" type="text/css" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-select/dist/css/bootstrap-select.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/angular-material/angular-material.min.css">
And for the js files:
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="bower_components/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="bower_components/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="bower_components/angular-aria/angular-aria.min.js"></script>
<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="bower_components/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="bower_components/ng-file-upload/ng-file-upload.min.js"></script>
<script type="text/javascript" src="bower_components/angular-material/angular-material.min.js"></script>
This is the only rule that is applied to the select item from the bootstrap-select css stylesheet.
select.bs-select-hidden, select.selectpicker {
display: none !important;
}
Is some of the other packages breaking it?
Thank you
My versions angular:1.6.2, bootstrap:3.3.7, bootstrap-select:1.12.2
I had the same problem recently, what i did was:
1) Download Bootstrap-select from SilvioMoreto Git;
2) Copy the bootstrap-select.js from bootstrap-select/js;
3) Paste the file in your project javascripts directory;
4) Link path to the file in your project header;
It worked for me, hope it helps!
I am facing conflict issues in both functionalities. If I use the //for slider code above then, lightbox works and easyslider wont work and vice-versa. What is the solution to get it done ?
I am using following code in the header
//for lightbox
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
//for slider
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: true
});
});
</script>
how can I use elrte Editor inside asp.net website?(any example)
Elrte Editor is pure javascript solution (more clear jQuery), so for accessing any of it features you have to use some javascript in your asp.net web-site.
First of all you should add some required folder with all it insertions to you project. You can find it inside installation package - elrte-1.2.zip. You have to copy to your project next folders: css, js, images with all subfolders and it content.
Secondly add some reference into your asp page like here:
<!-- jQuery and jQuery UI -->
<script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui-1.8.7.custom.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.7.custom.css" type="text/css" media="screen" charset="utf-8"/>
<!-- elRTE -->
<script src="js/elrte.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/elrte.min.css" type="text/css" media="screen" charset="utf-8"/>
<!-- elRTE translation messages -->
<script src="js/i18n/elrte.ru.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$().ready(function () {
var opts = {
cssClass: 'el-rte',
// lang : 'ru',
height: 450,
toolbar: 'complete',
cssfiles: ['css/elrte-inner.css']
}
$('#editor').elrte(opts);
})
<style type="text/css" media="screen">
body { padding:20px;}
</style>
For accessing content of this editor we can use some javascript api that was prepared to us by developers of this editor. So, lets see it here and we will find out that for getting editor content, for example, we can use next expression:
var content = $('selector').elrte('val');
So, lets add some page and editor interoperability into our page.
Add some button and textbox to your page:
<asp:Button ID="btnSend" runat="server" OnClientClick= "ViewText();" Text="View text" />
<asp:TextBox ID="txtText" runat="server">test</asp:TextBox>
and add next javascript, also:
function ViewText() {
var content = $('#editor').elrte('val');
alert(content);
var MyLabel = $('#txtText');
MyLabel[0].value = content;
}
After implementing this functionality you can get editor's content as well using javascript alert function and setting your textbox value, which can be accessed in your server code, actually.
Full asp.net page code in my case was:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>elRTE</title>
<!-- jQuery and jQuery UI -->
<script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui-1.8.7.custom.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.7.custom.css" type="text/css" media="screen" charset="utf-8"/>
<!-- elRTE -->
<script src="js/elrte.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/elrte.min.css" type="text/css" media="screen" charset="utf-8"/>
<!-- elRTE translation messages -->
<script src="js/i18n/elrte.ru.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$().ready(function () {
var opts = {
cssClass: 'el-rte',
// lang : 'ru',
height: 450,
toolbar: 'complete',
cssfiles: ['css/elrte-inner.css']
}
$('#editor').elrte(opts);
})
function ViewText() {
var content = $('#editor').elrte('val');
alert(content);
var MyLabel = $('#txtText');
MyLabel[0].value = content;
}
</script>
<style type="text/css" media="screen">
body { padding:20px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="editor" runat="server">
</div>
<asp:Button ID="btnSend" runat="server" OnClientClick= "ViewText();" Text="View text" />
<br />
<asp:TextBox ID="txtText" runat="server">test</asp:TextBox>
</form>
</body>
</html>