I have a div, which contains some text and two buttons. I have an onclick attribute on the div, because I want to be able to click anywhere inside of it to activate an event, except for the two buttons. I don't want the event to activate if I hit one of the buttons. I can't seem to figure out where to put the "onclick", though, because it either selects all or not enough. Is there a way to exclude these two buttons from the selection?
My HTML right now is:
<div id="event" class="span8" onclick="preview({{ name.event_id }})">
<strong>
{{ name.title|truncatechars:50 }}
</strong> <br>
Location: {{ name.location|truncatechars:50 }} <br>
Start Date: {{ name.start|truncatechars:50 }} <br>
End Date: {{ name.end|truncatechars:50 }}
<a class="page btn btn-primary btn-small" href="/event/{{ name.event_id }}">Event Page</a>
<button class ="page btn btn-danger btn-small" id="{{ name.event_id }}" href="#" onClick="removeEvent({{ name.event_id }}, {{ user.get_profile.id }})">
<i id="icon" class="icon-minus-sign icon-white"></i>
Remove
</button>
...
</div>
You can just add a call to stopPropagation in the button onClick attribute, like this:
<button class ="page btn btn-danger btn-small" id="{{ name.event_id }}" href="#" onClick="event.stopPropagation(); removeEvent({{ name.event_id }}, {{ user.get_profile.id }})">
Previously answered here: How to stop event propagation with inline onclick attribute?
Related
I have a web application and I want to implement in it a Switch Button using this bootstrap example, so that the user can choose the language. Also, I need it to be submitted with a POST.
How can I code this type of toggle button, e.g.,
<div class="btn-group btn-toggle">
<button class="btn btn-xs btn-default">pt</button>
<button class="btn btn-xs btn-primary active">eng</button>
</div>
so that when the user clicks in one of them, a POST is submitted with "pt" or "eng" values?
EDIT: I just need a simple POST with redirect. I'm using Django and to translate documention suggests the use of this code:
<form action="{% url 'set_language' %}" method="post">{% csrf_token %}
<input name="next" type="hidden" value="{{ redirect_to }}">
<select name="language">
{% get_current_language as LANGUAGE_CODE %}
{% get_available_languages as LANGUAGES %}
{% get_language_info_list for LANGUAGES as languages %}
{% for language in languages %}
<option value="{{ language.code }}"{% if language.code == LANGUAGE_CODE %} selected{% endif %}>
{{ language.name_local }} ({{ language.code }})
</option>
{% endfor %}
</select>
<input type="submit" value="Go">
</form>
but I don't want a dropdown and the "Go" button. I would prefer the switcher.
You can create a bootstrap form as follows. I have assumed you want to validate the form using a php script (send.php). Add the name attribute, which will help you fetch the values in the validation script.
<form class="form-horizontal" action="send.php" method="post">
<div class="btn-group btn-toggle">
<button class="btn btn-xs btn-default" name="pt">pt</button>
<button class="btn btn-xs btn-primary name="eng" active">eng</button>
</div>
</form>
Give the buttons names and values:
<button class="btn btn-xs btn-default" name="language" value="pt">pt</button>
<button class="btn btn-xs btn-primary active" name="language" value="eng">eng</button>
Then read the data just like you would from your <select>.
Sending only language option with a POST (through AJAX)
// only if pressed a non-active button
$("button", "#language-selection").click(function (event) {
var $btn = $(event.currentTarget)
// only if not already active
if (!$btn.hasClass('active')) {
// you can switch the button as soon as clicked or in AJAX callback
changeActiveButton($btn)
$.post('https://jsonplaceholder.typicode.com/todos/1', {lang: $btn.text()}, function (data) {
// do whatever you want with your API callback data
})
}
})
function changeActiveButton($btn) {
// reset active & button type on previous button
$("button.active", "#language-selection")
.removeClass('btn-primary active')
.addClass('btn-default')
// set active & button type on current button
$btn
.removeClass('btn-default')
.addClass('btn-primary active')
}
#import "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div id="language-selection" class="btn-group btn-toggle">
<button class="btn btn-xs btn-default">pt</button>
<button class="btn btn-xs btn-primary active">eng</button>
</div>
I have this static element
<sp-attachment-button ng-if="::data.canWrite && data.canAttach"
id="disableElements" class="ng-scope">
</sp-attachment-button>
when ng-if condition is true, some sub elements will be added dynamically
<sp-attachment-button ng-if="::data.canWrite && data.canAttach"
id="disableElements" class="ng-scope">
<span class="file-upload-input">
<input type="file" style="display: none" multiple="true"
ng-file-select="data.onFileSelect($files)"
class="sp-attachments-input">
<button title="Add attachment"
ng-click="attachmentHandler.openSelector($event)"
class="panel-button sp-attachment-add btn btn-link"
aria-label="Add attachment" role="button">
<span class="glyphicon glyphicon-paperclip"></span>
</button>
</span>
</sp-attachment-button>
Now I need to disable the button element here.So I tried by adding following options to the <sp-attachment-button> element
1.disabled='disabled'
2.ng-disabled='true'
But it doesn't work.How can I disable the button element?
Any suggestion guys?
Note: I can see only the <sp-attachment-button> element.
If you can add id to that button then here is the solution.
document.getElementsByClass("buttonId").disabled = true;
I am trying to create a virtual stock market where I have different modals displaying information about each stock.
But the template renders as such that I am unable to get a unique modal-header for each stock.
Even after clicking on the 'CIPLA' stock I get "Buy HDFC" as the modal header.
Here is my django template.
{% for stock in user.stocks.all %}
<li class="list-group-item">
<b>{{ stock.stock_name }}</b>
<p id="curr">Current price : {{ stock.current_price }}</p>
Bought at : {{ stock.buy_price }}
<button class="btn" id="buy" data-toggle="modal" data-target="#buy-modal">Buy</button>
<!--Modal for buy-->
<div id="buy-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Buy {{ stock.stock_name }}</h4>
</div>
<div class="modal-body">
<form method="post" action="/stocks/{{ user.id }}/{{ stock.stock_name }}/buy/" >
{% csrf_token %}
<label for="quantity">Quantity</label>
<input type="number" id="quantity-buy" name="quantity">
<button class="btn" id="confirm-buy" type="submit" >Buy</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I have ended it with {% endfor %}.
The error is being caused by this line:
<button class="btn" id="buy" data-toggle="modal" data-target="#buy-modal">Buy</button>
As you can see, this line is mapped to data-target="#buy-modal" . This means that the Dom Element with id="buy-modal" gets invoked by it.
Now if you look inside your code, you are creating more than one number of modals(but with same html id).
The root error being the multiple Dom Elements with the same id. If you look at this line:
<div id="buy-modal" class="modal fade" role="dialog">
this line is created n-times inside your Dom(because it's being run inside a loop). This means that there are n-modals with the same ID. This also means that you Dom has n-number of modals with the same id.
Now that's a wrong practice in writing html.
Every time you click on the button:
<button class="btn" id="buy" data-toggle="modal" data-target="#buy-modal">Buy</button>
the html parser looks for the respective data-target in your html. Which clearly are n(since you created n; more than 1). Now the html always invokes the first or any specific modal every time because it parsed only one while it initialized your modal. Hence every time you click on a button, the same modal pops up
So to fix this you have to create modal with different ids and with different button triggers.
Hope this helps. Thanks.
I have a get form that works well on one view.
http://myurl.com/myapp/filter_objects/?risk__worktask=1&craft=3
I have another view to export this filtered list to pdf. For now i'm storing the results in session and accessing list from there in my pdf view, but ideally i would like to pass the filter parameters from the GET form directly to the export_to_pdf view.
Is that possible in django ? [ to have a given GET form send to two different urls with two submit buttons ? Would be great !
Thanks !
Here's my form
<form method="get">
<div class="well">
<h4 style="margin-top: 0">Filter Objects</h4>
<div class="row">
<div class="form-group col-sm-4 col-md-3">
{{ filter.form.risk__worktask.label_tag }}
{% render_field filter.form.risk__worktask class="form-control" %}
</div>
<div class="form-group col-sm-4 col-md-3">
{{ filter.form.craft.label_tag }}
{% render_field filter.form.craft class="form-control" %}
</div>
</div>
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</div>
<div class="well">
<h4 style="margin-top: 0">Filtered Ratings: {{ filter.qs.count }}</h4>
<a href="{% url 'myapp:export_ratings_to_pdf_by_worktask' %}">
<button type="button" class="btn btn-success">Export Filtered List ({{ filter.qs.count }} items)</button>
</a>
</div>
Why don't u use the formaction= tag attribute in your button to override the form action?
<form method="get" action="firstView">
<input ...
<input ...
<button ...>Submit to first view</button>
..
..
<button formaction="{% url 'myapp:secondView' %}" ...>Submit to second view</button>
</form>
It is a HTML5 attribute but it is supported by all the major browsers.
FormAction browser support
I have a blade view. When the user select an item a modal view appears in the same HTML.
My modal have 3 buttons. Each button have to redirect by post request to specific functions in my controller.
CarsController
class CarsControllerextends Controller
{
index(){
...
return view('cars')->with(['car'=>$response]);
}
// execute when the user click on save button
save(Request $request){
...
}
// execute when the user click on delete button
delete(Request $request){
...
}
// execute when the user click on remove button
remove(Request $request){
...
}
}
Modal
<form role="form" method="POST" action="{{ url('/guardarTurno') }}">
{{ csrf_field() }}
<!-- 3 hidden inputs to save the id of the item that the user selected ... is the best way?-->
<input type="hidden" id="cancha" name="cancha" value="" class="form-control">
<input type="hidden" id="fecha" name="fecha" value="{{$agenda['fechaElegida']}}" class="form-control">
<input type="hidden" id="hora" name="hora" value="" class="form-control">
<button type="submit" class="btn btn-labeled btn-success button-infousuario">
<span class="btn-label"><i class="fa fa-check fa-fw"></i></span>
Save
</button>
<button type="submit" class="btn btn-labeled btn-warning button-infousuario">
<span class="btn-label"><i class="fa fa-exclamation-triangle fa-fw"></i></span>
Delete
</button>
<button type="submit" class="btn btn-labeled btn-danger button-infousuario">
<span class="btn-label"><i class="fa fa-times fa-fw"></i></span>
Remove
</button>
</form>
What I want is:
Save button make a post request to save() method
Remove button make a post request to remove() method
Delete button make a post request to delete() method
Each of three button need the same ids
Thanks!
You will have to make 3 different forms to send to 3 different functions.
After your Save button, close the first </form>.
Then start a new form for each of the remaining buttons (Delete & Remove). Each form will have a different action
<form action="/remove" method="post">
{{ csrf_field() }}
<input type='hidden' name='id' value='1' />
<button type='submit'>Remove</button>
</form>
Then the same for Delete
Don't forget to define routes for each of the action=''