I'm working with vue.js and I'm wondering if I can save the amount as input via buttons, so that when a user comes back to the pen, they can see what the current number recording is.
Essentially I just want the virtual DOM to stay updated with the current number, but I don't know how to go about this.
My code:
var vm = new Vue ({
el: "#app",
data: {
amount: 0
},
methods: {
addOne: function(){
this.amount++;
},
subtractOne: function(){
this.amount--;
}
}
});
<div id="app">
<h2>Amount of Red Cars I Saw Today</h2>
<p id="times">{{amount}}</p>
<button id="plus-one" #click.prevent="addOne">Add One</button>
<button id="minus-one" #click.prevent="subtractOne">Subtract One</button>
</div>
<script src="https://unpkg.com/vue#2.5.13/dist/vue.js"></script>
If you want feel free to fork the pen here: https://codepen.io/anicaise/pen/vRRaoB
To do what you are attempting both you and others would have to be connecting to the same data somewhere. So unfortunately, without contacting and some outside source to store your updates you will be unable to do what you are trying above.
The two main solution for your problem would be saving to a database or saving to a file. Without a backend the easiest solution would be to use one of the many API based database services where you can pull and push data to one repository so everyone visiting your site will get and set the same data.
My favorite is firebase because they have a free option so you can play around with it.
And here is an article on how to get it set up with Vue.js.
Related
I have an application linked with my autodesk account and I also have a panel dashboard that load the data from the current model, the issue is that this panel isnt update when I choose another model into the hub.
Im trying to find the Autodesk.viewing.EVENT that can record this step but I couldnt. All of them have been tryed and whitout success...
Autodesk.Viewing.GEOMETRY_LOADED_EVENT,
Autodesk.Viewing.OBJECT_TREE_CREATED_EVENT,
Autodesk.Viewing.MODEL_ADDED_EVENT...
I have got this working. Don't worry about events, it's working fine.
Here are my changes and additions:
PanelBarChart.js(same goes in piechart as well)
loadWithCustomProperty(property) {
this.propertyToUse = property;
this.chart.destroy();
this.drawChart();
}
After creating list in dashboard.js, add the change event:
$('#'+_this._selectcontainer).change(function() {
console.log($('#'+_this._selectcontainer+' option:selected').text())
_this._panel.loadWithCustomProperty($('#'+_this._selectcontainer+' option:selected').text())
});
Here _this._selectcontainer is UUID, because you're adding multiple chards, so id needs to be unique.
I have a PowerBI report having 5 different pages. The code below helps me to set a desired page as the default page when the web page I embedded the PowerBI report comes up to my screen.
var report = powerbi.embed(reportContainer, config);
report.on('loaded', () => {
report.getPages().then(pages => pages[3].setActive());
});
Two questions I have at this point that I couldn't find answers:
1- How can I set a page as default by using its exact name instead of the array number? I need to do something like: pages => pages['Overall Summary'].setActive();
2- Is there a way to receive the pages on C#, or pass the ones I am getting to the C#? The reason I ask this that I want to hide some pages based on the user logged in.
Any advice would be appreciated. Thanks!
EDIT: By saying pagename, I meant the tab names at the bottom of the powerBI report, each page has a different name as to been:
1- Unfortunately the "page" object is not holding an ID or INDEX property currently. You can see all the properties by doing console.log(page); However, we have the "displayname" property, and this is what I was looking for. All we need to do is to save the pages in an array object and use a counter to have the index of that while looping. Check the code below that handles this issue:
report.on('loaded', () => {
report.getPages().then(function (pages)
pages.forEach(function(page) { pageArray.push(page);});
var i = 0;
while (i < pageArray.length) {
if (pageArray[i].displayName == \"" + activePageSet + "\") { pages[i].setActive(); }
i = i + 1;
}
});
});
2- There is no way to reach the pages in the C# currently, only JS works. To hide any page, you can go to PowerBI Report Editor, simply right click any page and click "Hide Page" option. For such cases you need to hide/unhide pages based on a user or a group, this link has a great solution for that:
https://community.powerbi.com/t5/Developer/Power-BI-Embed-Page-Menu-as-List-View/td-p/174938
For
Can you think about updating the embed config to provide the page name in the config. So you'll not have to update it after calling embed.
This will load the report with the provided page as the Active Page:
var config = {
...
pageName: 'Overall Summary'
};
Reference: https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details
Not sure about C#, In JS Client, Power BI returns the pages object which has all the information about pages.
You'll not be able to modify the navigation pane without editing the source report which will update it for all the users. So for hiding pages based on users, you can add your own navigation pane and then only display the restricted set of pages there. You can then update the active page to change to that page.
For this you can follow the community link Erray has shared.
In Zendesk's help center, I have a new request page set up which allows the end-user to submit a request.
For one of the questions, there is a dropdown which asks the client to establish whether they are using the basic or enterprise version.
If basic, I would like to display some text, perhaps a modal that has messaging around the prioritization for our customers.
However looking at the code, it isn't apparent how to capture the value from the dropdown to display the messaging accordingly.
So far I didn't see a clear way to accomplish this, I've been looking at the documentation here https://developer.zendesk.com/apps/docs/help-center-templates/new_request_page#content
This is the code that's set up on the New Request Page template.
{{breadcrumbs}}
<div class="clearfix">
<section class="main-column">
<h1>{{t 'submit_a_request'}}{{#if parent}}
<span class="follow-up-hint">
{{follow_up}}
</span>
{{/if}}</h1>
<div class="form">
{{request_form}}
</div>
</section>
{{chat}}
You will want to grab the selected value with something like this (using jQuery for simplicity):
$('#request_custom_fields_' + custom_field_id).attr('value');
You can inspect the DOM to see the id. The resulting value will be the tag name you have assigned to the selected value of the custom field.
You can grab it on change and react to it with something like:
$('#request_custom_fields_' + custom_field_id).change(function(){
if ($(this).attr('value') == 'my_cool_tag_value') {
//Do your stuff
}
});
So currently I have a drop down menu that is populated with a json file with each option looking like such (there are many more sets in the actual file) :
JSON
{
"thing": {
"Selected thing": [
{
"name" : "thing 1",
"value" : 1.0,
"purpose": "thing 1"
},
]
}
}
They are being populated into the below HTML select with a script:
HTML
<tr>
<td><strong>Choose a Thing</strong></td>
<td>
<div>
<select name="thing" class="form-control" id="thing" value="{{ thing }}">
<option class ="placeholder">{{ thing }}</option>
</select>
</div>
</td>
</tr>
JavaScript
$(document).ready(function () {
var menu = document.getElementById('thing')
$.getJSON("{{ url_for('static', filename='things.json') }}", function (data) {
$.each(data.things, function (optgroup, options) {
var next_optgroup = document.createElement('OPTGROUP')
next_optgroup.setAttribute("label", optgroup)
menu.appendChild(next_optgroup)
$.each(options, function (index) {
next_option = document.createElement('OPTION')
next_option.setAttribute("value", options[index].value)
next_option.setAttribute("name", options[index].name)
next_option.innerHTML = options[index].name
next_optgroup.appendChild(next_option)
});
});
});
})
So currently, once the selected option is chosen and a submit button is pressed, the value (1) is passed to Flask and stored and rendered to the select options value via {{ thing }}.
I need it to function as it does, but I also need to be able to store the name that is associated with the selected option which I feel I may need to use javascript or some hidden inputs (definitely place another input on my HTML form) to do this, though my knowledge of javascript is minimal.
In other words, how would I be able to store and upon a refresh of the page, keep the selected options name (thing 1) displayed on the HTML page?
Local Storage (https://www.w3schools.com/html/html5_webstorage.asp) described in the link can be used to store data in the User's browser on their local machine. This means that if they visit the page from a different computer, they will not be able to access that stored data. If you need to persist this information and access it from different machines/browsers, then you will have to implement a Database on a live web server and request this information when the user hits the page.
Local Storage is simple to use. Here is an example of how to set the a variable for the User's selected thing:
// Using jQuery
$('#thing').on('change', function() {
// Save the Value in local storage
localStorage.setItem('userThing', $('#thing').val());
});
To load the value from storage after the page is ready AND you have built and populated the 'thing' select form element:
// Get the 'userThing' from local storage and set the select element with id 'thing'
$('#thing').val(localStorage.getItem('userThing');
These task is vary common for Javascript developers. Frameworks such as Google's AngularJS and Facebook's React have been built to simplify these tasks (That is they are very simple to do after you have learned the framework...which will take a little while to feel comfortable using but well worth the effort if you intend to build large projects using javascript). They rely heavily on the MVC paradigm which is strongly recommend in developing Web Applications.
I hope someone can help with this because it's quite frustrating.
I have examined all animation packages around, but they all seem to be activated by user action, for example clicking an item. What if the change is triggered from the server?
I want to display an animation when my Collection is changed from non-Meteor source. I have a Java demo app that can call a Meteor server method, which in turn updates the Collection.
The changes are displayed in the client so I know the basics are working, but how shall I code the client so that it for examples blink when changed?
Think "Stock market app".
A simple example that blinks an item in red when updated would be great. Also, how do I detect when items are inserted and deleted?
Let's assume you have a template for a list of favorite stocks, and a template for each stock:
<template name="favorites">
{{#each favorites}}
{{> stock}}
{{/each}}
</template>
<template name="stock">
<div class="row" id="{{_id}}">
<div class="col-xs-6 symbol">{{symbol}}</span>
<div class="col-xs-6 quote">{{quote}}</span>
</div>
</template>
In the onRendered template event you can create an observer to watch for changes to a specific query. Just use the same query you use to generate the favorites list. When a change occurs for any record, find it using jQuery and animate the highlight effect:
Template.favorites.onRendered(function() {
var query = Favorites.find({}, { sort: { symbol: 1 } });
var handle = query.observeChanges({
changed: function (id, fields) {
//this will highlight the row of the updated favorite, using the id from the Favorites collection
$('#' + id).effect('highlight', {}, 1500);
}
});
});