I am trying to link to a page on a different site that contains three buttons in a form. When I link to the page xyz.com/form , by default the 'Highlighted' button is checked since it contains the btn-primary class. How can I create a link from my site linking to xyz.com/form with the btn-primary class selected for 'Link One' or 'Link Two' rather than 'Highlighted'?
<form>
<div class="col-xs-12">
<a class="btn btn-block btn-default btn-primary">Highlighted</a>
<a class="btn btn-block btn-default">Link One</a>
<a class="btn btn-block btn-default">Link Two</a>
</div>
</form>
You can't.
It isn't possible to make arbitrary changes to the HTML of an arbitrary site through the URL.
(If it was, you could watch as I linked to your bank's online banking service with a link that changed their login form to point to my own, malicious, site).
You would have to make the changes on the site hosting the HTML you want to change.
Ideally, you would create different pages representing each version of the page. You could do this dynamically using server-side code which (for instance) paid attention to the query string.
You could also use JavaScript (in the page) to examine the URL and modify the DOM based on it.
Related
So, I really need some help, hope I can make myself understand.
I have a software were you can import data from csv and that data is shown in an html layout, that layout has a "submit" button that triggers the ajax with the method post.
Also, in that layout you can had some info, so a pop-up appears with the info to fill and this pop-up also have a "submit" button that triggers the ajax with the method post. (this pop-up is getting a layout that already exist in the software in a "normal / not pop-up" way).
My problem here, is that every time I click in the submit of the pop-up, instead of going to the POST of the pop-up it goes to the POST of the first form that is behind.
Any ideas how can I make him understand that I want the POST that is on the page of the submit button I'm clicking?
Layout of the import is in a html and the frame of the pop-up is also on the same page
Submit with the POST of the import and the POST of the pop-up are in different pages
The submit layout is equal to both case, but they are in different pages and the Ajax have different names.
#Using (Ajax.BeginForm("Controller",
"Name",
Nothing,
New AjaxOptions With {.HttpMethod = "POST",
.UpdateTargetId = "mydiv" + Model.MYMODAL.ToString,
.InsertionMode = InsertionMode.Replace},
New With {.id = "AJAX_ID" + Model.MYMODAL.ToString}))
#<div id="div_create__#Model.MYMODAL">
#Html.Partial("VIEW WHERE IS THE FORM", Model)
<hr />
<div class="btn-group-sm" style="margin-top:10px">
<button class="btn btn-info"
type="submit"
title="CREATE">
<i class="glyphicon glyphicon-plus-sign"></i>
<span>CREATE</span>
</button>
<button class="btn btn-default"
type="button"
title="CANCEL">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>#Translate.CancelAction_dsg</span>
</button>
</div>
</div>
End Using
</div>```
So, I changed the place where I had my pop-up and it suddenly works.
I think the place where I put my pop-up the html thought it was a form inside another form, and when I move it, the html was able to identify that there was different forms apart.
Thank you for the help.
I'm building a website and I've got the following problem. When I click on a button, it generates two GET petitions, one with the primary key of the object I want to get as a parameter, and ANOTHER one with no parameter at all. I can't see why this can happen. Here's the piece of code of the button that generates both petitions.
<div> <a class="btn btn-dark" role="button" href="cartel.html/?id={{cartel.pk}}" style="margin-bottom: 0px;margin-left: 0px;background-color: rgb(52,58,64);">Ver más</a></div>
I'm using Django as the backend of the system.
I'm using Django 2.0 and have a model A with a list view and a detail view. You can go from the list view to the detail view in the following manner:
Button on ListView Html page to go to detail view
<td><a href="{{ a.get_absolute_url }}" class="btn btn-primary" class>View</a></td>
Models.py
def get_absolute_url(self):
return reverse("a:detail", kwargs={'a_id': self.a_id})
Then in the DetailView Html Page I have a button to go back to the detail view.
<a href="{% url 'a:list' %}" class="btn btn-primary" class>Back</a>
where a:list takes you to ListView Html
That is pretty straight forward. However, what if I made this same process for another html page. Then I'd need a second 'back' buttons to go to this new html page. It gets cumbersome really quick.
Is there a way that you can create a button that will go back to whatever page the user came from? This can either be to any page that has a button to go to this page (and you pass in some information that allows you to backtrack this) or maybe you typed in the url and want the back button to go back to whatever page you came from. I'm open to either way.
If you need Back button you can simply use HTTP_REFERER header
Like this:
<a href="{{ request.META.HTTP_REFERER }}" class="btn btn-primary" class>Back</a>
Note: you need to have django.core.context_processors.request in your TEMPLATE_CONTEXT_PROCESSORS.
This question already has answers here:
How do I make links with no href attribute accessible?
(2 answers)
Closed 5 years ago.
I have this link that looks more like a button - but whenever I am testing my tab navigation via keyboard - this link is never it and the user can't use it.
How can I make it ADA compliant and use aria to make it accessible via keyboard?
<div class="styles">
<a class="btn btn-primary" (click)="handlingClick($event)" id="addUser">Add User</a>
</div>
You have to add the tabindex attribute.
<a class="btn btn-primary" (click)="handlingClick($event)" id="addUser" tabindex="0">Add User</a>
The value 0 gives it a natural tab index based on the order of the DOM elements.
Here is some additional documentation.
Anchor elements are natively focusable. The reason that your link does not receive focus is because it doesn't have an href attribute.
Another way of approaching this problem would be to add a non-existent URL fragment identifier to the href attribute, like this:
<div class="styles">
<a class="btn btn-primary" href="#void" (click)="handlingClick($event)" id="addUser">Add User</a>
</div>
I am trying to make a lightbox appear when a button is pushed. Problem is, when the anchor is around the button (like in the code below), it automatically redirects to "mywebsite.com/myimage.jpg". However when the anchor is inside, only clicking the text will pop the lightbox. Here is the code:
<a href="myimage.jpg" rel="lightbox" title="Title!" style="color:white" class="lightbox">
<div>
<button class="btn btn-lg btn-block" style="background:red">Button Text!</button>
</div>
</a>
Anchors and buttons have two different intended purposes, though Bootstrap allows you to style either as a button. Pick one. Using both is just bad practice.
<a href="myimage.jpg" rel="lightbox" title="Title!"
class="lightbox btn btn-danger btn-lg btn-block my-button-class">Button Text!</a>
The .btn-danger variant gets you the white-on-red scheme you seem to be going for. See http://getbootstrap.com/css/#buttons-options.
If this doesn't solve your problem you'll need to be more clear about which lightbox plugin you're using and what properties it's looking for.