Chart in html with javascript file - javascript

I have a javascript file (jquery.visualize.plugin.js) that displays a chart.
First, I display in a .aspx page with a repeater control. So I have this :
And and just below I have the graphic. It works well in .aspx page.
Now, I would like display in HTML page but it doesn't work.
Here is my Html page :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript" src="Scripts/jquery.visualize.plugin.js"></script>
<title></title>
<script type="text/javascript">
$(function () {
$('table').visualize({ type: 'line' }).appendTo('body');
});
</script>
</head>
<body>
<headertemplate>
<table id="table_campaigns" class="display">
<caption style="font-size:20px">Statistiek 2 : per productgroep</caption>
<thead>
<tr>
<td></td>
<th>2010</th>
<th>2011</th>
<th>2012</th>
<th>2013</th>
<th>2014</th>
</tr>
</thead>
</headertemplate>
<itemtemplate>
<tbody>
</tbody>
</itemtemplate>
<footertemplate>
</table>
</footertemplate>
</body>
</html>
Here is my .aspx page that works well :
<%# Page Language="C#" AutoEventWireup="true" EnableViewState="false" CodeBehind="Page_Statistiek_2.aspx.cs" Inherits="PageWebSage100.Page_Statistiek_2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script language="javascript" type="text/javascript" src="JavaScript/jquery-1.10.2.min.js"></script>
<script language="javascript" type="text/javascript" src="JavaScript/jquery.visualize.plugin.js"></script>
<link type="text/css" rel="stylesheet" href="Css/base.css"/>
<link type="text/css" rel="stylesheet" href="Css/jquery.visualize.plugin.css"/>
<script type="text/javascript">
$(function () {
$('table').visualize({ type: 'line' }).appendTo('body');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Repeater ID="Repeater1" runat="server" OnItemCreated="Repeater1_ItemCreated">
<HeaderTemplate>
<table>
<caption style="font-size:20px">Statistiek 2 : per productgroep</caption>
<thead>
<tr>
<td></td>
<th scope="col"><asp:Label runat="server" ID="Ym4"></asp:Label></th>
<th scope="col"><asp:Label runat="server" ID="Ym3"></asp:Label></th>
<th scope="col"><asp:Label runat="server" ID="Ym2"></asp:Label></th>
<th scope="col"><asp:Label runat="server" ID="Ym1"></asp:Label></th>
<th scope="col"><asp:Label runat="server" ID="Ym0"></asp:Label></th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tbody>
<tr>
<th style="text-align:left" scope="row"><%# DataBinder.Eval(Container.DataItem, "Interventie") %></th>
<td><%# Math.Round(((PageWebSage100.WebServiceSage100.Statistic_2)Container.DataItem).Sum[0],2) %></td>
<td><%# Math.Round(((PageWebSage100.WebServiceSage100.Statistic_2)Container.DataItem).Sum[1],2)%></td>
<td><%# Math.Round(((PageWebSage100.WebServiceSage100.Statistic_2)Container.DataItem).Sum[2],2)%></td>
<td><%# Math.Round(((PageWebSage100.WebServiceSage100.Statistic_2)Container.DataItem).Sum[3],2)%></td>
<td><%# Math.Round(((PageWebSage100.WebServiceSage100.Statistic_2)Container.DataItem).Sum[4],2)%></td>
</tr>
</tbody>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
I just added the script in the head tag.
Ps : I use a dataTable in HTML page.
What's wrong?

You're trying to use parts of ASP.NET Repeater control in HTML page. This is not going to work since Repeater works only in ASPX pages (with corresponding code-behind to handle databinding and/or rendering (i.e. Repeater1_ItemCreated).
If you want to display content of that page in an HTML page - you have couple choices - for example use IFRAME and display original ASPX page in the IFRAME within HTML page or use jQuery .load() method to load content of ASPX page into container DIV within the HTML page.
As an alternative if you want to reuse table HTML table already rendered by Repeater - just copy/paste table element (table, tbody, tr, th, td elements in their entirety) but to not include any HeaderTemplate, ItemTemplate, FooterTemplate tags.

Related

How to add bootstrap control to asp controls in master page so that it reflect to all of my asp:textbox?

I want to set CssClass="form-control" to every textbox in my master page
So what should I do?
You can do the following:
In master page code behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
//added next line
using System.Web.UI.HtmlControls;
namespace WebApplication1
{
public partial class Site1 : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
//https://stackoverflow.com/questions/23710337/add-class-into-html-tag-by-jquery-in-asp-net-c-sharp
//https://www.experts-exchange.com/questions/25280443/How-to-iterate-through-all-controls-with-masterpage.html
var x = new object();
foreach (Control c in Controls)
{
foreach (Control masterControl in Page.Controls)
{
if (masterControl is MasterPage)
{
foreach (Control formControl in masterControl.Controls)
{
if (formControl is HtmlForm)
{
foreach (Control cont in formControl.Controls)
{
if (cont is TextBox)
{
((TextBox)cont).Attributes["class"] = "form-control";
}
}
}
}
}
}
}
}
}
}
In aspx of master page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication1.Site1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox runat="server" ID="textbox1" />
<asp:TextBox runat="server" ID="textbox2" />
<asp:TextBox runat="server" ID="textbox3" />
<asp:TextBox runat="server" ID="textbox4" />
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Try this, just add CssClass on your control, that's it:
<asp:TextBox CssClass="form-control" runat="server"></asp:TextBox>
Make sure your bootstrap has reference on your Master Page style, under the Head section:
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<%--Added Bootstrap Style Here--%>
<link href="~/Styles/bootstrap.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</style>

Why the pagination datatables JQuery doesn't work with JSF ui:repeat?

I'm working on a datatables JQuery in a JSF page, but the issue is that the pagination doesn't work in spite of it is shown.
This is my page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://java.sun.com/jsf/passthrough"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<title>Test-Page</title>
<link rel="stylesheet" type="text/css" href="../css/jquery.dataTables.css" />
<link rel="stylesheet" type="text/css" href="../css/shCore.css" />
<link rel="stylesheet" type="text/css" href="../css/demo.css" />
<link rel="stylesheet" type="text/css" href="../css/header.css" />
<link rel="stylesheet" type="text/css" href="../css/style_combo.css" />
<style type="text/css" class="init"></style>
<script type="text/javascript" language="javascript" src="../js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../js/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../js/demo.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#example').dataTable({
"bPaginate": true,
"bFilter": false,
"bInfo": true,
"bProcessing" : false,
"bJQueryUI" : true,
"sEmptyTable" : "No messages found",
});
} );
</script>
</h:head>
<h:body class="dt-example">
<h:form>
<table id="example" class="display compact" cellspacing="0"
width="100%">
<ui:repeat var="ee" value="#{controller.address}"
varStatus="row">
<thead>
<tr>
<ui:repeat value="#{ee.entrySet().toArray()}" var="entete1">
<th><h:outputLabel value="#{entete1.key}"
rendered="#{row.index == 0}" /></th>
</ui:repeat>
</tr>
</thead>
<tbody>
<tr>
<ui:repeat value="#{ee.entrySet().toArray()}" var="entete">
<td><h:outputLabel value="#{entete.value}" /></td>
</ui:repeat>
</tr>
</tbody>
</ui:repeat>
</table>
</h:form>
</h:body>
</ui:composition>
As long as bPaginate is true i believe that the pagination has to work with no problem at all except that my page it is not the case.
Any idea ?
NB: i khnow that there is datatable and extendtables in jsf and richfaces but i have to work juste with With the code above.
After a long analysis I found that and do not have to be inside the loop and also the number of columns has to be the same that what we have in the header.
the css and js files are always the same and i changed just the content of <h:form></h:form>
Here is the example which works perfectly well:
<h:form>
<table id="example" class="cell-border" cellspacing="0" width="100%">
<thead>
<tr>
<ui:repeat value="#{mycontroler.listOfHead}" var="head">
<th><h:outputLabel value="#{head}" /></th>
</ui:repeat>
</tr>
</thead>
<tbody>
<ui:repeat var="details" value="#{mycontroler.ExampleLits}"
varStatus="rowStatus">
<tr>
<ui:repeat value="#{details.entrySet().toArray()}" var="details2">
<td><h:outputLabel value="#{details2.value}">
</h:outputLabel></td>
</ui:repeat>
</tr>
</ui:repeat>
</tbody>
</table>
</h:form>

jQuery dataTables and JSP

I try to add JQuery DataTable to my JSP page but nothing happens. I ckecked that all files: jquery.dataTables.js, jquery.dataTables.css, jquery.js is found.
Here's my JSP page:
<%# page contentType="text/html; charset=UTF-8" %>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
<script type="text/javascript"
src="<c:url value="resources/jquery.js"/>"></script>
<link rel="stylesheet" type="text/css" href="<c:url value="resources/jquery.dataTables.css"/>" />
<script type="text/javascript"
src="<c:url value="resources/jquery.dataTables.js"/>"></script>
<script type="text/javascript">
$(function() {
$("#student").dataTable();
});
</script>
</head>
<body>
<table id="student">
<thead>
<tr><td>Students</td></tr>
</thead>
<tbody>
<c:forEach var="student" items="${students}" varStatus="loopCounter">
<tr>
<td>${loopCounter.count}</td>
<td>${student.studentFullName}</td>
<td>${student.studentBook}</td>
<td>${student.groupStudent.groupStudentNumber}</td>
<td>${student.studentEnter}</td>
<td>${student.studentOKR}</td>
</tr>
</c:forEach>
</tbody>
</table>
</body>

How to close frameset?

I have a page where i have used framsets.
Top Frame = header information(Like logout, login user information etc)
left Frame = Menu Items
Center Frame = Data pages for the corresponding clicked menu
My problem is when i try to log out from the application The logout functionalist is called in header section and it also works find but the other frames are not closed.
How to over come this :
This the overall design with formsets
<%# taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%# taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%# taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"%>
<%# page contentType="text/html"%>
<%# page pageEncoding="UTF-8"%>
<%
String resourcePath = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="favicon.ico">
<title>SecureEyes - Infusing Security</title>
<script language="javascript" type="text/javascript" src="<%=resourcePath%>/scripts/frameset.js"></script>
<script language="javascript" type="text/javascript" src="<%=resourcePath%>/scripts/commonForHomePageTemplate.js"></script>
<script language="javascript">
<!--
var opt_no_frames = false;
var opt_integrated_mode = false;
var _help_prefix = "";
var _help_module = "";
var _context = "";
//-->
</script>
</head>
<frameset border="0" frameborder="0" framespacing="0" rows="64,*">
<form method="post" >
<frame border="0" frameborder="0" framespacing="0" id="topFrame" name="topFrame" src="<%=resourcePath%>/common/header.jsp" marginheight="0" marginwidth="0" noresize="noresize" scrolling="no">
<frameset border="0" frameborder="0" framespacing="0" id="MainFrameSet" cols="209,*">
<frame noresize="noresize" border="0" frameborder="0" framespacing="0" id="leftFrame" name="leftFrame" src="<%=resourcePath%>/common/left_menu.jsp" >
<frame border="0" frameborder="0" framespacing="0" id="workFrame" name="workFrame" src="<%=resourcePath%>/common/WelcomePage.jsp" marginheight="7" marginwidth="7" noresize="noresize" scrolling="auto">
</frameset>
<input type="hidden" id="method" name="method" />
</form>
</frameset>
</html>
this is the place where i have logout functionalities :
<%# taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%# taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%# taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"%>
<%# page contentType="text/html"%>
<%# page pageEncoding="UTF-8"%>
<%#page import="com.secureyes.eswastha.struts.viewmodel.UserViewModel"%>
<%
String resourcePath = request.getContextPath();
UserViewModel userVM = new UserViewModel();
if(session.getAttribute("userDetails")!=null){
userVM = (UserViewModel) session.getAttribute("userDetails");
}
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="https://indedev.com:8443/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" type="text/javascript" src="<%=resourcePath%>/scripts/commonForHomePageTemplate.js"></script>
<script language="javascript" type="text/javascript" src="<%=resourcePath%>/header_data/prototype.js"></script>
<script language="javascript" type="text/javascript" src="<%=resourcePath%>/header_data/tooltip.js"></script>
<link rel="stylesheet" type="text/css" href="<%=resourcePath%>/header_data/general.css">
<link rel="stylesheet" type="text/css" href="<%=resourcePath%>/header_data/custom.css">
<link rel="stylesheet" type="text/css" href="<%=resourcePath%>/header_data/layout.css">
<link rel="stylesheet" type="text/nonsense" href="<%=resourcePath%>/header_data/misc.css">
<script>
var tooltip;
var opt_no_frames = false;
var opt_integrated_mode = false;
function logOut(){
top.close();
document.forms[0].action="LogoutAction.htm";
document.forms[0].method.value="loginPage";
document.forms[0].submit();
}
</script>
<script>
history.forward();
</script>
</head>
<body onload="SetContext(''); " onunload="" id="topCP">
<div class="body">
<form method="post">
<table cellspacing="0" width="100%">
<tbody>
<tr>
<td class="companyLogo"><span class="topLogo"><img src="<%=resourcePath%>/header_data/logo.png" name="logo" border="0" height="53"></span></td>
<td>
<div id="topTxtBlock" class="withTopRightLogo">
<span id="topTxtLoggedInAs">Logged in as <b><%=userVM.getUsername()%></b></span>
<span id="topTxtMyAccount"><a class="tootlipObserved" name="" id="" href="#" onmouseover='tooltip.set(event, [{"type":"string","string":"View preferences of your control panel account."}]);' onmouseout="tooltip.hide();" >My account</a></span>
<span id="topTxtLogout"><a class="tootlipObserved" href="#" onclick='if (confirm("Are you sure you want to log out?")) logOut("logout"); return false;' onmouseover='tooltip.set(event, [{"type":"string","string":"Log out of eSwastha."}]);' onmouseout="tooltip.hide();">Log out</a></span>
</div>
</td>
</tr>
</tbody>
</table>
<input type="hidden" id="method" name="method" />
</form>
</div>
<div style="position: absolute; top: 14px; left: 1111px; display: none;" class="tooltip">View preferences of your control panel account.<br></div>
</body>
</html>
When i press refresh than everything is loading again, so how to disable refresh and back and forward functionality using javascript ?
Simple answer: Don't - use - frames

How to get elements in jQuery UI to style and format correctly

Here is my problem. I have on multiple occasions downloaded jQuery UI and tried to use it. What happens, though, is that in the examples provided in the download the UI elements look great, but in my pages when I try to use them all the formatting and style stuff is messed up. Here is an example of a date picker:
Good Example
Bad Example
Here is my code:
<!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>
<title>Reports</title>
<meta charset="UTF-8" />
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />
<meta http-equiv="PRAGMA" content="NO-CACHE" />
<link type="text/css" href="../css/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../scripts/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="../scripts/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../scripts/jquery.ui.datepicker.js"></script>
<script type="text/javascript">
$(function() {
$('#start_date').datepicker({
changeMonth: true,
changeYear: true
});
$('#end_date').datepicker({
changeMonth: true,
changeYear: true
});
});
</script>
</head>
<body>
<form id="Form_Reports" method="post" action="Reports.aspx" runat="server">
<!-- The date input form -->
<table>
<tbody>
<tr>
<td class="label">Start Date:</td>
<td><input class="text" type="text" name="start_date" id="start_date" runat="server"/></td>
</tr>
<tr>
<td class="label">End Date:</td>
<td><input class="text" type="text" name="end_date" id="end_date" runat="server"/></td>
</tr>
<tr>
<td class="label">Program</td>
<td><select class="text" name="program_name" id="program_name" runat="server"></select></td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="2" style="text-align:center"><input type="submit" name="cmdReport" value="Get the Report"/></td>
</tr>
</tbody>
</table>
</form>
</body>
Here is their code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Datepicker - Display month & year menus</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$('#datepicker').datepicker({
changeMonth: true,
changeYear: true
});
});
</script>
</head>
<body>
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
</div><!-- End demo -->
<div class="demo-description">
<p>Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes. Add the boolean <code>changeMonth</code> and <code>changeYear</code> options.</p>
</div><!-- End demo-description -->
</body>
For my page (an '.aspx' page, if that makes any difference) I have all the images in the image folder one level below the css file, just as it is in the example folder, and the script files are all together in another folder. Is there something I need that I don't have. I shouldn't need the "demo.css" file, should I? Is there a special naming convention for items in the form of the site? Is there some special way that I need to have the folders/css files/source scripts set up, like a certain folder configuration, to make it work?
Kind of lost on this one. Probably a really simple fix, but I'm pretty new to using this. Any help is appreciated.
If you open your page in the Firefox browser with FireBug installed, on the Net tab you will be able to see the missing resources. Something like there, but missing resources will be red.

Categories