Select DOM Elements in View

4 posts, 0 answers
  1. Baris
    Baris avatar
    2 posts
    Member since:
    Nov 2015

    Posted 15 Dec 2015 Link to this post

    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

  2. Tsvetina
    Admin
    Tsvetina avatar
    1874 posts

    Posted 17 Dec 2015 Link to this post

    Hi Baris,

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Baris
    Baris avatar
    2 posts
    Member since:
    Nov 2015

    Posted 17 Dec 2015 in reply to Tsvetina Link to this post

    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

  4. Tsvetina
    Admin
    Tsvetina avatar
    1874 posts

    Posted 22 Dec 2015 Link to this post

    Hi 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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top