We Keep Coding

Add jQuery slidetoggle to an event on clicking of an event in day list view of fullcalendar

I'm trying to customise the full calendar for the following.
I need to add collapsing panel or jquery slidetoggle to an event on day list view of fullcalnedar. On clicking on an event it should slide down or up a panel, this panel will some information regarding that Event. As of now list view collapsing is not available with full calendar library.
Any one have idea, how to do this?
Here is my project link:-
https://github.com/mahi007rocks/custom_calendar
Here is code, i have done so far
index.html.erb
I have gone through full calendar documentation, there list view collapsing is not available and bit googling also not helpful
<div id='calendar'></div>
<script type="text/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'listDay,agendaWeek'
},
// customize the button names,
// otherwise they'd all just say "list"
views: {
listDay: { buttonText: 'list day' },
listWeek: { buttonText: 'list week' }
},
defaultView: 'listDay',
defaultDate: '2019-01-02',
navLinks: true, // can click day/week names to navigate views
editable: true,
events: [
<% #data.each do |f| %>
{
title: '<%= f[:name]%>',
start: '<%= f[:start_time] %>',
end: ' <%= f[:end_time] %>',
description: 'first description',
addStar: "star",
addNote: "Notes"
},
<% end %>
],
eventRender: function(event, element) {
element.find('.fc-list-item-title').append("
<br/>Slide toggle text should come here" + event.description);
}
});
});
</script>
When i click on any event in day list view, the event should slide down and should show the text "Slide toggle text should come here".
But with current implementation i was not able complete this.
Any help would be appreciated.

I'm able to achieve this somehow without jquery slide toggle.
This is developed only for list-day-view of fullcalendar.
In script file event Click is there. On click of ".fc-list-item" class, we're binding ".cat" class to fc-list-item with some height. This gives a feel of slide toggle .
On click of any event in list-day-view , it'll slide down and if you click again it'll slide up.
index.html.erb
<div id='calendar'></div>
<style>
.cat{
height: 50px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'listDay,agendaWeek'
},
// customize the button names,
// otherwise they'd all just say "list"
views: {
listDay: { buttonText: 'list day' },
listWeek: { buttonText: 'list week' }
},
defaultView: 'listDay',
defaultDate: '2019-01-03',
navLinks: true, // can click day/week names to navigate views
editable: true,
events: [
<% #data.each do |f| %>
{
title: '<%= f[:name]%>',
start: '<%= f[:start_time] %>',
end: ' <%= f[:end_time] %>',
description: 'first description',
addStar: "Add or remove",
addNote: "Edit event notes",
bell: "Notification settings",
},
<% end %>
],
eventRender: function(event, element) {
var color = element.find('.session-color')
var bell = element.find('.bell-icon')
var notes = element.find('.notes-icon')
var slide = element.find('.slide-down')
color.prepend("<i class='fa fa-star'></i>");
bell.prepend("<i class='fa fa-bell'></i>");
notes.prepend("<i class='fa fa-sticky-note'></i>");
slide.prepend("<i class='fa fa-angle-down fa-2x'></i>");
// element[0].title = "This is your name";
// element[0].addNote = "Please add note"
},
eventClick: function(event,calEvent, jsEvent, view) {
$(".bell-icon").click(function(){
alert("bell here");
})
$(".fc-list-item").click(function(event, calEvent, jsEvent, view){
var first_name = this.nextElementSibling
if ( !first_name || first_name.className == "fc-list-item"){
var slot_time = $(this)[0].querySelector(".fc-list-item-time").innerHTML
// var star = $(this)[0].querySelector(".custom-class").innerHTML;
var name = $(this)[0].childNodes[5].querySelector('a').innerHTML;
$(this).after('<div class="cat"></div>');
$(this).after('<div class="mat"></div>');
$('.cat').append(slot_time);
$('.mat').append(name);
}
else{
$('.cat').remove();
$('.mat').remove();
}
});
}
});
});
</script>

Datepicker not show when click pagination boostrap table

I create a boostrap table with textboxt datepicker.
This textboxt datepicker showing in page 1,
but I have a problem, when a next pagination boostrap table.
This textboxt datepicker not showing, and when I'm back to page 1
datepicker not showing. How can I fix this problem?
On page 1
On page 2
This is my code.
index.jsp
<div class="row">
<table data-filter-control="true" data-sortable="true" data-url="data.jsp" class="table table-bordered table-striped table-condensed" data-toggle="table" data-search="true" data-pagination="true" id="table"></table>
</div>
function operateFormater(value, row, index)
{
return ["<input type='text' id='tgl_setor_"+row.id+"' readonly style='background-color:white' onchange='save_data_tgl("+row.id+","+row.no_form_send+")' class='form-control datepicker' />"];
}
var $table = $('#table');
function initTable(){
$table.bootstrapTable({
columns: [
[
{
field : "no_form",
title : "No Formulir",
width : '3%',
sortable : true,
align:'center'
},
{
field : "tgl_setor",
title : "Tanggal Setor",
width : '3%',
sortable : true,
formatter: operateFormater
}
]
]
});
}
$table.on('load-success.bs.table', function (d)
{
$('.datepicker').DatePicker({
orientation: "top",
autoclose: true,
todayHighlight: true,
format: 'yyyy-mm-dd'
});
});
initTable();
data.jsp
<%# include file="connect.jsp" %>
[
<%
Integer ix = 0;
Rs =st.executeQuery("select * from MsFormulir");
while(Rs.next())
{
ix++;
%>
{
"ix" : "<%=ix %>",
"no_form": "<%=Rs.getString("NoFormulir")==null?"":Rs.getString("NoFormulir").trim() %><input type=\"hidden\" value=\"<%=Rs.getString("NoFormulir")==null?"":Rs.getString("NoFormulir") %>\" name=\"my_form\" id=\"my_form_<%=ix %>\">",
"tgl_setor": "<%=Rs.getString("TglSetor")==null?"":Rs.getString("TglSetor").trim() %>"
}
<%
if(Rs.isLast()==false)
{
%>
,
<% } %>
<% } %>
]

This because of the Bootstrap Table re-render your table every time you change the page. So on every page, the datepicker inputs are all replaced.
You should init the datepicker in page-change.bs.table event callback.
$table.on('page-change.bs.table', function (d)
{
$('.datepicker').DatePicker({
orientation: "top",
autoclose: true,
todayHighlight: true,
format: 'yyyy-mm-dd'
});
});

jqGrid - Produces SCRIPT5007 error in IE, but works on localhost

Using jqGrid 4.7.1, jquery 1.9.1 & jquery-ui 1.10.4 in Visual Studio Express 2012 for Web and publishing a page as a default website on my localhost. IIS version is 7.5. The package loads XML from a static file into a grid that can be searched.
I am able to debug the page in VS Express 2012 for Web in any browser without errors. When I publish it, it is deployed in IIS via right-clicking on the Default Web Site --> Deploy --> Import Application. The defaults are taken when the package is deployed. Since I'm installing over an existing application, the option "No, just append the files in the application package to the destination." is selected. The package deploys successfully, and IIS is re-started.
Using current versions of Chrome & Firefox without an issue. The site works fine & the grid loads without issue in IE11 when accessed via the URL http://localhost/myWebSite. However, I get the following error in IE only when accessing the site via the machine name URL: http://mymachine/myWebSite
The error produced is:
SCRIPT5007: Unable to get property 'innerHTML' of undefined or null reference. File: jquery.jqGrid.min.js, Line: 64, Column: 205
The error is produced when the grid is being loaded. I show the grid header, footer and column headings, and the "Loading" message when the error is produced. The grid functions perfectly using other browsers using either the localhost or machine name URL. It can be accessed by other users using the http://mymachine/myWebSite URL as long as they are not on IE10 or IE11 (I am unable to test other versions of IE).
I am reasonably sure that the jqGrid is set up properly. The colModel contains name, xmlmap, & width on all columns, except for 3. Two of those have an index, sorttype, formatter, formatoptions in them, and the third has a custom formatter in it (hyperlink to a pdf).
Any idea as to what the problem could be, or a way to fix it? Any input would be appreciated.
EDIT
I changed it to use the jquery.jqGrid.src.js script and ran it on Firefox & Chrome with no issues. IE though produces the same SCRIPT5007 error. It is at line 1447, column 6, which is on this line of code:
ts.firstElementChild.innerHTML += rowData.join(''); // append to innerHTML of tbody which contains the first row (.jqgfirstrow)
My jqGrid code, which is pretty plain:
var createGrid = function () {
$("#myGrid").jqGrid({
url: "mydata.xml",
xmlReader: {
repeatitems: false,
root: "Recordset",
row: "Record",
id: "[setEntry]"
},
dataType: "xml",
colNames: [
"Product",
"Manufacturer",
"Date Created",
"Date Modified",
"Image Link",
],
colModel: [
{ name: "PROD_NAME", xmlmap: "Recordset>Record>PROD_NAME" },
{ name: "MFR", xmlmap: "Recordset>Record>MFR", width:175 },
{ name: "DATE_CREATED", xmlmap: "Recordset>Record>DATE_CREATED", width:125, index: "DATE_CREATED", sorttype:"date", formatter: "date", formatoptions: {srcformat:"F d, Y H:i:s", newformat:"Y-m-d H:i:s"}, datefmt:"Y-m-d H:i:s" },
{ name: "DATE_MODIFIED", xmlmap: "Recordset>Record>DATE_MODIFIED", width:125, index: "DATE_MODIFIED", sorttype: "date", formatter: "date", formatoptions: { srcformat: "F d, Y H:i:s", newformat: "Y-m-d H:i:s" }, datefmt: "Y-m-d H:i:s" },
{
name: "IMAGE", xmlmap: "Recordset>Record>IMAGE", width:100,
formatter: function (cellValue, options, rowObject) {
return '<a href="../Work_Documents/' + cellValue + '" target="_blank" >' + cellValue + '</a>';
}
}
],
rowNum: 10,
pager: jQuery("#pager1"),
gridview: true,
rownumbers: false,
height: "auto",
loadonce: true,
autoencode: true,
caption: "MyGrid",
ignoreCase: true, // default is case-sensitive, this makes it case-insensitive
hidegrid: false,
altrows: true,
recordtext: "View {0} - {1} of {2}",
emptyrecords: "No Records to View",
pgtext: "Page {0} of {1}"
}).navGrid("#pager1", { edit: false, add: false, del: false}, {},{},{}, {multipleSearch: true, multipleGroup: true}, {searchtext: "Search" });
};
The structure of the data is below. The attribute setEntry is a unique number in the XML file.
<Recordset>
<Record setEntry="1">
<PROD_NAME>MyProduct</PROD_NAME>
<MFR>ABC D and Company</MFR>
<DATE_CREATED>September 30, 2014 14:41:36</DATE_CREATED>
<DATE_MODIFIED>September 30, 2014 14:50:55</DATE_MODIFIED>
<IMAGE>abcd.pdf</IMAGE>
</Record>
</Recordset>
Again, the error does NOT occur when using the http://localhost/myWebSite URL, it only occurs when I use the http://mymachine/myWebSite URL. And, it occurs in IE only - Firefox & Chrome have no problems with the code, regardless of the URL used.
EDIT #2
I found a workaround here.
The change was made in my Site.Master file, changing the meta tag in it. It had been this:
<head runat="server">
<meta charset="utf-8" />
and I changed it to:
<head runat="server">
<meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=edge" />
which seems to run the http://mymachine/myWebSite URL in IE without the error occurring, and does not seem to cause other issues.
This is just a workaround, not necessarily a solution.
EDIT 3
#Oleg - here is the code using the free 4.7 version found in the jquery-master zip file at the link.
var createGrid = function () {
$("#myGrid").jqGrid({
url: "mydata.xml",
xmlReader: {
repeatitems: false,
root: "Recordset",
row: "Record",
id: "[setEntry]"
},
datatype: "xml",
colNames: [
"Product",
"Manufacturer",
"Date Created",
"Date Modified",
"Image Link",
],
colModel: [
{ name: "PROD_NAME", xmlmap: "Recordset>Record>PROD_NAME" },
{ name: "MFR", xmlmap: "Recordset>Record>MFR", width:175 },
{ name: "DATE_CREATED", xmlmap: "Recordset>Record>DATE_CREATED", width:125, index: "DATE_CREATED", sorttype:"date", formatter: "date", formatoptions: {srcformat:"F d, Y H:i:s", newformat:"Y-m-d H:i:s"}, datefmt:"Y-m-d H:i:s" },
{ name: "DATE_MODIFIED", xmlmap: "Recordset>Record>DATE_MODIFIED", width:125, index: "DATE_MODIFIED", sorttype: "date", formatter: "date", formatoptions: { srcformat: "F d, Y H:i:s", newformat: "Y-m-d H:i:s" }, datefmt: "Y-m-d H:i:s" },
{
name: "IMAGE", xmlmap: "Recordset>Record>IMAGE", width:100,
formatter: function (cellValue, options, rowObject) {
return '<a href="../Work_Documents/' + cellValue + '" target="_blank" >' + cellValue + '</a>';
}
}
],
rowNum: 10,
pager: true,
gridview: true,
rownumbers: false,
height: "auto",
loadonce: true,
autoencode: true,
caption: "MyGrid",
ignoreCase: true,
hidegrid: false,
altrows: true,
recordtext: "View {0} - {1} of {2}",
emptyrecords: "No Records to View",
pgtext: "Page {0} of {1}",
navOptions: {
edit: false,
add: false,
del: false,
searchtext: "Search"
},
searching: {
multipleSearch: true,
multipleGroup: true
}
}).navGrid();
};
The HTML portion of the page is now:
<div id="UpdatePanel" style ="padding:20px 10px">
<table id="myGrid" border="0" cellpadding="0" cellspacing="0" style="width:100%">
<tr>
<td></td>
</tr>
</table>
</div>
All of the links & scripts:
<link href="Scripts/jquery-ui-1.10.4.custom/css/cupertino/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="Scripts/jqGrid-master/css/ui.jqgrid.css" rel="stylesheet" type="text/css"/>
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js" type="text/javascript"></script>
<script src="Scripts/jqGrid-master/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="Scripts/jqGrid-master/js/jquery.jqGrid.src.js" type="text/javascript"></script>
<link href="CustomFormatter.css" rel="stylesheet" type="text/css"/>
The above configuration will load the grid without any problem. However, when the Search button is clicked, an error occurs in jquery-1.9.1.js on line 622 column 3. The statement is length = obj.length, and the error is TypeError: obj is undefined.

It seems that you made the tests on IE in different versions. IE10-IE11 should have no problems with the usage of ts.firstElementChild.innerHTML, but old versions of IE don't support firstElementChild property. You should follow the answer or this one. You can download the fixed version of jqGrid 4.7 from here or to download new beta version of new free jqGrid version from my fork here. I plan to publish new version of jqGrid very soon.

Perhaps is something about your Security Zones in IE. Go to Tools -> Internet Options; then to Security tab. Check http://mymachine is in the same zone localhost is.
You can also try to add http://mymachine to Trusted sites.
Finally for me also worked sometime to add about: to the Trusted Sites zone

getting jquery fields from a List

In the below jsp code the fields are hard code but can i get the fields by using loop from a list which may grow dynamically
List list=[userid,firstname,lastname,email];
for every new request this list may grow or shrink dynamically depends on the columns of the table present in database ,so is there any way to get the field name without hard coding..
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- Include one of jTable styles. -->
<link href="css/metro/crimson/jtable.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<!-- Include jTable script file. -->
<script src="js/jquery-1.8.2.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script src="js/jquery.jtable.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#PersonTableContainer').jtable({
title: 'Table of people',
paging: true, //Enable paging
pageSize: 10, //Set page size (default: 10)
actions: {
listAction: 'CRUDController?action=list',
createAction:'CRUDController?action=create',
updateAction: 'CRUDController?action=update',
deleteAction: 'CRUDController?action=delete'
},
fields: {
userid: {
title:'S.NO',
key: true,
list: true,
create:true
},
firstName: {
title: 'First Name',
width: '30%',
edit:false
},
lastName: {
title: 'Last Name',
width: '30%',
edit:true
},
email: {
title: 'Email',
width: '20%',
edit: true
}
}
});
$('#PersonTableContainer').jtable('load');
});
</script>
</head>
<body>
<div style="width:60%;margin-right:20%;margin-left:20%;text-align:center;">
<div id="PersonTableContainer"></div>
</div>
</body>
</html>

this can be achieved by iterating over a list
<%
HttpSession sec = request.getSession();
List<String> columnsList=(List<String>)sec.getAttribute("columnsList");
%>
<script type="text/javascript">
var jsArray = [<%for (int i = 0; i < columnsList.size(); i++) {%>"<%=columnsList.get(i)%>"<%=i + 1 < columnsList.size() ? ",":""%><%}%>];
var fields={};
var arrayLength = jsArray.length;
for(var i=0;i<arrayLength;i++)
{
fields[jsArray[i]] = {
title: jsArray[i],
width: '40%',
};
}
$(document).ready(function() {
$('#PersonTableContainer').jtable({
title : 'Table of people',
paging : true, //Enable paging
sorting: true, //Enable sorting
defaultSorting: 'Name ASC', //Set default sorting
pageSize : 10, //Set page size (default: 10)
actions : {
listAction : 'DATA?action=list'
},
fields : fields
});
//Load all records when page is first shown
$('#PersonTableContainer').jtable('load');
});
</script>

Dojo chart: zoom in values disappear

I am having an issue in Dojox charts wherein the zooming in operation is making the data points at the end of the series disappear for some reason. The more I zoom in the more data values I lose. Is there a workaround for this. I am using the MouseZoomAndPan module with a line chart.
Attaching code.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# page import="atk.graph.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script>
var c;
<% String data = "[{value: 1, text: \"X\"}, {value: 2, text: \"Z\"}]"; %> // Some test labels
<% String labels = new LabelMaker().makeLabels(10);%> // Generating labels in java class
</script>
<style type="text/css">
#import
url("http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/claro/claro.css") ;
</style>
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js'></script>
<script>
require(["dojox/charting/Chart", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/StackedLines"
, "dojo/ready", "dojox/charting/action2d/Tooltip",
"dojox/charting/action2d/Highlight","dojox/charting/themes/PlotKit/blue","dojox/charting/action2d/MouseZoomAndPan"],
function(Chart, _axis, StackedLines,ready, Tooltip,Highlight,theme_green, MouseZoomAndPan){
ready(function(){
c = new Chart("chartOne");
c.setTheme(theme_green);
c.addPlot("default", {type: StackedLines, markers: true, tension:3, enable\Cache: true})
.addAxis("x", {fixLower: "major", fixUpper: "major", enableCache: true, majorTickStep:1, natural:false, fixed: true, minorTicks: false, labels: <% out.println(labels); %>})
.addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", min: 0, enableCache: true})
.addSeries("Series A", [ 1, 2, 5, 0, 8,7, 20]);
var anim2b = new Highlight(c, "default");
var animc = new Tooltip(c, "default");
new MouseZoomAndPan(c, "default", {axis:"x"});
c.render();
});
});
</script>
</head>
<body class="claro">
<div id="chartOne"
style="width: 800px; height: 540px; align:center";></div>
</body>
</html>

Seemed to be a version issue, fixed when switched to 1.10.1.