I use AngularJS in my single-page application. Somewhere I have defined a button like this
<button class="btn btn-success" onclick="doSeekTo({{todo.position}});doPlay();">
This button, when clicked, invokes the javascript function with the given parameter in double curly braces, as usual with AngularJS.
This all works well in IE9, but when looking at the error console, it says “Expected identifier, string or number” at the position of my curly braces.
How to get rid of this error? It makes me feel uncomfortable.
In Angular, you're not supposed to use the built in onclick event, but rather Angular's ng-click event. That way you can write
ng-click="doSeekTo(todo.position);doPlay()"
IE9 is parsing the HTML before your angularjs code modifies it. Maybe some indirection like this would help ...
<button class="btn btn-success" paramvalue="{{todo.position}}" onclick="doSeekTo(this.paramvalue);doPlay();">
Another option is to enclose the {{}} in single quotes such that IE interprets it as a string:
<button class="btn btn-success"> onclick="doSeekTo('{{todo.position}}');doPlay();">
Related
I'd like to remove or disable a couple of buttons from the reply editor of a phpbb forum I'm a member of, because the bbcodes they insert are too tempting but for some reason reserved for "more mortals".
Removing is probably the easiest solution; I have already identified what code to remove to achieve this:
</button>
<button type="button" class="button button-secondary bbcode-anchor" name="addbbcode24" value="anchor" onclick="bbstyle(24)" title="Anchor: [anchor]Name of the anchor[/anchor]">
anchor
</button>
<button type="button" class="button button-secondary bbcode-goto" name="addbbcode26" value="goto" onclick="bbstyle(26)" title="Goto: [goto=Anchor Name]Link tekst[/goto]">
goto
</button>
In the old days I would do this via a filter in Privoxy but nowadays that requires setting up its https_inspection, which I'd prefer to avoid.
I think it should be possible to do this via an in-browser userscript, e.g. via Tampermonkey. I found a promising JS function on here (https://stackoverflow.com/a/50537862/1460868) but have little idea for now how to deploy it (I have no knowledge of Javascript):
the function uses node.textContent.replace(); does it take simple expression (if so, how to pass a multi-line pattern?) or a regexp (and if so, what flavour)?
some guidelines/pointers as to how to put this function in a user.js/tampermonkey script would be appreciated.
Thanks in advance!
Bootcamp sample html file suggests a button written like this:
<p><a class="btn btn-primary btn-lg" onclick="run_update()" role="button">Button</a></p>
Though, I've written button always like this
<button class="btn btn-primary" onclick="run_update()">Button</button>
They seems identical and functions similarly. I'm wondering are they any different or will they impact performance everso slighly?
For this, always go for .addEventListener() instead of onclick. onclick is not recommended for executing an action in JS.
MDN (Mozilla Developer Network) also states that .addEventListener must be used instead of onclick.
For the button, it doesn't affect the overall meaning and work of it. A button doesn't cause a change when inside a p tag.
I'm really new to coding, I've searched a bit to try to find an answer and I feel like there's a very simple way to do this, but the answers I find I can't understand.
I have this example which shows the popover.
<span data-toggle="popover" title="Test" data-content="Test"
id="test">popover</span>
I want to change the content of data-content in my JavaScript file
I tried this but it doesn't seem to work.
document.getElementById('test').setAtribute('data-content','hello');
As you are using jquery, try setting the value for content as shown below,
$('#test').data('content', 'hello');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span data-toggle="popover" title="Test" data-content="Test"
id="test">popover</span>
Javascript can be a dangerous tool... it can and will silently do nothing if what you write is not valid Javascript.
So this line:
document.getElementById('test').setAtribute('data-content','hello');
has a misspelling in 'SetAttribute', which tries to call a function that doesn't actually exist (since it's misspelled), and so it does nothing at all.
First step when debugging: re-read your code carefully!
This may be a duplicate; it's hard to tell because the key words contain "html" and "content" and even Bing and Google were returning a lot of false positives.
Bootstrap tooltips and popovers support html values for the data-content attribute when data-html=true. However, this isn't valid
<input id="email" class="form-control" type="email"
data-bind="value: Email, valueUpdate: 'afterkeydown'"
data-container="body" data-toggle="popover" data-placement="bottom"
data-title="Email" data-html="true"
data-content="<p>This is <i>your</i> email address.</p>" />
because you can't just put html in the value of an attribute that is itself HTML. It may confuse the parser and is not permitted by the HTML specification.
While it seems to work with Internet Explorer, I really don't feel like testing with fifty different browsers and versions. It certainly does confuse the parser in the Visual Studio 2013 HTML editor. That editor thinks there's no closing quote.
I could dodge this by assigning the attribute from JavaScript in a separate file, but that's clumsy and defeats the separation of concerns.
So, what's the right way to mark this up?
As the accepted answer points out, you can't have a quote " inside a string quoted with ". This problem occurs often. If you want to display text that looks like HTML, then how is the browser supposed to know what it should parse as HTML and what it should simply display.
For example, how do you get a browser to display the text <p></p>
The answer is escaping. Instead of characters like " and <, you use placeholders like " and <
However, the solution of escaping the quotes doesn't work here. Precisely because the browser will not parse it as HTML. If you put escaped quotes in your html, they don't look like quotes to the browser, they look like text.
There is a different solution however: A string that is quoted with " can contain ' without problems. The following is valid:
data-content="<div id='string_in_string' ></div>"
This can be applied to your bootstrap popovers, I've set up a fiddle, it shows how the single quote strings are correctly parsed, while the escaped strings confuse the browser: https://jsfiddle.net/z4t2sud3/3/
This is the code inside the fiddle (the fiddle environment automatically imports bootstrap, jquery, etc)
<mark data-content="
<button class="btnr" type="button">
Doesn't work
</button>
<button class='btn btn-info' type='button'>
Works
</button>
" data-html="true" data-toggle="popover">
Popovered
</mark>
And be sure to activate the popover via Javascript:
$(function () {
$('[data-toggle="popover"]').popover()
})
You can add whatever you want to an HTML attribute as long as it is a valid html attribute value. What is a valid attribute value? What does not contains tags, quotes and so on. So.... and what? The solution is: Scape the string before append it inside the html attribute.
If you are using PHP: http://fi2.php.net/htmlspecialchars
Or Twig: http://twig.sensiolabs.org/doc/filters/escape.html
If you are using jquery, when you do $el.data('my_scaped_json) will be converted to whatever it was originally, such a json object or html-string: $( $el.data('my_scaped_html) );
I am using the following way to use $scope variable ({{func}}() in this case) as function name in ng-click.
<button type="button" ng-click="{{func}}()">Call {{func}}</button></pre>
This works in angularjs-1.2.0rc3. See working plunkr here
Any future version from > 1.2.0rc3 throw this error
What's changed? How can I use the above syntax in current angular version?
Ok first of all I do not recommend such a usage for ng-click because angularjs itself do not support this, but if you still want to use it such a way here is your solution...
<button type="button" ng-click="$eval(functionName)()">...</button>
where
$scope.f1 = function() {
...
};
//name of function as a string
$scope.functionName = "f1";
this is what your are looking for and here is your PLUNKER example...
All I did was append scope to both variables
<form name="angular" ng-controller="Ctrl">
<button type="button" ng-click="{{scope.func}}()">
Call {{func}}
</button>
<label>Status: {{scope.status}}</label>
http://jsfiddle.net/bebold/TmKLY/1/
I wouldn't advise going this route for dynamic variable change, a better choice would be to create a directive and do the binding within the template:
A great explanation can be found HERE.