I have a weird problem that only happens occasionally.
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?
(function ($) {
$.fn._draggable = function (draggable) { // for when html5 draggable and jquery ui draggable are not available.
// if there is only one element to be made _draggable an id for that element is not required.
// if more than one element is to be made draggable a unique id for each element should be used to avoid event handling collissions.
var $elm = this;
var id = $elm.attr("id") ? $elm.attr("id") : "tmp";
if (draggable == false) {
$elm.off("mousedown." + id);
$(document).off("mouseup._draggable." + id);
$(document).off("mousemove._draggable." + id);
return;
}
else if(draggable == true) {
$elm.css("position", "absolute");
$elm.on("mousedown." + id, function() {
var position = $elm.position();
var oL = event.pageX - position.left;
var oT = event.pageY - position.top;
$(document).on("mousemove._draggable." + id, function (event) {
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?
No I don't have code. It would take too long to rip it out and get it to reproduce the error.
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.
*The textbox value is not being overwritten by any event of mine. That is there is no forgotten function that sets the value to something after page show.
yes thats right, jquery mobile is adding iframe history to the jqm back button and the browser back button. this happens on a pc, an android tablet, and an ipad.
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?
Obviously you can attach an event handler to the jqm back button. But is there a way to hook into the actual jqm event sort of like the hijacking behavior for ajax calls?
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?
Do you like future html5 controls that will be native in browsers or jQuery-ui/plugins? Can you provide specific examples?
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.
If the select is bigger than the page jqm turns it into a dialog. I'm not talking about that. I'm talking about when it fits on the page. Is there a way to tell if the user has clicked off of it without selecting anything?
$(".ui-selectmenu").bind("focusout", function () { alert("focus lost"); } ); // doesnt work
What is the best way to prevent line breaks and overlapping on jqm forms?
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 picture shows the difference between an element marked up with and without data-mini="true". The only difference is the ui-mini class. I went through the non-minified css file and copied all of the css attributes ui-mini ever uses and listed them in the picture.
My question is what do you think is the best approach to sizing forms for mobile phones with jqm?
I'm using the jquery datebox plugin inside of a ui-grid-a. The problem is that unlike the native jqm controls the datebox sets its width to 100% which is wider than the rest of the controls and it causes a line wrap.
this guy says to use width 70% on the class but there are two problems with that.
it doesnt actually work for me. just changes the location of the button not the actual width.
it's not the "right way"
I have tried a div table and various combinations of fieldcontain and controlgroup but cannot get the datebox control to look like an ordinary control.
<textarea cols="40" rows="8" name="textarea" id="textarea">Standard 6 pin connector for most North American trailers. OE-like connectors allow for more efficient, less costly wiring harness repairs on all GM vehicles 12-month/12,000-Mile Limited Warranty ACDelco is an Original Equipment (OE) supplier and has the experience engineering and manufacturing components that achieve the highest quality standards required by vehicle manufacturers</textarea>
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.
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?
This source is for testing out being able to change a list items data-filtertext on the fly. There are two interesting things going on.
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.
Does anyone have any ideas about using jQuery to replace iFrames?
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.
When using jtree I get elem.nodename is undefined as an error. This only happens in IE.
All my variables are named fine. I have changed them around 700 times just in case that was the problem. This is either a problem with jQuery or jtree. All you need to do to reproduce the error is create a tree in jtree and call the close_node function in ie.
The exact error is
Microsoft JScript runtime error: Unable to get value of the property 'toLowerCase': object is null or undefined
Using jTree and it works great but in IE the dots from either the root or parent node to the first child node are doubled up.
It looks like some kind of javascript thing where either the dots are not supposed to be there or they are supposed to be directly over top of each other.
Has anyone else encountered this and if so have you found a solution?