gmaps4rails 2 + rails 4 + ruby 2.0
<script>
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
markers = handler.addMarkers(<%= raw #geo_hash.to_json %>);
});
handler.map.centerOn({ lat: <%= raw #geo_city[0][:lat] %>, lng: <%=raw #geo_city[0][:lng] %> })
handler.getMap().setZoom(7)
</script>
#geo_hash = [{:lat=>16.9916,
:lng=>81.7838,
:infowindow=>"railway station",
:picture=>{:url=>"/assets/web/blank_red.png", :width=>32, :height=>32},
:title=>"abc temple"}
]
#geo_city = [{:lat=>15.8273,
:lng=>78.047,
:infowindow=>"Bus stand",
:picture=>{:picture=>"/assets/web/**blank.png", :width=>32, :height=>32},
:title=>"A.S. Peta"}]
I want two different marker on Google map but only one marker is coming ? any suggestion ?
I got the solution...
<script>
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
markers1 = handler.addMarkers(<%= raw #geo_hash.to_json %>);
markers2 = handler.addMarkers(<%= raw #geo_city.to_json %>);
});
handler.map.centerOn({ lat: <%= raw #geo_city[0][:lat] %>, lng: <%=raw #geo_city[0][:lng] %> })
handler.getMap().setZoom(7)
</script>
Thanks.
Related
I have two models, MyModel and MyOptions.
MyModel has a myValue property belongsTo('myOption), and myName('string').
In the view, I have an input for myName and a select with possible values of the model MyOptions.
When I select a new related row, I expect myModel to be 'dirty'. If I change myName, myModel gets 'dirty' (correctly).
What I'm doing wrong?
Thanks,
See this jsfiddle for the code
window.App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter.extend();
App.IndexController = Ember.ObjectController.extend({
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return Ember.RSVP.hash({
myModel: this.store.find('myModel', 1),
myOptions: this.store.find('myOption')
});
},
});
App.MyOption = DS.Model.extend({
name: DS.attr('name')
});
App.MyOption.FIXTURES = [
{ name: 'User a', id: 1 },
{ name: 'User b', id: 2 },
{ name: 'User c', id: 3 },
];
App.MyModel = DS.Model.extend({
myValue: DS.belongsTo('myOption'),
myName: DS.attr('string')
});
App.MyModel.FIXTURES = [
{
id: 1,
myValue: 2
}
];
<script type="text/x-handlebars" data-template-name="index">
<h1>Test</h1>
<lablel>My Value</label>{{input value=myModel.myValue.id}}
<lablel>My Name</label>{{input value=myModel.myName}}
{{view "select"
content=myOptions
selectionBinding=myModel.myValue
optionLabelPath="content.name"}}
{{myModel.isDirty}}
</script>
ember-data doesn't handle dirtyness for relationships, yet. You would need to implement it in user-space.
This is the relevant issue: https://github.com/emberjs/data/issues/2122
This old issue specifically discusses belongsTo: https://github.com/emberjs/data/issues/1367
Instead of using selectionBinding, you should use value:
{{view "select"
content=myOptions
value=myModel.myValue
optionLabelPath="content.name"}}
I've been troubleshooting this for couple hours to no avail.
Basically, in the following code, I get the right results from the remote suggestions provider,
var descuentos = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.nonword,
queryTokenizer: Bloodhound.tokenizers.nonword,
remote: {
url: 'http://localhost:30045/Home/Suggest?q=%QUERY&type=name&fuzzy=false',
wildcard: "%QUERY",
filter: function (items) {
return $.map(items, function (item) {
return {
value: item.NombreComercio
};
});
}
}
});
$('#bloodhound .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 0
},
{
name: 'descuentos',
source: descuentos
});
<body>
<div id="bloodhound">
<input class="typeahead" type="text" placeholder="Comercio Adherido...">
</div>
</body>
But, when the suggestion STARTS WITH the search string, is not displayed... Ideas?
Thanks!
Add displayKey to typeahead datasets parameter.
$('#bloodhound .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 0
},{
name: 'descuentos',
displayKey: 'value',
source: descuentos
});
Hope this helps.
Here is the thing I have a form which have multiple checkboxes and they have the same name attribute "classifications[]"
with the code:
<input type="checkbox" name="classification[]" value="Value 1" />
<input type="checkbox" name="classification[]" value="Value 2" />
<input type="checkbox" name="classification[]" value="Value 3" />
this works properly by default it posts "classification[]" like this
[ 0 => "Value 1", 1 => "Value 2"]
but I want this to work in an ember app so I did this (shortened version)
// index.html
{{input type="checkbox" name="classification[]" value="Cell Member" checked=classification}}
App.ApplicationController = Ember.Controller.extend({
var user = this.store.createRecord('user',{
classification: this.get("classification")
})
user.save();
})
App.User = DS.Model.extend({
classification: DS.attr("string")
});
but the only posted classification value is True..
try this
// index.html
{{#for possibleValues}}
<label>{{this.label}}</label>
{{input type="checkbox" value=this.isChecked}}
{{/for}}
<a {{action save}}>save</a>
var possibleValue = [{
label: 'Label for value 1',
isChecked: false,
value: 'Value 1'
},{
label: 'Label for value 2',
isChecked: false,
value: 'Value 2'
},{
label: 'Label for value 3',
isChecked: false,
value: 'Value 3'
}];
App = Ember.Application.create();
App.ApplicationAdapter = DS.RESTAdapter.extend();
App.ApplicationController = Ember.ObjectController.extend({
init: function () {
this._super();
var user = this.store.createRecord('user');
this.set('content', user);
},
actions:{
save: function () {
var user = this.get('content'),
collected = user.get('classifications');
this.set('collected', collected);
user.save();
}
},
//executes when isChecked is changed in one item of possibleValues
collectChecked: function () {
var classifications;
classifications = this.get('possibleValues').filterBy('isChecked', true); //filter checked only
classifications = classifications.mapBy('value'); //map values
this.set('classifications', classifications);
console.log(classifications);
}.observes('possibleValues.#each.isChecked'),
possibleValues: possibleValues
});
App.RawTransform = DS.Transform.extend({
deserialize: function(serialized) {
return serialized;
},
serialize: function(deserialized) {
return deserialized;
}
});
App.User = DS.Model.extend({
classifications: DS.attr('raw')
});
http://jsbin.com/dokiwati/6/edit
forgive me if this question is too silly .I'm studying Ember.js myself and I'm stuck with a problem I need to set a value of the textbox dynamically and I dont know how to do that now I'm using jquery for overcome this error by using $("#results")[0].value = data; and I know its not the right way How can I do the same in Ember,js
my Current code is given below
App = Em.Application.create();
App.BaseCurrency = Em.Object.extend({
id: null,
name: null
});
App.DestCurrency = Em.Object.extend({
id: null,
name: null
});
App.BaseSelector = Em.ArrayController.extend({
content: [
App.BaseCurrency.create({ id: "INR", name:" Indian Rupee (INR)" }),
App.BaseCurrency.create({ id: "USD", name: "US Dollar (USD)" })
]
});
App.baseSelector = App.BaseSelector.create();
App.DestSelector = Em.ArrayController.extend({
content: [
App.DestCurrency.create({ id: "INR", name: " Indian Rupee (INR)" }),
App.DestCurrency.create({ id: "USD", name: "US Dollar (USD)" })
]
});
App.destSelector = App.DestSelector.create();
App.ConvertCurrency = Em.ObjectController.extend({
content: [],
amount:0,
baseCur: null,
destcur: null,
result: 0,
convert: function () {
var amount = this.get('amount');
var from = this.get('baseCur');
var to = this.get('destCur');
$.ajax({
type: "POST",
url: "Home/ConvertCurenncy",
data: "{amount:" + amount + ",from:'" + from + "',to:'" + to + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$("#results")[0].value = data;
}
});
}
});
App.convertCurrency = App.ConvertCurrency.create();
and html
<script type="text/x-handlebars">
AMOUNT : {{view Ember.TextField valueBinding="App.convertCurrency.amount"}}
BASE : {{view Ember.Select contentBinding="App.baseSelector" optionLabelPath="content.name" optionValuePath="content.id" valueBinding="App.convertCurrency.baseCur" }}
DEST : {{view Ember.Select contentBinding="App.destSelector" optionLabelPath="content.name" optionValuePath="content.id" valueBinding="App.convertCurrency.destCur" }}
<button id="btnConvert"{{action "convert" target="App.convertCurrency"}}>convert</button>
RESULT :<input type="text" readonly=true id="results" />
</script>
You where almost there, what you might do is to customize a Ember.Texfield, for example:
App.ResultField = Ember.TextField.extend({
type: 'text',
attributeBindings: ['readonly'],
readonly: true
})
and then use it like so:
Result: {{view App.ResultField valueBinding="App.convertCurrency.result"}}
then in your success callback you set App.convertCurrency.result to the received value:
...
success: function (data) {
App.convertCurrency.set('result', data);
}
...
and bindings will take care on updating your textfield's value
Hope it helps.
I'm baffled that this dataView is empty! I have this same setup working with images but it's not displaying here. Am I missing something? Thanks for your help.
json:
{rows:[{"noteid":"4","txid":"97","contactid":"38","displayname":"Jeb Hafkin","txdate":"08\/20\/2010","date":"12\/08\/2011","type":"Treatment Note","content":"new test<img src=\"..\/logos\/1912323619.jpg\">","subject":"Jeb's note","firstname":"Jeb","lastname":"Hafkin"},{"noteid":"6","txid":"0","contactid":"51","displayname":"Bill Hyyman","txdate":null,"date":"12\/12\/2011","type":"","content":"test","subject":"","firstname":"Bill","lastname":"Hyyman"}], "success": true}
data Store, tpl, dataview:
var noteStore = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['noteid','txid','contactid', 'displayname', 'date',
'subject','txdate','type','amtpd','content' ],
root: 'rows',
id: 'noteid'
}),
proxy: new Ext.data.HttpProxy({
url: '/request.php?x=noteStore'
})
});
var tpl = new Ext.XTemplate (
'<tpl for ".">',
'<p class="note">noteid = {noteid} </p>',
'</tpl>'
);
var noteDataView = new Ext.DataView({
store: noteStore,
tpl: tpl,
autoHeight:true,
multiSelect: true,
overClass:'x-view-over',
itemSelector:'p.note',
emptyText: 'No notes to display'
});
var notePanel = new Ext.Panel ({
layout: 'fit',
padding: 10,
items: [noteDataView],
tbar: noteTb
});
The store needs to be loaded. Try adding autoLoad: true to your store:
var noteStore = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['noteid','txid','contactid', 'displayname', 'date',
'subject','txdate','type','amtpd','content' ],
root: 'rows',
id: 'noteid',
}),
proxy: new Ext.data.HttpProxy({
url: '/request.php?x=noteStore'
}),
autoLoad: true
});