I'm creating form using createElement() in ReactJSX.
My code looks like this:
var form = document.createElement('form');
form.id = "new_message_form";
form.method = 'post';
form.className = 'chat_input';
I want to use data-remote="true" in this form (it should be something like this:
form.data-remote="true";
Can anybody advise how to do this?
Because there is no standard attribute like data-remote or remote in html forms, it's just custom attribute that is related to rails specificly.
Docs on data-* attributes: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
So, to set that attribute, you need to set this attribute explicitly:
form.setAttribute("data-remote", "true");
JSX
<form id="new_message_form" method="post" className="chat_input" data-remote="true"/>
desugared to JS
React.createElement("form", { id: "new_message_form", method: "post", className: "chat_input", "data-remote": "true" })
You can use JSX online in the Babel REPL to see if it gets compiled to what you need: http://babeljs.io/repl/
I solved my problem with setting attribute directly to form.
Code: form.setAttribute("data-remote", "true");
Related
<iron-ajax
auto
url= 'http://localhost/sh_new/index.php/mobile/notes/{{misi}}'
handle-as="document"
on-response="handleResponse"
last-response = "{{noteResponse}}">
</iron-ajax>
{{noteResponse}}
result is [object HTMLDocument] how to change into html
Change handle-as="document" to handle-as="html"
Use underscore.js utility named _.template to convert it into HTML. It is basically used to load partial HTML content. I know this is not good one solution but it will solve your purpose.
app.handleResponse = function(e, detail){
var html = _.template(detail.response);
}
<iron-ajax
auto
url= 'http://localhost/sh_new/index.php/mobile/notes/{{misi}}'
handle-as="html"
on-response="handleResponse"
last-response = "{{noteResponse}}">
</iron-ajax>
{{noteResponse}}
I have a scope variable $scope.object = { prop: 12345 } whose properties I delete with setting them to undefined.
<button ng-show="object.prop" ng-click="object.prop = undefined"/>
Is there a possibility to delete a properties from within a template and without an additional function in the controller instead of setting their values to undefined?
use codes below to delete a property from a object
In HTML
<button ng-show="object.prop" ng-click="deleteProperty()" />
In Controller
$scope.deleteProperty = function() {
delete $scope.object.prop;
}
Yes... I.e. that you can change the value of the variable ... Maybe it will be a help for you
try this:
<button ng-show="object.prop" ng-click="object.prop = 'undefined'"/>
or you can clear the value...
<button ng-show="object.prop" ng-click="object.prop = ''"/>
also you can set the value to null
<button ng-show="object.prop" ng-click="object.prop = null"/>
Here's the way that you can delete any property name from the object of scope. This method require using Underscore.js library.
index.html
//Underscore.js must be imported
<script src="path/to/underscore/underscore-min.js"></script>
//Replace prop with any property name
<button ng-click="removeMyProperty(object, 'prop')">Test</button>
Controller
$scope.object = {"prop": "test", "anotherProp" : 10};
$scope.removeMyProperty = function(variable, propName){
var keys = _.keys(variable);
_.each(keys, function(data){
if(data === propName){
$scope.object = _.omit(variable, propName);
}
else {
console.log("No such property name in array!");
}
});
};
This works only when you use Underscore.js library and thus you must add it to your project classpath and import underscore.js file in index.html
If you are not familiar with Underscore, please go here Underscore.js
If the object is always at a point that you know what properties it would have besides the one you are deleting you could try something like:
<button ng-show="object.prop" ng-click="object = {otherProp1: object.otherProp1, otherPropN: object.otherPropN}"/>
I think that you can't do that. I tried using "delete" operator, something like ng-click="delete object.prop". But it turns out that AngularJS expressions are limited and this gives me a $parse error while compiling the template, so you would have to write that in controller in order to completely delete it, unfortunately.
But if you want to avoid the controller at all means, setting the property to undefined might be a better idea, read the answer by Dan in this question: How do I remove a property from a JavaScript object?
I read at http://docs.angularjs.org/api/ng.directive:input
<input
ng-model="{string}"
[name="{string}"]
[required]
[ng-required="{boolean}"]
[ng-minlength="{number}"]
[ng-maxlength="{number}"]
[ng-pattern="{string}"]
[ng-change="{string}"]>
</input>
How can I set ime-mode in this code ?
You are able to add another attributes to input (it won't cause any errors), so simply add, for example, style="ime-mode: disabled" (or add class attribute and set ime-mode in your css - it's better way in my opinion)
ime-mode is not supported in Chrome, Safari, or Opera. Read more about ime-mode and its compatibility here: https://developer.mozilla.org/en-US/docs/Web/CSS/ime-mode
If you do want to use it in supported versions of IE and Firefox, here are two methods:
Use a class:
<input class="ime">
CSS:
.ime {
ime-mode: disables;
}
Inline style (not recommended):
Also note that in your markup is not valid. input tags are self closing and do not need </input>. Also, with angular, you probably don't need the name and required attributes. You markup should probably look like this:
<input
ng-model="myModel"
ng-required="required"
ng-minlength="minLength"
ng-maxlength="maxLength"
ng-pattern="regex"
ng-change="myChangeFunction()"
>
to data-bind in these values with Angular:
app.controller('myCtrl', function($scope) {
$scope.myModel = 'input value here';
$scope.required = true;
$scope.minLength = 5;
$scope.maxLength = 20;
$scope.regex = '/put your regex here/';
$scope.myChangeFunction() {
//code to run when value of input is changed
};
});
How do I get the ExtJs component object of a Div by class name?
Say my div is:
<div class="abc"></div>
How do I get the ExtJs object of this Div to perform e.g. getWidth()
Note: There is no id given.
What I tried:
Ext.select(".abc")
Ext.query(".abc")
Edit:
Error:
Object has no method 'getWidth'
<div id="main">
<div class="abc"></div>
</div>
var d = Ext.get( "main" );
d.query('.abc').getWidth();
Use
var dom = Ext.dom.Query.select('.abc');
var el = Ext.get(dom[0]);
This will return an Ext.Element. You can then use ext methods on el like so
el.on('click', function(){}, scope);
or
el.getWidth()
I believe you mean Ext.dom.Element (not ExtJs component object). If yes try this code
var d = Ext.get( "main" );
alert(d.down('.abc').getWidth());
demo
For Ext4 and up you could use the following:
Ext.ComponentQuery.query('panel[cls=myCls]');
And you will get and array of this components
source: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ComponentQuery
Ext.select('abc');
This method works in EXT 4 also.
In your example, just remove the dot when calling the string of the class name.
I've completely rewritten my question to hopefully better reflect what I am trying to do here. Thank you guys so much for your help so far.
I have a file called en.js, which holds this code:
Ext.apply(Ext.locale || {}, {
variable: 'great success!'
});
Here's my index.js setup code:
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
Ext.locale = {};
var headID = document.getElementsByTagName("head")[0],
newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'en.js';
headID.appendChild(newScript);
loginPanel = new login.Panel();
}
});
login.Panel is an extension of the Sencha panel class using Ext.extend.
The 'en.js' script is added to the header correctly. I don't have it in the index.html file because once this problem is solved there will be several files that could be loaded, depending on the output of a function. That's why I need to add the script to the header in the onReady function, and not in the index.html file itself.
Once the script has been added it loads "variable: 'great success'" into Ext.locale,
Yet my problem currently lies within login.Panel(), which is an extension of the Sencha panel class using Ext.extend.
Currently, there is a button in the panel.
When I put this in the button's handler:
console.log(Ext.locale.variable)
it returns the string "great success",
yet when I try to set the button's text like this:
text:Ext.locale.variable,
I get the error
Uncaught TypeError: Cannot read property 'variable' of undefined
I'm guessing I have a scope issue here, since console.log() and alert() can both access Ext.locale, but trying to use it to construct the form gives me the undefined error.
Any help would be greatly appreciated.
Thank you!
it sounds like you are defining Ext.locale from your script early on... then later in onReady you are overwriting it as Ext.locale = {}
onReady will run after all your other scripts have been loaded.
Why not move your initialisation code for locale into onReady insted of your = {} line
This will add three properties and their values to the receiving object.
Ext.apply(receivingObject, {
property1: 'value1',
property2: 'value2',
property3: 'value3'
});
Here also is the Sencha documentation on the Ext.apply method:
http://dev.sencha.com/deploy/touch/docs/source/Ext.html#method-Ext-apply
As for accessing the isReady property, you could do something like if(someExtObj.isReady), but you may be more interested in using the onReady method...
Ext.setup({
onReady: function() {
// your setup code
}
});