We Keep Coding

Vue JS - Data not updating reactively

I have a pagination indicator that shows the number of results on a given page, for example; page 1 would show '1-5' and page 2 shows '6-10 out of 50 results' etc.
I have set the logic in place and it appears to be working, however for the results to update on any other page except for page 1, I would have to refresh the page every time. Therefore '1-5' always appears. I'm still learning vue and I'm sure it must be some silly mistake here.
What can I do to have the results update when I change page?
Pagination.vue
<!-- Results counter -->
<PaginationResultIndicator :total-items="paginationData.totalItems"
:first-item="firstItem"
:last-item="lastItem"/>
// Script
data: () => ({
currentPage: -1,
limit: undefined,
firstItem: undefined,
lastItem: undefined
}),
created() {
this.currentPage = this.paginationData.current;
this.limit = this.paginationData.totalItems / this.paginationData.totalPages
this.lastItem = this.limit * this.paginationData.current;
this.firstItem = this.lastItem - this.limit + 1;
},

Your should replace data:() =>{... to data(){...}
https://v2.vuejs.org/v2/style-guide/index.html#Component-data-essential

Sometimes the list connects other times it doesn't

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.

VueJS - v-if and v-show don't work properly

I have this structure inside Vue DIV:
<div class="row">
<div class="well chart-container">
<div id="chart" v-if="chartShown"></div>
<h1 v-if="textShown">{{staticPropertyValue}}</h1>
</div>
</div>
In my application I'd like to be able to display chart div OR h1 tag. Here's a part of my javaScript:
app.textShown = false;
app.chartShown = true;
if (data.length == 0) {
MG.data_graphic({
title: "Missing Data",
description: "",
error: 'No data',
chart_type: 'missing-data',
missing_text: 'There is no data',
target: '#chart',
full_width: true,
height: 600
});
return;
};
if (data.length == 1) {
app.staticPropertyValue = data[0].value;
app.chartShown = false;
app.textShown = true;
return;
}
console.log('DRAWING GRAPH');
console.log(document.getElementById('chart'));
MG.data_graphic({
title: "Fetched data",
description: "",
data: data,
full_width: true,
height: 600,
target: '#chart',
x_accessor: 'time',
y_accessor: 'value'
});
So, depending on data.length property, the chart is shown or h1 tag is shown. The problem appears, when I first time call above code and display h1 tag (because data.length == 1) and then next time I call it with date.length > 1 (chart should appear). I get error:
The specified target element "#chart" could not be found in the page.
The chart will not be rendered.
It is from the library that I'm using for drawing charts - metricsgraphics.js.
So I console logged the result of
document.getElementById('chart')
and it was null. So it means that although i switch chartShown to true, it's not done fast enough. How can I fix this?
I also tried using v-show instead of v-if - didn't work well - I had some errors about the width of some elements being NaN.

You should run this piece of code in the mounted() callback of your component.
To me, it looks like you're running it when the script has finished loading, which is not necessarily when the DOM is fully built and definitely not when Vue has finished rendering its components.
Working with v-if while using an external library is not a good idea anyway, you're much better off initializing your view in the mounted() callback and then watching your chartShown variable like so:
{
...,
watch: {
chartShown(nv) {
if (nv) {
// setup chart
} else {
// remove chart
}
}
},
...
}

How to show Total number of pages in YUI Paginator?

I am using YUI Paginator API for pagination and I need to show Total number of pages on screen. I saw that there is a function getTotalPages() in API but I am unsure about how to use it, there isn't enough documentation. Also after looking at some other documentation I tried using {totalPages} but didn't work.
Can somebody help me out in this issue? Thanks in advance!!
Below is the code snippet I am using. Please refer to template object from config:
config = {
rowsPerPage: 100,
template :
'<p class="klass">' +
'<label>Total pages: {totalPages}</label>'+
'<label>Page size: {RowsPerPageDropdown}</label>'+
'</p>',
rowsPerPageDropdownClass : "yui-pg-rpp-options",
rowsPerPageOptions : [
{ value : 100 , text : "100" },
{ value : 250 , text : "250" },
{ value : 500 , text : "500" },
{ value : 1000 , text : "1000" },
{ value : tstMap[tabName].length , text : "All" }
],
};
var myPaginator = new YAHOO.widget.Paginator(config);

The Paginator utility allows you to display an item or a group of items depending on the number of items you wish to display at one time.
Paginator's primary functionality is contained in paginator-core and is mixed into paginator to allow paginator to have extra functionality added to it while leaving the core functionality untouched. This allows paginator-core to remain available for use later on or used in isolation if it is the only piece you need.
Due to the vast number of interfaces a paginator could possibly consist of, Paginator does not contain any ready to use UIs. However, Paginator is ready to be used in any Based-based, module such as a Widget, by extending your desired class and mixing in Paginator. This is displayed in the following example:
YUI().use('paginator-url', 'widget', function (Y){
var MyPaginator = Y.Base.create('my-paginator', Y.Widget, [Y.Paginator], {
renderUI: function () {
var numbers = '',
i, numberOfPages = this.get('totalPages');
for (i = 1; i <= numberOfPages; i++) {
// use paginator-url's formatUrl method
numbers += '' + i + '';
}
this.get('boundingBox').append(numbers);
},
bindUI: function () {
this.get('boundingBox').delegate('click', function (e) {
// let's not go to the page, just update internally
e.preventDefault();
this.set('page', parseInt(e.currentTarget.getContent(), 10));
}, 'a', this);
this.after('pageChange', function (e) {
// mark the link selected when it's the page being displayed
var bb = this.get('boundingBox'),
activeClass = 'selected';
bb.all('a').removeClass(activeClass).item(e.newVal).addClass(activeClass);
});
}
});
var myPg = new MyPaginator({
totalItems: 100,
pageUrl: '?pg={page}'
});
myPg.render();
});

dojo enhancedGrid selection

I have an enhancedGrid with 9000+ elements, initialized as follows:
var grid_invoices = new dojox.grid.EnhancedGrid({
id: 'grid_invoices',
keepSelection: true,
rowSelector: false,
selectable: true,
escapeHTMLInData: false,
rowsPerPage: 250,
keepRows: 1000,
delayScroll: true,
noDataMessage: "Aucun résultat",
queryOptions: {ignoreCase: true},
plugins: {
indirectSelection: {headerSelector:true, styles:"text-align: center;padding:5px;"},
search: false
}
},
document.createElement('div'));
I need to do a csv export of selected elements of the grid. If I select <= 1000 elements no problem, here the actual code
var downloadPdfIframeName = "downloadPdfIframe",
iframe = dojo.io.iframe.create(downloadPdfIframeName),
count = grid_invoices.selection.getSelectedCount();
if (count > 0 && count < 1000) {
var lst = getGridSelection('grid_invoices', 'id'),
ids = lst.join(',');
dojo.io.iframe.setSrc(iframe, "/invoices/exportcsv/ids/" + ids, true);
} else if (count == 0) {
dojo.io.iframe.setSrc(iframe, "/invoices/exportcsv?" + dojo.objectToQuery(getSearchFilterInvoice()), true);
}
now, I'd like to be able to export any elements I want (>1000 possibly) but I don't know where to start.
The grid is a lazy loaded grid so there's no possibility of retrieving all ids with one simple query, and even if that would be possible, I cannot just chain the ids to the GET HTTP QUERY (query limit)
I thought of doing something like "see if everything is selected and build a custom php filter" but if the user select, let's say, 5000 records, I don't have a clue of what to do.
Can someone point me to the good direction ?