Hello,
I try to Select a DOM Element in an extra View. I Created a view with the view manager and pasted the Code for this View in the generated JavaScript File.
The problem here is, i am not able to select a specific DOM Element.
Here is a snippet of my Code.
View Home.html
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<script src ="components/home/index.js"></script>
</head>
<body>
<div id="scan" data-role="view" data-title="QR Scan" data-layout="main" data-model="app.home" data-show="app.home.onShow" data-after- show="app.home.afterShow">
<!-- START_CUSTOM_CODE_home -->
<!-- Add custom code here. For more information about custom code, see http://docs.telerik.com/platform/screenbuilder/troubleshooting/how-to-keep-custom-code-changes -->
<div id="BauNr">Baustellennummer</div>
<div data-role="footer">
<div data-role="navbar">
<button id="qrScan" data-role="button" data-icon="qr-e" data-click="scanQr">
Scan
</button>
</div>
</div>
<!-- END_CUSTOM_CODE_home -->
</div>
</body>
</html>
Home.js
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
var _BSTID="";
var _Bereich="";
var _SPLITCOUNT = 8;
// Add custom code here. For more information about custom code, see http://docs.telerik.com/platform/screenbuilder/troubleshooting/how-to-keep-custom-code-changes
function scanQr() {
cordova.plugins.barcodeScanner.scan(
function (result) {
var splittet = result.text.split(';');
if (splittet.length == _SPLITCOUNT) {
_BSTID = splittet[0];
_Bauleiter = splittet[1];
_BauleiterEmail = splittet[2];
_Bereich = splittet[3];
_Lokation = splittet[4];
_Gewerk = splittet[5];
_Auftraggeber = splittet[6];
_AuftraggeberEmail = splittet[7];
var infos = new QRInfos(_BSTID,_Bauleiter,_BauleiterEmail,_Lokation,_Gewerk,_Bereich,_Auftraggeber,_AuftraggeberEmail);
setQrInfos(infos);
} else {
alert("Qr Code doesnt meet requierements");
}
}, // success
function (error) {
console.log("error");
} // error
);
}
function setQrInfos(infos)
{
var html ="<div id='infos'>";
html += "<span id='bstnr'>Baustellennummer: "+infos.BstNr+"</span>";
html += "</div>";
var viewDiv = $('#BauNr');
viewDiv.append(html);
}
the Error occurs in the function setQrInfos where i try to select the div "BauNr".
I referenced to Jquery in the app.js file.
Thanks in advance
Baris
3 Answers, 1 is accepted
The code you pasted here seems correct. What exactly is the error message you see? If the problem persists, you can give me your app name in the Telerik Platform cloud and I will check what causes the problem. Alternatively, you can open a support ticket and send me a sample where I can reproduce the error.
Regards,
Tsvetina
Telerik
Rank 1
Thanks for your reply.
Sadly i get no Error.
In the Phone Emulator i saw, that my view gets rendered inside an Iframe, mybe thats the problem.
The Name of this App is Maengelmanagement.
Thanks in advance
Baris
When I opened this app and ran it on a device, the JavaScript error I saw was related to an undefined variable in your setQrInfos method:
var viewDiv = $(projectHost).contents().find("#BauNr");When I modified your code like that, the function does work on my side and the DOM content is updated:
function setQrInfos(infos) { var html = "<div id='infos'>"; html += "<span id='bstnr'>Baustellennummer: " + 123 + "</span>"; html += "</div>"; var viewDiv = $("#BauNr"); viewDiv.append(html);}Regards,
Tsvetina
Telerik