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.
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>
I am using MVC 4 Hot towel template, i have solved it MVC way right now, where i have _viewStart.cshtml:
#{
if (User.Identity.IsAuthenticated)
{
Layout = "~/Views/Shared/_Layout.cshtml";
Page.Title = "Home1";
}
else
{
Layout = "~/Views/Shared/_loginLayout.cshtml";
Page.Title = "Home2";
}}
and in the index.cshtml:
#using System.Web
#using System.Web.Optimization
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript">
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
var mq = "##-ms-viewport{width:auto!important}";
msViewportStyle.appendChild(document.createTextNode(mq));
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
</script>
#if (#User.Identity.IsAuthenticated)
{
<div id="applicationHost">
#Html.Partial("_splash")
</div>
#Scripts.Render("~/scripts/vendor");
if(HttpContext.Current.IsDebuggingEnabled) {
#Html.AntiForgeryToken()
<script>
window.userId = "#User.Identity.Name";
console.log(window.userId);
</script>
<script type="text/javascript" src="~/App/durandal/amd/require.js" data-main="#Url.Content("~/App/main")"></script>
} else {
<!-- Remember to run the Durandal optimizer.exe to create the main-built.js -->
<script type="text/javascript" src="~/App/main-built.js"></script>
}
}
else
{
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<div id="login">
<p>hello world</p>
</div>
}
Ive created a separate viewmodel user for login:
define(['services/logger'], function (logger) {
var vm = {
activate: activate(),
userName: ko.observable(),
password: ko.observable()
};
return vm;
//#region Internal Methods
function activate() {
logger.log('login View Activated', null, 'login', true);
return true;
}
//#endregion
});
and created login view:
<section>
<h2>My login model without content yet</h2>
</section>
(i know i am not using viewmodel in this view, but its only for test)
How do i do same functionality in Durandal? and is it even possible?
No hate, i am new to Single page application and durandal + breeze.js + knockout.
I would suggest using the built in ASP.net authentication / login mechanisms - ie <authentication> in web.config.
I found https://github.com/jamesc88/Durandal_Serverside_Authentication useful.
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([]);
}
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Services</title>
<link rel="shortcut icon"
type="image/x-icon" href="css/images/favicon.ico" />
<script language="javascript">
var XMLHTTPRequestObj=false;
if(window.XMLHttpRequest)
{
XMLHttpRequestObj=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
XMLHttpRequestObj=new ActiveObject("Microsoft.XMLHTTP");
}
function getData(dataSource, divID)
{
if(XMLHttpRequestObj)
{
var obj=document.getElementById(divID);
XMLHttpRequestObj.open("GET", dataSource);
XMLHttpRequestObj.onreadystatechange = function() {
if(XMLHttpRequestObj.readyState == 4 &&
XMLHttpRequestObj.status == 200) {
alert("Inside the ready status "+dataSource);
if(dataSource=="ajaximport/1.jpg") {
alert("The if loop is working");
document.getElementById(
"targetDiv").innerHTML =
XMLHttpRequestObj.responseText;
var img = document.createElement('img');
alert("Variable img Recorded "+img);
img.onload = function (e){
alert("Loading Image");
document.getElementById(
"imgHolder").width=this.width;
document.getElementById(
"imgHolder").height=this.height;
document.getElementById(
"imgHolder").src=this.src;
}
img.onerror = function(e){
alert("Error processing Image. Please try again."+e);
}
img.src = XMLHttpRequestObj.responseImage;
}
else
obj.innerHTML=XMLHttpRequestObj.responseText;
}
}
XMLHttpRequestObj.send(null);
}
}
</script>
<!--[if IE 6]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="all" />
<![endif]-->
</head>
<body>
<!-- Content -->
<div id="content">
<!-- Shell -->
<div class="shell">
<h2>We at Creative bits 5 are plegded to serve you our best in.......</h2>
<table>
<th>
<div id="hold_left">
<ul>
<li><label>
<a href="#" onmouseover="getData('ajaximport/1.jpg','targetDiv')">
Graphic Designing
</a></label></li><br>
<li><label>
<a href="#" onmouseover="getData('text1.txt','targetDiv')">
Web Devlopment
</a></label></li><br>
<li><label>
<a href="#" onmouseover="getData('text1.txt','targetDiv')">
Logo Designing
</a></label></li><br>
<li><label>
<a href="#" onmouseover="getData('text1.txt','targetDiv')">
3D Walk-Through
</a></label></li><br>
<li><label>
<a href="#" onmouseover="getData('text1.txt','targetDiv')">
3D Modelling
</a></label></li><br>
<li><label>
<a href="#" onmouseover="getData('text1.txt','targetDiv')">
2D Presentations
</a></label></li><br>
</ul>
</div>
</th>
<th>
<div id="targetDiv">
This is target
<img id="imgHolder" src="" alt="This is where image will load" />
</div>
</th>
</table>
</div>
<!-- end Shell -->
</div>
<!-- end Content -->
</body>
</html>
Hi I am Using ASP for my web project. but I got stuck with a problem when I tried loading an image into a target division when a mouse is hovered over a text describing that image.
The division holding the text is on the left side (which describes the loading image)
On the right side is the Target division.
All is fine when I used it to load a text from a .txt file but The problem started when I tried modifying the same code for loading an image in the same division instead of the text
My code is as above
If the image file is a physical file stored on the filesystem then XMLHttpRequest may not be such a good idea to load the image.
I would suggest that in your javascript code you can create an image and set the src to the image path. that would load it and your image onload routines can also run. furthermore, you would get the benefit of browser caching of the image.
It would have made sense to use XMLHttpRequest in case your image was stored as a BLOB somewhere and you need some mechanism to retrieve it. in that case have a look at this link.
Handling images from XMLHttpRequest (with HTML and Javascript)
hope this helps.
EDIT 1(in response to comment): You can have a separate method for setting images via JavaScript.that way the images can be handled by a separate function while dynamic data through XHR can be handled separately.
<script language="javascript">
var XMLHTTPRequestObj = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObj = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
XMLHttpRequestObj = new ActiveObject("Microsoft.XMLHTTP");
}
function getData(dataSource, divID) {
if (XMLHttpRequestObj) {
var targetDIV = document.getElementById(divID);
XMLHttpRequestObj.open("GET", dataSource);
XMLHttpRequestObj.onreadystatechange = function () {
if (XMLHttpRequestObj.readyState == 4 &&
XMLHttpRequestObj.status == 200)
{
targetDIV.innerHTML = XMLHttpRequestObj.responseText;
}
}
XMLHttpRequestObj.send(null);
}
}
function getImage(dataSource, divID) {
//create image element
var img = document.createElement('img');
//assuming divID has the target div id
img.onload = function (e) {
alert("Loading Image");
document.getElementById(
divID).width = this.width;
document.getElementById(
divID).height = this.height;
}
img.onerror = function (e) {
alert("Error processing Image. Please try again." + e);
}
//set the path here
img.src = dataSource;
var targetDIV = document.getElementById(divID);
//clear contents of target div
if (targetDIV.hasChildNodes()) {
while (targetDIV.childNodes.length >= 1) {
targetDIV.removeChild(targetDIV.firstChild);
}
}
//finally add the image as a child control to the div.
targetDIV.appendChild(img);
}
</script>
and call this by onmouseover="getImage('Image/1.jpg','targetDiv')
please note that this is pure javascript code. you can always use a JS library such as JQuery to do the same work in very few lines of code.