creating an if statement to look for specific button press - django

first time poster! I'm still fairly new to coding and Django...
I'm looking to create a django if statement to see if a certain button is pressed. I have a toast set up to show an error warning if a search returns no results, but it also pops up if the user clears the search.
Here's the button(s)
<div class="input-group-append">
<button class="form-control rounded-circle btn form-button ml-2" type="submit">
<span>
<i class="fas fa-search"></i>
</span>
</button>
<button class="form-control rounded-circle btn form-button ml-2 closebutton" type="clear" name="clear">
<span>
<i class="fas fa-times"></i>
</span>
</button>
</div>
I'd like it to spot if the button with the name/type "clear" is clicked, then it won't run the toast. Toast is below:
{% if button == 'clear' %}
<div class="toast custom-toast rounded-0 border-top-0" data-autohide="false">
<div class="arrow-up arrow-danger"></div>
<div class="w-100 toast-capper bg-danger"></div>
<div class="toast-header bg-white text-dark">
<strong class="mr-auto">Error!</strong>
<button type="button" class="ml-2 mb-1 close text-dark" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body bg-white">
{{ message }}
</div>
</div>
{% endif %}

I'd like it to spot if the button with the name/type "clear" is clicked, then it won't run the toast.
This if statement is only run on the server when it renders the HTML for the web page. It is checking if a variable named button has the string value "clear". This has nothing to do with any HTML elements in the page, let alone the name of a particular <button>. Instead, the value of the variable button comes from the "context" when your Python calls one of the render functions.
I'm looking to create a django if statement to see if a certain button is pressed.
There are two different ways to handle button clicks:
Submit a form to the server which then returns a response with a new page. This can be the same Django template rendered with different values in the context in order to get the behavior that you want.
Add an onclick handler to the button. This should be a JavaScript function that peforms the action you want. It can manipulate the elements in the page to add a toast or anything else.
The first option is very slow because it will require a new network request. The second option is probably preferred here since it will be very responsive to the user's actions.

Related

pass my php variables to a bootstrap modal not working

in my page
foreach ($json->items as $sam) {
$link= $sam->id->videoId;
echo''.$link.'';
//its showing last 5 youtube video id ok.. i set every video id witha button for modal
echo'<button type="button" data-toggle="modal" data-target="#PlayModal" class="btn btn-outline btn-danger">Play</button>';
}
but when im trying to open a model by box in new winddow pop up there only show 1st video ID. modal not getting '.$link.' valu in popup window. modal code puting same page blew finish {}
echo'<div class="modal inmodal" id="PlayModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated bounceInRight">
<div class="modal-body">
<p>'.$name.'</p>
<div class="modal-footer">
<button type="button" class="btn btn-outline btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>';
According to the code given, even the first video should not play.
it is not printing the value of LINK inside the button, so it will not work.
Unless you have a JAVASCRIPT code observing the click and playing the video on click.
You can create the HTML code first manually containing the 5 video ID, and each video should have a button (according to your description), when clicked it will open the modal.
once that is done, you will be able to use php for each to properly echo the html code.
alternatively, the videos are in HTML list, and javascript will handle the event click, reading the video ID and passing to the player in the modal.
in either case, you need to understand the HTML structure first.

How to identify button selected in cakephp 3.x?

I viewed the answer Which Submit Button was Clicked in CakePHP?. That situation doesn't apply to me, because I have the same action for each button.
I want to reuse a bootstrap modal and I want to know which item was selected when the modal was invoked. Very simply, I have a table with grades for each school object. When the user clicks the add button, I want to invoke the modal and add a grade for that object. I want to know which object was selected, because I want to reuse the modal for all objects. How can I do that in cakephp 3.x ?
After a teacher wants to add a grade and press the + button how do I know if he/she selected Mathematics or English if I use the same modal for grade saving? .
okey, most simple way is in modal to have hidden field, which contains a subject. I think this has not much to do with cakephp.
Example should look like this:
function modalopen(subject) {
$('#modal #subject').val(subject);
$('#modal').modal('toggle');
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<button type="button" class="btn btn-info" onclick="modalopen('english')">+</button>
<button type="button" class="btn btn-info" onclick="modalopen('math')">+</button>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id=""></h4>
</div>
<div class="modal-body">
sub (will be hidden):<br>
<input type="text" name="subject" id ="subject" value="" placeholder="will be hidden"><br>
Mark:<br>
<input type="text" name="mark" id ="mark" value="" placeholder="mark">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</body>
</html>
The only way of determining which button was pressed is to use Javascript. This means not using the html-tag-option based method on the button to launch the modal, ie:
<!-- Button trigger modal: CAN *NOT* USE THIS TECHNIQUE!! -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
I assume the form inside your modal is a cake-generated form, and the submit button is a normal form submit, which triggers a redraw of the page, effectively killing the modal (IE there's no "modal takedown").
To keep as close as possible to Cake's paradigm, I would send it back to the server in a hidden form field.
Something like:
on the cake side in your ctp while creating your form:
// HTML WRAPPER FOR MODAL
<?= $this->Form->create(yourentity); ?>
(your form stuff)
<?= $this->Form->hidden("subject_id",["id"=>"subject-id-field"]);
(end of form stuff including submit)
<?= $this->Form->end(); ?>
// HTML WRAPPER FOR MODAL
This will generate something in your form like
<input type="hidden" name="subject_id" id="subject-id-field"/>
We'll need to grab this hidden field in Javascript, so I'm giving it both a name (form-specific) and an id (global), since I prefer referring to everything with #id-syntax, but you could also use form[name=subject_id] and get rid of the id clause
On the browser side in HTML, to create your buttons:
<button type="button" class="btn btn-primary" onclick="launch_dialog('MATH')">Add Math</button>
On the browser side in javascript, the function to call when the button is clicked, which sets the subject id in the form and then launches the modal/form:
<script>
function launch_dialog(subject) {
$("#subject-id-field").val(subject); // use the id of the hidden field
$("#your-modal").modal("show"); // or whatever you do to launch the modal
}
</script>
On the server side in the function that the form targets:
# in your controller php file
function formAction() {
if($this->request->data["subject_id"]=="MATH") { // use the name of the hidden field
// do math record
}
// etc
}
Another note - if your grade record really does have a subject_id field which belongsTo a Subject record, you can have the button's onclick function call the launch_dialog function with that constant, and then you won't need any IF function inside the server action code. Just make sure to use the original record to generate the id, eg:
In controller before render:
$this->set("subjects",$this->[entity]->Subjects->find("list");
In ctp file, something like:
<?php foreach($subjects as $id=>$name): ?>
<button type="button" class="btn btn-primary"
onclick="launch_dialog(<?= $id ?>)">Add <?= $name ?></button>
<?php endforeach; ?>

Dropdown Trigger Visually "Active" Like "Hover" [Foundation 6]

See the below code for a basic hover dropdown-pane:
<button class="button" type="button" data-toggle="example">Toggle Dropdown</button>
<div class="dropdown-pane" id="example" data-dropdown data-dropdown data-hover="true" data-hover-pane="true">
<div class="row">
<div class="medium-12 columns">
<p>When I am hovering over any content in this dropdown-pane, how can I make the above button appear as "active" i.e. Same state as hovering over the button.</p>
</div>
</div>
</div>
Now what I'd like to have happen is that when the user is viewing any content within that dropdown-pane, the button that triggered the event has a visual indicator that it is the "active" trigger. Here's a picture example:
Any insight you can provide would be very much appreciated.
Foundation has you covered here.
When the .dropdown-pane (content wrapper) is active, the button is given the class .hover (not to be confused with :hover state).
So you can simply add specific styles to that class (relative to your button if you want multiple different types of effect in different scenarios). You would have to manually ensure that your Foundation :hover matched your new .hover state.
HTML (e.g.)
<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
Example form in a dropdown.
<form>
<div class="row">
<div class="medium-6 columns">
<label>Name
<input type="text" placeholder="Kirk, James T.">
</label>
</div>
<div class="medium-6 columns">
<label>Rank
<input type="text" placeholder="Captain">
</label>
</div>
</div>
</form>
</div>
<button class="button" type="button" data-toggle="example-dropdown-1">Hoverable Dropdown</button>
<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true" data-hover-pane="true">
Just some junk that needs to be said. Or not. Your choice.
</div>
CSS
.button.hover,
.button:hover{
background-color: green;
}
Working example: https://jsfiddle.net/tymothytym/8re4jcy0/ << in this example (and above) I'm manually setting :hover and .hover because I've used a default F6 CSS build which has a set :hover state but if you have already set :hover (e.g. to green) you don't need to re-set it.
Use css. Find the style of the hovered over button and either make an :hover pseudo class and apply the style that way or you can use javascript to add a class to the element that will have the exact css as the hovered over button.
.element:hover{
add styles here
}
or
var element=document.getElementByClassName('.className');
element.addClass('.classToAdd');

Selenium Grayed out Button

Hi I'm trying to click on this button that stays disabled until you fill in other fields. I am working with firefox. My script fills out those fields and the button is now clickable with my mouse. But when I try to click that element through selenium I get an error
WebDriverException: Message: Element is not clickable at point (281.8333282470703, 14.149993896484375). Other element would receive the click: <li ng-class="{active: $state.includes('urlAdm')}" id="adm-menu"></li>
Here is the html for the button.
<div class="col-xs-offset-2 col-xs-5">
<button type="submit" class="btn btn-primary ng-binding" ng-disabled="!userForm.$valid || user.deleted_at" disabled="disabled">
<i class="fa fa-check-square-o fa-fw"></i>
Create
</button>
<!-- ngIf: isAddUser() --><button ng-if="isAddUser()" type="button" class="btn btn-default ng-scope" ng-click="resetForm()">
<i class="fa fa-eraser fa-fw"></i>
Clear
</button><!-- end ngIf: isAddUser() -->
<!-- ngIf: !user.deleted_at && user.id !== currentUser.id && user.id -->
<!-- ngIf: user.deleted_at -->
</div>
I've tried regularly clicking on the button and doing it through actions but neither work.
Here is the code
element = driver.find_element_by_xpath("//*[#id='user-editor-1']/form/div[5]/div/button[1]")
ActionChains(driver).move_to_element(element).click().perform()
Any help would be greatly appreciated. Thanks!
You should try to click using execute_script() as below :-
element = driver.find_element_by_xpath("//button[contains(.,'Create')]")
driver.execute_script("arguments[0].click();",element)
Hope it helps....:)

Foundation 6 Nested Reveal doesn't respect multipleOpened

I'm using Foundation 6 with Angular2, and I have a couple of Reveal modals, that needs to open in a sequence. I've copied the example from Zurb directly, but when I click the button in the first modal, the new modal opens and the first doesn't close.
The default value for multipleOpened should be false, but they just open on top of each other.
Screenshot
I've tried setting data-multiple-opened="false" and also data-options="multipleOpened:false;", but they still open on top of each other.
Here is my code:
<p><a data-open="exampleModal2">Click me for a modal</a></p>
<!-- This is the first modal -->
<div class="reveal" id="exampleModal2" data-reveal data-options="multipleOpened:false;">
<h1>Awesome!</h1>
<p class="lead">I have another modal inside of me!</p>
<a class="button" data-open="exampleModal3">Click me for another modal!</a>
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- This is the nested modal -->
<div class="reveal" id="exampleModal3" data-reveal data-options="multipleOpened:false;">
<h2>ANOTHER MODAL!!!</h2>
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
Can anyone point me in the right direction?
I'm not sure if this is the effect you're after, but you can force the closing of the first modal by adding data-close to the button that launches the second one:
<a class="button" data-close data-open="exampleModal3">Click me for another modal!</a>
JSFiddle example