ArcGIS javascript api with JQuery mobile : would like to add Header with Navbar and Panels and Panel beneath Header but to do this I have to run some Jquery Mobile script to adjust panel height & position - having trouble mising Requirejs with JqueryMoble

2211
3
Jump to solution
05-25-2016 12:30 PM
AnastasiaAourik
New Contributor II

this CODE works fine on a page with just Jquery mobile but with my ARCGIS JAVASCRIPT API AND REQUIRE JS, I don't know where to put this function and how to mix Jquery mobile with require js HELP

<script>
$(document).on("pagecreate", "#index", function(e) {
  var activePage = this;
alert("in page create");
  $("#myMapLayers").one("panelbeforeopen", function() {
    var screen = $.mobile.getScreenHeight(),
      header = $(".ui-header", activePage).hasClass("ui-header-fixed") ? $(".ui-header", activePage).outerHeight() - 1 : $(".ui-header", activePage).outerHeight(),
      footer = $(".ui-footer", activePage).hasClass("ui-footer-fixed") ? $(".ui-footer", activePage).outerHeight() - 1 : $(".ui-footer", activePage).outerHeight(),
      panelheight = screen - header - footer;
    $('.ui-panel').css({
      'top': header,
      'min-height': panelheight
    });
  });
});

</script>

how do I write this and where when I have requirejs

Sorry, I am a real NEWBY!

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Anastasia,

  I think this is what you are looking for (comments on the changes in the code):

View solution in original post

3 Replies
RobertScheitlin__GISP
MVP Emeritus

Anastasia,

  I think this is what you are looking for (comments on the changes in the code):

AnastasiaAourik
New Contributor II

Thank you so much for providing me this solution!

What you taught me:

The ready () function is a pattern of requirejs and thus is called when all objects are created (that includes the pageone div so it made no sense to call that on(pageone, "pagecreate", PanelPlace);

In the jquery mobile sample I found , it did not use requirejs and thus no call to ready() function and thus their script had logic to trap the pagecreate of that div using  $(document).on("pagecreate", "#index", function(e)...

Is this correct?

Now since my PanelPlacer is called in ready () function [ a pattern of requirejs ] then I am not in a pagecreate event of that particular div object so 'this' is not right to reference here.  Just use the div id.  great so far.

Now I am not 100% clear on the $("#myMapLayers").one("panelbeforeopen", function()

particularly the .one  - what is the .one( method - guess I'll google that.

The calculation logic seems straightforward.

Many of us are now in the scramble to rewrite our Silverlight custom ArcGIS application to ArcGIS javascript - I decided to use ArcGIS js with jquery mobile just so I am mobile ready and device independent, even if right now, my main goal is to build our apps for standard laptop devices.

Once again, thank you very much for helping.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Annastasia,

I am not a JQuery expert (I prefer to use pure Dojo as that is what the JS API uses) but in Dojo the ready means that all dom elements are created and ready. You may want to refrain from saying requirejs as that is actually a third party library. The require portion of dojo code is handled by the dojo AMD loader.

In the jquery mobile sample I found , it did not use requirejs and thus no call to ready() function and thus their script had logic to trap the pagecreate of that div using  $(document).on("pagecreate", "#index", function(e)...

Is this correct?

Yes

from the JQuery docs:

.one()

Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

Similar to dojos on.once

0 Kudos