So here is my quick code.
var thisisformykeyorid =$scope.id;
var ref = firebase.database().ref('/myusers/').child("users");
$scope.users= $firebaseArray(ref);
var query = ref.orderByChild("timestamp").limitToLast(100);
$scope.filteruser= $firebaseArray(query);
In my HTML is
<div ng-repeat="samplein filteruser>
<h2>{{ sample.firstname}}</h2>
<p>{{ sample.age}}</p>
</div>
So in firebase there are unique id or keys for each set of data.
How do i add a filter or query to select a set of data from firebase using my variable ? (assuming $scope.id is a unique key) Please be guided that i dont want to use ng-repeat anymore because i only want to view only 1 set of data. Need help
If you know what object you want to display, you can use $firebaseObject instead of $firebaseArray:
var ref = firebase.database().ref('/myusers/').child("users");
$scope.user = $firebaseObject(ref.child($scope.id));
And then display it in your HTML with:
<div >
<h2>{{user.firstname}}</h2>
<p>{{user.age}}</p>
</div>
Related
I am trying to automate some scenarios using protractor where we need to verify whether the data is updating in dynamic table.
Please find below
HTML Code:
enter image description here
Table in page:
enter image description here
It can be done by verifying that element is present in the DOM with the added Group ID or Group Name.
For Group ID:
element(by.xpath("*//table//tbody//tr//td[1]//p[text()='Amanda Test
Group']")).isDisplayed()
For Group name:
element(by.xpath("*//table//tbody//tr//td[2]//p[text()='Amanda
Group']")).isDisplayed()
I'm assuming you're using Angular2+, yes?
In your HTML Template, you are probably using an *ngFor directive to populate the table dynamically. Add an index to the *ngFor (it's best practices for updating the DOM) in order to add a dynamic id to each element:
<tr *ngFor="let user of user; index as u" id="user-{{u + 1}}">
<td id="userName-{{u + 1}}">
{{user.firstName}} {{user.userName}}<br />
{{user.userName}}
</td>
<td id="userRoles-{{ u + 1 }}">
<span id="role-{{u + 1}}-{{ r + 1 }}" *ngFor="let role of user.roles; index as r">
{{ role.toUpperCase() + ', '}}
</span>
</td>
<!- Omitted code -->
</tr>
In your Page Object:
// Get first user on the table
get firstUser() {
return element(by.id('user-1');
}
// Get a specific user by id
public getUser(index: number) {
return element(by.id(`user-${index}`);
}
// Get all of the attributes for a single user by id
get userAttributes(index: number) {
return element.all(by.id(`user-${index}`);
}
I am not a fan of xpath selectors. Yes, they are faster. But in code that is dynamic or changes frequently, they are the most fragile of selectors. There is no reason your dynamic data cannot have a dynamic ID that clearly identifies each portion of the code you need.
Good luck!
I have a meteor helper that uses a reactive variable in a find to get a unique document using an id. My item button template looks like this:
<template name = "itemButton" >
<div class = "itemButton" name = {{_id}}>
{{{title}}}
</div>
</template>
using a reactive variable:
Template.landing.onCreated(function _OnCreated() {
this.f = new ReactiveVar();
this.f.set(false);
const handle = Meteor.subscribe("Feed");
});
now I have a method in a template several itemButton.
Template.landing.events({
'click .itemButton' : function(event, template){
alert(event.target.name);
template.f.set(event.target.name);
}
});
and I would like to use that name in a helper that would use this value as the _id.
Template.landing.helpers({
"GetFocus": function(){
alert(Template.instance().f.get()); // alerts undefined...
return(items.find({'_id':Template.instance().f.get()}));
}
});
So where I expect GetFocus to give me the document that generated the button I don't seem to be so lucky. Let me know if I can provide any additional clarification, and as always your input is appreciated.
Where I have template.f.set(event.target.name); I needed template.f.set(event.currentTarget.getAttribute('data-id')); where the html uses data-id instead of name.
I'm trying to set up a simple select dropdown form with Flask. Based on the option chosen, I grab different data from my database, and display it back into a div on my html template. But I can't seem to get the Flask request to register any of the select options. When I print request.form or request.args, I always get empty Dicts. It's probably something simple I'm missing but I can't seem to find the problem. I've gotten this to work with several input and button forms, but I can't get it to work right for selects.
Here is a bit of my html template code, with the form and select. I've tried both GET and POST method in the form.
<div class="options" id="options">
<form class="form-horizontal container-fluid" role="form" method="GET" action="exploresn2.html">
<div class="form-group">
<label for="xaxis" class="col-sm-2 control-label">X-axis:</label>
<div class="col-sm-2">
<select name="xaxis" class="form-control" id="xaxis">
<option selected value="mjd" id="mjd">MJD</option>
<option value="seeing" id="seeing">Seeing</option>
<option value="airmass" id="airmass">Airmass</option>
<option value="hourangle" id="hourangle">Hour Angle</option>
</select>
</div>
</div>
</form>
</div>
In Flask, at first, I tried inside my app
import flask
from flask import request, render_template, send_from_directory, current_app
explore_page = flask.Blueprint("explore_page", __name__)
#explore_page.route('/exploresn2.html', methods=['GET','POST'])
def explore():
xaxis = str(request.args.get("xaxis", "any"))
.... [populate new xaxis variable based on request option selected]
exploreDict['xaxis'] = xaxis
return render_template("exploresn2.html", **exploreDict)
or
mjd = valueFromRequest(key='mjd', request=request, default=None)
if mjd:
mjds = [int(exp.platedbExposure.start_time/(24*3600)) for exp in exposures]
xaxis = mjds
exploreDict['xaxis'] = xaxis
to look for and grab a specific values, or in the first case, any value select. The valueFromRequest is function that grabs data from either GET or POST requests.
but this returns nothing, and then I tried just printing the entire request.args (or request.form) and it returns and empty Dict. Everything I try it still returns empty Dicts. So I'm missing some set up somewhere I think but the form looks right to me?
I'm not sure if this is the actual answer to this problem that I was looking for, but here is what I came up with. I couldn't actually get the Flask to accept a GET request into the original explore method defined, so I implemented a new method in Flask to return a JSON object
#explore_page.route('/getdata', methods=['GET','POST'])
def getData(name=None):
name = str(request.args.get("xaxis", "mjd"))
xaxis = 'populate new xaxis data based on value of name'
data = '(x,y) data array filled with values for plotting'
axisrange = range of x,y data for axes for plot
return jsonify(result=data, range=axisrange)
and then I just made a GET request via javascript to that method whenever the select button changes. So in my exploresn2.html template I have (using Flot for plotting)
$("#xaxis").change(function(){
var newname = $("#xaxis :selected").text();
var axes = plot.getAxes();
options = plot.getOptions();
var plotdata = plot.getData();
// make a GET request and return new data
$.getJSON($SCRIPT_ROOT + '/getdata', {'xaxis':$("#xaxis :selected").val()},
function(newdata){
// set new data
for (var i = 0; i < plotdata.length; ++i) {
plotdata[i].data = newdata.result[plotdata[i].label];
}
// set new axes
axes.xaxis.options.panRange = [newdata.range[0]-50,newdata.range[1]+50];
axes.xaxis.options.axisLabel = newname;
axes.xaxis.options.min = newdata.range[0]-1;
axes.xaxis.options.max = newdata.range[1]+1;
axes.yaxis.options.min = newdata.range[2];
axes.yaxis.options.max = newdata.range[3];
// redraw plot
plot.setData(plotdata);
plot.setupGrid();
plot.draw();
});
});
In jQuery, there is a function to serialize a form element so for example I can submit it as an ajax request.
Let's say we have a form such as this:
<form id="form">
<select name="single">
<option>Single</option>
<option selected="selected">Single2</option>
</select>
<input type="checkbox" name="check" value="check1" id="ch1">
<input name="otherName" value="textValue" type="text">
</form>
If I do this with the help of jquery
var str = $( "form" ).serialize();
console.log(str);
the result would be
single=Single2&check=check1&otherName=textValue
Is there such functionality in dart's FormElement or I have to code it myself? Thanks.
I came up with my own simple solution that might not work in all cases (but for me it is workikng). The procedure is this:
First we need to extract all input or select element names and values from the form into Dart's Map, so the element name will be the key and value the value (e.g. {'single': 'Single2'}).
Then we will loop through this Map and manually create the resulting string.
The code might look something like this:
FormElement form = querySelector('#my-form'); // To select the form
Map data = {};
// Form elements to extract {name: value} from
final formElementSelectors = "select, input";
form.querySelectorAll(formElementSelectors).forEach((SelectElement el) {
data[el.name] = el.value;
});
var parameters = "";
for (var key in data.keys) {
if (parameters.isNotEmpty) {
parameters += "&";
}
parameters += '$key=${data[key]}';
}
Parameters should now contain all the {name: value} pairs from the specified form.
I haven't seen anything like that yet.
In this example Seth Ladd uses Polymers template to assign the form field values to a class which get's serialized.
I'm trying to display an error message if the select button in my form is not changed. It works fine for the rest but not the select, please help! and I know that the image wont work like that, I cant post images as a new member.
Html is:
<div id='first_name_error' class='error'><image code here></div>
<div><input type='text' name='first_name' id='first_name' placeholder="YOUR FIRST NAME*"></div>
Number of Guests:*<div id='guests_error' class='error'><img src='img/booking/error.png'></div>
<div><select name='guests' id='guests' style="margin:0px;" SIZE="1"><OPTION SELECTED value="guests">Guests<OPTION>2<OPTION>3<OPTION>4</SELECT></div>
Code Is
var error = false;
var first_name = $('#first_name').val();
var second_name = $('#second_name').val();
var email = $('#email').val();
var number = $('#number').val();
var guests = $('#guests').val();
var message = $('#message').val();
if(first_name.length == 0){var error = true;$('#first_name_error').fadeIn(500);}else{$('#first_name_error').fadeOut(500);}
if(guests.value == Guests){var error = true;$('#guests_error').fadeIn(500);}else{$('#guests_error').fadeOut(500);}
Notice that your "guests" variable is already set to the value of the select element (using jQuery val()). There is no need to attempt to access the "value" property of the "guests" variable.
Second, the comparison you are making is to the identifier Guests, not to the string "Guests". You'll want to put quotes around that to make it a string literal.
You can see an example of this here: http://jsfiddle.net/tbuCJ/