i need to change the color of a particular word on textarea tag or another tag that it could get number of rows like textarea or code tag whenever there is onkeyup event.
<textarea id="mainTextarea" onkeyup="changeColor()">
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><title>
</head>
<body>
</body>
</html>
</textarea>
js function
function changeColor() {
document.getElementById('mainTextarea').innerHTML.replace('head', '<span style="color:red">head</span>');;
}
Related
I want to prevent clients to access route Home/Index when they are not logged in. So the code in my view is here:
#{
Layout = null;
if (Session["userId"]==null)
{
Response.Redirect(Url.Action("Index","Login"));
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>QIndex</title>
</head>
<body>
<div>
<h1>Profile</h1>
<h2>Hello #Session["userName"].ToString() </h2>
<a href=#Url.Action("LogOut","Login")>خروج</a>
</div>
</body>
</html>
Problem is that when i eliminate #Session["userName"].ToString() everything is alright. But when this is not eliminated, an error occurs on this line System.NullReferenceException: 'Object reference not set to an instance of an object.'.
I set a break point on if (Session["userId"]==null). I realized that compiler goes to <h2>Hello #Session["userName"].ToString() </h2> before it checks the if statement and then returns to if.
Just remove .ToString(). It should render the string properly without it.
I use tablesorter in combination with jquerycsvtotable.
Everything works fine, but... there's a lag between the moment when the table is loaded and the moment when tablesorter is shown that makes the data appear without any formatting on the screen. The time varies on the amount of data, between 2 and say 5 seconds.
Is there any way to show a "loading" gif or just nothing untill all the process is completed to avoid showing ugly data?
Thanks!
PS: I don't mean the time tablesorter takes to re-order rows when you click on a certain header cell, which I know is already arranged with optional processing gifs shown into the header...
EDIT: please find below my code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="/js/ts/css/theme.default.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/ts/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="/js/ts/js/jquery.tablesorter.widgets.min.js"></script>
<script type="text/javascript" src="/js/csv/js/jquery.csvToTable.js"></script>
<script>
$(function() {
var mytable = $('#tabla1')
.CSVToTable('/est/data/cli_30_0000.txt',{
loadingImage: '/js/csv/images/loading.gif',
separator: ";"
})
.bind("loadComplete",function(){
var footer = mytable.find('tr:last');
mytable
.find('thead').after( footer.wrap('<tfoot/>').parent() ).end()
.tablesorter({
sortList: [[5,0]],
widthFixed : true,
widgets: ["zebra", "filter", "stickyHeaders"],
widgetOptions: {filter_hideFilters : true}
});
});
});
</script>
</head>
<body>
<p>
<a href=../../>Home</a> <a href=../>30</a> <a href=./>0000</a><br>
2013-04-15 12:45:17
</p>
<div>
<table id="tabla1" class="tablesorter">
</div>
</table>
</body>
</html>
I wonder if the solution is as easy as just adding the "tablesorter" class name to the table. If you are using a theme other than default, that theme name should also be included:
var mytable = $('#tabla1')
.CSVToTable('/est/data/cli_30_0000.txt',{
tableClass: 'tablesorter tablesorter-default', // adjust theme name here
loadingImage: '/js/csv/images/loading.gif',
separator: ";"
})
First i got the error while validating my code in Sortsite as "Document type does not allow element "Style" here." So i removed style portion and kept in a new css sheet.
After that while validating, i got "Document type does not allow element "link" here." error.
here is the code:
<%#taglib prefix="s" uri="/struts-tags" %>
<%#taglib prefix="d" uri="/dror-tags" %>
<link href="<s:url value='/styles/menu.css' includeParams="none"/>"
rel="stylesheet" type="text/css" media="all"/>
<!-- Action URLs -->
<s:url id="dppUrl" namespace="/xyz" action="abc" includeParams="none"/>
<s:url id="dppUrl" namespace="/xyz" action="abc" includeParams="none"/>
<d:button value="Menu" submenuId="mainSubmenu" cssStyle="float: left;"/>
<div dojoType="dror:PopupMenu2" widgetId="mainSubmenu" submenuOverlap="0">
<div dojoType="dror:MenuItem2"
caption="xyz"
onclick="try { window.location = '${xyzUrl}'; } catch (e) { };">
</div>
</div>
Please help me in solving this issue.
The only valid location for that <link> tag in a HTML document is between the <head> and </head> tags. You're getting that error because that's not the case in your code.
From the HTML spec:
If the rel attribute is used, the element is restricted to the head element.
I have a problem with the following. I have a masterpage which contains the main layout of the site. Then I have a specific view which uses the masterpage as a layout but adds additional scripts like the following:
_Masterpage.cshtml
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#RenderSection("head", required: false)
</head>
<body>
<header> ....
_Register.cshtml
#{
Layout = "_Master.cshtml";
}
#section head
{
#Scripts.Render("~/bundles/jqueryval");
#Styles.Render("~/Content/themes/base/css");
}
<div id="body">
<div data-role="page">
#RenderBody()
</div>
</div>
Now my view which contains the form data makes use of the _Register.cshtml, however when the Index in the RegisterController returns the view (like below), the scripts and styles in the _Register.cshtml are not found anywhere in the Head tag.
public ActionResult Index()
{
return View();
}
Can anyone help me please? What am I missing in order to get these scripts/styles in the head tag please?
Thanks
Sections don't work in partial views and that's by design. You may use some custom helpers - Using sections in Editor/Display templates - to achieve similar behavior, but honestly it's the view's responsibility to include the necessary scripts, not the partial's responsibility. I would recommend you using the #scripts section of the main view to do that and not have the partials worry about scripts
Hey. Imagine i have two separate gsp pages with diferent css formatting (with name conflicts between two). And i want to "display" or render one page with its ows formatation inside a div in the other page. Imagining this scenario:
page1.gsp
...
...
<div id="here"></div>
...
...
page2.gsp
Hello there!
I want my final page to be:
...
...
Hello there!
...
...
Is it possible to do that?
Yes use the g:render tag and create a "fragment" page to contain your content.
then use the g:render tag to pull it in.
Refer to the documentation or tutorials for more detail on this.
This is very similar to a question I posted a couple of days ago:
Can I display an inner dive with an independent stylesheet?
Is this something you want to work for every page? (Like a layout?)
If that is the case, use SiteMesh (built in already)
{app}/grails-app/views/layouts/mylayout.gsp
<html>
<head>
<g:layoutTitle default="My Application" />
<link rel="stylesheet" href="${resource(dir:'css',file:'layout.css')}" />
<g:layoutHead />
</head>
<body>
<div id="here"><g:layoutBody /></div>
</body>
</html>
{app}/grails-app/views/{somefolder}/page1.gsp
<html>
<head>
<meta name="layout" content="mylayout" />
<link rel="stylesheet" href="${resource(dir:'css',file:'page1.css')}" />
</head>
<body>
Hello There!!!!
</body>
</html>
If you already have that, and are just looking at breaking up you pages and keeping them DRY..
{app}/grails-app/views/{somefolder}/page1.gsp
<html>
<head>
<meta name="layout" content="yourLayout" />
<link rel="stylesheet" href="${resource(dir:'css',file:'page1.css')}" />
</head>
<body>
<div id="here2"><g:render template="page2" model="[foo:'bar']"/></div>
</body>
</html>
* The Model property of render is optional, but works for passing data to the template to be rendered
{app}/grails-app/views/{somefolder}/_page2.gsp
* Notice the "_" before the gsp name. (Convention for Template pages)
Hello There
Checkout the documentation for render and templating