Sometimes the lists connect and you can transfer between them. Other times it doesn't connect. At all times you can sort within each list, but sometimes not between them. I can't figure it out.
$('#questions .survey-page ul').sortable({
items: 'li:not(.placeholder)',
sort: function() {
$(this).removeClass('ui-state-edit'); // While sorting we do not want edit buttons to show.
},
update: function() {
refreshAllDetails(); // Update survey with the new details.
},
connectWith: '#questions .survey-page ul'
});
#question is a tag that multiple .survey-page children are put into. Each .survey-page has a ul with multiple li entries. It is this ul that I am trying to link between .survey-pages.
EDIT: As per request:
/**
* Saves the order of questions, then saves the details of all questions to server.
*/
function refreshAllDetails() {
saveOrder();
saveAllToDatabase();
}
/**
* Saves the details of all questions to server.
*/
function saveAllToDatabase() {
// Go through each page.
$("#questions").find(".survey-page").each(function() {
var surveypage = this;
// Save metadata for current page.
// Go through each question on page.
$(this).find(".questiontypestuffp").each(function() {
// Get the answers for a particular question, including meta-data for question.
var result = callWidget($(this), "getEditedAnswers");
// Get the order of the question listed on page.
result.questionorder = $(this).attr('ordervalue');
result.pageno = $(surveypage).attr("ordervalue");
// Save the question's order to its associated widget.
callWidget($(this), "setData", result);
// Update the question in database.
$.ajax({dataType: "json", url: "index.php?option=com_survey&loadorsave=update&view=surveydata&layout=edit&id=" + $("#itemid").val() + "&tmpl=component&format=json&questionvalues=" + encodeURI(JSON.stringify(result)), success: function(callback) {
}});
// Turn off edit mode.
setEditModeOff();
});
});
}
/**
* Refreshes order values with regard to their position on page. This rewrites the order values as they appear.
*/
function saveOrder() {
var pageorder = 0;
// GO through each page.
$("#questions").find(".survey-page").each(function() {
var questionorder = 0;
// Rewrite page order.
var currentPage = ++pageorder;
$(this).attr('ordervalue', currentPage);
// Rewrite each question's order on page.
$(this).find(".questiontypestuffp").each(function() {
$(this).attr('ordervalue', ++questionorder);
});
});
}
I've solved my own problem here. The class I was removing was actually required to recognize drag and drop operations, hence 'ui-state-edit'. By dynamically updating this class to/from the DOM element, this was affecting whether the list item was able to be transferred between lists. As a brief - drag and drop was rejecting the list item since it didn't have a valid class name.
Related
I am new to the angularJS. And recently I have been working on a angularJS project. I use the ng-template and ng-repeat to make a multiple product category tree. And I add a button to control whether the sub-category expanded or not.Here is the problem,How I can keep the category expaneded at where user left off when the user click into other pages and click back to the category page?
You could save the current tree state into the HTML5 Localstorage.
Add a unique id to each category and save them into the localstorage.
function saveCurrentState() {
const openedCategories = /* find the opened categories */;
// we injected $window in our controller.
$window.localStorage.setItem('openedCategories', openedCategories.join(','));
}
Then, when you load the page
/* to be run on the page load.*/
function retrieveOpenedCategories() {
// all the current categories, open or not.
const categories = /* get all the categories */;
// we retrive our category from the localStorage. With some code to handle if it's empty / null.
const openedCategories = ($window.localStorage.getItem('openedCategories') || "").split(',');
// check if we have categories that were opened. length of 0 will evaluate to false-y.
if(openedCategories.length) {
// we use map because we want to change every value from the original array.
categories = categories.map((category) => {
if(openedCategories.includes(category.id)) {
category.open = true;
}
return category;
});
}
}
/* we show our categories, somehow.*/
I have a Master-Detail ag-grid. One column has checkboxes, (checkboxSelection: true). The details grid have a custom status panel with a button. When the user clicks the button in any specific Detail grid, I don't know how to get the SelectedRows from just that one specific detail grid.
The problem is they might leave multiple details displayed/open, and then looping over each Detail Grid will include results from all open grids. I'm trying to isolate to just the grid where the user clicked the button.
I tried looping through all displayed/open detail grids to get the Detail grid ID. But I don't see any info in this that shows me which one they clicked the button in.
I tried in the button component to see if, in the params, there is anything referencing the detailgrid ID that the button is in, but I did not see anything there either.
This is the button component:
function ClickableStatusBarComponent() {}
ClickableStatusBarComponent.prototype.init = function(params)
{
this.params = params;
this.eGui = document.createElement('div');
this.eGui.className = 'ag-name-value';
this.eButton = document.createElement('button');
this.buttonListener = this.onButtonClicked.bind(this);
this.eButton.addEventListener("click", this.buttonListener);
this.eButton.innerHTML = 'Cancel Selected Records <em class="fas fa-check" aria-hidden="true"></em>';
console.log(this.params);
this.eGui.appendChild(this.eButton);
};
ClickableStatusBarComponent.prototype.getGui = function()
{
return this.eGui;
};
ClickableStatusBarComponent.prototype.destroy = function()
{
this.eButton.removeEventListener("click", this.buttonListener);
};
ClickableStatusBarComponent.prototype.onButtonClicked = function()
{
getSelectedRows();
};
Here is the code to loop through and find all open detail grids:
function getSelectedRows()
{
this.gridOptions.api.forEachDetailGridInfo(function(detailGridApi) {
console.log(detailGridApi.id);
});
I was able to work this out, so thought I'd post my answer in case others have the same issue. I'm not sure I took the best approach, but it's seemingly working as I need.
First, I also tried using a custom detail cell renderer, as per the documentation, but ultimately had the same issue. I was able to retrieve the DetailGridID in the detail onGridReady function--but couldn't figure out how to use that variable elsewhere.
So I went back to the code posted above, and when the button was clicked, I do a jquery .closest to find the nearest div with a row-id attribute (which represents the the DetailgridID), then I use that specific ID to get the rows selected in just that detail grid.
Updated button click code:
ClickableStatusBarComponent.prototype.onButtonClicked = function()
{
getSelectedRows(this);
};
Updated getSelectedRow function:
function getSelectedRows(clickedBtn)
{
var detailGridID = $(clickedBtn.eButton).closest('div[row-id]').attr('row-id');
var detailGridInfo = gridOptions.api.getDetailGridInfo(detailGridID);
const selectedNodes = detailGridInfo.api.getSelectedNodes()
const selectedData = selectedNodes.map( function(node) { return node.data })
const selectedDataStringPresentation = selectedData.map( function(node) {return node.UniqueID}).join(', ')
console.log(selectedDataStringPresentation);
}
Basically, I have an appointment form which is broken down into panels.
Step 1 - if a user clicks london (#Store1) then hide Sunday and Monday from the calendar in panel 5.
Basically, I want to store this click so that when the user gets to the calendar panel, it will know not to show Sunday and Monday
$('#store1').click(function () {
var $store1 = $(this).data('clicked', true);
console.log("store 1 clicked");
$('.Sunday').hide();
$('.Monday').hide();
});
after I have captured this in a var I then want to run it when the calendar displays.
function ReloadPanel(panel) {
return new Promise(function (resolve, reject, Store1) {
console.log(panel);
console.log("finalpanel");
panel.nextAll('.panel').find('.panel-updater').empty();
panel.nextAll('.panel').find('.panel-title').addClass('collapsed');
panel.nextAll('.panel').find('.panel-collapse').removeClass('in');
var panelUpdater = $('.panel-updater:eq(0)', panel),
panelUrl = panelUpdater.data('url');
if (panelUpdater.length) {
var formData = panelUpdater.parents("form").serializeObject();
panelUpdater.addClass('panel-updater--loading');
panelUpdater.load(panelUrl, formData, function (response, status) {
panelUpdater.removeClass('panel-updater--loading');
if (status == "error") {
reject("Panel reload failed");
} else {
resolve("Panel reloaded");
}
});
} else {
resolve("no reloader");
}
});
}
I'm not sure if this is even written right, so any help or suggestions would be great
Thanks in advance
Don't think of it as "storing a click". Instead, consider your clickable elements as having some sort of data values and you store the selected value. From this value you can derive changes to the UI.
For example, consider some clickable elements with values:
<button type="button" class="store-button" data-store-id="1">London</button>
<button type="button" class="store-button" data-store-id="2">Paris</button>
<button type="button" class="store-button" data-store-id="3">Madrid</button>
You have multiple "store" buttons. Rather than bind a click event to each individually and customize the UI for each click event, create a single generic one which captures the clicked value. Something like:
let selectedStore = -1;
$('.store-button').on('click', function () {
selectedStore = $(this).data('store-id');
});
Now anywhere that you can access the selectedStore variable can know the currently selected store. Presumably you have some data structure which can then be used to determine what "days" to show/hide? For example, suppose you have a list of "stores" each with valid "days":
let stores = [
{ id: 1, name: 'London', days: [2,3,4,5,6] },
// etc.
];
And your "days" buttons have their corresponding day ID values:
<button type="button" class="day-button" data-day-id="1">Sunday</button>
<button type="button" class="day-button" data-day-id="2">Monday</button>
<!--- etc. --->
You can now use the data you have to derive which buttons to show/hide. Perhaps something like this:
$('.day-button').hide();
for (let i in stores) {
if (stores[i].id === selectedStore) {
for (let j in stores[i].days) {
$('.day-button[data-day-id="' + stores[i].days[j] + '"]').show();
}
break;
}
}
There are a variety of ways to do it, much of which may depend on the overall structure and flow of your UX. If you need to persist the data across multiple pages (your use of the word "panels" implies more of a single-page setup, but that may not necessarily be the case) then you can also use local storage to persist things like selectedStore between page contexts.
But ultimately it just comes down to structuring your data, associating your UI elements with that data, and performing logic based on that data to manipulate those UI elements. Basically, instead of manipulating UI elements based only on UI interactions, you should update your data (even if it's just in-memory variables) based on UI interactions and then update your UI based on your data.
you can use the local storage for that and then you can get your value from anywhere.
Set your value
localStorage.setItem("store1", JSON.stringify(true))
Get you value then you can use it anywhere:
JSON.parse(localStorage.getItem("store1"))
Example:
$('#store1').click(function() {
var $store1 = $(this).data('clicked', true);
localStorage.setItem("store1", JSON.stringify(true))
console.log("store 1 clicked");
$('.Sunday').hide();
$('.Monday').hide();
});
I am trying to build an SAPUI5 application using TreeTable and I'm facing some problems to use its methods.
In my app, I have a button which triggers this method.
onChangeViewContext: function(oEvent) {
.........
.........
var aViewContext = oContext.oModel.getProperty(sPath + "/ViewContext");
var aDataModel = oContext.oModel.getProperty("/ApplicationCollection/" + sAppId + "/DataModel");
var oStructure = this._createParentChildStructure(aDataModel);
var oTreeModel = this.getView().getModel("treeModel");
oTreeModel.setData(oStructure);
this._oViewDetailLine = oSource.getParent().getParent().getParent();
this._oViewDetailLine.setVisible(false);
this.byId("idSelectElementsPanel").setVisible(true);
this._setSelectedItems(aViewContext, oTree);
}
What I'm trying to do here is only bind the rows with my treeModel, get tree table object and send it to my _setSelectedItems method which below.
_setSelectedItems: function(aViewContext, oTree) {
oTree.clearSelection();
var sElementName;
var aSelectedIndices = [];
var aElements = [];
var aRows = oTree.getRows();
aRows.forEach(function(row) {
if (row._oNodeState !== undefined) {
aElements.push(row.getCells()[0].getText());
}
});
I need to get rows array here because I will use it for setting selected items of tree table. The problem is when "onChangeViewContext" triggered, oTable.getRows() returns an empty array. But when I click cancel button (which just hides my tree table, nothing more) and then trigger "onChangeViewContext" function again, I can get the rows array completely.
Even on the first call when I try to get table's model, I can get the treeModel and its data correctly.
I've tried to refresh bindings, aggregations etc. But no luck.
By the way, I'm using row binding in my xml view like this :
<t:TreeTable id="idSelectElementsTree" rows="{path: 'treeModel>/'}" selectionMode="MultiToggle" enableSelectAll="false"
rowSelectionChange="onSelectElement">
I'm really drowning here so any any help would be appreciated.
Edit : rest of the setSelectedIndexes function :
aViewContext.forEach(function(name) {
sElementName = name;
if (aElements.indexOf(sElementName) !== -1) {
aSelectedIndices.push(aElements.indexOf(sElementName));
}
});
aSelectedIndices.forEach(function(idx) {
if (oTree.getRows()[idx]._bHasChildren) {
oTree.expand(idx);
}
oTree.addSelectionInterval(idx, idx);
});
What could help here is to add an event rowsUpdated="onRowsUpdated" to the table in the XML view. This event is triggered after the table has been loaded and will hence provide you with the data via;
this.getView().byId("sTableId").getRows();
The difference to your approach is that the event would not be triggered by the press of a button but automatically, as the table is rendered. You can then also use this function to trigger another one as per your use case.
I'm using the Featured Posts Plugin created by Bandit Design (http://blog.bandit.co.nz/post/87511743/tumblr-featured-posts-javascript-plugin) and I'd like to include the images from text posts in the list of featured posts (which will actually just be a single post, the image with the post title below it, if you were wondering). The problem is that the Tumblr API doesn't include a parameter for photos within text posts (you can call the entire body of the post, but that's not ideal here). The depth of my Javascript knowledge could be described as "enough to somehow get things to work, but more likely just break things", so the solution is probably fairly obvious here and I'm just missing it.
The code I have right now:
/*
TUMBLR FEATURED POSTS SCRIPT
Automatically gets all posts tagged with "featured" and lists them
REQUIRES JQUERY!
--------------------------------------
Created by james <at> bandit.co.nz
http://blog.bandit.co.nz
Some code borrowed from Jacob DeHart's AJAX Search:
http://blog.bandit.co.nz/post/80415548/tumblr-ajax-inline-search
*/
Featured = {
'apiNum' : 50, // how many posts to read
'listId' : '_featured', // the id of the ul to write to
'tagName' : '_featured', // the name of the tag we're searching for
'linkAppend' : '', // html to append to the end of each linked post
'postDB' : [],
'listPos' : 0,
'doList' : function (where) {
var li; var ul = $('#'+where);
var titles = {"link":"link-text", "photo":"photo-caption", "quote":"quote-text", "regular":"regular-title", "video":"video-caption"}
// cycle through post database
pcount = Featured.postDB.length;
for(i=Featured.listPos;i<pcount;i++) {
p = Featured.postDB[i];
if(p[titles[p.type]] != '') titlestr = p[titles[p.type]].replace(/<\/?[^>]+>/gi, '');
else titlestr = p['url'];
li = document.createElement('li');
$(li).html('<a class="'+p.type+'" href="'+p["url-with-slug"]+'">'+p["regular-body"]+titlestr+Featured.linkAppend+'</a>');
ul.append(li);
Featured.listPos = pcount;
}
},
'getData' : function() {
$.get('/api/read/json?num='+Featured.apiNum+'&tagged='+Featured.tagName,
function(data) {
eval(data);
for(i=0;i<tumblr_api_read.posts.length;i++) {
Featured.postDB.push(tumblr_api_read.posts[i]);
Featured.doList(Featured.listId);
}
}
);
}
};
$(document).ready(function(){
Featured.getData();
});
Any help would be much appreciated.
You can change the line where you create the li to
$(li).append($(p['regular-body']).find('img')[0])
.append('<a class="'+p.type+'" href="'+p["url-with-slug"]+'">'+titlestr+Featured.linkAppend+'</a>');
This will find the first image the post's body, and add it right before the title in the list.