I have a function that use a html form to do a query on a fusiontable layer. However, the query return all the features of the layer, not the query as it supposes to do. Can someone help me with this?
Here is the function:
google.maps.event.addDomListener(document.getElementById('CS'),
'click', CS_query);
layer_imm = new google.maps.FusionTablesLayer('1_SY_lmkaQ3_3_pPDzho1-X9fc8WtdJGfo2w1VVg');
function CS_query() {
CSsearch = document.getElementById('CS_Input').value;
layer_imm.setOptions({
query: {
select: 'geometry',
from: '1_SY_lmkaQ3_3_pPDzho1-X9fc8WtdJGfo2w1VVg',
where: "CODE_CS LIKE '%" + CSsearch + "%'"
},
map:map
});
}
<input type="text" id="CS_Input">
<input type="button" id="CS" value="Submit" >
create the layer without any options:
layer_imm = new google.maps.FusionTablesLayer();
Related
In my autoform the value of a field is the difference of two other input fields. It is not allowed to be updated by the user. Unfortuantly at the moment it is not possible to set a single field to readonly in a form. So my approach is to create an autoValue and a custom Validation to prevent an update
My code so far:
'SiteA.Settings.RXSignalODU1difference': {
type: Number,
label: "RX Signal [dBm] ODU1 difference (without ATPC +/- 3dbm)",
decimal: true,
autoform: {
type: "number"
},
autoValue: function() {
var ODU1gemessen = this.field("SiteA.Settings.RXSignalODU1");
var ODU1planned = this.field("SiteA.Settings.RXSignalODU1planned");
if (ODU1gemessen.isSet || ODU1planned.isSet) {
return ODU1gemessen.value - ODU1planned.value;
}
},
custom: function() {
var ODU1gemessen = this.field("SiteA.Settings.RXSignalODU1");
var ODU1planned = this.field("SiteA.Settings.RXSignalODU1planned");
var dif = ODU1gemessen.value - ODU1planned.value;
if (this.value !== dif) {
return "noUpdateAllowed";
}
}
},
My Simple.Schema message:
SimpleSchema.messages({noUpdateAllowed: "Can't be updated"});
Unfortunatly no message pops up.
EDIT
This method will create a disabled input box within your form that will automatically show the difference between two other input fields as the user types.
First, we define session variables for the values used in the calculation and initialize them to undefined.
Template.xyz.onRendered({
Session.set("ODU1gemessen", undefined);
Session.set("ODU1planned", undefined);
});
Then we define two events, that will automatically update these session variables as the user types.
Template.xyz.events({
'keyup #RXSignalODU1' : function (event) {
var value = $(event.target).val();
Session.set("ODU1gemessen", value);
},
'keyup #RXSignalODU1planned' : function (event) {
var value = $(event.target).val();
Session.set("ODU1planned", value);
}
});
Then we define a helper to calculate the difference.
Template.xyz.helpers({
RXSignalODU1difference : function () {
var ODU1gemessen = Session.get("ODU1gemessen");
var ODU1planned = Session.get("ODU1planned");
if (!!ODU1gemessen || !!ODU1planned) {
return ODU1gemessen - ODU1planned;
}
}
});
My HTML markup looks like this. Note, to still control the order of the form, I use a {{#autoform}} with a series of {{> afQuickfields }} rather than using {{> quickForm}}.
To display the calculated difference, I just create a custom div with a disabled text box.
<template name="xyz">
{{#autoForm collection="yourCollection" id="yourId" type="insert"}}
<fieldset>
<legend>Enter legend text</legend>
{{> afQuickField name="SiteA.Settings.RXSignalODU1" id="RXSignalODU1"}}
{{> afQuickField name="SiteA.Settings.RXSignalODU1planned" id="RXSignalODU1planned"}}
<div class="form-group">
<label class="control-label">RXSignalODU1difference</label>
<input class="form-control" type="text" name="RXSignalODU1difference" disabled value="{{RXSignalODU1difference}}">
<span class="help-block"></span>
</div>
</fieldset>
<button class="btn btn-primary" type="submit">Insert</button>
{{/autoForm}}
</template>
Original Answer - not recommended
If you are generating your form as a quickForm, you could do something like
{{>quickForm collection='yourCollection' omitFields='SiteA.Settings.RXSignalODU1difference'}}
This will leave this field off the form, so the user won't be able to update it.
If you still want to display the value somewhere along with the form as the user types in the other two values, you could define a helper in your client side js
something like
Template.yourFormPage.helpers({
diff: function () {
var ODU1gemessen = $('[name=SiteA.Settings.RXSignalODU1]').val();
var ODU1planned = $('[name=SiteA.Settings.RXSignalODU1planned]').val();
if (!!ODU1gemessen || !!ODU1planned) {
return ODU1gemessen - ODU1planned;
}
}
});
You'll want to double check how the field names are being rendered in your DOM. Autoform assigns the name attribute using the field names in your schema, but I don't know how it handles nested keys... (i.e. whether it names the element 'SiteA.Settings.RXSignalODU1' or just 'RXSignalODU1' )
And then just display the value somewhere in your html as :
{{diff}}
I'm trying to display sum value in template page using meteor.js.
Here is my html code:
<head>
<title>Sum</title>
</head>
<body>
<h1>Sum of two values</h1>
{{> sumForm}}
</body>
<template name="sumForm">
<form>
<input type="text" name="value1"> + <input type="text" name="value2"><p>Total: {{totalSum}}</p>
<input type="submit" value="Sum">
</form>
</template>
and my js code:
if(Meteor.isClient){
Template.sumForm.events({
'submit form': function(event){
event.preventDefault();
value1Var = parseInt(event.target.value1.value);
value2Var = parseInt(event.target.value2.value);
Template.sumForm.totalSum = value1Var + value2Var;
return Template.sumForm.totalSum;
}
});
}
But this does not work.
Can any one help?
You can user reactive-var to achive what you want
First you have to add the lightweight reactive-var package
meteor add reactive-var
Then at your Template file add:
if (Meteor.isClient) {
Template.sumForm.created = function () {
//We set default value
this.counter = new ReactiveVar(0);
}
Template.sumForm.helpers({
totalSum: function () {
return Template.instance().counter.get();
}
});
Template.sumForm.events({
'submit form': function(event, template){
event.preventDefault();
value1Var = parseInt(event.target.value1.value);
value2Var = parseInt(event.target.value2.value);
var sum = value1Var + value2Var;
return template.counter.set(sum);;
}
});
}
Template.sumForm.helpers({
totalSum: function(){
return Session.get("sum");
}
});
And at the end of your submit event
Session.set("sum", value1Var + value2Var);
For a cleaner solution also consider using reactive-var instead of session variables.
I would like to play a video on my ASP.NET Webpage, but I have no clue how to pull this off and I don't understand anything about the YouTube API. I'm clueless when it comes to API's
But what I want to achieve is the following:
when I click on a button (trailer), I take the title of the movie/game and search with it in the YouTube database (or something like that). And the best (or first or idk) found video will be the one playing on my webpage.
For example:
I have a page with all the details on the movie "Iron Man", when I click on the button "Trailer", I'd like to play the trailer from the movie Iron Man on my webpage.
Is this possible, if yes, how do I do this?
I can't provide code, because I have no clue how to even begin with this. I just have a button and a label with the title as text. That's it ..
If someone can help me out, please explain it very detailed so I can maybe understand it.
Thanks in advance! You'd me helping me out big time!
Here is some simple javascript and html i wrote that allows the user to bring in a youtube video when searched hope it helps.
let me know here is the fiddle aswell
-http://jsfiddle.net/cse_tushar/qn4C7/
html
<input type="text" id="Search" /><br/>
<input id="show" type="button" value="Submit" onclick="Show();"/>
<div id="result">
</div>
Javascript
$(document).ready(function () {
$("#show").click(function () {
getYoutube($("#Search").val() + "Offical Film Trailer");
});
});
function getYoutube(title) {
$.ajax({
type: "GET",
url: yt_url = 'http://gdata.youtube.com/feeds/api/videos?q=' + title + '&format=5&max-results=1&v=2&alt=jsonc',
dataType: "jsonp",
success: function (response) {
if (response.data.items) {
$.each(response.data.items, function (i, data) {
var video_id = data.id;
var video_title = data.title;
var video_viewCount = data.viewCount;
var video_frame = "<iframe width='600' height='385' src='http://www.youtube.com/embed/" + video_id + "' frameborder='0' type='text/html'></iframe>";
var final_res = "<div id='title'>" + video_title + "</div><div>" + video_frame + "</div><div id='count'>" + video_viewCount + " Views</div>";
$("#result").html(final_res);
});
} else {
$("#result").html("<div id='no'>No Video</div>");
}
}
});
}
I have a Dexterity type that has multiple fieldsets, and the built-in Javascript that allows showing one fieldset at a time when adding or editing is wonderful.
But I'd like to invite the user to walk through the fieldsets in sequence, so my ideal situation would not present the "Submit" button until the last fieldset was visible, instead presenting NEXT> or <PREV and NEXT> buttons until that last fieldset.
I gather that this is a behavior? But I'm at a bit of a loss as to how to add it and how to control it. I'm currently using the default EditForm, and I'd much prefer to just make a tiny tweak, but if it means dropping down to building the form myself, that's OK. I just need to know whether that's the only way to get this addition, which seems unlikely.
The fieldsets can be rigged up to add 'previous' and 'next' buttons with some extra JavaScript magic. Here's what I use in a current project:
var prevnext = {
formTabs: null,
next: function() { prevnext.formTabs.data('tabs').next(); prevnext._scrollToTop(); },
prev: function() { prevnext.formTabs.data('tabs').prev(); prevnext._scrollToTop(); },
_scrollToTop: function() {
$(window).scrollTop(prevnext.formTabs.closest('form').offset().top);
},
showButtons: function(event, index) {
var tabs = prevnext.formTabs.data('tabs'),
index = typeof(index) === 'undefined' ? tabs.getIndex() : index,
current = tabs.getTabs()[index],
count = tabs.getTabs().length;
$('#prevnext_previous').toggle(index !== 0);
$('#prevnext_next').toggle(index !== (count - 1));
$('.formControls:last :submit[name=form_submit]').toggle(index === )count - 1));
},
init: function() {
var tabs;
prevnext.formTabs = $('.formTabs');
tabs = prevnext.formTabs.data('tabs');
if (tabs.getTabs().length > 0) {
if ($('fieldset#fieldset-distribution').length === 0)
return;
$('.formControls:last :submit:first')
.before($('<input id="prevnext_previous" class="context" ' +
' type="button" value="" />')
.val('< Previous')
.click(prevnext.prev))
.before(document.createTextNode(' '));
$('.formControls:last :submit:first')
.before($('<input id="prevnext_next" class="context" ' +
' type="button" value="" />')
.val('Next >')
.click(prevnext.next))
.before(document.createTextNode(' '));
prevnext.showButtons();
tabs.onClick(prevnext.showButtons);
}
}
};
$(prevnext.init());
Hello I am using Jquery getJSON to send a query parameter to servlet.
The servlet URL works by itself:
http://localhost:8080/pgViking/recentUploads?conID=2
It gives the following output:
{reports:[{filename:"CSVFile_2010-06-16T11_54_53.csv"},
{filename:"CSVFile_2010-06-16T11_54_53.csv"}, <br />
{filename:"PRJ20142_05_10_2008.zip"}]}
However, I cannot get a proper response from jQuery.
Here is code for it:
$(document).ready(function(){
$("#cons").change(function(){
var selected = $("#cons option:selected");
// getJSON("servlet Name", Selected Value 2, 3, function to show result, callback function
$.getJSON("recentUploads?conID=", selected.val(), function(data){
$("#reports").contents().remove();
$.each(data.reports, function(index,rpt){
// add items to List box
$("#reports").append("<option>" + rpt.filename + "</option");
} //end function
); //end of each
}); // getJSON
}); // change
});
the html part:
<select Name="eCons" size="1" id="cons">
<option value="select consultant">Select Consultant</option>
<option value="4">A</option>
<option value ="2">B</option>
<option value="3">Br</option>
<option value ="21">D</option>
<option value="20">G</option>
<option value="24">T</option>
</select>
<br />
<br />
<select id="reports" style ="width:200px">
</select>
When I debug it in firebug I see that I have incorrect URL but I am not sure
if it's the only problem:
url="recentUploads?conID=&3"
Any help it would be appreciated,
Thanks,
$("#reports").append("<option>" + rpt.filename + "</option");
This is invalid. The closing tag > is not only missing, but this also won't create a real HTML element at all. Use $("<option>") to let jQuery create a real HTML <option> element.
$("#reports").append($("<option>").text(rpt.filename));
I'd also suggest to get hold of $("#reports") as a var before the loop, that's a tad more efficient.
You can find more examples in this answer.
the getJSON call expects valid JSON (valid JSON has quotes around the keys and values, with the only exception being values that are numbers. The output of your servlet should look like this:
{
"reports": [
{
"filename": "CSVFile_2010-06-16T11_54_53.csv"
},
{
"filename": "CSVFile_2010-06-16T11_54_53.csv"
},
{
" filename": "PRJ20142_05_10_2008.zip"
}
]
}
Otherwise, you can use the jQuery ajax call, giving the dataType attribute a value of "text" and using this code in the success function:
var myObject = eval('(' + myJSONtext + ')')
you can't use jQuery.each function in this way. http://api.jquery.com/each/
for(i in data.reports){
// add items to List box
$("#reports").append("<option>" + data.reports[i].filename + "</option");
); //end of loop
to remove & use:
$.getJSON("recentUploads?conID="+selected.val(), function(data){
or:
$.getJSON("recentUploads",{conID:selected.val()}, function(data){
Maybe:
$.getJSON("recentUploads", { 'conID': selected.val()}, function(data){
$("#reports").contents().remove();
http://api.jquery.com/jQuery.getJSON/
Parameters are: url, data (map or string), callback.
This is way an ampersand (&) is used to join your url + paramenter passed as string (3). As result you have: recentUploaded?conID=&3