I am using BIRT RCP 4.8. I am trying to add a date picker in Parameter Tab. I have modified FramesetFragment.jsp as below...
<script src="birt/JSCal2-1.9/src/js/jscal2.js" type="text/javascript"></script>
<script src="birt/JSCal2-1.9/src/js/lang/en.js" type="text/javascript"></script>
<link rel="stylesheet" href="birt/JSCal2-1.9/src/css/border-radius.css" meda="screen" type="text/css"/>
<link rel="stylesheet" href="birt/JSCal2-1.9/src/css/jscal2.css" meda="screen" type="text/css"/>
<link rel="stylesheet" href="birt/JSCal2-1.9/src/css/gold/gold.css" meda="screen" type="text/css"/>
And TextBoxParameterFragment.jsp as
<INPUT TYPE="HIDDEN" ID="isRequired"
VALUE = "<%= parameterBean.isRequired( )? "true": "false" %>">
<%
if (parameterBean.getParameter().getDataType()==7|| parameterBean.getParameter().getDataType()==4) {
%>
<button id="<%=parameterBean.getName()%>_button">...</button>
<script type="text/javascript">
Calendar.setup({
trigger : '<%=parameterBean.getName()%>_button',
inputField : '<%=parameterBean.getName()%>',
onSelect : function() { this.hide() }
});
</script>
<%
}
%>
But still i am getting no buttons for selecting date in WebViewer or after deployment. Gone through all the resource, any help is appreciated..
Reference Link
enter link description here
I found the answer for the above...The parameter which i created for getting the date from user was set to String type....And hence button was not getting displayed. I have changed the same in BIRT Report Designer and its working now...!!!!Aola...
Related
How to set multiple date in the calendar with mvvm.
I have my calendar :
<div id="calendar1" data-role="calendar"
data-bind="value: Cvalue,
dates: Csource,
events:{change: ConChange}">
</div>
JS, view model:
Cvalue:null,
Csource:[],
Conchange:function(){
}
Csource contains:
[
{"nome":"1"},{"data":"21/112017"},
{"nome":"2"},{"data":"22/112017"},
{"nome":"3"},{"data":"26/112017"},
{"nome":"4"},{"data":"28/112017"},
{"nome":"5"},{"data":"29/112017"}
]
Cain i see this dates with different color in the calendar?
and at onChange of day, i'd like to print the name of date;
something like this attached image:
A plugin called multiDatesPicker will meet your requirement
$('#mdp-demo').multiDatesPicker();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.css" rel="stylesheet"/>
<link href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.js"></script>
<input id="mdp-demo">
I want to use the bootsrap-year-calendar from this site: http://www.bootstrap-year-calendar.com/
Although it's advertised with easy to use I struggle. I'm using Spring Boot V1.4.1, Bootstrap V3.3.7 and Thymeleaf.
I downloaded all the source code from the software mentioned above and the only thing I'm able to do with the calendar is showing the calendar itself.
I created a new file called calendar.js where I put all the JavaScript for the custom functions of the calendar. I tried displaying the week-numbers but it doesn't even show them. There are examples on this page with marked dates and those weren't displayed, too.
I tried different orders of the script and css files but unfortunately it didnt't work. I tried other datepickers and those didn't work, too though I followed all instruction given by the installation-page. The only thing working so far is ChartJs
Do I have to change the dependencies in the pom.xml?
I appreciate any help!
Edit:
This is the code of calendar.js :
$(function() {
var currentYear = new Date().getFullYear();
var redDateTime = new Date(currentYear, 2, 13).getTime();
var circleDateTime = new Date(currentYear, 1, 20).getTime();
var borderDateTime = new Date(currentYear, 0, 12).getTime();
$('#calendar').calendar({
displayWeekNumber: true
customDayRenderer: function(element, date) {
if(date.getTime() == redDateTime) {
$(element).css('font-weight', 'bold');
$(element).css('font-size', '15px');
$(element).css('color', 'green');
}
else if(date.getTime() == circleDateTime) {
$(element).css('background-color', 'red');
$(element).css('color', 'white');
$(element).css('border-radius', '15px');
}
else if(date.getTime() == borderDateTime) {
$(element).css('border', '2px solid blue');
}
}
});
});
And this is the code of the html file:
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<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 -->
<!-- Bootstrap -->
<link th:href="#{/resources/css/bootstrap-3.3.7-dist/css/bootstrap.css}" rel="stylesheet" type="text/css"/>
<link th:href="#{/resources/css/bootstrap-3.3.7-dist/css/bootstrap-theme.css}" rel="stylesheet" type="text/css"/>
<link th:href="#{/resources/css/bootstrap-year-calendar-master/css/bootstrap-year-calendar.css}" rel="stylesheet" type="text/css"/>
<!--jQuery-->
<script th:src="#{/resources/css/jquery-3.1.1.min.js}"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script th:src="#{/resources/css/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>
<!--bootstrap-year-calendar-->
<script th:src="#{/resources/css/bootstrap-year-calendar-master/js/bootstrap-year-calendar.js}"></script>
<script th:src="#{/resources/css/bootstrap-year-calendar-master/js/calendar.js}"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div data-provide="calendar"></div>
</div>
</div>
</div>
</body>
</html>
I had the same problem, but is easy to solve.
On the jS change the hashtag for a dot
$('#calendar').calendar({
To
$('.calendar').calendar({
And on the Html, change data-provide for class
div data-provide="calendar"
To
div class="calendar"
I am working on asp.net MVC 5. I have placed a bootstrap toggle switch button having input type checkbox
Bellow is the image of my toggle switch
From my query i am getting a command name cmd_Name in which there is On or Off value in it and based of this value i just want to change the toggle switch from On-Off or from Off-On
Bellow is my razor syntax for toggle
#using (Html.BeginForm())
{
//var cmd_Name = Session["cmd_Name"];
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<fieldset style="height:60px">
<legend style="text-align:center; font-size:large; font-family:'Times New Roman'; background-color:#C8E6C9; color:red">Remote On/Off</legend>
<input id="test_id" name="cmdName" type="checkbox" checked data-toggle="toggle">
</fieldset>}
Bellow is my script for toggle
<script type="text/javascript">
var search = '#Session["search"]';
var cmd_Name = '#Session["cmd_Name"]';
var data = {}
//alert(cmd_Name);
$(window).on('load', function () {
// here cmd_Name i having On or Off value
// i want to put a check like bellow
if(cmd_Name == "On")
{
// then the toggle switch (checkbox) moves to On
// what should place here that moves the switch from on to off and vise versa
}
else
{
//then toggle switch (checkbox) moves to Off
}
})</script>
Updated Code
Bellow is image for my updated code and error
Updated Code 2
I have following declarations in my headsection in layout
<head>
<title>#ViewBag.Title</title>
#*All the javascript and css files that are required by the
application can be referenced here so that there is no
need to refrence them in each and every view*#
<script type="text/javascript" src="~/Scripts/jquery-3.1.0.min.js"></script>
<script src="~/Scripts/bootstrap-toggle.js"></script>
<link href="~/Content/bootstrap-toggle.css" rel="stylesheet" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
<script src="http://maps.google.com/maps/api/js?key=MyKey"></script>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/ico" />
<link rel="shortcut icon" href="~/favicon.ico" /></head>
See bundle.config
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
I have tried many things in if...else like $("#test_id").checked = true/false also i have tried document.getElementById("test_id").checked
But all in vain, any help would be appreciated
Try this -
if(cmd_Name == "On") {
$("#test_id").attr("checked", "checked");
} else if(cmd_Name == "Off") {
$("#test_id").removeAttr("checked");
}
You can do it this way as well
if(cmd_Name == "On") {
$("#test_id").bootstrapToggle("on")
} else if(cmd_Name == "Off") {
$("#test_id").bootstrapToggle("off")
}
I am trying to pop up a form on click of a button. I have included
<link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="../../Scripts/jquery-ui-1.8.20.min.js">
The page .
and Using ->
<script type="text/javascript">
$(document).ready(function () {
$('#AddBook').click(function () {
$('#form').dialog({
height: 500,
width: 500,
"title": "Add Book "
}).html();
});
});
</script>
for the first time of click of "AddBook" button it is rendering the proper output.But ,when i click the button second time ,it shows an exception "0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'dialog'.
you can do it more correctly as you're using MVC:
<link href="#Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css"/>
<script src="#Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
Or you can use bundling:
In BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-ui-{version}.js"
));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/themes/base/jquery.ui.*",
));
And usage in view:
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery")
There is no need in callng .html() in your script.
Its seems Your script has not been properly included. You are missing End tag </script>
<link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="../../Scripts/jquery-ui-1.8.20.min.js"></script>
This is insane... I've been trying to figure out why my popover code won't when hosted locally, but working fine on jsbin. Let me know what you guys think, I going crazy over this. Thanks to you all!!
So here it is:
jsbin: http://jsbin.com/ocepaw/1/edit
/*///// Libraries jquery & bootstrap libraries ///////*/
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
/*///// relevant HTML: Targets (pop1,2,3) & Triggers (Previous & Next buttons) ///////*/
<a href="#" id="pop1" class="btn" data-content="GREAT CONTENT3" data-original-title="Gamification 1/3">
</a>
<a href="#" id="pop2" class="btn" data-content="GREAT CONTENT3" data-original-title="Gamification 3/3">
</a>
<a href="#" id="pop3" class="btn" data-content="GREAT CONTENT3" data-original-title="Gamification 3/3">
</a>
NEXT
PREVIOUS
/*///// CSS ///////*/
var currentPopover = -1;
var popovers = [];
// Initialize all the popovers to be "manually" displayed.
popovers.push($("#pop1").popover({ trigger: 'manual' }));
popovers.push($("#pop2").popover({ trigger: 'manual' }));
popovers.push($("#pop3").popover({ trigger: 'manual' }));
// On each button click, hide the //currently displayed popover
// and show the next one.
$("#NextBtn").click(function() {
if (currentPopover >= 0) {
popovers[currentPopover].popover('hide');
}
currentPopover = currentPopover + 1;
popovers[currentPopover].popover('show');
});
$("#PreviousBtn").click(function() {
popovers[currentPopover].popover('hide');
currentPopover = currentPopover -1;
popovers[currentPopover].popover('show');
});
I had a similar issue a long time ago. Here's how i solved it: i changed the order of my imported .css and .js files. Try to load first bootstrap's required files and then everything else. Hopefully it will work for you too! if not then there's something wrong with your code.
Try declaring the CSS and JS with no redundancies and in correct order:
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js" type="text/javascript"></script>