I have the following code in my view:
<apex:commandLink data-role="button" action="{!someAction}">
<apex:param name="someVar" value="someVarVal">
</apex:commandLink>
The code does not work because commandLink does not take the "data-role" attribute.
How can I pass a parameter like I am with the second line, but also have an attribute like "data-role" on the rendered link?
I've never found a way to put extra attributes into VF tags, your best bet IMO would be to add some javascript which runs on page load and then use JQuery's .attr() method to add the attribute to the component.
Something like the following (assuming you've included jquery through a static resource)
<apex:commandLink styleClass="myLink" action="{!someAction}">
<apex:param name="someVar" value="someVarVal"/>
</apex:commandLink>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".myLink").attr("data-role", "button");
});
<script>
You'll notice I've used a class instead of ID here, this is simply because SFDC generated IDs include symbols which need to be escaped for use with jQuery, and I find this is just the easier and cleaner solution to use (albeit probably slightly slower).
you can just use html pass through syntax :
html-attribute=value
for example
html-class="toto" will output class="toto"
Related
What is the difference between ng-include and ng-bind-html in angular??
imagine a case when based on some parameters the html will change rather to be for example an image tag or span tag; so There should be a mechanism to add that dynamic html
for example
<!--dynamichtml : <span class='glyphicon glyphicon-plus'></span>-->
<a ng-include="'dynamichtml.html'"></a>
<a ng-bind-html="dynamichtml"></a>
ng-bind-html is described as follows:
Evaluates the expression and inserts the resulting HTML into the element[...]
ng-include, on the other hand
Fetches, compiles and includes an external HTML fragment.
The value in ng-bind-html should evaluate to valid HTML. The value in ng-include should evaluate to a valid URL.
ng-bind-html
ng-bind-html is used when one has a model that contains HTML in the string format. On binding the model with that of the DOM, this gets updated in the element, as its child.
ng-include
This adds an external html file in the DOM. Here, it doesn't gets bind, but only gets attached.
It depends upon the application and the model states, based on which one can decide with which directive to make use of.
Here, you can read more about ng-bind-html and ng-include.
In a website, is there any way of changing text attribute of keyword, like product name, in an entire website without using any kind of html tags wrapped around those instances? I may require to define those keywords in server side environment or there may be a server side script in which I may need to define. Or can we use client side Javascript like some jquery plugin?
You can use Javascript on the client side to achieve this.
Drawing from this answer the following is a simple example:
Sample Jsfiddle
JS:
$('*').contents().each(function(){
if(this.nodeType === 3) {
$(this).replaceWith(this.wholeText.replace(/target/g, 'replaced'));
}
});
HTML:
<h1>target</h1>
<p>Here it is: <span>target</span> and target</p>
Working with Polymer Project markup, the <element> and <polymer-element> tags take an attribute called attributes to publish things in the custom element (1).
This causes problems in jade, since since #617 attributes as an attribute name is treated specially. Is there a workaround for this in Jade?
After the recent update to jade (v1.0.0 and greater) attributes is no longer special cased. As such you can just write:
polymer-element(attributes='foo bar')
results in:
<polymer-element attributes="foo bar"></polymer-element>
If you want to try it out in your browser you can do so at: http://jade-lang.com/demo/
Just put a '\' before the attributes-attribute, like so
polymer-element(\attributes='foo bar')
It was just a guess, but it worked. Can't find any reference in the documentation on this.
So consider it as a work around.
I don't know if this helps in your particular situation, but note that you can use an object property called publish in your prototype in place of the attributes attribute on the <polymer-element>.
E.g.
<polymer-element attributes='foo bar'...>...
is equivalent to
<polymer-element...>...
<script>
Polymer(..., {
publish: {
foo: null,
bar: null
}
}
That way you should be able, at least, to write your own elements without bumping into Jade syntax.
Just to keep this answer up-to-date, attributes is no more reserved in jade :).
How can I update the text fields with HTML? I have a page with some textfields, and I need to update these fields at a specific time. I used the value property to display the default values, but how can I change the values later?
Thank you
I am forcing a JavaScript answer, since there is no way it can be done with only HTML.
Snippet:
<input type="text" id="textboxid" />
<script type="text/javascript">
var txtBox = document.getElementById("textboxid");
txtBox.value = "new value";
</script>
You need to use javascript in order to achieve this. I recommend jQuery, as it prevents most cross-browser "quirks" and "gotchas". Specifically, you're looking for http://api.jquery.com/html/ or http://api.jquery.com/val/.
JSFiddle: http://jsfiddle.net/dEUH5/
First of all, at the very least, HTML is used for Mark-Up, CSS is for styling, and JavaScript is for functionality. I suggest that if you want to add functionality and interactivity to your website, you look up how to use JavaScript. This will allow you to add the functionality you wish for your textbox, as you wished.
You can't do this with HTML, you could with PHP.
I'm sure someone will type out the code, but go to: http://uk.php.net/.
This question is way to broad too.
Can I create a link that has another link in html.
For example, I want to call an html form and the target will be the sidebar frame.
At the same time, the board frame will also go back to the previous page.
I don't think you would be able to do this in plain HTML, but you could probably use JavaScript to accomplish what you're after.
as steve mentioned you need a bit of javascript:
<iframe id="frame1"></iframe>
<a href="" onclick="update();return false;" >DoubleActionLink</a>
<script>
function update() {
window.open("http://www.stackoverflow.com");
parent.document.getElementById('frame1').src="http://www.w3c.org";
}
</script>
btw, you said
I want to call an html form
html form means you'll submit something to web server...so you aren't asking for pure html solution. Isn't ?
The w3 specification about links clearly states that this is forbidden ..
12.2.2 Nested links are illegal
Links and anchors defined by the A
element must not be nested; an A
element must not contain any other A
elements.
But you can handle the click event through javascript and do additional actions when clicked..
Use target="_top" and set the href to the URL of a <frameset> document which loads all the frames you want by default.
Better yet, don't use frames. They are more trouble than they are worth.