I'm having some difficulty getting some data to be shown the first time a page is loaded on an ionic app.
What I want to happen is for a user to click a link of the menu, the page to load and data to instantly be displayed. But whats happening is nothing is shown the first time the page is loaded, but if you re-click the link from menu data will be displayed.
My code is -
export class ViewSessions {
lastScans = [];
ionViewWillEnter(){
this.barcodeTracker.lastScans = this.barcodeTracker.getScans();
}
constructor(private barcodeScanner: BarcodeScanner, private
nativeStorage: NativeStorage, private barcodeTracker: BarcodeTracker,
private storage: Storage) {
this.lastScans = this.barcodeTracker.getScans();
}
}
I think what is happening is the array is only being created the first time the page is loaded. Then populated the second time its loaded. So I tried to create the array on the home-page which is loaded with the app, then adding data to this array when this page is loaded and showing the array from home-page in the html, but this was unsuccessful.
Edit -
This is the getScans function that is being called -
public getScans(){
console.log(this.data);
return this.data;
}
Related
So here is the explanation of the problem I am facing. It might look very similar other already asked questions, but none of them answered my problem.
I want to open an angular template reference in a new browser window (with all the styles) and use that window to print the contents using system print dialog.
By template reference I mean a whole component or may be just a fraction of template of given component.
Please note that I do not want to do it by below methods:
Opening a new route in a new browser window. (Why? this will cause all other things like common toolbar or help open up with the component. Also a new route will be required which is undesired.)
Opening the content in a closable modal.
Ok, This is how I did it using ComponentFactoryResolver and Injector. Just inject these two dependencies in your component which wants to open other component (ReportComponent in this case) in new browser window.
The constructor looks something like this in snippet below.
constructor(
private resolver: ComponentFactoryResolver,
private injector: Injector
) {}
.
.
.
This method opens up the component in new browser window.
public openPrintableReport(): void {
// resolve and instantiate the component which you want to open in new window.
const componentFactory = this.resolver.resolveComponentFactory(ReportComponent);
let component = componentFactory.create(this.injector);
component.changeDetectorRef.detectChanges();
// define external window
this.externalWindow = window.open('', '', 'width=1000,height=1000,left=150,top=200');
// copy all the styles to external window.
document.querySelectorAll('style').forEach(htmlElement => {
this.externalWindow.document.head.appendChild(htmlElement.cloneNode(true));
});
this.externalWindow.document.title = 'Printer Friendly Report';
// attach the component to external window
this.externalWindow.document.body.appendChild(component.location.nativeElement);
}
I am trying to load multiple models(aggregation) on to the forge viewer(v.6.x) initially while loading, but I want to show only one model and other models as hidden by default(can be with ghost view). Later when user clicks on eye icon from model browser, then that model should be visible/hidden.
I tried calling viewer.hideModel(modelId) after loading the model. But even though the model is showing in model browser, when I click on it, it says error model is not loaded.
var showModel = false;
this.viewer.loadModel(url, {globalOffset: { x:0, y:0, z:0 }, modelNameOverride: modelName}, () =>
{
this.isModelLoaded = true;
this.viewer.caller = this;
this.addEventListenersToViewer();
if(!showModel){
this.viewer.hideModel(modelId); // This is to hide the model by default after loading.
}
},
errorMsg => {
this.isModelLoaded = false;
this.viewer.container.style.opacity = 0;
this.modelLoadError(this.fetchTranslationByKey('getModelError'));
}
);
Expected behavior is to allow user to select from model browser, which models to show/hide on the viewer among all the models loaded initially(linked models should be hidden by default).
Current result I am getting is the linked models are showing in the model browser but when I click on that it says - Error Model is not loaded
A few issues here:
When using arrow function the context that this points to is different so be careful with that
how did you obtain the modelId? Instead of using arbitrary counter better to iterate the model array via Viewer.impl.modelQueue()
I am unable to replicate the model not loaded error with model browser. Can you provide more details or a live sample (jsfiddle/jsbin)?
I have a div containing a map from Google in a Laravel view, this view receives a JSON array containing coordinates from a MySQL database to insert markers on the map, and I want the div to refresh automatically after a certain amount of time in case a new record is entered on the database.
index function from the controller that sends the array when the view first loads:
public function index()
{
if (Auth::guest())
{
return redirect('home');
}
else{
$user = Auth::user();
$data = Reading::where('reg_id', $user->regNumber)->get();
return view('readings.index', ['data'=>$data]);
}
}
After the page loads, another function is prepared to start refreshing the div:
$(document).ready(function(){
setInterval(function(){
$('#map').load('refresh',function () {
initMap(); //function that generates map with markers
});
},20000);
});
This calls another function from the controller:
public static function refresh()
{
$user = Auth::user();
$data = Reading::where('reg_id', $user->regNumber)->get();
return response()->json(['data'=>$data]);
}
It goes ok when the page loads, but when the div refreshes for the first time I get a warning from the browser's inspector: "[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/." and I see the array get sent multiple times.
Obviously my idea is problematic, so I'm trying to find a way to do it properly.
I think best way it will be over ajax request.
Ajax request can return html so you will call ajax take response and put it inside "old" div.
I have an mx:application using the Flex 4.6.0 SDK and I’m having some issues with the FlexPrintJob in Chrome only. The FlexPrintJob worked fine in chrome, up until maybe a couple weeks ago (I made no changes to the code) and now I’ve started experiencing “Shockwave Crashes”.
While printing I’m using:
first title page template
middle section template to handle a DataGrid. This is using the PrintDataGrid and loops through the dataProvider to see if the data will fit on one page, if not it will create another.
Terms and conditions last page template
Problem: I’ve narrowed it down to this, I’m getting the Shockwave Crash error in chrome when the data (for the middle section) exceeds one page and tries to create another. This just started happening, I’m guessing with a chrome update…Sorry if I left something out and my description is lacking detail. I can add more clarification if needed.
Any ideas what’s going on?
Thanks!
--moe
public function doPrint(): void {
// Create a FlexPrintJob instance.
var printJob: FlexPrintJob = new FlexPrintJob();
// Start the print job.
if (printJob.start()) {
// Create a FormPrintView control as a child of the application.
var thePrintView: FormPrintView = new FormPrintView();
addElement(thePrintView);
// Set the print view properties.
thePrintView.width = printJob.pageWidth;
thePrintView.height = printJob.pageHeight;
thePrintView.horizontalAlign = "center";
// Set the data provider of the FormPrintView component's DataGrid to be the data provider of the displayed DataGrid.
thePrintView.summaryGrid.dataProvider = summaryGrid.dataProvider;
// Create a single-page image.
thePrintView.showPage("single");
// If the print image's DataGrid can hold all the data provider's rows, add the page to the print job.
if (!thePrintView.summaryGrid.validNextPage) {
printJob.printAsBitmap = false;
printJob.addObject(UIComponent(mainPagePrint), FlexPrintJobScaleType.MATCH_WIDTH);
printJob.addObject(thePrintView);
printJob.addObject(UIComponent(terms), FlexPrintJobScaleType.MATCH_WIDTH);
}
// Otherwise, the job requires multiple pages.
else {
// Create the first page and add it to the print job.
thePrintView.showPage("first");
printJob.printAsBitmap = false;
printJob.addObject(UIComponent(mainPagePrint), FlexPrintJobScaleType.MATCH_WIDTH);
printJob.addObject(thePrintView);
thePrintView.pageNumber++;
// Loop through the following code until all pages are queued.
while (true) {
// Move the next page of data to the top of the PrintDataGrid.
thePrintView.summaryGrid.nextPage();
printJob.printAsBitmap = false;
// Try creating a last page.
thePrintView.showPage("last");
// If the page holds the remaining data, or if the last page was completely filled by the last grid data, queue it for printing.
// Test if there is data for another PrintDataGrid page.
if (!thePrintView.summaryGrid.validNextPage) {
// This is the last page; queue it and exit the print loop.
printJob.addObject(thePrintView);
printJob.addObject(UIComponent(terms), FlexPrintJobScaleType.MATCH_WIDTH);
break;
} else // This is not the last page. Queue a middle page.
{
thePrintView.showPage("middle");
printJob.addObject(thePrintView);
thePrintView.pageNumber++;
}
}
}
// All pages are queued; remove the FormPrintView control to free memory.
removeElement(thePrintView);
}
// Send the job to the printer.
printJob.send();
}
I ended up taking things apart one-by-one and figured out what it was - the issue was is the FormPrintView. I had some unneeded properties in my PrintDataGrid that I think were originally copied from my main datagrid in my application.
I'm not sure why it was working before and just starting acting crashing now, but either way I shouldn't have had some of those properties there in the first place.
thanks!
--moe
<mx:PrintDataGrid id="summaryGrid" width="100%" height="100%" sizeToPage="true"
alternatingItemColors="[#f7f7f7, #ffffff]" alpha="0.8"
borderStyle="solid" borderThickness="1" color="#646262"
creationComplete="summaryGrid_creationCompleteHandler(event)" fontSize="9"
headerColors="[#ffffff, #e8e8e8]" headerHeight="25" paddingTop="5"
rowHeight="55" textAlign="center" wordWrap="true" paddingRight="-1" >
I'm using a kendo UI tree with a remote data source from a JSON file.
I have a button on the tree page which gets the current data of the tree,sends it through a POST to a server and the server saves the current data to the JSON file so as the next time I reload the page,the changes I made will be kept.That's what I want to happen.
So I know the current data of the tree is in:
$("#treeview").data("kendoTreeView").dataSource.data()
Which means the data changes real time in there for example when someone drag and drops a node of the tree.
My problem starts when this data doesn't seem to change when I drag and drop nodes inside the tree,and only changes when I drag and drop a node on the root level of the tree and even then it doesn't do it correcly as the node should be moved in there as well but instead the node gets copied,leaving the past node in the tree as well...
For Example I have this tree:
If I make a drag and drop change like this:
And I send the data,save it and reload the change isn't made at all!
PS:Even when I view the current data after the change before sending it,I see that there is no change on the data at all even though I did a change visualy with a drag and drop.So it doesn't have to do with the sending,saving and the server.
On the other hand,if I make a change like this:
I can see in the current data that the moved node is added in the end of the data indeed but it is not deleted from it's initial position within the data!So if i send the current data to the server,save it and then refresh I get the result:
The code for viewing and sending the data is:
function sendData() {
var req = createRequest();
var putUrl = "rest/hello/treeData";
req.open("post", putUrl, true);
req.setRequestHeader("Content-type","application/json");
var dsdata = $("#treeview").data("kendoTreeView").dataSource.data();
alert(JSON.stringify(dsdata));
req.send(JSON.stringify(dsdata));
req.onreadystatechange = function() {
if (req.readyState != 4) {
return;
}
if (req.status != 200) {
alert("Error: " + req.status);
return;
}
alert("Sent Data Status: " + req.responseText);
}
}
Is this a Bug or am I doing something wrong?Has anyone been able to see the current data changing correctly on every drag and drop?
First and most important you have to use the latest version of KendoUI (Kendo UI Beta v2012.3.1024) still in beta but is where they have solved many problems.
Then, when you create the kendoTreeView you have to say something like:
tree = $("#treeview").kendoTreeView({
dataSource :kendo.observableHierarchy(data),
dragAndDrop:true
}).data("kendoTreeView");
Here the important is not using directly data array but wrapping it with kendo.observableHierarchy.
Then you will have the data updated with the result of drag & drops.
For me in addition to OnaBai answer I had to use the sync function on the save method. I am using Type Script.
this.treeData = new kendo.data.HierarchicalDataSource({
data: kendo.observableHierarchy([]),//Thanks OnaBai
schema: {
model: {
id: "MenuItemId",
children: "MenuItemChildren",
hasChildren: (e) => {
//this removes arrow next to items that do not have children.
return e.MenuItemChildren && e.MenuItemChildren.length > 0;
}
}
}
});
public save() {
this.treeData.sync().done(() => {
console.log("sync data");
var myType = this.treeData.view();
this.$http.post("/api/TreeViewPicker", myType)
.then((response) => {
});
});
}