Why some button displayed strangely in Shiny? - shiny

My second button display strangely sometimes. Anyone encountered the same situation? any solutions?
The second button is a download function, coding as following:
downloadButton('downloadData', 'Export Keywords'),
I'm using the following style:
tags$head(
tags$link(rel = "stylesheet", type = "text/css", href = "bootstrap.css")
#tags$style(HTML('#run{background-color:orange}'))
),
I tried to specify the width and height under css file of the button class. After that, it shows:
I think the root of the problem is that the lable for the button is missing at run time. When comparing the html code, I found:
<button class="btn btn-default action-button btn-success
shiny-bound-input" id="runButton" type="button">Run Analysis!
</button>
<a id="downloadData" class="btn btn-default shiny-download-link
btn-success shiny-bound-output"
href="downloadData?w=" target="_blank"></a>

The problem is resolved after I remove following function from downloadHandler()
shiny::validate()

Related

adding a "navigate Back" and "navigate Forward" buttons in django templates

I want to add a btn in my navbar.html in django-templates, and every time client clicks it, he navigates to page previous to what he in on, and also "naviaget Forward" if clicked other button.
how can i do it?
You can use JS:
<button onclick="history.back()">Go Back</button>
<button onclick="history.forward()">Go Forward</button>

how to pass object from attr of button in django template to js

I want to pass a Python object to JavaScript via the HTML attribute. I used the following codes, but I did not get an answer.
html code :
<button style="margin: 7px" type="button" class="btn btn-primary user-button-edit" user-arg="{{ user|safe }}" data-toggle="modal" data-target="#exampleModalCenter">
js code :
$(".user-button-edit").click(function() {
var user = $(this).attr("user-arg");
console.log(user);
console.log(user.name);
$("#Userpermissions_6").prop("checked",true);
})
the user.name --> undefined
Due to the presence of ' in user object, it does not convert to Jason and gives an error.
Does anyone have a solution? (I do not want to create an attribute for each data.)

What happens in reloading but not in navigation in angular?

I am working in angular-9 , there are many things which works on reloading, but not after navigation. eg: there are two components A and B. and another component c have a reveal modal code(in foundation).
c component is to be included in both A and B.from component A through navigation I can move to component B which is a another page.
c.ts:
import { FormControl, Validators, FormBuilder,FormGroup, FormGroupDirective } from '#angular/forms';
loginFormControl:FormGroup;
ngOnInit() {
$('#loginModal').foundation();
this.loginFormControl = this.formBuilder.group({
phone_number: ''
});
}
c.html
<div class="reveal" id="loginModal" data-reveal>
<form class="loginForm" [formGroup]="loginFormControl"
(ngSubmit)="onSubmit()">
<input placeholder="Enter Mobile Number" formControlName="phone_number">
<button type="submit" class="button">LOGIN</button>
</form>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
If I open the modal 'c' in both of the pages A and B on a click of two buttons on both pages with $('#loginModal').foundation('open'); in A.ts and B.ts files, it results me with some unexpected behavior.
1. the modal is open in both the pages. no issue related to view
2. But events of that modal(click,change) or if I enter phone number, It doesn't accept it from user. Even there no event works in a page until i refresh or reload the page.
3. After refreshing a page it will work on that page (including all
events and inputs), there won't be any issue in that page after reloading. but as i navigate to another component B, then it's(c) events and input won't work until i refresh this page too. this same will happen again with component A.
I haven't reach at any solution of this till now and why is this happening. Please let me know if anyone have solution of my problem. It would be fruitful for me.

Django Form - include a "reset" button

I've managed to include a form in my django project using FilterSet. It works very well - no issues.
When I have typed something in the form to make a search ('for instance BMW'), the table in my template is filtered on ('BMW'), though my search 'BMW' stays in the field. Hence, I would like to include a button 'clear' on which the user can click and 'BMW' disappears from the field & the search result goes back to the initial table. How can I realise this?
Currently I have included a button in my template (but nothing happens when I click on it)
<button type="reset" class="btn btn-primary" onclick="resetEffort()"">
<span class="glyphicon glyphicon-search"></span> Clear
</button>
And this is my view.py:
def cars_overview(request):
car = CarFilter(request.GET, queryset=Car.objects.all())
return render(request, 'cars/cars.html', {'filter': car})
many thanks !
You can intercept the event, pause it, clear the values, and then submit the form using js.
document.querySelector('button[type="reset"]').addEventListener('click', function (e) {
e.preventDefault();
this.parentElement.reset();
this.parentElement.submit();
})

Navigated automatically to wrong page after clicking in a button

I am newbie in ionic2, I have made a list of events with sliding Edit and Delete buttons. I have wanted to view the event details page by tapping on the row and it works fine. But if I tap on the edit button, the edit page appears and immediately replaced by event detail page. My code is following:
<ion-list>
<ion-item-sliding *ngFor="let event of eventList" (click)='goToEventDetail(event.id)'>
<ion-item><p><strong>{{event?.eventName}}</strong><p>
<p>Place: <strong>{{event?.place}}</strong></p>
<p>Date: <strong >{{event?.date}}</strong></p>
</ion-item>
<ion-item-options>
<button ion-button color="primary" (click)="goToEditEventDetail(event.id)"><ion-icon name='clipboard'></ion-icon> Edit</button>
<button ion-button color="danger" (click)="removeEvent(event.id)"><ion-icon name='trash'></ion-icon> Delete</button>
</ion-item-options>
</ion-item-sliding >
I have tried by removing "(click)='goToEventDetail(event.id)" event from "ion-item-sliding", in that case I have got expected result. My finding is, after clicking to edit button it fires "goToEditEventDetail" event and after that it also fires "goToEventDetail". I need to stop firing the second event, is there any solution? Thanks in advance.