I have a layout template that is xml and has no <script> tag in it. However when the page is generated <script/> has been generated as the first child element of the root element. Is there any way to turn this off?
That's not default behaviour. Can you check the html of your view and make sure there is no empty script in there?
Related
I am converting css template into MVC application. Needless to say, I am just a beginner into webdesign. Template contains reference to one js script, which needs to be included on all pages except the landing page.
<script type="text/javascript" src="js/slider_func_innerpage.js"></script>
How to achieve it in MVC without creation of another master page? I tried to put this line in all views except of default view, but nothing happened. Ideally, I would like to handle this in my _Layout.cshtml file. Is it possible to set there some "if" condition, which would, if true, call partial view containing that single line I posted above? Or is there a more elegant way to load that js file into all views with the exception of the default one?
If you do not prefer to create another layout for landing page (Why not ? This seems to be the right way of doing it) , you might consider conditionally loading this js file in your layout.
So in the view for landing page, set a flag to the ViewBag dictionary
#{
ViewBag.IsLandingPage = true;
}
Now in the layout, check this flag and if it is not null and true, Exclude the inclusion of your js file
#{
if (ViewBag.IsLandingPage == null)
{
<script type="text/javascript" src="js/slider_func_innerpage.js"></script>
}
}
I have 2 grails views that both refer to the same layout:
index.gsp & custom.gsp
Both pages have a <script> block in the <head>. I would like to be able to go to the custom.gsp directly OR work with the content in a tab in index.gsp.
I'm including the custom.gsp content using:
<g:include controller='controllername' action='custom'/>
It appears as if the custom.gsp's <script> block is overwritting the index.gsp's <script> block. If I remove the include everything else on the index page operates normally. If I add the include the code in the <script> block of index.gsp is not executed and upon inspection does not appear to be there.
What is really happening here and why? How can I structure things differently so this doesn't happeN?
UPDATE
I've tried moving the code in custom.gsp out of a <script> block and into a separate javascript file. However; when the include happens now it still pulls the code in as a <script> block and replaces the old one.
I've tried moving the block of each one into the body instead and I've tried adding id attributes to each thinking maybe sitemesh might see it as a unique block then. Still no luck.
UPDATE #2
I tried adding this to the body of index.gsp:
<div>this is a script
<script type="application/javascript">
var xyz='xyz';
</script>
</div>
And the text this is a script is visible but the script is gone!
UPDATE #3
update #2 is wrong, the text is visible but the script is actually there too. I thought it was gone because I was observing the same behavior as when it was gone. However; the real issue is that the entire head of index.gsp was replaced with the included page's head so index.gsp lost the libraries it needed to execute the script code.
As commented by #joshua the view returned by this call:
<g:include controller='controllername' action='custom'/>
must be a fragment instead of a whole gsp view with html, head .. tags.
Think of this when including views using g:include, if you have HomeController and NewsController (check figures below), and you want to include NewsController's view with HomeController's view,
You have to define an action on your NewsController that will only return the content fragment you see on the figure. To do this you can keep the news.gsp view but refactor it in such a way you put the content section in a new template(content fragment). I hope you get what I mean, but leave a comment if something is not clear on my example.
I am using select2 in tagging mode to create and edit tags. There is an annoying behavior which is that there is a delay between when the page loads and when the tags appear. Since the tags can spill onto two lines, after the tags appear the whole page readjusts when the content below the tags box is pushed down.
The delay is caused by select2 converting the input HTML tag into the necessary HTML elements for each tag.
The delay could be avoided if the select2 didn't generate the HTML for the tags, but instead I generated it on the server-side and it was included in the original page load. Then the position of elements below the tags field would never change.
Is there a way to have select2 attach itself it existing - pre-rendered - HTML, rather than creating the HTML itself?
Does anyone know of a tag field components that supports this? All of the components I have seen start with an input tag and then generate the HTML dynamically using Javascript.
I could not find a satisfactory answer, so I created a JQuery plugin specifically for my use case: https://github.com/k1w1/rendered-multi-select
It has Rails helper to render the HTML for the control on the server, then the Javascript events are attached when the page loads. This results in faster and flicker free loading.
I want to integrate tweet button inside a jquery template. Am trying the 'tweet button with javascript' (link). But my html template shows only link, it does not show the button. I tried the anchor tag outside the jquery-templ script. Then it is working fine. I am confused why this is not working inside jquery-tmpl.
code look like follows:
<script type="text/x-jquery-tmpl">
Tweet
</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Any suggestions?
Because the closing </script> tag is not parsed correctly by the browser.
You could write </scr{{= ""}}ipt> instead...
The point is, that browsers don't understand nesting of <script> tags, so whenever it parses a </script>, it closes the outermost script tag. Therefore, the closing </script> tag is matched to the template script.
You can trick the browser into ignoring the script tag, by adding the {{= ""}}, which will be used by the template engine to generate an empty string. </scr{{= ""}}ipt> will result in </script>, after templating.
I have a complex ICEFaces XHTML page that renders certain components conditionally, based on flags set as the user enters data on the page. What I'd like to do is direct focus to a certain field as soon as it appears, which may not be during the initial render of the page.
The ICEFaces documentation suggests that I can do this using the focus attribute of the outputBody component. Specifically:
If you setting the initial focus, the focused component must be rendered on first render call, if not then set the focus attribute only when the component gets rendered.
This seems to suggest that I can manipulate the value of the focus attribute at the time that my conditional component gets rendered. However, I don't see any attributes of the inputText component that allow me to change a value at the time the component is rendered.
Am I misreading the documentation? When and where can I alter the value of the focus attribute of outputBody so that my conditionally-rendered field gets the input focus when it appears? Or am I using the wrong tool to solve this problem?
Maybe you can use this
JavascriptContext.applicationFocus(FacesContext.getCurrentInstance(), "form:fieldM");
You can use some Javascript to set focus on an element.
Here's the Java snippet required to do this:
JavascriptContext.addJavascriptCall(FacesContext.getCurrentInstance(),
"document.getElementById('myForm:myTxtBox').focus();");
myTxtBox is the ID of your form element, and myForm is the ID of your form.
You can use this wherever you are changing certain variables' values to render/hide fields.
Due to the fact that I'm using both Seam and ICEFaces, I was not able to invoke Javascript reliably from my server-side Java code. I was, however, able to add the necessary Javascript in-line in my XHTML, within the ui:component that was being conditionally rendered, close to the input field I needed the focus to go to. The relevant section of my XHTML looks like this:
<ice:panelGroup id="textPanelInput" >
<ice:form id="textInputForm" partialSubmit="true" style="vertical-align:middle;">
<ice:inputText id="textInput" valueChangeListener="#{appField.valueChangeListener}"
size="#{appField.fieldDefLengthAsInt}"
value="#{appField.value}"
styleClass="fieldStyle" rendered="#{appField!=null}"
>
</ice:inputText>
<ice:message id="jo" for="textInput" />
</ice:form>
</ice:panelGroup>
<script type="text/javascript">document.getElementById('panelsFields:0:textInputForm:textInput').focus();</script>
The Javascript line at the bottom is the line I added to solve my problem. All of the code above is in a ui:component block that may or may not be rendered, based on other conditions. When this ui:component block is rendered, my Javascript goes with it, and sets the input focus to my desired input field.
ICEfaces supports javascript api which has setting focus function. Thus you may use it like in the next excerpt:
<script type="text/javascript">
jQuery(document).ready(function () {
ice.applyFocus(elementId);
});
</script>
elementId is jsf component clientId.
ICEFaces javascript Api