I'm using an OData Model from my SAP Gateway:
var oModel = new sap.ui.model.odata.ODataModel(url);
this.setModel(oModel, "model");
Now I have the requirement to display a property from the first line of an EntitySet.
I tried it with the following code in my XML view but without success:
<Text text="{model>/ZLLEDATSet/0/Date}" />
I thought the syntax should be "modelname>/entitySet/index/PropertyName".
Based on the answer from #SiddP: I tried the following but I get the error
Uncaught [object Object]
<Text text="{
path: 'model>/ZLLEDATSet',
formatter: function(value) {
return value[0].Date;
}
}"/>
Try this instead.
text:{
path: '/ZLLEDATSet',
formatter: function(value){
return value[0].Date;
}
}
The above code in your question just works fine. See the jsbin :http://jsbin.com/kobocidose/edit?html,js,output
If you still get error just place alert(JSON.stringify(oModel.getData())); to check if the data is properly set to the model.There is a good chance the your data would show null.
Related
I am using react-native-webview for rendering a webview. When I navigate from one page to other inside the webview and then try to go back using this.webviewref.goBack() I get the exception of nodeHandle expected to be non-null.
Here is my piece of code
<View style={{ flex: 1 }}>
<Header
headingText={headerText}
onpress={() => {
// this.dispatchCustomEvent(BACK_PRESS);
if (this.canGoBack) {
this.webViewRef.goBack();
} else NavigationActions.pop();
}}
/>
<WebView
source={{ uri: "http://localhost:3001/invite/" }}
bounces={false}
javaScriptEnabled={true}
ref={webViewRef => (this.webViewRef = webViewRef)}
// injectedJavaScript={patchPostMessageJsCode}
onMessage={event => {
const { type, data } = JSON.parse(event.nativeEvent.data);
console.log({ type });
console.log({ data });
this.handleEvent(type, data);
}}
onNavigationStateChange={navState =>
(this.canGoBack = navState.canGoBack)
}
/>
</View>
console logging this.webViewRef shows that the goBack method exists in the weViewRef
The code for which throws the nodeHandle expected to be non-null can be found here https://github.com/react-native-community/react-native-webview/blob/master/src/WebView.ios.tsx
I am unable to understand what is the problem with getWebViewHandle
and why nodeHandle is null.
I had the same problem. It turns out that my react-native version is too low. It requries at least 0.57. After upgraded to 0.59.5 and other dependencies, this problem disappears.
I had the problem too and I found a solution, my solution at leasts.
I had this piece code:
Versions:
"react": "16.11.0"
"react-native": "0.62.2"
"react-native-webview": "^9.4.0"
<WebView
ref={this._setWebviewRef}
onNavigationStateChange={this._handleWebViewNavigationStateChange}
onMessage={this._handleOnMessage}
source={{uri: this.state.dashboardUrl || ''}}
renderLoading={() => <LoadingSpinner />}
startInLoadingState
incognito
/>
where this._setWebviewRef was the next:
_setWebviewRef = (ref) => {
if (ref && !this.props.webviewRef) {
const {goBack} = ref;
goBack && this.props.setWebviewRef({goBack});
}
};
I'm using redux to save goBack method to use it on the typic _handleAndroidBackButton. So as other guys said, i was giving the fu***** nodeHandle expected to be non-null but i was seeing that goBack method exists on _handleAndroidBackButton context.
Debugging i saw that ref WebView method has multiple calls, not just 1 time as i was controlling. So, deleting this condition && !this.props.webviewRef is already working.
Also, I had tried to set my uri 'hardcoded' with the same error, so that not work for me.
PD: don't try to save entire WebView ref on global state, just save what you need our you will have some errors.
The reason for this problem may be that your component has been rendered for a certain condition at the beginning, but after the condition is not satisfied, the modified component is removed, but the reference of the component is not empty. Therefore, when calling the component method, the component method is called, because the component is not empty, but the reference is still not empty, resulting in an error. To adjust the error caused by the above situation, just set the variable referenced by the previous assignment to null when removing the component
I do not understand why the following test is failing with the error:
TypeError: (intermediate value).should.be.type is not a function
describe('#Option object', function() {
it('returns value as whatever type was passed to the constructor', function() {
var o = function() {
this.getValue = function() {
return new Date();
}
};
var i = new o();
i.getValue().should.be.type('Date');
})
});
I've read [most] of the Should.js documentation but I must be missing something. Can anyone tell me what is wrong with my test?
Actually only one thing wrong. You read not should.js docs, but unit.js docs - it is not related to should.js at all.
Correct link.
Correct code will be:
i.getValue().should.be.instanceOf(Date);
or
i.getValue().should.be.Date();
I have a Select2 that fetches its data remotely, but I would also like to set its value programatically. When trying to change it programatically, it updates the value of the select, and Select2 notices the change, but it doesn't update its label.
https://jsfiddle.net/Glutnix/ut6xLnuq/
$('#set-email-manually').click(function(e) {
e.preventDefault();
// THIS DOESN'T WORK PROPERLY!?
$('#user-email-address') // Select2 select box
.empty()
.append('<option selected value="test#test.com">test#test.com</option>');
$('#user-email-address').trigger('change');
});
I've tried a lot of different things, but I can't get it going. I suspect it might be a bug, so have filed an issue on the project.
reading the docs I think maybe you are setting the options in the wrong way, you may use
data: {}
instead of
data, {}
and set the options included inside {} separated by "," like this:
{
option1: value1,
option2: value2
}
so I have changed this part of your code:
$('#user-email-address').select2('data', {
id: 'test#test.com',
label: 'test#test.com'
});
to:
$('#user-email-address').select2({'data': {
id: 'test#test.com',
label: 'test#test.com'
}
});
and the label is updating now.
updated fiddle
hope it helps.
Edit:
I correct myself, it seems like you can pass the data the way you were doing data,{}
the problem is with the data template..
reading the docs again it seems that the data template should be {id, text} while your ajax result is {id, email}, the set manual section does not work since it tries to return the email from an object of {id, text} with no email. so you either need to change your format selection function to return the text as well instead of email only or remap the ajax result.
I prefer remapping the ajax results and go the standard way since this will make your placeholder work as well which is not working at the moment because the placeholder template is {id,text} also it seems.
so I have changed this part of your code:
processResults: function(data, params) {
var payload = {
results: $.map(data, function(item) {
return { id: item.email, text: item.email };
})
};
return payload;
}
and removed these since they are not needed anymore:
templateResult: function(result) {
return result.email;
},
templateSelection: function(selection) {
return selection.email;
}
updated fiddle: updated fiddle
For me, without AJAX worked like this:
var select = $('.user-email-address');
var option = $('<option></option>').
attr('selected', true).
text(event.target.value).
val(event.target.id);
/* insert the option (which is already 'selected'!) into the select */
option.appendTo(select);
/* Let select2 do whatever it likes with this */
select.trigger('change');
Kevin-Brown on GitHub replied and said:
The issue is that your templating methods are not falling back to text if email is not specified. The data objects being passed in should have the text of the <option> tag in the text property.
It turns out the result parameter to these two methods have more data in them than just the AJAX response!
templateResult: function(result) {
console.log('templateResult', result);
return result.email || result.text;
},
templateSelection: function(selection) {
console.log('templateSelection', selection);
return selection.email || selection.id;
},
Here's the fully functional updated fiddle.
I am trying to make some useful directives with jQueryUI widgets for my AngularJS base application.
One of them works on "select" element and am ok with directives but only thing do not understand is this one:
When select list is populated from ajax request, how to tell to apply jqueryui widget when data is populated? Suppose it is with $watch but not sure how.
Edit:
In example I am trying to implement directive for the multiselect plugin.
Please note that I am simulating server reponse but putting everything in timeout.
Here is a code on plunker
You need to be $watching changes to the items list, then calling refresh on the multiselect plugin... Here is a plunk that shows the solution
angular.module('myui', [])
.directive('qnMultiselect', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, elem, attr) {
//set up the plugin.
elem.multiselect({ allowClear: false });
//get the source of the ngOptions
var parts = attr.ngOptions.split(' ');
var source = parts[parts.length - 1];
//watch the options source and refresh the plugin.
scope.$watch(source, function(value) {
elem.multiselect('refresh');
});
}
};
});
When you try adding a binding to an ObjectController it doesn't work.
App.FailController = Em.ObjectController.extend({
content: null,
myBinding: "App.router.myController" // <-- fails
});
Error:
Uncaught Error: assertion failed: Cannot delegate set('my', ) to the 'content' property of object proxy <.FailController:ember154>: its 'content' is undefined.
It tries adding it to the content property.
jsFiddle: demo
credits: to caligo-mentis who answered this over at github.
ObjectProxy delegates any call to set to the content property unless a property with the same name exists on the ObjectProxy instance. The simple solution is to define a property with the desired name prior to declaring the binding.
App.FailController = Em.ObjectController.extend({
my: null,
myBinding: "App.router.myController" // <-- works
});
jsFiddle: demo
Alternative solution:
App.FailController = Em.ObjectController.extend({
content: Ember.Object.create(),
my: function() {
return App.router.myController;
}.property('App.router.myController')
});
or better:
App.FailController = Em.ObjectController.extend({
content: Ember.Object.create(),
my: Ember.computed.alias('App.router.myController')
});