coldfusion application client side problem
Question
I have the following code: main.js --> https://controlc.com/5056ed32 With the following html:
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap SyncDB Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="cordova-1.5.0.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body onload="init()">
<div id="docs"></div>
</body>
</html>
In the server side i have a coldfusion application to manage the documents, with a page layout.
Server side is ok, its working.
But client side, when i run, its not working, I have to run syncDB() manually in debug console and I m getting following:
Access to XMLHttpRequest at 'http://localhost:8888/serverbackend/service.cfc?method=getupdates&returnformat=json&date=' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. jquery.min.js:4 GET http://localhost:8888/serverbackend/service.cfc?method=getupdates&returnformat=json&date= net::ERR_FAILED
How can I repair code to get working. Tell me us please!
If you need entirecode (serverbackend): http://www.raymondcamden.com/enclosures/dbsyncexample.zip
Note: if I browse following adreess in browser (http://localhost:8888/serverbackend/service.cfc?method=getupdates&returnformat=json)
I get json data in plain text withouth problem:
[{"deleted":false,"token":"1432493E-D7D7-455B-8C9D0D4F83D11E79","lastupdated":"August, 11 2020 10:19:02 +0200","title":"WSL2","body":"Ubuntu, XFCE y sonido"},{"deleted":false,"token":"891616CB-7D6B-42C3-9075B30CD83E5A78","lastupdated":"August, 11 2020 11:41:55 +0200","title":"Ubuntu","body":"20.04"},{"deleted":false,"token":"F597555D-2F71-40DF-A940FF7AB432F971","lastupdated":"August, 11 2020 16:44:15 +0200","title":"Win","body":"Content"}]
1 answers
solution1
0 2020-08-12 17:45:49
Sorry
So far I have successfully run the coldfusion application. And enable CORS in the app. With what I have achieved with main.js: running syncDB () from Chrome's debug console.
Two questions please: Why doesn't it load the html layout? Why aren't the elements clickable, why doesn't the layout load?
edited main.js:
function init() {
document.addEventListener("deviceready",startup);
startup();
}
var db;
var updateurl = "http://localhost:8888/serverbackend/service.cfc?method=getupdates&returnformat=json";
function dbError(e) {
console.log("SQL ERROR");
console.dir(e);
}
function startup() {
console.log("Starting up...");
db = window.openDatabase("main","1","Main DB",1000000);
db.transaction(initDB,dbError,dbReady);
}
function initDB(tx) {
//tx.executeSql("drop table docs");
tx.executeSql("create table if not exists docs(id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT, body TEXT, lastupdated DATE, token TEXT)");
}
function dbReady() {
console.log("DB initialization done.");
//begin sync process
if(navigator.network && navigator.network.connection.type != Connection.NONE) syncDB();
else syncDB();
}
function syncDB() {
/**
* Process is: What is my latest doc? if any
* Ask server for changes since then
*/
db.transaction(function(tx) {
tx.executeSql("select max(lastupdated) as lastdate from docs", [], function(tx,res) {
console.log("Will get items after "+res.rows.item(0).lastdate);
var date = res.rows.item(0).lastdate?res.rows.item(0).lastdate:'';
$.get(updateurl, {date:date}, function(resp,code) {
console.log("back from getting updates with "+resp.length + " items to process.");
//Ok, loop through. For each one, we see if it exists, and if so, we update/delete it
//If it doesn't exist, straight insert
resp.forEach(function(ob) {
console.dir(ob);
db.transaction(function(ctx) {
ctx.executeSql("select id from docs where token = ?", [ob.token], function(tx,checkres) {
if(checkres.rows.length) {
console.log("possible update/delete");
if(!ob.deleted) {
console.log("updating "+ob.title+ " "+ob.lastupdated);
tx.executeSql("update docs set title=?,body=?,lastupdated=? where token=?", [ob.title,ob.body,ob.lastupdated,ob.token]);
} else {
console.log("deleting "+ob.title+ " "+ob.lastupdated);
tx.executeSql("delete from docs where token = ?", [ob.token]);
}
} else {
//only insert if not deleted
console.log("possible insert");
if(!ob.deleted) {
console.log("inserting "+ob.title+ " "+ob.lastupdated);
tx.executeSql("insert into docs(title,body,lastupdated,token) values(?,?,?,?)", [ob.title,ob.body,ob.lastupdated,ob.token]);
}
}
});
});
});
if(resp.length) localStorage["lastdate"] = resp[resp.length-1].lastupdated;
displayDocs();
},"json");
});
}, dbError, function() {
console.log("I'm done with the transaction");
});
}
function displayDocs() {
db.transaction(function(tx) {
tx.executeSql("select title from docs order by title asc", [], function(tx, results) {
var s = "<h2>Docs</h2>";
for(var i=0; i<results.rows.length; i++) {
s += results.rows.item(i).title + "<br/>";
}
$("#docs").html(s);
});
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.