jQuery Forum

I have an ongoing issue with users clicking on buttons and intermittently generating duplicate events. I've been using a variety of events to catch the clicks sooner rather than wait the 300 msec (like vmousedown), but this most recently happened with a vclick event.

Since it's obvious that neither jQuery or jQM is doing anything to prevent this, and it's also not a bug in those due to the uncommon nature of it (I can replicate it now and then, but it takes lots of attempts to catch it once), I'm assuming that it's due to something happening in the user-to-screen interaction that I can't stop, so I need to handle it in my code.

Has anyone figured out a good way to do this, or maybe I'm missing something and there actually is a problem with jQM? My method seems rather crude: I set a variable like "btnWasClicked" to false, and then in the method that handles the click I cancel the handling if it's true, and if it's false I set it to true and proceed, only setting it to false at the end of the event. I could adjust on the backend too but that gets pretty tedious.

I've been trying to find a way to force the page spinner to display, and haven't had success. My challenge is that once the page loads, jQM figures that it's loaded and doesn't feel like showing the spinner. However, since I dynamically load content into the page using Ajax (bound to the pagebeforeshow event usually), if that takes a while to load then the user is just looking at a blank page, which isn't pretty.  Using the settings that jQM makes available, I've found that all I can do is to tell it whether or not to load the image when it thinks it should be (i.e., up until it thinks the page is loaded, not until my Ajax is done), and to change the text it shows when it does, both of which are not that useful.

If not, does anybody know where jQM does this loading itself? It's just a hidden div in the DOM I believe, so it should be easy to control. This isn't a huge deal, just fractions of a second of white, but I'm concerned that Apple isn't going to like that...  There are other approaches I could use, like doing more fine manipulation of the page rather than reloading the entire thing just to catch any updates, but that's a lot more work than I want to do right now.

I haven't yet moved to 1.1, I'm awaiting fixes in 1.1.1, but would love to use data-mini.  Is it possible to retrofit it easily into 1.0.1?

I discovered that the 1.1 CSS has 23 references to mini whereas the JS has none.  Does this mean that if I moved over the CSS items into my CSS that it would work?  I assume that the JS is doing some generic processing to convert data-mini="true" into the appropriate CSS classes, though.  If that's the case, could somebody point me to the code is the JS that does that? I'd rather not try to figure out how to modify all 23 of those if I can avoid it.

Thanks in advance!

I have several pages that I update dynamically with AJAX.  When I'm done with the update, I call

1. $("#page").trigger('create');

After this happens, on one page in particular, I need to scroll to the bottom of the page.  I've been using pageshow as the event to use to trigger it, but I have to bake into it a timeout (using setTimeout) of at least 500, and that seems to need to increase as the page gets bigger in order to ensure it scrolls after it's done rendering.

It also doesn't work if I use the scroll functions immediately after the trigger, as that seems to occur asynchronously.  I'm using iScroll4.

What event can I use that will reliably give me the completion of the rendering job?  Would it be pageinit?

I have an AJAX call (code below) that should be setting the Accept header to be sent in the server request.  However, it is not doing that at all (in fact, there is no Accept header sent).  This seems to have been working okay with any AJAX call other than the first from my website, for no obvious reason, although now I can't get past the first so I'm not sure if that was due to something unrelated or not.

1.             $.ajaxSetup({cache:false});
2.             $.ajax({url:mhrxDeployDir + "loggedIn.jsp",
3.                 dataType:"json",
4.                 accepts:"application/json",
5.                 type:"GET",
6.                 success:function(data) {
7.                   // etc code

What I'm trying to do here is request a JSP page that will respond with some JSON.  There is a filter in the middle that determines if I'm making AJAX calls or non-AJAX calls, and handles the security differently depending on which it is.  However, the above is not setting "application/json" in the Accept header.

I did find another thread about headers not being sent in a CORS request (which this counts as), however that seemed to be an issue with custom headers, and Accept is a normal one (thread here: https://forum.jquery.com/topic/ajax-not-setting-options-correctly-1-7-1).

As it is, I'll likely have to add a data setting to every AJAX request to specify that it is AJAX, but that's a bit of a pain. Any thoughts?

Does anybody have a working iScroll implementation with jQuery Mobile that they could share?  I tried to get it to work on my page, but could not succeed, and am now revisiting it because my current implementation isn't optimal from the UX standpoint.

First, just to be clear, this question is out of curiosity and not meant to be pushy; I'm trying to schedule certain things in the dev pipeline and this may change some of my schedule.

I have what I think is a problem with the sequence in which the JS is executed in my app, which uses jQM inside of PhoneGap on the iOS. Depending on where I put the PG initialization code ( document.addEventListener("deviceready", onDeviceReady, false); and the onDeviceReady() function), it either fires or it doesn't. Specifically, I think that the PG code has already triggered the deviceready event by the time I get around to binding it, and therefore that code doesn't work, but if I make it less complex (i.e., empty) then I'm able to catch it. 

My app has pages where the list of items in the content pane would be longer than the viewport in the browser will allow.  Since the latest item is at the bottom, I would like to scroll down to the bottom.

The problem is that there is no "scrollBottom" function in jQuery, only scrollTop, and the silentScroll function seems to be incredibly unreliable across different browsers.  This is exacerbated by the fact that there is no page event that reliably fires after the page is completely done loading. 

I'm trying to do math on the size of the page elements, and then call silentScroll to move to the bottom, and trying to trigger that on the pageshow event (supposedly the last to fire, right?).  The iOS browser will give different values for heights for the exact same content on different loads, so despite being 100% consistent in content, it's not giving me back the same values time to time on the same pageshow event.  I've read that pageshow isn't really after everything is loaded, though, so that could be the problem.  It might also be my CSS selectors, but I think the below should accurately be targeting the content div.

Anybody have done this before and could point me in the right direction?

Thanks,
Mike

If it helps, the formula I'm using to calculate is below.

1. var openViewingHeight = ($("body").height() - $('div[data-role="header"]').height() - $('div[data-role="footer"]').height());
   if (openViewingHeight < $('div[data-role="content"]').height()) { // height of space to view is less than the stuff to be viewed
          $.mobile.silentScroll($('div[data-role="content"]').height() - openViewingHeight);
   }
   

I've spent the better part of the past day becoming frustrated with trying to correctly pass parameters between dynamic pages in jQM, and posting here in the hopes that somebody can point me to the current correct answer. I'm using jQM 1.0.1 and jQuery 1.6.4.

My app has the following setup:
- About 6 external jQM HTML pages (i.e., NOT all in one jQM page, this is relevant because the hash discussion gets confused here)
- Basic flow:
      - User logs in on login.html, gets passed to page A with "user" parameter (href="pageA.html?user=1")
      - Page A sets "user" parameter into localstorage (since it's used on all other pages, and doesn't change) from the URL parameter
      - Page A makes AJAX query to backend server for list of items, triggered by "pageshow" event, with user ID from localstorage
      - Page A loads the list, giving each item a dynamically generated link with "item" parameter (href="pageB.html?item=1")
      - User selects a link, goes to Page B
      - Page B makes AJAX query to backend server for detailed item info, triggered by "pageshow" event, with user ID from localstorage and item ID from URL parameter
      - Page B loads the detailed item info

In all cases, I'm using a small piece of JavaScript that pulls the parameters from the window.location.href that works well, and sets them into a variable that I can use elsewhere.

1. function getUrlVars() {
       var vars = [], hash;
       var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
       for(var i = 0; i < hashes.length; i++)
       {
           hash = hashes[i].split('=');
           vars.push(hash[0]);
           vars[hash[0]] = hash[1];
       }
       return vars;
   }
   

The problem I can't get around in the above scenario is that there seems to be a number of gotchas in various jQM events, and points where they trigger or don't, many of which are undocumented, and I can't figure out the right approach.

Specifically, in the above scenario, Page A succeeds at loading the dynamic info on the first load, however Page B doesn't.  Reason?  The "pageshow" event on Page B occurs before the window.location.href is changed.  If I delay the script, using anything (like an alert or timer), then it works correctly.  I found a bug report that was closed that says this was fixed a long time ago, but it obviously hasn't been (in 1.0.1 anyway). Documentation refers to pagebeforechange event, which also doesn't work because it's too early.  Most of the other discussions about this topic are talking about passing parameters to internal pages, and the hash discussion gets involved, but I don't think that's relevant to my situation.  The only example in the documentation also deals with this, and no example of external parameter passing exists that I've been able to find.

Anyway, I'm probably missing some nuance, or an event that I could reliably use to do this.  Hoping somebody can point me in the right direction before I start doing some really hacky things to make it work (writing everything to localstorage from click events on every link - tedious).

Thanks in advance,
Mike

TL;DR - Need help finding either: 1) proper event to use where window.location.href will be reliably updated and I can parse parameters from it, or 2) better method for passing parameters to external pages and parsing them

EDIT - realized that jQuery 1.7.1 wasn't supported with jQM 1.0.1, so swapped to 1.6.4, but that didn't fix the above issues.

Hi all,

I placed a textarea in a form inside a fixed footer, essentially replicating the text message entry look and feel of the iPhone.  I used an input of type text originally, but that doesn't expand in height dynamically so users can't see what they're sending if it goes beyond a certain length.  I switched to a textarea, but now when the user goes beyond the original size, the fixed footer scrolls downward and off the bottom of the screen.  If I scroll the screen at all, it repositions correctly with textarea expanding upwards. Based on looking at the jquery mobile javascript, I think it's increasing the size of the textarea without making any commensurate adjustments to the footer or the rest of the page, and maybe triggering that will fix the issue.

HTML below.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>Page</title>
<link href="jquery.mobile-1.0.1/jquery.mobile-1.0.1.css" rel="stylesheet" type="text/css"/>
<script src="jquery.mobile-1.0.1/jquery-1.7.1.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0.1/jquery.mobile-1.0.1.js" type="text/javascript"></script>
</head>

<body>
<div data-role="page" id="main_page" data-title="">
  <div data-role="header" data-position="fixed"> <a href="" data-icon="arrow-l" data-theme="c" class="ui-btn-left" data-rel="back" data-ajax="false">&nbsp;&nbsp;</a>
    <h1 id="name">Name</h1>
  <div data-role="content">
    <div name="msgs" id="msgs">
      <!-- stuff is dynamically added here in simple <p> elements -->
    </div>
  </div>
  <div data-role="footer" data-position="fixed" data-id="footer">
    <div class="" id="status">
      <p class="status">Placeholder text</p>
    </div>
    <div data-role="fieldcontainer" class="ui-hide-label ui-body-c">
      <form id="form" action="message" method="post">
        <div>
          <fieldset class="ui-grid-a">
            <div class="ui-block-a">
              <label for="new_msg_text">New Message:</label>
              <textarea id="new_msg_text" placeholder="Enter message"></textarea>
            </div>
            <div class="ui-block-b">
              <span class="msg_text_send_btn">
              <button type="submit" data-theme="b">Send</button>
              </span> </div>
          </fieldset>
        </div>
      </form>
    </div>
    <div data-role="navbar">
      <ul>
        <li><a href="home.html" class="ui-btn-active ui-state-persist">Home</a></li>
        <li><a href="page2.html">Page 2</a></li>
        <li><a href="page3.html">Page 3</a></li>
      </ul>
    </div>
  </div>
</div>

</body>
</html>

The relevant section of the jQuery Mobile Javascript is pasted below (v 1.0.1, starting at line 5474). I've added a comment where I think there needs to be something added to move the textarea upwards by extraLineHeight, or force refresh of the page element, but don't know enough about the jQuery script to figure out what that change should be. I tried sticking in input.trigger("change"); there, but without any luck.
        // Autogrow
        if ( input.is( "textarea" ) ) {
            var extraLineHeight = 15,
                keyupTimeoutBuffer = 100,
                keyup = function() {
                    var scrollHeight = input[ 0 ].scrollHeight,
                        clientHeight = input[ 0 ].clientHeight;

                    if ( clientHeight < scrollHeight ) {
                        input.height(scrollHeight + extraLineHeight);
                        // I think there needs to be something here to move this upwards
                    }
                },
                keyupTimeout;

            input.keyup(function() {
                clearTimeout( keyupTimeout );
                keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer );
            });

            // binding to pagechange here ensures that for pages loaded via
            // ajax the height is recalculated without user input
            $( document ).one( "pagechange", keyup );

            // Issue 509: the browser is not providing scrollHeight properly until the styles load
            if ( $.trim( input.val() ) ) {
                // bind to the window load to make sure the height is calculated based on BOTH
                // the DOM and CSS
                $( window ).load( keyup );
            }
        }


Anyone have thoughts? I tried sticking in input.trigger("change"); there, but without any luck.

Thanks in advance!
Mike