Develop Reference

Remove download button from odoo's pdf_viewer main widget

I found this answer and it helps to remove the download button from field's widget, but how can I do this with the main widget? I mean, the one that appears when you click on records' attachments.
Remove download button from odoo's pdf_viewer widget
Also I'm reading this about "Modifying a main widget from the interface" but I don't find the way to do this with the main widget https://www.odoo.com/documentation/15.0/developer/reference/frontend/javascript_cheatsheet.html
Main widget
I tried with this code but it wont' help, only on the fields widget. At least that's what I see.
var basic_fields = require('web.basic_fields');
basic_fields.FieldPdfViewer.include({
_disableButtons: function (iframe) {
$(iframe).contents().find('button#download').hide();
// $(iframe).contents().find('button#secondaryDownload').hide();
this._super(iframe);
},
});`

Bootstrap Popover AND a Modal (hover and click)

Scenario: user profile. I would like to be able to display a user name with a popover that displays a limited amount of information from the user profile. So far, I have that part working. I can build it on the fly and have it do what I need. The popover works perfectly.
What I would also like to do is have the user be able to click on the user name and bring up a Bootstrap modal form with more information about the user (if provided). The first problem I am seeing is that it appears the data-toggle attribute can only have a single setting:
echo '' . $user_row['user_name'] . '';
In that example, if I add the modal to the data-toggle attribute it doesn't seem to do me much good.
I have discovered by tinkering (and that is why the class 'userprof' in the code above), that a JavaScript click event can be triggered (right now all I'm doing is a basic JS alert dialog to test), but from there I would want to load the modal. I am not sure if I can make it all work.
I have a set of functions I've used successfully for another modal (calling this one 'userModal') that I got some help from someone here a while back with -- is it possible to call that from the click event?
// code to open the modal with the caption and description:
$('#userModal').on('show.bs.modal', function (event)
{
var button = $(event.relatedTarget); // Button that triggered the modal
var title = button.data('title'); // Extract info from data-* attributes
var body = button.data('body'); // Extract info from data-* attributes
var modal = $(this);
modal.find('.modal-title').text( title );
modal.find('.modal-body').append( body );
});
// when modal closes, clear out the body:
$('#userModal').on('hidden.bs.modal', function ()
{
$(this).find(".modal-body").text('');
});
Since these are "anonymous" functions I am not sure I can call them ... feeling a bit lost in the code here. Any help pointing me in the right direction would be great. I'd even be willing to consider a different idea, but I would like this kind of functionality (hover and click) for this situation and possibly something else. Thanks!

You're listening for the modal to show itself, when the DOM is showing the modal.
try using something like this, and use a button or a link with data-toggle="modal"
$(document).on('hidden.bs.modal', '#userModal', function ()
{
$(this).find(".modal-body").text('');
});
for reference https://jsfiddle.net/y063mu4t/1/

You can try:
$(document).on('click', 'a.userprof', function(){
$('#userModal').modal('show');
});
To make your callback function work, you need to add according data-* attribute to each of the <a> tag.

Populating Bootstrap 3 Modal on Button Click

I am a junior web developer and am currently creating a dynamic website. Within this website I am using Javascript in order to structure my pages e.g. entering HTML into a var string and calling upon it to load on the page when necessary.
I am trying to use the Bootstrap Modal for various forms to input data into my database. This is giving me some trouble as some elements such as datepicker is not working I assume because the Modal loads on click of the button where as the date picker loads on page load.
Anyway, I just wanted to know if there is a way to have content and my custom Javascript to load when the bootstrap modal button is clicked e.g.
var outputContainer1 = $('#selectCraft');
$.ajax(apiPrefix + '/craft' + apiSuffix, {
error: function() {},
success: function(data){
for(var i in data){
$('#selectCraft').append('<option value="'+ data[i].id +'">'+data[i].aircraft_name+'</option>');
}
},
type: 'GET'
});
As you can see this is a select element that is getting its information from the database. Which I want to load on button click rather then at the page-load.
My data target for the button is "#flightModal" and the Modal ID is "#flightModal".
If anyone can help I would much appreciate.
Thanks
Ibrahim

You just need to initialize your datepicker after the modal is created. So build you DOM in the success callback, then initiaze the datepicker as you would on a normal page load:
success: function () {
// ...
$('#datepicker').datetimepicker();
}
By the way, if you are working with modals, I recommend using the Bootstrap Dialog JavaScript library, it makes working with models programmatically much easier. For example you can show a simple modal window like this:
BootstrapDialog.show({
title: 'Hello World',
message: 'This is a hello world message'
});

events calendar using jquery

I am building an appointments calendar using the fullCalendar jquery plugin and backbone.
I am reading this tutorial here about it:enter link description here
In the section "Let’s start a dialog" code is shown as to how to create a modal box and enter a new event,the code is based on the dialog widget of the jquery UI,enter link description here
here is the code specifically:
render: function() {
this.el.dialog({
modal: true,
title: 'New Event',
buttons: {'Cancel': this.close}
});
What I am trying to do is add more html in that dialog. I want to add a select element for example so that the user can choose the duration of the appointment.
The jquery documentation in http://api.jqueryui.com/dialog/ does not indicate how to do that.
In order to get a better a picture of what I want to do is to look at the modal box that appear when you go to create an event on outlook.com calendar.
Of course the data will be sent with a ajax...but that is a different topic.

The jqueryui dialog uses html content that's inside element you are applying plugin to.
I think it doesn't have built-in functionality to load content from external resources.
So you can either put html inside element before initializing dialog, or use its callbacks.
E.g. if you want to load data via ajax into it:
el.dialog({
modal: true,
title: 'New Event',
buttons: {'Cancel': this.close},
open: function(){
var thisdialog = this;
$(thisdialog).html('loading data...');
$.post('external_resouce.html',
function(data){
$(thisdialog).html(data);
}
);
}

Javascript alert popup form

i have search this whole site and google but cannot find it so, here goes!
i would like a way to show a form when using alert.
for example, when user click post, a dialog pop with asking user a few question like a html form and allow user to click submit or reset or cancel, without loading a new page.
i have seen this done but cannot find the same site again.
i have tried putting htm to alert with little success of posting.
any Help is Highly Appreciated!

What you are looking for is a Prompt Box:
<script type="text/javascript">
function show_prompt() {
var name = prompt('Please enter your name','Poppy');
if (name != null && name != "") {
alert(name);
}
}
</script>
example taken from here: http://www.w3schools.com/js/js_popup.asp

you can do this with jQuery dialogs -- load the dialog on user click and have a form presented in the dialog. have a look at the demos here: http://jqueryui.com/demos/dialog/

To complete #Liv's answer you can use jQuery's UI
Reference: Modal Form
The example shows how to create a new user. It will pop up a dialog where you complete a form and you can submit it or you can cancel it.
Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the modal option to true, and specify primary and secondary user actions with the buttons option.
It pretty much what I understood you need.
Good luck!

HTML can't be placed in system dialogs generated by alert(), confirm() or prompt(). However, you can download jQuery UI and set it up on your Website. (Make sure you have the "dialog" component chosen on the download page.) Then in your JavaScript:
$("<div>Place your HTML here</div>").appendTo("body").dialog({
modal: true,
title: "Enter a title here"
});
Make sure you run this code after the page has loaded by using either window.onload or $(document).ready().
Ad#m

You will not be able to do this with alert, but you should take a look at how to create modal windows.

I recommend you to use a div popup. What you have to do is setting a background on top of all other elements except the div where your form is. The css property display will be set to 'none' until the form is then activated, by setting display = "block". That can be performed using javascript.