SAPUI5 using CDN - 404 errors - cdn
I have developed a form using SAPUI5 and decided to try switching from local resouces (i.e. the UI5 libs) to using the CDN. As soon as I do I start receiving 404 errors detailed below. Can anyone tell me why and how to correct this problem?
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>Vendor Accreditation - Purchaser's Information & Justification</title>
<!--src="https://openui5.hana.ondemand.com/1.32.8/resources/sap-ui-core.js"app/resources/sap-ui-core.js-->
<script id='sap-ui-bootstrap'
type="text/javascript"
src='https://openui5.hana.ondemand.com/1.32.8/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m'
data-sap-ui-compatVersion='edge'
data-sap-ui-preload='async'>
</script>
<script>
jQuery.sap.registerModulePath('views', 'app/views/');
jQuery.sap.registerModulePath('controllers', 'app/controllers/');
sap.ui.getCore().attachInit(function () {
new sap.m.Shell({
app: new sap.ui.xmlview({
viewName: "views.Form1"
})
}).placeAt("content");
});
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
Form1.view.xml
<mvc:View
controllerName="controllers.Form1"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="ap.ui.core.mvc"
displayBlock="true">
<app>
<pages>
<Page title="Section 1 - PURCHASER'S Information and Justification" showFooter="true">
<Panel headerText="1.1 Requestor">
<InputListItem label="Name:">
<Input value=""></Input>
</InputListItem>
</Panel>
<Panel headerText="1.2 Vendor">
<List>
<InputListItem label="Title:">
<Input value="{/title}"></Input>
</InputListItem>
<InputListItem label="Name:">
<Input value="{/name}"></Input>
</InputListItem>
<InputListItem label="Street:">
<Input value="{/street}"></Input>
</InputListItem>
<InputListItem label="City:">
<Input value="{/city}"></Input>
</InputListItem>
<InputListItem label="State:">
<Input value="{/state}"></Input>
</InputListItem>
<InputListItem label="ZIP Code:">
<Input value="{/zipcode}"></Input>
</InputListItem>
<InputListItem label="Country:">
<Input value="{/country}"></Input>
</InputListItem>
<InputListItem label="Phone:">
<Input value="{/phone}" type="Phone"></Input>
</InputListItem>
<InputListItem label="Email:">
<Input value="{/email}" type="Email"></Input>
</InputListItem>
</List>
</Panel>
<Panel>
<Toolbar>
<ToolbarSpacer/>
<Button text="submit" type="Accept" press="onSubmit"></Button>
<ToolbarSpacer/>
<Button text="cancel" type="Reject" press="onCancel"></Button>
<ToolbarSpacer/>
</Toolbar>
</Panel>
</Page>
</pages>
</app>
</mvc:View>
Form1.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/m/MessageToast",
"sap/ui/model/odata/ODataModel"//,"sap/ui/model/odata/v2/ODataModel"
], function (Controller, JSONModel, MessageToast, ODataModel) {
"use strict";
return Controller.extend("controllers.Form1", {
onInit: function () {
/*
var model = {
title: 'Company'
};
model = new JSONModel(model);
this.getView().setModel(model);
*/
//var oModel = new ODataModel("https:/<server name removed>/sap/opu/odata/sap/zvendorint/", true);
/*
var oModel = new ODataModel("https://<server name removed>/sap/opu/odata/sap/zvendorint/", undefined, true);
sap.ui.getCore().setModel(oModel, "myModel");
this.getView().setModel(oModel);
oModel.setHeaders(
{
"X-Requested-With": "XMLHttpRequest",
"X-CSRF-Token": "Fetch"
});
oModel.read("/ZVendorIntSet('')", undefined, [parseInt(Math.random() * 100000)], false,
function (oData, response) {
var data = OData;
},
function (oError) {
alert('Error occurred!');
}
);
*/
},
onSubmit: function () {
MessageToast.show("Submitted!");
var oModel = sap.ui.getCore().getModel("myModel");
data.Title = "Company";
data.Name = "Michael Freake";
oModel.setHeaders(
{
"X-Requested-With": "X",
"X-CSRF-Token": "Fetch"
});
oModel.create("/ZVendorIntSet", data, null, {
function(oData, response) {
alert("Successfully saved to SAP");
},
function(oError) {
alert("Error saving data to SAP");
}
});
},
onCancel: function () {
MessageToast.show("Cancelled!");
}
});
});
Error
Project Structure
*Note that when I use the below script in my index.html file, everything works fine.
<script id='sap-ui-bootstrap'
type="text/javascript"
src='app/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m'
data-sap-ui-compatVersion='edge'
data-sap-ui-preload='async'>
</script>
It seems you have a type... In your Form1.view.xml replace app with App (I mean the control tag). Then it should work. This can also not have worked with you local ui5...
Related
Close modal with search results when clicking outside?
I'm trying to close a modal div with AJAX search results, but nothing works.
I have tested several solutions on SO but nothing works?!
This is the code I have right now:
<form action="/search" method="get">
<input type="hidden" name="qt" value="main">
<div class="searchBox" id="search">
<input type="text" name="q" id="find" placeholder="Search here..." class="mainSearchField" />
<div class="searchBoxResults" id="search_items"></div>
</div>
</form>
<script>
$(document).ready(function() {
$( "#find" ).keyup(function(){
fetch();
});
});
function fetch() {
var val = document.getElementById("find").value;
$.ajax({
type: 'post',
url: '/include/functions/searchFetch.php',
data: {
q:val
},
success: function (response){
document.getElementById("search_items").innerHTML = response;
}
});
}
</script>
UPDATE
This is what I have tried to add, to the above:
window.onclick = function(event) {
if (event.target.id != "search_items") {
$("search_items").hide();
}
}
Ajax - How to get percentage of progress of page load (Dotnetnuke C#)
Script:
$(document).ready(function () {
$('#btnNext').click(function (e) {
e.preventDefault();
});
var options = {
beforeSend: function () {
$("#progress").show();
//clear everything
$("#bar").width('0%');
$("#message").html("");
$("#percent").html("0%");
},
uploadProgress: function (event, position, total, percentComplete) {
$("#bar").width(percentComplete + '%');
$("#percent").html(percentComplete + '%');
},
success: function () {
$("#bar").width('100%');
$("#percent").html('100%');
},
complete: function (response) {
$("#message").html("<font color='green'>" + response.responseText + "</font>");
},
error: function () {
$("#message").html("<font color='red'> ERROR: unable to upload files</font>");
}
};
$("#form1").ajaxForm(options);
});
HTML:
<form id="form1" method="post" enctype="multipart/form-data">
<div>
<input type="file" size="60" name="myfile" />
<input type="submit" value="Ajax File Upload" />
<div id="progress">
<div id="bar"></div>
<div id="percent">0%</div>
</div>
<br />
<div id="message"></div>
</div>
I was tested with Webform (C#). It worked. But, Dotnetnuke not working. (Postback and nothing is changed). Have a different way for Dotnetnuke to get percentage of progress of page load?
-- Thank for reading--
Try removing the <form> tag around your module because DNN is already writing a form tag to the page surrounding the theme and modules. You can change the last line in your jquery logic to reference the form already loaded by DNN.
$("form:first").ajaxForm(options);
Two-way binding doesn't work inside Ractive.components
I want to divide layout for some components and i used Ractive.components for it.
All data are correct in component and used in it (like id and color).
But variable for two-way binding don't used correct.
I have one javascript behavior and three html layouts, and two layout from them don't work.
JS behavior
var config = [
{id: 1, color: '#cc8'},
{id: 2, color: '#c88'},
{id: 4, color: '#8c8'},
{id: 8, color: '#8cc'}
];
var Panel = Ractive.extend({
el: document.body,
template: '#panel',
data: function() {
return {
config: config,
filters: [4,8]
};
},
components: {
switcher: function() {return 'Switcher';}
}
});
var Switcher = Ractive.extend({
template: '#switcher'
});
Ractive.components.Switcher = Switcher;
var panel = new Panel();
HTML layout 1 (doesn't work)
<script id="panel" type="text/ractive">
<h4>Doesn't work: {{filters}}</h4>
{{#each config}}
<switcher name="{{filters}}">
filter #{{id}}
</switcher><br/>
{{/each}}
<br/>
</script>
<script id="switcher" type="text/ractive">
<label
class="switcher"
style="color:{{color}};">
<input
type="checkbox"
value={{id}}
name={{name}}
class="switcher__input">{{>content}}
</label>
</script>
HTML layout 2 (doesn't work)
<script id="panel" type="text/ractive">
<h4>Doesn't work too ("~/"): {{filters}}</h4>
{{#each config}}
<switcher name="{{~/filters}}">
filter #{{id}}
</switcher><br/>
{{/each}}
<br/>
</script>
<script id="switcher" type="text/ractive">
<label
class="switcher"
style="color:{{color}};">
<input
type="checkbox"
value={{id}}
name={{name}}
class="switcher__input">{{>content}}
</label>
</script>
HTML layout 3 (work)
<script id="panel" type="text/ractive">
<h4>Work: {{filters}}</h4>
{{#each config}}
<label
class="switcher"
style="color:{{color}};">
<input
type="checkbox"
value={{id}}
name={{filters}}
class="switcher__input">
tags #{{id}}
</label><br/>
{{/each}}
</script>
And live demo
How to make right Ractive.component with two-way binding?
P.S. Sorry for my English..
tinymce v4 jquery: how to catch onkeyup?
I'm trying to enable submit button when some form fields are filled. I've found a piece of javascript code that works, but I've a problem with textarea fiel which is tranformed by tinymce... How to catch it?
My html:
<form id="form_id1">
<fieldset>
<legend>Personal</legend>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" /><br />
Address : <textarea size="30"></textarea><br />
</fieldset>
<input type="submit" value="Submit" />
</form>
My javascript:
$(document).ready(function()
{
$('#form_id1 input:submit').attr("disabled", true);
var textCounter = false;
$('#form_id1 input:text, #form_id1 textarea').keyup(check_submit);
function check_submit() {
$('#form_id1 input:text, #form_id1 textarea').each(function()
{
if ($(this).val().length == 0) {
textCounter = true;
return false;
}
else {
textCounter = false;
}
});
$('#form_id1 input:submit').attr("disabled", textCounter);
}
});
My tinymce init:
tinymce.init({
selector: "textarea",
language: 'fr_FR',
image_advtab: true,
menubar:false,
forced_root_block: false,
plugins: ["link","code","media","image","textcolor", "emoticons"],
toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons",
});
Thanks
In tinymce init add:
setup: function(ed) {
ed.on('keyup', function(e) {
console.log('Editor contents was modified. Contents: ' + ed.getContent());
check_submit();
});
}
Keep in mind you might need to find your editor instance rather than the textarea to get the actual value. If you made the textarea have id="textarea-tiny-mce"
tinymce.get('textarea-tiny-mce').getContent();
window.onload = function () {
tinymce.get('content').on('keyup',function(e){
console.log(this.getContent().replace(/(<[a-zA-Z\/][^<>]*>|\[([^\]]+)\])|(\s+)/ig,''));
});
}
tinymce.init({
setup: function (editor) {
editor.on('keyup', function (e) {
console.log(e);
//custom logic
});
}
});
Please make below changes in tinymce.init
tinymce.init({
selector: "textarea",
setup: function(editor) {
editor.on('keyup', function(e) {
console.log('edited. Contents: ' + editor.getContent());
check_submit();
});
}
language: 'fr_FR',
image_advtab: true,
menubar:false,
forced_root_block: false,
plugins: ["link","code","media","image","textcolor", "emoticons"],
toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons",
});
See the below reference for more details.
https://www.tiny.cloud/docs/advanced/events/
Data binding not working but works fine in tutorial
I am new to knockout.js. I am following this tutorial. It is working fine on knockout site but not for me. Error console is also not showing any error.
Below is my code
View:
Tasks
<form data-bind="submit: addTask">
Add task: <input data-bind="value: newTaskText" placeholder="What needs to be done?" />
<button type="submit">Add</button>
</form>
<div >
<ul data-bind="foreach: tasks, visible: tasks().length > 0" id="testing">
<li>
<input type="checkbox" data-bind="checked: isDone" />
<input data-bind="value: title, disable: isDone" />
Delete
</li>
</ul>
</div>
View Model:
<script>
function Task(data) {
this.title = ko.observable(data.title);
this.isDone = ko.observable(data.isDone);
}
function TaskListViewModel() {
// Data
var self = this;
self.tasks = ko.observableArray([]);
self.newTaskText = ko.observable();
self.incompleteTasks = ko.computed(function() {
return ko.utils.arrayFilter(self.tasks(), function(task) { return !task.isDone() });
});
// Operations
self.addTask = function() {
self.tasks.push(new Task({ title: this.newTaskText() }));
self.newTaskText("");
};
self.removeTask = function(task) { self.tasks.remove(task) };
}
ko.applyBindings(new TaskListViewModel(),document.getElementById("testing"));
</script>
The problem is that the ko.applyBindings doesn't apply to all data-bind attributes. Move your "testing" id to a place where it covers all the HTML code with the relevant "data-bind" attributes.