Hi have a bootstrap lightbox (ekko lightbox) that loads a gallery by data-remote attributes. My problemi is that i have loaded a modal footer by data attributes. In my footer I have added a button identified by id="submit". Then I have associated to this button a click action that ia used for send the file name to a PHP page by an ajax request. My action is loaded like this $(document).on("click", "#submit", function(){/* my ajax call */}); now if the popup modal is shown n times, the ajax request is sent n times. How i fix this issue?
I have te same problem. I can't resolve this, but i did the following code to "fix" this problem:
$(".glyphicon-picture").click(function() {
setTimeout(function (){
var a = [];
for (i = 0; i <= 1000; i++){
if ($("#ekkoLightbox-"+i).attr("id") != undefined) a.push($("#ekkoLightbox-"+i).attr("id"));
}
for (i = 1; i < a.length; i++){
$("#"+a[i]).remove();
}
$(".ekko-lightbox").on("hidden.bs.modal", function () {
$(".modal-backdrop").remove();
});
}, 750);
})
Related
I'm displaying my results on an interactive grid. I'd like to be able to select multiple rows and click an edit button that will open up an “edit” form. I am having a number of problems:
Retrieve the car IDs of the rows selected. (I am having trouble accessing column values, I can access item values)
Pass a collection or array of ids to the edit form.
Save the collection.
Added more code in answer box by accident...……..
I made some progress but I am a little stuck. I followed the oracle blog and it was vey helpful. So on the attribute of the region I added the following code:
function (config) {
var $ = apex.jQuery,
toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
toolbarGroup = toolbarData.toolbarFind("actions3");
toolbarGroup.controls.push(
{
type: "BUTTON",
action: "updateCar",
label: "Edit Selected Cars",
hot: true,
});
config.toolbarData = toolbarData;
config.initActions = function (actions)
{
// Defining the action for activate button
actions.add(
{
name: "updateCar",
label: "Edit Selected Cars",
action: updateCar
});
}
function updateCar(event, focusElement)
{
var i, records, model, record,
view = apex.region("ig_car").widget().interactiveGrid("getCurrentView");
var vid = "";
model = view.model;
records = view.getSelectedRecords();
if (records.length > 0)
{
for (i = 0; i < records.length; i++)
{
record = records[i];
//alert("Under Development " + record[1]);
vid = vid + record[1] + "||";
apex.item("P18_CAR").setValue(vid);// This is not needed just to test
//the output
// call next page
// pass array as sql source or directly on page
}
}
}
return config;
}
This works. A button is displayed and when selected it gets the values from the interactive grid. The part I am stuck is how to call the next page and pass the multiple values (2 columns) to the page to be displayed and in a query to do an update.
Thank you if you can help me accomplish this!
I have created a custom menu on Google Sheets with two options:
function onOpen(e) {
var menu = SpreadsheetApp.getUi().createMenu('Custom')
menu.addItem('Add new store', 'openForm')
menu.addItem('Update Database', 'replacebackenddatabase') }
When a user selects "Update Database" I would like a message box to appear and ask for confirmation with "Do you want to proceed" and Yes/No basis. IF the user selects "Yes", I would like the function 'replacebackenddatabase' to run. If not, I would just like the message box to close and nothing to happen.
How can I do this?
Thank you!
Check out Prompt boxes here.
function replacebackenddatabase() {
var ui = SpreadsheetApp.getUi();
var result = ui.prompt(
'Ask a question...',
ui.ButtonSet.OK_CANCEL);
// Get the response...
var button = result.getSelectedButton();
var text = result.getResponseText();
if (button == ui.Button.OK) {
//If they clicked OK do something with 'text' variable
} else if (button == ui.Button.CANCEL) {
// If they clicked Cancel.
} else if (button == ui.Button.CLOSE) {
// If they closed the prompt
}
}
function onOpen(e) {
var menu = SpreadsheetApp.getUi().createMenu('Custom')
menu.addItem('Add new store', 'openForm')
menu.addItem('Update Database', 'checkResponse')
//.addSeparator()
//.addSubMenu(SpreadsheetApp.getUi().createMenu('Sub Menu')
//.addItem('One sub-menu item', 'subFunction1')
//.addItem('Another sub-menu item', 'subFunction2'))
.addToUi();
// do not set a variable to any chain of methods ending in .addToUi()
// after the Menu is created, the value of menu will be undefined
// the .addToUi() method does not return anything.
}
function checkResponse() {
var ui = SpreadsheetApp.getUi();
var response = ui.alert('Are you sure you want to proceed?', ui.ButtonSet.YES_NO);
if (response == ui.Button.YES) {
replacebackenddatabase();
} else {
Logger.log("The user wasn't sure.");
}
}
I've inherited some work on an AdminLTE sidebar on a Django website. The page in question uses an "extends" block to load AdminLTE's index.html page right off the bat. Links on our treeview sidebar cause the entire page to reload, including the sidebar, so the state of any expanded treeview menus is lost whenever someone clicks a link.
I'm guessing there's some well-known way of making the sidebar keep its treeview menus open, but I've yet to find it. There are some working examples on the AdminLTE site, but I can't figure out how they work.
Can someone point me to the right piece of documentation to help me make my sidebar persistent across page loads?
Treeview css class works in an unordered list so any child links only show up when the parent list is clicked. An example of this is if you have "home" and then "About" "About-Locations". When you click About it is a tree-view class and on the sidebar it will show locations underneath it. When you click on home the locations sidebar link will not be displayed as this is how the css is written for the list.
The code can be found in the "AdminLTE.css" file.
I'm not working on django, I work on a MVC Razor app.
For the same problem, I use this solution :
I store the link clicked on the menu (ajax send to the server and session storage, but you can use cookie or what you want).
The link clicked is inserted in the java script below :
$(" ul.treeview-menu > li > a").on("click", function ()
{
if (this.href == "#")
return;
$.ajax({
type: "POST",
url: '/Outils/SetActiveMenu',
data: { url: this.href },
dataType: "json"
});
})
$(document).ready(function () {
var v = "#Html.Raw(Session["ActiveMenu"] == null?"": Session["ActiveMenu"].ToString())";
if(v == "") return;
var a = $('a[href="' + v + '"]');
openParentMenu(a);
a.css("background-color", "#E3E6E5");
});
function openParentMenu(item)
{
var parent = item.parent().closest("li.treeview");
if (parent.length != 0) {
openParentMenu(parent);
parent[0].children.item("a").click();
}
}
Here is the code for reference.
/* Tree()
* ======
* Converts the sidebar into a multilevel
* tree view menu.
*
* #type Function
* #Usage: $.AdminLTE.tree('.sidebar')
*/
$.AdminLTE.tree = function (menu) {
var _this = this;
var animationSpeed = $.AdminLTE.options.animationSpeed;
$(menu).on('click', 'li a', function (e) {
//Get the clicked link and the next element
var $this = $(this);
var checkElement = $this.next();
//Check if the next element is a menu and is visible
if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible')) && (!$('body').hasClass('sidebar-collapse'))) {
//Close the menu
checkElement.slideUp(animationSpeed, function () {
checkElement.removeClass('menu-open');
//Fix the layout in case the sidebar stretches over the height of the window
//_this.layout.fix();
});
checkElement.parent("li").removeClass("active");
}
//If the menu is not visible
else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
//Get the parent menu
var parent = $this.parents('ul').first();
//Close all open menus within the parent
var ul = parent.find('ul:visible').slideUp(animationSpeed);
//Remove the menu-open class from the parent
ul.removeClass('menu-open');
//Get the parent li
var parent_li = $this.parent("li");
//Open the target menu and add the menu-open class
checkElement.slideDown(animationSpeed, function () {
//Add the class active to the parent li
checkElement.addClass('menu-open');
parent.find('li.active').removeClass('active');
parent_li.addClass('active');
//Fix the layout in case the sidebar stretches over the height of the window
_this.layout.fix();
});
}
//if this isn't a link, prevent the page from being redirected
if (checkElement.is('.treeview-menu')) {
e.preventDefault();
}
});
};
I have used the inbuilt functionality mentioned by #MDT and have created a function:
function toggleCollapsibleList(){
//Get the clicked link and the next element
var $this = $('#parent-list-item-id');
var checkElement = $('#an-id-for-collapsible-li-with-treeview-class');
//Check if the next element is a menu and is visible
if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible')) && (!$('body').hasClass('sidebar-collapse'))) {
//Close the menu
checkElement.slideUp(500, function () {
checkElement.removeClass('menu-open');
//Fix the layout in case the sidebar stretches over the height of the window
//_this.layout.fix();
});
checkElement.parent("li").removeClass("active");
}
//If the menu is not visible
else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
//Get the parent menu
var parent = $this.parents('ul').first();
//Close all open menus within the parent
var ul = parent.find('ul:visible').slideUp(500);
//Remove the menu-open class from the parent
ul.removeClass('menu-open');
//Get the parent li
var parent_li = $this.parent("li");
//Open the target menu and add the menu-open class
checkElement.slideDown(500, function () {
//Add the class active to the parent li
checkElement.addClass('menu-open');
parent.find('li.active').removeClass('active');
parent_li.addClass('active');
//Fix the layout in case the sidebar stretches over the height of the window
});
}}
This worked for me :)
I have been following the tutorial at ionic2 SearchBar to work on the filter functionality.
The question is, I am not able to figure out how to get onCancel and onClear to work.
Steps:
1) Enter some keywords in SearchBar. It calls the onInput event and I get the value from searchItem.target.value unlike in tutorial which just uses searchItem.value
2) Now i try to click on clear "x" or Cancel button and it calls the onClear/onCancel event which is immediately followed by onInput event. And during this call, it does not find the searchItem.target.value and results in undefined due to which it breaks the functionality.
Can anyone provide more in depth details on how this works?
i fixed it in tutorial sample for ionic2 by stopping onClear event propagation
import {Component} from '#angular/core';
#Component({
selector: 'my-search',
template: '<ion-toolbar primary><ion-searchbar (input)="onInput($event)" (ionClear)="onClear($event)"></ion-searchbar></ion-toolbar><ion-content><ion-list><ion-item *ngFor="let item of items">{{ item }}</ion-item></ion-list></ion-content>'
})
export class HomePage {
items = [];
constructor() {
this.initializeItems();
}
initializeItems() {
this.items = [
'Angular 1.x',
'Angular 2',
'ReactJS',
'EmberJS',
'Meteor',
'Typescript',
'Dart',
'CoffeeScript'
];
}
onClear(ev)
{
this.initializeItems();
ev.stopPropagation();
}
onInput(ev) {
// Reset items back to all of the items
this.initializeItems();
// set val to the value of the searchbar
var val = ev.target.value;
// if the value is an empty string don't filter the items
if (val && val.trim() != '') {
this.items = this.items.filter((item) => {
return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
})
}
}
}
In Django admin, there is a drop down list for actions.
What I want to achieve is to get rid of the drop down list, and 'Go' button, and instead, display my actions as buttons.
How can it be done? Thanks in advance.
Create a js file action_buttons.js inside your static directory
(function ($) {
function fix_actions() {
var container = $('div.actions');
if (container.find('option').length < 10) {
container.find('label, button').hide();
var buttons = $('<div></div>')
.prependTo(container)
.css('display', 'inline')
.addClass('class', 'action-buttons');
container.find('option:gt(0)').each(function () {
$('<button>')
.appendTo(buttons)
.attr('name', this.value)
.addClass('button')
.text(this.text)
.click(function () {
container.find('select')
.find(':selected').attr('selected', '').end()
.find('[value=' + this.name + ']').attr('selected', 'selected');
$('#changelist-form button[name="index"]').click();
});
});
}
};
$(function () {
fix_actions();
});
})(django.jQuery);
Copy above code to js file
In you admin.py under admin class add
class Media:
js = ('path/to/action_buttons.js', )