I am currently creating a page that is accessed via the custom url functionality.
I am trying to delete all components in a multivalue field. I get a Cannot delete a value as an error when deleting the last one.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript" src="/WebUI/Core/Controls/Popup/PopupInit.js"></script>
<script type="text/javascript" language="javascript">
function removeAllValues() {
var fields = window.dialogArguments.getFields();
if (fields != null) {
for (var i = 0; i < fields.length; i++) {
window.dialogArguments.container.deleteField(fields[i]);
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" onclick="removeAllValues();" value="Delete All" />
</div>
</form>
</body>
</html>
Is there any documentation other than two brief pages on the LiveContent site?
You could also change your function a little bit to delete all fields except the last one and then set the last fields value to nothing:
function removeAllValues() {
var fields = window.dialogArguments.getFields();
if (fields != null) {
var lastFieldIndex = fields.length - 1;
for (var i = 0; i < lastFieldIndex; i++) {
window.dialogArguments.container.deleteField(fields[i]);
}
fields[lastFieldIndex].setValues([]);
}
}
Related
I'm attempting to switch out the css file on the fly - based on which part of the web-system the user is in (i.e. if the user is on mydomain/students/page then the page loads with students.min.css, rather than site.min.css).
I've tried doing it within the _Host.cshtml:
#page "/"
#namespace FIS2withSyncfusion.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#{
Layout = null;
//sniff the requst path and switch the stylesheet accordingly
string path = Request.Path;
string css = "site.min.css";
if (path.ToLowerInvariant().StartsWith("/students"))
{
css = "students.min.css";
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Martin's Blazor Testing Site</title>
<base href="~/" />
<link rel="stylesheet" href="css/#(css)" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
<script type="text/javascript">
function saveAsFile(filename, bytesBase64) {
if (navigator.msSaveBlob) {
//Download document in Edge browser
var data = window.atob(bytesBase64);
var bytes = new Uint8Array(data.length);
for (var i = 0; i < data.length; i++) {
bytes[i] = data.charCodeAt(i);
}
var blob = new Blob([bytes.buffer], { type: "application/octet-stream" });
navigator.msSaveBlob(blob, filename);
}
else {
var link = document.createElement('a');
link.download = filename;
link.href = "data:application/octet-stream;base64," + bytesBase64;
document.body.appendChild(link); // Needed for Firefox
link.click();
document.body.removeChild(link);
}
}
</script>
</head>
<body>
<component type="typeof(App)" render-mode="ServerPrerendered" />
<script src="_framework/blazor.server.js"></script>
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
</body>
</html>
However, it doesn't seem to hit this codeblock after the first load of the site; meaning whichever page they first landed on denotes the stylesheet for the entire site.
Do I have to put this codeblock on every page or is there another way of doing this?
another way you could approach this is to create components that respond to different styling that you desire. From there you have two options:
Create dedicated css associate with the component. From the docs
Create a class toggle in the code block of the component, similar to how the NavMenu works.
After further experimentation, I've found that adding this block:
#{
//sniff the requst path and switch the stylesheet accordingly
string path = navManager.Uri;
Uri uri = new Uri(path);
List<string> parts = uri.Segments.ToList();
string module = parts[1].ToLowerInvariant().Trim('/');
string css = "site.min.css";
if (module == "students")
{
css = "students.min.css";
}
}
<head>
<link rel="stylesheet" href="css/#(css)" />
</head>
To the top of MainLayout.razor works perfectly - so long as you remove the equivalent block from _Host.cshtml
SchoolController
schoolBLL content = new schoolBLL ();
DatabaseSchool dbSchool = content.GetSchoolInfoById(LoginStaffId);
if (dbschool != null)
{
string textcontent = dbschool .text_content;
}
class file
public DatabaseSchool GetSchoolInfoById(int StaffId)
{
return SchoolRepo.Find(a => a.schoolcontent_id == StaffId).FirstOrDefault();
}
So, I am trying to display the data in to a HTML page with this tag
How can I pass the value from the controller into the HTML page ?
I already tried to use ViewBag and it doesn't work!
For displaying data into an html page try below:
School Controller:
schoolBLL content = new schoolBL();
DatabaseSchool dbSchool = content.GetSchoolInfoById(LoginStaffId);
if(dbschool != null)
{
TempData["textcontent"] = dbschool.text_content;
}
HTML:
<textarea id="txtcontent" class="form-control" rows="20">#TempData["textcontent"]</textarea>
Better to use CSHTML:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
#Html.TextArea("Content", TempData["textcontent"])
</body>
</html>
total noob here.
I am pushing radiation values every 5 minutes into a Firebase database and I am looking for a simple way to create a live line graph, which also shows all the data of the last 24 hours.
I managed to create a graph which updates live, but it does not show past data. I have no idea how to accomplish this. I really hope someone can help me.
Here's my java script controller.js:
$(document).ready(function() {
var gammaArray = [];
var tArray = [];
var sessionArray = [];
var currGamma = '';
var dataRef = new Firebase('https://xxx.firebaseio.com/readings');
dataRef.on('value', function(snapshot) {
var t = snapshot.val();
var count = 0;
for (var key in t) {
if (t.hasOwnProperty(key)) {
var dt = [];
dt[0] = count;
dt[1] = parseFloat(t[key]);
gammaArray = [];
gammaArray.push(dt);
tArray = [];
tArray.push(dt[1]);
count++;
}
}
sessionArray.push(gammaArray[0])
//console.log(gammaArray)
$.plot($("#chart1"), [ sessionArray ]);
currGamma = gammaArray[0][1].toString();
$('#gammaMsg').show();
$("#currGamma").text(currGamma);
});
});
And here's my html:
<html>
<head>
<script type='text/javascript' src='https://cdn.firebase.com/js/client/1.0.6/firebase.js'></script>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<script src="controller.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
</head>
<body>
<div style="width:800px; margin:0 auto;">
<div><h1 id='gammaMsg' style='display:none;width:550px; margin:0 auto;margin-top: 50px;'>Current radiation: <span id="currGamma"></span> mSv</h1></div>
<div id="chart1" style="width:600px;height:300px;"></div>
</div>
</body>
Have a look at the following sample HTML. It is a simple KO foreach binding and a button to add a new item to the observableArray. The addition works fine and the new item shows up. However, the afterRender method is never called - not after the initial binding and not after a new item is added (and rendered). Why?
Fiddle: http://jsfiddle.net/CQNm6
HTML
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
</head>
<body>
<div data-bind="foreach: data.things, afterRender: afterRenderTest">
<h1 data-bind="text: name"></h1>
</div>
Add New Thing
<script type="text/javascript">
var Thing = (function ()
{
function Thing(p_name)
{
this.name = ko.observable(p_name);
}
return Thing;
})();
var data =
{
things: ko.observableArray(
[
new Thing("Thing One"),
new Thing("Thing Two"),
new Thing("Thing Three")
])
};
function afterRenderTest(elements)
{
alert("Rendered " + elements.length + " elements.");
}
ko.applyBindings();
</script>
</body>
</html>
Your syntax is wrong because foreach binding either take an array or an object where you specify the additional events, arguments.
From the documentaiton:
Pass the array that you wish to iterate over. The binding will output
a section of markup for each entry.
Alternatively, pass a JavaScript object literal with a property called
data which is the array you wish to iterate over. The object literal
may also have other properties, such as afterAdd or includeDestroyed...
So you need write:
<div data-bind="foreach: { data: data.things, afterRender: afterRenderTest }">
<h1 data-bind="text: name"></h1>
</div>
Demo JSFiddle.
Contents of menucontents.jsp
<%# taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%# taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>
<%# taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<f:subview id="menucontents">
<f:loadBundle basename="com.cpc.resources.menu" var="menu"/>
<t:div id="hNav_outer">
<t:panelNavigation2 id="nav1" layout="list" itemClass="off" activeItemClass="on" openItemClass="on"
renderAll="true">
<t:commandNavigation2 value="#{menu['menu_Home']}" style="padding-left: 0px;">
<t:commandNavigation2>
<f:verbatim>› </f:verbatim>
<t:outputText value="#{menu['menu_Home']}"/>
</t:commandNavigation2>
</t:commandNavigation2>
<t:commandNavigation2 value="#{menu['menu_admin']}" style="padding-left: 150px;">
<t:commandNavigation2>
<f:verbatim>› </f:verbatim>
<t:outputText value="#{menu['menu_admin_change_password']}"/>
</t:commandNavigation2>
<t:commandNavigation2>
<f:verbatim>› </f:verbatim>
<t:outputText value="#{menu['menu_admin_forgot_password']}"/>
</t:commandNavigation2>
</t:commandNavigation2>
</t:panelNavigation2>
</t:div>
</f:subview>
Contents of menu.jsp
<%# taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%# taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>
<%# taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=UTF-8" />
<title>MyFaces - the free JSF Implementation</title>
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/pages/css/basic.css" />
</head>
<body>
<f:view>
<jsp:include page="menucontents.jsp" />
</f:view>
</body>
</html>
view source from broswer
<html>
<head>
<script type="text/javascript" src="/cpcnew/faces/myFacesExtensionResource/org.apache.myfaces.renderkit.html.util.MyFacesResourceLoader/12973772/navmenu.htmlnavmenu.HtmlPanelNavigationMenu/HMenuIEHover.js"><!--
//--></script>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=UTF-8" />
<title>MyFaces - the free JSF Implementation</title>
<link rel="stylesheet" type="text/css" href="/cpcnew/pages/css/basic.css" />
</head>
<body>
<div id="menucontents:hNav_outer">
<ul id="menucontents:nav1">
<li class="off"><script type="text/javascript"><!--
function oamSetHiddenInput(formname, name, value)
{
var form = document.forms[formname];
if(typeof form.elements[name]=='undefined')
{
var newInput = document.createElement('input');
newInput.setAttribute('type','hidden');
newInput.setAttribute('id',name);
newInput.setAttribute('name',name);
newInput.setAttribute('value',value);
form.appendChild(newInput);
}
else
{
form.elements[name].value=value;
}
}
function oamClearHiddenInput(formname, name, value)
{
var form = document.forms[formname];
if(typeof form.elements[name]!='undefined')
{
form.elements[name].value=null;
}
}
function oamSubmitForm(formName, linkId, target, params)
{
var clearFn = 'clearFormHiddenParams_'+formName.replace(/-/g, '\$:').replace(/:/g,'_');
if(typeof eval('window.'+clearFn)!='undefined')
{
eval('window.'+clearFn+'(formName)');
}
if(typeof window.getScrolling!='undefined')
{
oamSetHiddenInput(formName,'autoScroll',getScrolling());
}
var oldTarget = '';
if((typeof target!='undefined') && target != null)
{
oldTarget=document.forms[formName].target;
document.forms[formName].target=target;
}
if((typeof params!='undefined') && params != null)
{
for(var i=0; i<params.length; i++)
{
oamSetHiddenInput(formName,params[i][0], params[i][1]);
}
}
oamSetHiddenInput(formName,formName +':'+'_idcl',linkId);
if(document.forms[formName].onsubmit)
{
var result=document.forms[formName].onsubmit();
if((typeof result=='undefined')||result)
{
document.forms[formName].submit();
}
}
else
{
document.forms[formName].submit();
}
if(oldTarget==null) oldTarget='';
document.forms[formName].target=oldTarget;
if((typeof params!='undefined') && params != null)
{
for(var i=0; i<params.length; i++)
{
oamClearHiddenInput(formName,params[i][0], params[i][1]);
}
}
oamClearHiddenInput(formName,formName +':'+'_idcl',linkId);return false;
}
//--></script>Home<ul style="padding-left: 0px;">
<li class="off">› Home</li></ul></li>
<li class="off">Administrator<ul style="padding-left: 150px;">
<li class="off">› Change Password</li>
<li class="off">› Forgot Password</li></ul></li>
</ul></div>
<script type="text/javascript"><!--
function getScrolling()
{
var x = 0; var y = 0;if (self.pageXOffset || self.pageYOffset)
{
x = self.pageXOffset;
y = self.pageYOffset;
}
else if ((document.documentElement && document.documentElement.scrollLeft)||(document.documentElement && document.documentElement.scrollTop))
{
x = document.documentElement.scrollLeft;
y = document.documentElement.scrollTop;
}
else if (document.body)
{
x = document.body.scrollLeft;
y = document.body.scrollTop;
}
return x + "," + y;
}
//--></script>
</body>
</html>
It look much like that the CSS is relying on specific HTML element ID's in the HTML source. Before splitting the content to a <f:subview id="menucontents">, the following elements
<div id="menucontents:hNav_outer">
<ul id="menucontents:nav1">
were generated as follows
<div id="hNav_outer">
<ul id="nav1">
The Tomahawk CSS example stylesheet is apparently relying on those IDs
#hNav_outer {
...
}
#nav1 {
...
}
However, with the split to a <f:subview id="menucontents">, JSF will prepend the generated HTML element ID's with the ID of the <f:subview>. So you need to alter the CSS as well.
#menucontents\3A hNav_outer {
...
}
#menucontents\3A nav1 {
...
}
There's a special story behind \3A: the colon : is an illegal character in CSS identifiers. This was an oversight in the early JSF 1.x versions. In JSF 2.x this was fixed by making the JSF client ID separator : configureable (you could specify it to be for example _ which is in turn valid in CSS).
You could escape the colon as follows as well
#menucontents\:hNav_outer {
...
}
#menucontents\:nav1 {
...
}
But that doesn't work in IE6/7, hence the recommendation to use \3A (with the trailing space!) instead of the colon in CSS selectors.