Use JavaScript or jQuery on page load [#2806805]

Hi, i has an issue related with my previous thread. I want to load the h2 tag "INFORMES" above an ul, so i did my code, but i cannot make it work with drupalgap.

Here's an example:

<script>
        function informesAdd() {
            var etiqueta = document.createElement("h2");
            var texto = document.createTextNode("INFORMES");
            etiqueta.appendChild(texto);

            var list = document.getElementsByClassName("ui-listview")[0];
            list.insertBefore(etiqueta, list.childNodes[0]);
       }
      </script>

      <script>
        $( document ).ready(function() {
          informesAdd();
        });
      </script>

This is what i put on the index.html, i tried jquery inline and on a module but i could manage to run it from the debug console. Is there any way to run the code when the page has finished loading? Thanks in advance!!!

Comments

Comment #1

26 September 2016 at 19:29

HomerO created an issue. See original summary.

Comment #2

tyler.frankenstein CreditAttribution: tyler.frankenstein commented 27 September 2016 at 00:00

Status:

Active

» Postponed (maintainer needs more info)

You're probably looking for one of these techniques:

The pageshow even is probably what you're looking for.

Comment #3

HomerO CreditAttribution: HomerO commented 27 September 2016 at 02:06

Appreciate your help. But in this case the page renders when you click it, then it makes an ajax/json call via drupal. So for example if i have this page:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
      <script>
        function informesAdd() {
            var etiqueta = document.createElement("h2");
            var texto = document.createTextNode("INFORMES");
            etiqueta.appendChild(texto);

            var list = document.getElementsByClassName("ui-listview")[0];
            list.insertBefore(etiqueta, list.childNodes[0]);
       }
      </script>

     

      <script>
        $( document ).ready(function() {
          informesAdd();
        });
      </script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>Welcome!</p>
    <a href="#pagetwo" class="ui-btn">Go to Page Two</a>
  </div>

  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div>

<div data-role="page" data-dialog="true" id="pagetwo">
  <div data-role="header" data-theme="b">
    <h1>Themed Dialog Box!</h1>
  </div>

  <div data-role="main" class="ui-content ui-listview">
    <p>I'm A Themed Dialog Box - My Header And Footer Is Black!</p>
    <a href="#pageone" class="ui-btn ui-btn-inline">Go to Page One</a>
  </div>

  <div data-role="footer" data-theme="b">
    <h1>Footer Text In Dialog</h1>
  </div>
</div>

</body>
</html>

It will works because the page exists, but you cannot see until it's called, but in drupalgap, the page renders (i mean only displays the source html code) after the function has been called. I don't know if it has to be with the time when the page renders or the ajax call.

Thanks in advance

Comment #4

tyler.frankenstein CreditAttribution: tyler.frankenstein commented 27 September 2016 at 14:07

Instead of using this:

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

Try just calling your function in a pageshow callback:

informesAdd();

Comment #5

HomerO CreditAttribution: HomerO commented 28 September 2016 at 15:53

Already tried but is not working... this is what i have in the console:

GET: http://xxxx//?q=drupalgap/listado-de-informes

200 - OK

and what i want is for example:

GET: http://xxxx//?q=drupalgap/listado-de-informes

200 - OK

do something after that... (run function)

Thanks in advance!!!!

Comment #6

tyler.frankenstein CreditAttribution: tyler.frankenstein commented 28 September 2016 at 19:52

http://api.drupalgap.org/7/global.html#hook_services_postprocess

function my_module_services_postprocess(options, result) {
  console.log(options); // Use this to inspect the values for options.service and options.resource values.
  if (options.service == 'foo' && options.resource == 'bar') {
    console.log('doing something....');
  }
}