As my question above, how could I make a lookup function through bootstrap modal?
logic : click modal trigger -> launch modal -> select a row -> data row inserted to filed -> modal closed
Here is my code (it is for new tab opened, not BS modal).
your understanding of a Bootstrap modal seems to be incorrect
you really don't need window.opener.parent and things like that because you are in the same dom tree as your main script - i hope it helps a bit
function pilih(row) {
// mendapatkan id perusahaan
var perusahaanid = row.cells[1].innerHTML;
// mendapatkan nama perusahaan
var nama= row.cells[2].innerHTML;
// memasukkan nama perusahaan dalam form
$("#nama_perusahaan").value = nama;
$("#id_perusahaan").value = id_perusahaanid ;
// menutup pop up
$("#myModal").modal("hide");
}
Related
I installed web hide menu on https://www.odoo.com/apps/modules/8.0/web_menu_hide_8.0/
I modified to use it on Odoo 10, but the form will be adjusted to full width IF we press the hide button, if we were to change to another view after we pressed hide button, the form page will remain same as original (not full width).
So i need to adjust class "o_form_sheet" on form view after the page has been rendered. May i know how can i do that using javascript? Which class & method do i need to extend?
I'm going to answer my own question.
After some researched, i found out the best option was to inherit ViewManager widget using load_views function.
var ViewManager = require('web.ViewManager');
ViewManager.include({
load_views: function (load_fields) {
var self = this;
// Check if left menu visible
var root=self.$el.parents();
var visible=(root.find('.o_sub_menu').css('display') != 'none')
if (visible) {
// Show menu and resize form components to original values
root.find('.o_form_sheet_bg').css('padding', self.sheetbg_padding);
root.find('.o_form_sheet').css('max-width', self.sheetbg_maxwidth);
root.find('.o_form_view div.oe_chatter').css('max-width', self.chatter_maxwidth);
} else {
// Hide menu and save original values
self.sheetbg_padding=root.find('.o_form_sheet_bg').css('padding');
root.find('.o_form_sheet_bg').css('padding', '16px');
self.sheetbg_maxwidth=root.find('.o_form_sheet').css('max-width');
root.find('.o_form_sheet').css('max-width', '100%');
self.chatter_maxwidth=root.find('.o_form_view div.oe_chatter').css('max-width');
root.find('.o_form_view div.oe_chatter').css('max-width','100%');
}
return this._super.apply(this, arguments, load_fields);
},
});
I'm having a problem here:
When I select a radion button in a page 1 and another one in the same page it works fine, but when I select a radio button in the page number 2, and go back to the page number 1, that first radio button still selected and the one in the page number 2 is also selected, how can I solve this problem? I was looking for a solution here in the forum but couldn't find someone with the same problem.
*[code] $(document).ready(function () { var oTable = $('#example').dataTable({ "bJQueryUI": true, "sPaginationType": "full_numbers" }); }); [/code]*
There is no solution from DataTables itself. You'll have to do it on your own.
What you can do is save the selected value yourself on a click. Imagine you have a table called projectsTable. Then you can write:
var selection = -1;
$("#projectsTable input[type=radio]").on
(
"click",
function()
{
selection = $(this).val();
}
);
Then, you'll have to unselect all the wrong values every time the page changes. Add a callback in the construction of your table for page draw to do that:
//other settings go here, like the dom one
//you can choose your own, no need for this specific one
"dom": "lfBrtip",
"fnDrawCallback":
function(oSettings)
{
$("#projectsTable input[type=radio][value!="+selection+"]").prop('checked', false);
}
Every time the page is changed, this piece of code deselects everything you don't want to be selected any longer.
I'm using CKEditor and I wrote a plugin that pops up a the CKEditor dialog.
I need to re design the ok button and add to the footer more elements like textbox and checkbox but it's seems to be to complicated to do so, so I've hide the footer part and created a uiElement in the dialog content with all what I need but now what I want is to trigger the okButton in the hidden footer but I can't find a way to do it..
Anyone?!
There may be a better way, but here's how I'm doing it:
var ckDialog = window.CKEDITOR.dialog.getCurrent(),
ckCancel = ckDialog._.buttons['cancel'],
ckOk = ckDialog._.buttons['ok'];
ckOK.click();
The trick is to get the button and then use the CKEditor Button API to simulate the click. For some reason, I was unable to call dialog.getButton('ok') because getButton is undefined for some reason. My method digs into the private data, which I doubt is the best way to do it.
From the onShow event (when defining the dialog), I was able to get the ok button like the docs indicate:
onShow: function () {
var okBtn = this.getButton('ok');
...
}
Here's the Button API: http://docs.ckeditor.com/#!/api/CKEDITOR.ui.dialog.button, and you can access the dialog API there too (I'm assuming you've already been there!!!)
You might try to add this line in your plugin.js.
var dialog = this.getDialog();
document.getElementById(dialog.getButton('ok').domId).click();
In my custom plugin, i just hide the "ok" button instead of the whole footer.
Below is a part of my plugin.js statements.
{
type : 'fileButton',
id : 'uploadButton',
label : 'Upload file',
'for' : [ 'tab1', 'upload' ],
filebrowser :
{
action : 'QuickUpload',
onSelect : function(fileUrl, data){
var dialog = this.getDialog();
dialog.getContentElement('tab1','urlTxt').setValue(fileUrl);
document.getElementById(dialog.getButton('ok').domId).click();
}
}
}
btw, i'm using CKEditor 4.0 (revision 769d96134b)
I have a basic checkbox click function that only allows the user to click only one checkbox within each fieldset (there are four fieldsets each containing numberous checkboxes:
$(document).ready(function(){
$('input[type=checkbox]').click(function(){
// get the fieldset class
var fieldset = $(this).parents('fieldset').attr('class');
// set the number of checked
var numChecked = $('.'+fieldset+' input:checked').size();
// if more than 1
if(numChecked > 1){
alert('Please select only one option per breakout session.')
$(this).attr('checked',false);
}
});
Then I have a submit function on the form that will confirm that at least one checkbox is selected before posting the form:
$('form[name=mainForm]').submit(function(){
var error = '';
// loop through each fieldset
$('fieldset',this).each(function(){
// set the number of checked for this fieldset
var numChecked = $('input:checked',this).size();
// if none are checked
if(!numChecked){
// set the error var
error = 'At least one of your time sessions has no checkbox selected!';
// add class to show user
$(this).addClass('errorSessions');
}
else{
$(this).removeClass('errorSessions');
}
});
// if any errors, show them and don't allow the form to be submitted
if(error.length){
alert(error);
return false;
}
$("#mainForm").validate();
The form validates perfectly and everything happens flawlessly the first time around. The problem is that if you submit the form, the validation occurs and it gives the error "At least one of your time sessions has no checkbox selected!" - at that point if you proceed to select multiple checkboxes within a given fieldset that was not initially checked, it will ignore the checkbox click function and allow you to select more than one checkbox in a fieldset.
Can someone please help with this?
Okay, I figured it out. The error has to do with the script adding the class 'errorsessions' to the fieldset which changes the unique classname of the fieldset. By adding a unique id to each fieldset and then changing the script to reference .attr('id'); instead of .attr('class'); the issue resolved and the on click alert function resumed after the class was added.
Do you consider using radio buttons as they are there for single selection? This way you don't have to check for multi selection as it isn't possible for select more than one radio button in given group.
I have replaced the traditional select/option form elements with a nifty little popup window when a triggering image is clicked. The page is for accounting purposes and so multiple line items are to be expected. I've written the javascript that will dynamically generate new line item select/option elements. When the page loads, the initial set of choices loads and the user can click on them, get a pop up with some choices, choose one and then the box closes. The move to the next choice and so on and so forth. I've added livequery to my code for those dynamic elements. However... the livequery("click"...) seems to fire no matter where the user clicks on the page. Very frustrating.
I've read on here how great "live()" is in jQuery 1.3, but I am not able to upgrade fully to jquery 1.3 because a custom JS file depends on 1.2, so using live() is out of the question, however I have invoked the livequery() plugin and I really need to understand if I'm using it correctly.
I will post partial code. There's just way too much to post all of it.
Basically, I'm searching for divs starting with "bubble" and then a number afterwards. Then run the event on each them. Only bubble1 is static, 2 and up are dynamic. Am I missing the whole usage of livequery?
>$jb('div[id^="bubble"]').each(function () {
> var divid = $jb('div[id^="bubble"]').filter(":first").attr("id");
>var pref = "bubble";
>var i = divid.substring((pref.length));
>var trigger = $jb('#trigger' + i, this);
>var popup = $jb('#pop'+ i, this).css('opacity', 0);
>var selectedoption = $jb('selectedOption' + i, this);
>var selectedtext = $jb('selectedOptionText' + i, this);
>$jb([trigger.get(0), popup.get(0)]).livequery("click",
> function () {
>//alert(i);
// code removed for brevity (just the contents of the popups)
>});
Live works by using event delegation. A click event is attached to the body, and anytime something is clicked the selector is tested against the target. If it passes the selector test it calls the function (thus simulating a click event).
You probably want something like this:
$('div[id^="bubble"]').livequery("click", function() {
var divId = $(this).attr("id");
var i = divId.substring("bubble".length);
var trigger = $("#trigger" + i, this);
var popup = $("#pop" + i, this).css("opacity", 0);
// alert(i);
}