This drives me crazy. I want to pass a string literal as a parameter to a function in HTML onclick property containing a double quote.
My HTML element looks like this:
<button onclick = "ok_button_click(""Harry Potter "")" type="button" class="btn btn-default">ok</button>
But when I load the page and open it by Inspect Element, I see a space inserted between the first quote resulting in this:
<button onclick = "ok_button_click(" "Harry Potter"")" type="button" class="btn btn-default">bad</button>
Why does the browser insert a space ???
If you are trying to pass a string value with quotes then you have to use " like this:
<button onclick = "ok_button_click('"Harry Potter"')" type="button" class="btn btn-default">bad</button>
If you just want to pass in a string literal you can just use a single quote (or the opposite of what the attribute started with) like this:
<button onclick = "ok_button_click('Harry Potter')" type="button" class="btn btn-default">bad</button>
That is because when the DOM is being parsed the browser uses " as delimiters, so in your case it is assigning ok_button_click( to the attribute onclick and Harry Potter as a separate (and unknown) attribute.
A better way of writing this code would be mixing single and double quotes as in:
<button onclick="ok_button_click('Harry Potter')" type="button" class="btn btn-default">ok</button>
A good start on HTML debugging is to run it through a validator, like in https://validator.w3.org/#validate_by_input
Try :
<button onclick = 'ok_button_click("Harry Potter")' type="button" class="btn btn-default">ok</button>
Related
I need to pass the id of the element inside the typescript with [theID] of the :
<ng-template #popTitle let-language="language">Error</ng-template>
<ng-template #popContent let-greeting="greeting">{{texto}}!</ng-template>
<a
type="button" class="btn btn-outline-secondary ml-5" placement="top"
[ngbPopover]="popContent" [popoverTitle]="popTitle"
triggers="manual" [theID]="#p1" #p1="ngbPopover" (click)="toggleWithGreeting(p1, 'Bonjour')">
</a>
To be able to access from the parent the parameter that will remain inside
In short, the question is how can I use [var] = "# id"
The practical use that I am going to give it is in the toggleWithGreeting function where when invoking it from another place I have to pass the id of the element, for this I plan to put it inside in an input and call it from the father
I used an ViewChild()
#ViewChild("id") p1:PopoverComponent;
I've given it too many laps and I haven't fallen for the obvious
I have a button like below:
<a href="{{ relatedEntry.url }}" data-target="http://go.redirectingat.com/?id=120996X1581244&url={{ affiliateLink|url_encode }}&sref={{ entry.url|url_encode }}" target="_blank" class="btn btn-voucher btn-lg btn-block popunder" onclick="$.popunder(this);">
Reveal Code & Visit<i class="material-icons">chevron_right</i>
</a>
But I'm trying to add a Google event tracking code as well within this button:
onclick="ga('send', 'event', 'Deal', 'Deal Click');"
I've added both, but this seems to break the popunder.
You can trigger 2 or more functions on a trigger, separated by semicolons.
Here is a quick prototype where a button click will call two separate functions:
<button onclick="a();b();">Double Action</button>
<div id="a"></div>
<div id="b"></div>
javascript functions:
function a(){
document.getElementById('a').innerHTML ='A';
}
function b(){
document.getElementById('b').innerHTML = 'B';
}
here is a working jsFiddle
The only catch is that the first function does not cause an action that prevents calling or processing of the next function(s). Like redirect url, or fatal exception.
I don't know how to concatenate
<button type="button" data-toggle="modal" data-target="#modal_form_inline"> Bloqué</button>
and
th:text="${z.idp}"
I wanna to concatenate th:text="${z.idp}" with data-target="#modal_form_inline"
the result would like next:
modal_form_inline1 or modal_form_inline2
I'm trying to print a button in html passing it as a parameter in angular2 but angular2 never translate it.
modal.component.ts
this.footer = `<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>`
modal.component.html
<div class="modal-footer" [innerHTML]="footer"></div>
output html
<div class="modal-footer" ng-reflect-inner-h-t-m-l="Close">Close</div>
Should be innerHtml instead of innerHTML. It is case sensitive.
For example :
<div class="modal-footer" [innerHtml]="footer"></div>
urls.py contains the line:
url(r'^topics/$', views.topics, name='topics'),
views.py contains the code:
def topics(request):
context = locals()
return render(request, 'topics.html', context)
The following bootstrap code is used to open "topics.html"
<p><a class="btn btn-warning" href="/topics/" role="button">More »</a></p>
The above code renders "topics.html" correctly which is a table.
Now, I want the cursor to go to a specific row( Ex: first row) in the table.
It's not clear for me what cursor you mean, but may be you can assign a unique id to each row like
<tr id="row-1"><tr id="row-2"><tr id="row-3"><tr id="row-4">
then you can jump to that id using
<a class="btn btn-warning" href="/topics/#row-1" role="button"></a>
<a class="btn btn-warning" href="/topics/#row-2" role="button"></a>
...
it may look a little bit basic, but with the few clues you set i think it could be a start...