I am trying to build a tree from an xml file using jstree. I followed the documentation and looks like it is not working. Here is my code:
<html>
<head>
<title>Demo</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="C:\Users\jstree\jstree_pre1.0_fix_1\jquery.jstree.js"></script>
<Script Language="JavaScript">
$(function () {
$("#demo2").jstree({
"xml_data" : {
"ajax" : {
"url" : "books.xml"
},
"xsl" : "nest"
},
"plugins" : [ "themes", "xml_data" ]
});
});
</Script>
</head>
<body>
</body>
The XML is not formatted in a way that jsTree can include it.
http://www.jstree.com/documentation/xml_data
Two types of XML structures are supported - flat and nested:
<!-- FLAT -->
<root>
<item id="root_1" parent_id="0" state="closed">
<content>
<name><![CDATA[Node 1]]></name>
</content>
</item>
<item id="node_2" parent_id="root_1">
<content>
<name><![CDATA[Node 2]]></name>
</content>
</item>
</root>
<!-- NESTED -->
<root>
<item id="xml_1">
<content><name><![CDATA[Root node 1]]></name></content>
<item id="xml_2">
<content><name><![CDATA[Child node 1]]></name></content>
</item>
</item>
</root>
An alternative is to bring the XML document in and convert it into JSON, then transform it into a valid JSON or HTML data format.
Looks like container(#demo2) is missing. Try adding <div id='demo2'></div> under body tag.
Also make sure the jstree.js file is getting loaded correctly.
There is no such attribute for script called "language" (there may have been, but it's deprecated).
Place your code in script tags like the below code and try again
<script type="text/javascript">
//Your Code Here
</script>
Give a relative path instead of "url" : "books.xml". Replace it with the current path like "url" : "../Content/Xml/books.xml".
That might work.
Regards,
Amrutha
Related
i'm not getting any results when i try to display json data in the master page.It just displays no data whereas when i do the same thing in the main view i'm able to display the data.
Here is my code :
Mview.view.xml
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" displayBlock="true"
controllerName="com.firstproject.FirstProject.controller.Mview" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Master Page">
<content>
<List id="UserList" items="{users>/Users}" headerText="Users">
<items>
<ObjectListItem title="{users>name}"/>
</items>
</List>
</content>
</Page>
index.html
<!DOCTYPE HTML>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>FirstProject</title>
<script id="sap-ui-bootstrap"
src="../../resources/sap-ui-core.js"
data-sap-ui-preload="sync"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"com.firstproject.FirstProject": "./"}'>
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
var app = new sap.m.SplitApp({initialPage:"idMasterPage1"});
var mpage = sap.ui.view({id:"idMasterPage1", viewName:"com.firstproject.FirstProject.view.Mview",type:sap.ui.core.mvc.ViewType.XML});
var dpage = sap.ui.view({id:"idDetailPage1", viewName:"com.firstproject.FirstProject.view.Dview",type:sap.ui.core.mvc.ViewType.XML});
app.addMasterPage(mpage);
app.addDetailPage(dpage);
app.placeAt("content")
</script>
</head>
<body class="sapUiBody" id="content">
</body>
manifest.json
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "com.firstproject.FirstProject.i18n.i18n"
}
},
"users":{
"type":"sap.ui.model.json.JSONModel",
"uri":"model/listdata.json"
}
}
Why is this happening?
Also i'm getting this error with or without any list in the master view
Assertion failed: ManagedObject.apply: encountered unknown setting 'initialPage' for class 'sap.m.SplitApp' (value:'idMasterPage1')
The attribute initialPage is no longer usable as an attribute for the sap.m.SplitApp control. Instead you can use initialMaster association to avoid this message.
var app = new sap.m.SplitApp({initialMaster :"idMasterPage1"});
The entire manifest.json is not evaluated because it's not being loaded at all. Start from OpenUI5 walkthrough and review your code by comparing it with specifically the steps "Component Configuration" and "Descriptor for Applications".
In my sapui5 project i am using sap.m.MessageBox.confirm its working fine but when i use sap.m.MessageBox.error or sap.m.MessageBox.warning it shows error
Uncaught TypeError: undefined is not a function
I have added jQuery.sap.require("sap.m.MessageBox"); still the issue is not solved. please give solution for this problem
Thanks
Sorry for not posting the code earlier
Edited 1
View
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="trial.S1" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Title">
<content>
</content>
<footer>
<OverflowToolbar>
<ToolbarSpacer />
<Button id="errorId" text="Error" type="Accept"
press="fnOnerror" />
<Button id="confirmId" text="Confirm" type="Accept"
press="fnOnconfirm" />
</OverflowToolbar>
</footer>
</Page>
</core:View>
Conroller
jQuery.sap.require("sap.m.MessageBox");
sap.ui.controller("trial.S1", {
fnOnerror : function(oEvent){
sap.m.MessageBox.error("My error message");
},
fnOnconfirm : function(oEvent){
sap.m.MessageBox.confirm("My Confirm message")
}
});
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("trial");
var app = new sap.m.App({initialPage:"idS11"});
var page = sap.ui.view({id:"idS11", viewName:"trial.S1", type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
How should we give you a solution for your issue if your information is not enough? From what you describe it is hard to tell what you are doing wrong. Make sure to always add more information including code.
After getting the information from you we know now that you are using version 1.28.9 of UI5. If you would have checked the API docs at https://openui5.hana.ondemand.com/#docs/api/symbols/sap.m.MessageBox.html#.error then you would have known that the APIs you are using were introduced in 1.30!!!
I've just started with Orbeon forms and cannot figure out the simplest possible thing (I guess).
I want to have two input fields : one for name, the other for surname. Here is my code :
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xh="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xxf="http://orbeon.org/oxf/xml/xforms"
xmlns:xforms="http://www.w3.org/2002/xforms">
<head>
<xforms:model>
<xforms:instance>
<first-name xmlns=""/>
</xforms:instance>
<xforms:instance>
<second-name xmlns=""/>
</xforms:instance>
</xforms:model>
</head>
<body>
<xforms:input ref="/first-name">
<xforms:label>Sth</xforms:label>
</xforms:input>
<br/>
<xforms:input ref="/second-name">
<xforms:label>Sth2</xforms:label>
</xforms:input>
</body> </html>
For some reason on the page I can see only the first one (first-name input field). What am I doing wrong ?
Here is a working example:
<xh:html
xmlns:xh="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xxf="http://orbeon.org/oxf/xml/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xh:head>
<xf:model>
<xf:instance>
<form>
<first-name/>
<last-name/>
</form>
</xf:instance>
</xf:model>
</xh:head>
<xh:body>
<xf:input ref="first-name">
<xf:label>First name:</xf:label>
</xf:input>
<xf:input ref="last-name">
<xf:label>Last name:</xf:label>
</xf:input>
</xh:body>
</xh:html>
Experts,
I need to declare an dynamic ID into a XML view in my extended Fiori app. I need this because I need to set an image src based on Item value.
Is there a way to do something like this?
<Image id="myImage{MyModelProperty}" />
Regards,
Andre
The calculated field will serve your requirement.
1.Set the flag in bootstrap configuration data-sap-ui-xx-bindingSyntax="complex". Details is here
2.Define a formatter function in your controller js.
imageFormatter : function(value) {
var imageSrc = "myImage" + value;
return imageSrc;
}
3.Declare the Image in the XML view as following
<Image src="{path:'MyModelProperty',formatter:'.imageFormatter'}"/>
Hope it will solve your issue.
As far as I know IDs can not be built from model properties.
Why do you want to build the ID of the image instead of it's src property?
If you want to make sure the uniqueness of image ID, then just let the framework to handle it.
If you use the src property with model binding, changes of the underlying model property will take effect on the UI immediately. Just call the setProperty("MyModelProperty", "new_image_postfix") on your model instance.
Short example with a button and it's text binding:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.commons"
data-sap-ui-theme="sap_goldreflection">
</script>
<script type="text/javascript">
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({txt: "Sample"});
sap.ui.getCore().setModel(oModel);
var oButton = new sap.ui.commons.Button({id:"testBtn", text:"{/txt}", press:function(oEvent) { oModel.setProperty("/txt", "SampleUpdated") } });
oButton.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
I am using PhoneGap, jQuery mobile in Xcode. I have a local xml (data.xml) file with the following data
<?xml version="1.0" encoding="utf-8" ?>
<RecentTutorials>
<Tutorial author="The Reddest">
<Title>Silverlight and the Netflix API</Title>
<Categories>
<Category>Tutorials</Category>
<Category>Silverlight 2.0</Category>
<Category>Silverlight</Category>
<Category>C#</Category>
<Category>XAML</Category>
</Categories>
<Date>1/13/2009</Date>
</Tutorial>
<Tutorial author="The Hairiest">
<Title>Cake PHP 4 - Saving and Validating Data</Title>
<Categories>
<Category>Tutorials</Category>
<Category>CakePHP</Category>
<Category>PHP</Category>
</Categories>
<Date>1/12/2009</Date>
</Tutorial>
<Tutorial author="The Tallest">
<Title>Silverlight 2 - Using initParams</Title>
<Categories>
<Category>Tutorials</Category>
<Category>Silverlight 2.0</Category>
<Category>Silverlight</Category>
<Category>C#</Category>
<Category>HTML</Category>
</Categories>
<Date>1/6/2009</Date>
</Tutorial>
<Tutorial author="The Fattest">
<Title>Controlling iTunes with AutoHotkey</Title>
<Categories>
<Category>Tutorials</Category>
<Category>AutoHotkey</Category>
</Categories>
<Date>12/12/2008</Date>
</Tutorial>
And I have the following code in my html file:
<script type="text/javascript">
$(document).ready(function()
{
$.ajax({
type: "GET",
url: "data.xml",
dataType: "xml",
success: function(xml){
$(xml).find("Tutorial").each(function()
{
$("#output").append($(this).attr("author") + "<br />");
});
}
});
});
</script>
<script type="text/javascript">
function parseXml(xml)
{
$(xml).find("Tutorial").each(function()
{
$("#output").append($(this).attr("author") + "<br />");
});
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>The title</h1>
</div><!-- /header -->
<div data-role="content" id="output">
<--! XML DATA SUPPOSED TO BE DISPLAYED HERE BUT I GOT NOTHING HERE -->
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>The Footer</h4>
</div><!-- /header -->
</div><!-- /page -->
</body>
I am using Xcode for the output in the iPhone simulator and its not displaying anything inside the content which is supposed to be displayed.
Where did I do mistake or do I need third-party xml parser ?
Any suggestions would be a great help.
Thanks
I have found the solution for this and it worked perfectly for me.
Instead of using
$(document).ready(function() {
});
I wrote the following:
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(document).bind("mobileinit", function() {
// AJAX code goes here
});
<script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-
1.0.min.js"></script>
Its important to note that this code should be between the jquery-core and jquery-mobile link as I did above.