DOM not loaded before jQuery attempts to modify it even with events binded

Question

DOM not loaded before jQuery attempts to modify it even with events binded

I'm currently working on a mobile app with Cordova+Ionic+angular.js frameworks and I am encountering some troubles to execute jQuery actions when the application is fully loaded.
I've tried many things, such as launching the functions with a button and it works, the events 'deviceready' or 'document.ready' are also triggered at app loading and it displays an alert. So I assumed it comes from the content itself, I think it isn't loaded when jQuery tries to select it and so it return in the console :

[context: document, selector: "#listeTraitements", jquery: "1.11.2",
 constructor: function, toArray: function…]i

I've defined all my scripts in the head and I can't provide you with fiddles because It would work as it should. So I'll join extract of code.

Thanks for your help, at your disposal for further informations.

HTML

<ion-view title="navTitle">
    <ion-content class="padding">
        <h2> {{navTitle}}</h2>
        <br/>

        <div id="listeTraitements">I want to append text here!
        </div>

        <button id="nouveauTraitement"  class="button button-block button-outline  button-positive">
            Ajouter un nouveau traitement
        </button>

        <div >
            <input id="nomTraitement" type="text" class="test" placeholder="Nom du traitement"/>
            <button id="ajoutMedic" class="button button-icon icon ion-plus-round test" ui-sref="rechercheMedic" onclick="stockNomTraitement()"></button>
            <div>
                <button id="affichTab" onclick="time()">Time</button>
                <button id="affichTab" onclick="Ajout()">Ajout</button>
                <button id="delete" onclick="Supp()">Click !</button>
                <div id="Affichage">
                    <ion-list>
                        <ion-item ng-repeat="item in items">
                            Hello, {{te.nomTraitement}}!
                        </ion-item>
                    </ion-list>
                </div>
            </div>
        </div>


    </ion-content>

</ion-view>

Javascript

listMedocs = function(){

    alert('hello');
    $('#listeTraitements').append('FTG');
    console.log("");

}


$(document).ready(function(){
    listMedocs();
});

document.addEventListener("deviceready", function(){
    listMedocs();
},true);

EDIT SOLUTION :

Thanks shakib, indeed, it was because the view wasn't fully loaded.

I had to add in my controller this code :

$scope.$on('$ionicView.loaded', function(){
    iamreadytowork(); random function that need a fully loaded view.
});

jquery
angularjs
ionic-framework

Answer 1

I think you are trying to append a string of text to

    <div id="listeTraitements">I want to append text here!
    </div>

Try

 $('#listeTraitements').html('FTG');

instead, or create a new div/text element, and append that.

I hope that helps,

Answer 2

Thanks shakib, indeed, it was because the view wasn't fully loaded.

This is the solution. I had to add in my controller this code :

$scope.$on('$ionicView.loaded', function(){
    iamreadytowork(); random function that need a fully loaded view.
});