I'm doing something wrong as my CSS wont apply.
I've Created a scope called DatePickerCss
Which looks something like
DatePickerCss .ui-widget{font-family:Verdana,Arial,sans-serif;font-size:1.1em}DatePickerCss .ui-widget .ui-widget{font-size:1em}DatePickerCss .ui-widget input,DatePickerCss
....
Added the CSS to the page
<link href="~/Content/css/jquery-ui.theme.min.css" rel="stylesheet" />
Then done the following, which im guessing is wrong?
<div id="DatePickerCss">
<div id="datepicker"></div>
</div>
Then when I look no CSS is applied?
Related
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 an HTML string containing multiple <image> tags. I'd like to search for each tag and wrap them with a div tag.
For example:
mplampla<img src="somethin.jpg" />mplampal
Should be:
mplampla<div class=""><img src="something" /></div>mplamla
How can I do this using Regex within Ruby on Rails?
This is jquery solution
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.image').wrap('<div class="">');
});
</script>
<img class="image" src="img.jpg" />
<img class="image" src="img.jpg" />
<img class="image" src="img.jpg" />
<img class="image" src="img.jpg" />
If I properly understand what you need:
foo = 'mplampla<img src="somethin.jpg" />mplampal'
re = re = /(?<img><img .*? \/>)/
foo.gsub re, '<div>\k<img></div>'
# => "mplampla<div><img src=\"somethin.jpg\" /></div>mplampal"
Here we're using named capturing groups using the \k named backreference syntax: (?<img>...) creates named group and \k<img> uses backreference.
UPDATED
We also have to use non-greedy quantificator - thanks #mu! - for working with nested tags
On a jQuery Mobile site I have elements of a <ul> being populated by jQuery Templates, filling out <li> items so something like this:
<ul>
</ul>
<button>Fill</button>
<script type="text/x-jquery-tmpl" id="tmpl-items">
<li><input type="checkbox" name="guys" /> ${FirstName} ${LastName}</li>
</script>
<script type="text/javascipt">
$('this-page-id').live('pageinit', function() {
$('button').click(function() {
$('#tmpl-items').tmpl(MyApp.Model)
.appendTo('ul')
});
})
</script>
Everything works, except the checkbox renders as a normal checkbox, not a cool jquery-mobilized checkbox. I know that the trick is to call "refresh" on the widget but I have no idea what widget I should be using - there is no data-role here. Does anybody know?
Can you triggering a create on the ul,like this $('ul').trigger('create');
Im wondering if it is possible to use g:include to include only the body contents of a given page.
Say i have a main layout page as follows:
<html>
<head>
<title>My start page</title>
<g:layoutHead>
</head>
<body>
<g:layoutBody>
</body>
</html>
Then a main page (index.gsp)
<html>
<head>
<!-- main layout reference -->
<meta name="layout" content="main"/>
</head>
<body>
THIS IS MY INDEX BODY CONTENT WITH AN INCLUDE
<g:include controller="book" action="list"/>
<g:link controller="book" action="list">See the full list!</g:link>
</body>
</html>
And finally the book/list page
<html>
<head>
<!-- main layout reference -->
<meta name="layout" content="main"/>
</head>
<body>
<table>
<g:each in="${books}">
<tr>
<td>${it.author}</td>
<td>${it.title}</td>
<td>${it.price}</td>
</tr>
</g:each>
</table>
</body>
</html>
So what i want to achieve is that the main page (index.gsp) only includes the table defined in the book/list page. However, when i try this it includes the entire html defined (<html> tags and all).
is it possible to do this somehow? i've tried things like <g:include controller="book" action="list" view="someView.gsp"/> however this doesn't work. I really want to avoid having to add a book list logic to the "index controller" i want to reuse my existing controller.
I can't be the first person out there having this usecase, what solutions have you guys come up with?
You can use the applyLayout tag. Simply create an empty.gsp layout with only:
<g:layoutBody/>
And then decorate your include tag with applyLayout:
<g:applyLayout name="empty">
<g:include controller="book" action="list"/>
</g:applyLayout>
See the entry on the Grails guide for further reference.
This is IMHO directly not possible. An idea would be to create a custom tag based on g:include, that strips out parts of the code by e.g. an xpath expression. I'm not aware that this already exists somewhere.
An alternative would be to refactor the body part of book's list.gsp into a template and reference that template from index.gsp using g:render. But this means that the data model has to be available in index.gsp context since g:render does not invoke a controller.
Side note: when using g:include it's a good idea to use the springcache plugin for page fragment caching.
Yes, but you need you need one more level in there. Look at Grails templates. Essentially, you'd have a template: _books.gsp containing:
<table>
<g:each in="${books}">
<tr>
<td>${it.author}</td>
<td>${it.title}</td>
<td>${it.price}</td>
</tr>
</g:each>
</table>
Then your index would be:
<html>
<head>
<!-- main layout reference -->
<meta name="layout" content="main"/>
</head>
<body>
THIS IS MY INDEX BODY CONTENT WITH AN INCLUDE
<g:render template="books">
<g:link controller="book" action="list">See the full list!</g:link>
</body>
</html>
And your list would be:
<html>
<head>
<!-- main layout reference -->
<meta name="layout" content="main"/>
</head>
<body>
<g:render template="books" />
</body>
</html>
(My syntax may not be 100% right, since it's been a couple months since I've done this, but the idea behind templates are short, reusable pieces of GSP code that aren't meant to be displayed on their own.
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