I'm trying to make form with react-rails gem. But I receive an error:
SyntaxError: [stdin]:24:11: unexpected .
By trial I've found, that problem is in first React.DOM.div line (it's marked in code), but I don't understand, why it's happened, I've checked everything one hundred times :)
components/country_form.coffee:
#CountryForm = React.createClass
getInitialState: ->
name: ''
valid: ->
#state.name
handleChange: (e) ->
name = e.target.name
#setState "#{name}": e.target.value
handleSubmit: (e) ->
e.preventDefault()
$.post '', { country: #state }, (data) =>
#props.handleNewCountry data
#setState #getInitialState()
, 'JSON'
render: ->
React.DOM.form
onSubmit: #handleSubmit
React.DOM.div # Problem is here
className: 'form-group'
React.DOM.label
'Name'
React.DOM.input
type: 'text'
className: 'form-control'
name: 'name'
value: #state.name
onChange: #handleChange
React.DOM.div
className: 'form-group'
React.DOM.button
type: 'submit'
className: 'btn btn-primary'
disabled: !#valid()
'Save'
Thanks for any help!
I think it should be indented once more.
Right now it's even with the prop of onSubmit:
React.DOM.form
onSubmit: #handleSubmit
React.DOM.div # Problem is here
className: 'form-group'
but maybe it should be incremented once more:
React.DOM.form
onSubmit: #handleSubmit
# ->
React.DOM.div # Problem is here
className: 'form-group'
I've found the problem. RubyMine (and I think IntelliJ IDEA too) indent CoffeeScript files with spaces. Just change indentations to tabs, and error will disappear.
Related
this is my code below
const columns = [
{
key: '1',
title: 'id',
dataIndex: 'id'
},
{
key: '2',
title: 'status',
dataIndex: 'status',
render: (text) => <a> {text} </a>
},
];
I wanna display data ( text/id ) like below code
const columns = [
{
key: '1',
title: 'id',
dataIndex: 'id'
},
{
key: '2',
title: 'status',
dataIndex: ['status', 'id'],
render: (text) => <a> {text} / {id} </a>
},
];
I tried to like this samples
1. dataIndex: ['status', 'id']
2. dataIndex: 'status.id'
but that doesn`t work. (version 4.14.0)
how can I display like that? please reply here. thanks.
I'll answer assuming what you pass to the dataSource is an array of objects which looks like below.
interface DataModel {
id: number;
status: string;
}
If so, you can use the second parameter in the render method which will have the record. Hence record.id will give you the id.
const columns = [
{
key: '1',
title: 'id',
dataIndex: 'id'
},
{
key: '2',
title: 'status',
dataIndex: ['status'],
render: (text: any, record: any) => <a> {text} / {record.id} </a>
},
];
try this solution
{
title: 'Name',
dataIndex: 'address',
key: 'name',
render: ({ city, street }) => (
<Typography>{`${city} ${street}`}</Typography>
),
},
try this
{
title: "Task",
dataIndex: ["task","name"]
},
I'm going through this tutorial, and was fine until I changed the Records component and added React.createElement RecordForm, handleNewRecord: #addRecord between two DOM renderings. Seems to interfere and prevent the DOM from rendering at all.
Here's the component:
#Records = React.createClass
getInitialState: ->
records: #props.data
getDefaultProps: ->
records: []
addRecord: (record) ->
records = #state.records.slice()
records.push record
#setState records: records
render: ->
React.DOM.div
className: 'records'
React.DOM.h2
className: 'title'
'Records'
React.createElement RecordForm, handleNewRecord: #addRecord
React.DOM.hr null
React.DOM.table
className: 'table table-bordered'
React.DOM.thead null,
React.DOM.tr null,
React.DOM.th null, 'Date'
React.DOM.th null, 'Title'
React.DOM.th null, 'Amount'
React.DOM.tbody null,
for record in #state.records
React.createElement Record, key: record.id, record: record
Console error says "Uncaught ReferenceError: RecordForm is not defined". Which, yes I do, and it's:
#RecordForm = React.createClass
bla bla bla bla
handleChange: (e) ->
name = e.target.name
#setState "#{ name }": e.target.value
handleSubmit: (e) ->
e.preventDefault()
$.post '', { record: #state }, (data) =>
#props.handleNewRecord data
#setState #getInitialState()
, 'JSON'
render: ->
React.DOM.form
bla bla bla bla
What gives?
Looks like I had an unintended space before handleChange. Adding newlines between each function solved it. >:/
I am close on this but being a javascript / json newbie I am sure I am missing something obvious here. The JSON select2 example is a bit over the top so I am lost trying to convert it to my simple implementation.
I have a Model (City) with a big list of cities with other associated data etc. I am aiming for a basic typeahead input where the city / province gets displayed and the id from the City model gets passed in the form.
Here is my JS:
$(document).ready ->
$('#e6').select2
placeholder: 'Select a City...'
minimumInputLength: 3
ajax:
url: '/cities.json'
dataType: 'json'
quietMillis: 250
data: (query) ->
{ query: query }
results: (data) ->
{ results: $.map(data, (item) ->
{
id: item.id
text: item.name + ', ' + item.province
}
) }
# formatResult: formatResult
# formatSelection: formatSelection
# initSelection: initSelection
cache: true
return
My JSON is triggering as I can confirm from my logs. For example http://localhost:3000/cities.json?query=cal yields:
[[1714,"Calais","AB"],[1716,"Calder","SK"],[1717,"Calderbank","SK"],[1731,"Calgary","AB"],[1738,"Calling Lake","AB"],[1739,"Callingwood North","AB"],[1740,"Callingwood South","AB"],[1743,"Calmar","AB"]]
Now right off the bat I think this is my issue. Should this not be:
[ id: 1731, name: "Calgary", province: "AB"], etc..?
Here is my controller:
respond_to do |format|
format.json {
render json: #cities
}
end
Looking ahead I can see that I could probably have my controller spit out the 'text' values in the "City, Province" format I want too.
So my question(s) are: am I missing something obvious in my JS and / or do I need to fix my JSON and if so how?
I am a 100% newb to Sencha and am trying to take a stab at re-factoring my company's mobile app.
Here is my app.js:
Ext.application({
name: 'RecruitTalkTouch',
views: ['Login'],
launch: function () {
Ext.Viewport.add([
{ xtype: 'loginview' }
]);
}
});
Login.js View:
Ext.define('RecruitTalkTouch.view.Login', {
extend: 'Ext.Container',
alias: "widget.loginview",
xtype: 'loginForm',
id: 'loginForm',
requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label', 'Ext.Button' ],
config: {
title: 'Login',
items: [
{
xtype: 'label',
html: 'Login failed. Please enter the correct credentials.',
itemId: 'signInFailedLabel',
hidden: true,
hideAnimation: 'fadeOut',
showAnimation: 'fadeIn',
style: 'color:#990000;margin:5px 0px;'
},
{
xtype: 'fieldset',
title: 'Login Example',
items: [
{
xtype: 'textfield',
placeHolder: 'Email',
itemId: 'userNameTextField',
name: 'userNameTextField',
required: true
},
{
xtype: 'passwordfield',
placeHolder: 'Password',
itemId: 'passwordTextField',
name: 'passwordTextField',
required: true
}
]
},
{
xtype: 'button',
itemId: 'logInButton',
ui: 'action',
padding: '10px',
text: 'Log In'
}
]
}
});
Login.js Controller:
Ext.define('RecruitTalkTouch.controller.Login', {
extend: 'Ext.app.Controller',
config: {
refs: {
loginForm: 'loginForm'
},
control: {
'#logInButton': {
tap: 'onSignInCommand'
}
}
},
onSignInCommand: function(){
console.log("HELLO WORLD");
}
});
When I click the submit button, nothing happens. How can I hook up my submit button to listen for events (click, tap, etc) along with submitting the information to a backend API?
In app.js file of your application, add:
controllers: [
'Login'
]
in your application class. And for submitting information, call a Ajax request like this:
Ext.Ajax.request({
url: // api url..,
method: 'POST',
params: {
username: // get user name from form and put here,
password: // get password and ...
},
success: function(response) {
do something...
},
failure: function(err) {do ..}
});
from inside onSignInCommand() function.
You must activate your controller by adding it to the controllers option of your application class.
Then, to submit your data to the backend, you've got several options. You can use a form panel instead of your raw container, and use its submit method. Alternatively, you can use the Ext.Ajax singleton. In this case, you'll have to build the payload yourself. Finally, you can create a model with a configured proxy, and use its save method. This last way is probably the best for long term maintainability... Even if in the case of a simple login form, that may be a little bit overkill.
Can u please refer this sample app to create login form. Its very simple app please go through it.
http://miamicoder.com/2012/adding-a-login-screen-to-a-sencha-touch-application/
I'm getting ExecJS::RuntimeError when i try to start Rails server and the server log gives me the following:
ActionView::Template::Error (delete operand may not be argument or var
(in /home/sergey/Perfecto/arena/app/assets/javascripts/items.js.coffee)):
47: <%= raw flash_messages %>
48: </div>
49:
50: <%= javascript_include_tag "application" %>
51: <%= yield :javascripts %>
52: <%= yield :scripts %>
53: </body>
I found that this error happens because Ubuntu don't have a javascript runtime installed.
Okay. I've installed nodejs v0.6.3 from sources and tried to add gem 'therubyracer' to my Gemfile as it was suggested but the error still apperars.
What have i missed? Thanks in advance.
My items.js.coffee looks like this:
jQuery ->
if $('#main.items_controller.new').length > 0
overlay = null
iconOffsetX = 26
iconOffsetY = 52
disableDraggingFor = (el) ->
el.draggable = false
el.onmousedown = (event) ->
event.preventDefault()
return false
$(".draggable_item, #new_items_queue").disableSelection()
$.each $(".draggable_item"), (i, el) ->
disableDraggingFor(el)
showInfobox = (marker,data) ->
boxText = document.createElement("div")
boxText.style.cssText = "height: 100%; background: url('/images/form.png') no-repeat;"
boxText.innerHTML = '<div id="infoboxContent">' + data + '</div>'
myOptions =
content: boxText
disableAutoPan: false
maxWidth: 0
pixelOffset: new google.maps.Size(-79, -386)
zIndex: 0
boxStyle:
width: "650px"
height: "350px"
closeBoxMargin: "10px"
infoBoxClearance: new google.maps.Size(1, 1)
isHidden: false
pane: "floatPane"
enableEventPropagation: false
ib = new InfoBox(myOptions)
oldDraw = ib.draw
ib.draw = ->
oldDraw.apply(#)
jQuery(ib.div_).hide()
jQuery(ib.div_).fadeIn(900)
$("#item_name").focus()
priceResult = $("#converted_price")
$("#item_price").live "keydown keyup keypress focus blur paste change", ->
fx.base = "USD"
fx.rates =
"KGS": 46.4
input = accounting.unformat $("#item_price").val()
result = accounting.formatMoney fx.convert(input, from: "USD", to: "KGS"),
symbol: "сом"
precision: 0
thousand: " "
format:
pos : "%v %s"
neg : "(%v) %s"
zero: "0 %s"
priceResult.html result
ib.open(Gmaps.map.map, marker)
google.maps.event.addListener marker, 'dragstart', ->
ib.hide()
google.maps.event.addListener marker, 'dragend', ->
newPosition = #getPosition()
$.ajax "/items/reverse_geocode",
type: 'GET'
dataType: 'text'
data:
lat: newPosition.lat()
lng: newPosition.lng()
error: (jqXHR, textStatus, errorThrown) ->
console.log "AJAX Error: #{textStatus}"
success: (data, textStatus, jqXHR) ->
$("#item_location").val data
ib.show()
$('#item_latitude').val newPosition.lat()
$('#item_longitude').val newPosition.lng()
google.maps.event.addListener ib, 'domready', ->
$('#change_position').bind 'click', ->
ib.close()
marker.setAnimation google.maps.Animation.BOUNCE
google.maps.event.addListener marker, 'position_changed', ->
setTimeout (->
ib.open(Gmaps.map.map, marker)
), 300
google.maps.event.addListener ib, 'closeclick', ->
marker.setMap(null)
delete marker
$(".draggable_item").draggable("enable")
placeMarker = (location,icon,shadow,kind) ->
$.ajax "/items/reverse_geocode",
type: 'GET'
dataType: 'text'
data:
lat: location.lat()
lng: location.lng()
onlyCountry: true
error: (jqXHR, textStatus, errorThrown) ->
console.log "AJAX Error: #{textStatus}"
success: (data, textStatus, jqXHR) ->
if data != "Киргизия"
humane "Вы можете добавлять объявления только в Кыргызстане"
else
$(".draggable_item").draggable("disable")
marker = new google.maps.Marker
position: location
map: Gmaps.map.map
icon: icon
shadow: shadow
draggable: true
zIndex: 99
$.ajax "/items/new.js",
type: 'GET'
dataType: 'text'
data:
content: kind
lat: location.lat()
lng: location.lng()
error: (jqXHR, textStatus, errorThrown) ->
console.log "AJAX Error: #{textStatus}"
success: (data, textStatus, jqXHR) ->
showInfobox marker, data
Gmaps.map.callback = ->
#.map.mapTypes.set "OSM", new google.maps.ImageMapType(
getTileUrl: (coord, zoom) ->
"http://192.168.0.112/osm_tiles2/" + zoom + "/" + coord.x + "/" + coord.y + ".png"
tileSize: new google.maps.Size(256, 256)
name: "OpenStreetMap"
maxZoom: 18
)
#.map.setMapTypeId("OSM")
overlay = new google.maps.OverlayView()
overlay.draw = ->
overlay.setMap #.map
$.each $(".draggable_item"), ->
$(#).draggable
cursor: "move",
revert: false,
helper: 'clone',
stop: (event,ui) ->
point = new google.maps.Point ui.offset.left+iconOffsetX,ui.offset.top+iconOffsetY
location = overlay.getProjection().fromContainerPixelToLatLng(point)
placeMarker location, $(#).data('marker'), $(#).data('shadow'), $(#).data('kind')
You have this in your CoffeeScript:
google.maps.event.addListener ib, 'closeclick', ->
marker.setMap(null)
delete marker
$(".draggable_item").draggable("enable")
And the error say this:
delete operand may not be argument or var
If you backtrack through your CoffeeScript from that delete marker, you'll see that marker is an argument and you can't use the JavaScript delete operator on an argument.
You should be able to get rid of that delete marker without causing problems, just the marker.setMap(null) should be enough to make it go away.
Try to add gem "execjs", "~> 1.3.0" at your Gemfile.
I guess it can fix this...
Older thread but I had the same issue as well but solved it by simply renaming my javascript and deleting the '.coffee' at the end of all the file names.
For example:
From:
'name'.js.coffee
to:
'name'.js
For some reason or another this worked.