jQuery Forum

In my js file there is a section for utility functions. I eventually added a section for jQuery utility functions (shown below). The code is in the middle of the file but not inside of any closure. The script tag for the file comes after the sript tag for jQuery.

Some times, and as of yet I don't know how to reproduce this, the code will run an infinite loop giving the error that it can't find the variable jQuery on line 37 of the code shown below. jQuery is definitely defined as the app is almost entirely jQuery. Also, most of the time there is no problem. 

What on earth could be causing this?

 

2. (function ($) {
3.     $.fn._draggable = function (draggable) { // for when html5 draggable and jquery ui draggable are not available. 
4.         // if there is only one element to be made _draggable an id for that element is not required. 
5.         // if more than one element is to be made draggable a unique id for each element should be used to avoid event handling collissions.
6.         var $elm = this;
7.         var id = $elm.attr("id") ? $elm.attr("id") : "tmp";
8.         if (draggable == false) {
9.             $elm.off("mousedown." + id);
10.             $(document).off("mouseup._draggable." + id);
11.             $(document).off("mousemove._draggable." + id);
12.             return;
13.         }
14.         else if(draggable == true) {
15.             $elm.css("position", "absolute");
16.             $elm.on("mousedown." + id, function() {
17.                 var position = $elm.position();
18.                 var oL = event.pageX - position.left;
19.                 var oT = event.pageY - position.top;
20.                 $(document).on("mousemove._draggable." + id, function (event) {
21.                     $elm.css({
22.                         top: event.pageY - oT,
23.                         left: event.pageX - oL
24.                     });
25.                 });
26.                 $(document).on("mouseup._draggable." + id, function() {
27.                     $(document).off("mouseup._draggable." + id);
28.                     $(document).off("mousemove._draggable." + id);
29.                 });
30.             });
31.         }
32.     };
33. 
    
34.     $.fn.tagName = function () {
35.         return this.prop("tagName").toLowerCase();
36.     };
37. })(jQuery);

In the wrong context the functionality of the selector won't hurt anything. But the right context is maybe 1 out of 100 of the elements selected.

Do I pay a performance penalty for this? It's something very broad like:

$(document).on("click", "li", function() { $("[blocked]").removeClass("ui-disabled"); } );

Where li is the selector I am concerned about being too broad. There are maybe 200 li's on the page.

live is deprecated and the docs point to on. 

but live attached the event handler now and in the future. does on do the same thing. i thought it behaved like bind. if on does behave like bind, and not live, is there a way to get on to behave like live?

But this is what happens. 

1. textbox on page

2. navigate to dialog

3. select value on dialog

4. return to page with textbox - textbox is populated with value from dialog

5. do this again - this time the text box does not appear to change

however, if you open up the web inspector and remove jqm's clases the value is there. anyone experienced with jqm is familiar with these hijinks. does anyone know what this causing this particular problem?

Here is the input. If you take out the class attribute it works fine.

<input type="text" id="abc" name="abc" style="border-top-width: 4px; border-top-style: solid; border-top-color: green; " cid="" onchange="" value="Hello World: 4" disabled="" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset">

in my context the page transitions to a jqm page with an iframe in it. that iframe is a third party api which maybe does some redirects of its own and has several iframes in it. however since this is all in an iframe it shouldnt matter. 

when you click the back button it first goes "back" on the iframe and then on the second click it goes back to the previous jqm page. i don't have all the specifics on the iframes but from what i have read they should not be added to their parent pages history and yet that is exactly what seems to be happening.

any idea whats going on or how to solve this? mind you it's easy to just have the jqm back button point to the previous page programatically but then the browsers back button will still be messed up. plugins are not an option.

I'm using the jqm loading message between page transitions. The transitions work like this:

click -> beforepagechance $.mobile.showPageLoadingMsg(); -> ajax to get content -> do a little work on the returned content/add to DOM -> allow jqm to enchance content -> $.mobile.changePage(); -> pagechange/$.mobile.HidePageLoadingMsg();

This works good enough. When you add an alert, say for debugging or window.onunload, at the end of this process it freezes safari and crashes an ipad2 and an android tablet.

setTimeout(){f,0} works in some situations but not all.

My question is really actually simple. Does anyone know why $.mobile.showPageLoadingMsg() in conjunction with an alert/choose and a page transition causes the browser to freeze or crash and is there any way to get around this?

Basically, I need to do some checks on click of the back button. The back button doesn't work as expected because there is an iframe in the history. So I need to hook into the back button event and add a little logic.

Is there a way to do that? Would a better approach be to just make my own button that looks and acts like the jqm back button?

I'm talking about things like grids, media players, buttons, upload controls, canvas (vs SVG/Raphael?). I'm not talking about jQuery's cross-browser benefits or its write less do more philosophy.

On tablets a form might look good but then when you view the same form on an android phone or iphone it might look horrible. In the next version of jqm they are adding data-mini="true" for form elements so you can check if the device is a phone and then choose whether or not to apply the data-mini="true" attribute.

I've made a few examples but they all look different on different devices and browsers. I also made a video which illustrates the line break problem. I put an example of data-mini here and css sizing here. The css sizing one either looks the best or completely incomprehensible depending on how you view it (desktop safari works best) but the zoom is set to 10% on all elements so if it looks completely horrible that is why.

this guy says to use width 70% on the class but there are two problems with that. 

A video can be seen here.

This way I can set min-height and min-width so that resizable can't make the element smaller than it should be based on the current theme.

Only lists onSelect which I think is instant so if I used that callback it would be doing the calculation on the same theme. ive tried this on .resize({start}) but that has other problems.

What is it? How do I use it? This is in a jqm context but not sure if it only applies to jqm.

Skimming through jqm docs I came up with $.data() here http://jquerymobile.com/blog/2011/04/21/jquery-mobile-team-meeting-april-21-2011/ but again it's not really in the context in which I found it. 

Any help?

First of all, I have this working. 

If you just update the attribute directly the sort does not work. However if you do THIS...

it does work. No call to .listview("refresh") is necessary to get it working. My question is, why does replacing the listview with an exact copy of itself have any effect at all?

One, if you just directly change the data-filtertext it won't work. It's like the first time data-filtertext is used it created a hash table or something (??). However, if you clone it, make the changes on the clone, and the dump the clones html into the originals html.... it does work. 

Two, it appears as though you cannot use data-filtertext="1". That seems like something you should be able to filter for. 

Any idea what's going on?

Below is a page you can just copy and paste to test it locally.

On the actual iPad, even on the basic sample page provided by JQM itself http://jquerymobile.com/demos/1.0/docs/pages/page-anatomy.html you can scroll way beyond the bounds of where the page should be. 

What's up with that?

I am working with a lot of existing iFrames and trying to convert them over to some non-iFrame alternative. As far as I know though that is completely impossible because you can't just load a DOM into a div. Or can you? I mean I know you can't because I have tried it 20 different ways but maybe there is something I don't know about. Anyway, these are big complicated .htm files with javascript so you can't just load them into a div and have everything just be peachy.

I've tried loading the content (retrieved using $.load) into a $.dialog() and a div but those don't seem to isolate the content like an iFrame would.

Now, I did some tests and you can add <script> tags to the DOM on the fly and then use them. So it is possible to Regex the head and body, rename where needed, and then plug everything in appropriately. But that seems like a messy and imperfect solution.

Any ideas?