using alpha2, this worked just fine. in alpha 3, the changePage no longer works (the alert pops up but it just stays on the same page). with both versions, this error pops up in the console in jquery.mobile-1.0a3.min.js:49 :
Uncaught TypeError: Object #<Object> has no method 'attr'
but i don't know if that's what's causing the problem since it's occurring in alpha 2 as well.
also, there is a cancel button on the page which triggers the same changePage event. it works before submitting the form, but not after.
there are several posts that mention similar problems, but i haven't been able to find anything that solves this. i'm dynamically adding a header to a page. how do i refresh it so that the jquery mobile styles are activated? as some other posts comment on, page() doesn't work. here's my code:
i just switched over to alpha 3. for some reason the arrow icons no longer work on the iphone (fine in chrome & safari). other icons like plus work fine, but the right arrows in my list and the up arrow in my button just appear as grey circles (no arrows inside).
also, the plus icon is slightly off center inside the circle (again, only on iphone).
any idea why this could be happening? i'm using jquery 1.5, and i've tried restarting safari in iphone and clearing cache.
edit: it's not just the arrows that don't work. for a lot of them, i can see the edge of the icon within the grey circle but that's it.
i made a post about this before, but it was convoluted with some other issues and i never got a response. what's happening is that href="#" is breaking my functionality. instead of just linking to nothing like it should, it links back to my home page. it's linking to:
www.website.com/#
instead of:
www.website.com/fportal.php?url=widget/index.xml#
jquery mobile uses href="#" in form elements, buttons, and other places. so i'm having to manually remove it on page load like this:
this is getting rid of the href="#" that get added in the select form element (both when clicking the select initially and when clicking on a new item in the select list)
so i'd like to know:
1) is anyone else experiencing this? it would even be helpful to hear a "no, it's working fine for me"
2) is it normal behavior for the hash to get added to the base url? (i didn't think it was, and in fact this worked for me before). if this is working fine for others, then what could possibly be my issue? this is occurring in multiple different applications of mine and in multiple browsers.
3) if this is not a bug, then i'd like to suggest that jquery mobile get rid of href="#" all together
what's strange is that this same code is working in other places. why is it linking to the root in this case and not in others?
EDIT: i was able to get around this by changing it to href="JavaScript:void()" and binding this to click in javascript: $.mobile.changePage($('#rate_page'), 'slide', false, false);
but i shouldn't have to do that.. why isn't href="#rate_page" working? also, see my new problem in the reply below.
when my window size is small enough (it happens on my iphone and in chrome when i decrease the height of the browser window), the button overlaps the text in the top div. basically it seems to position itself according to the bottom of the window instead of placing itself under the other div.
after playing around a bit i found that adding this CSS makes the button render in the correct place (without this it's position:relative):
.ui-btn, .ui-btn-inner{
position:inherit;
}
however the icon on the button gets randomly placed on the page and i can't figure out how to get it back on the button.
why is this happening and anyone know how i can fix it?
how do i add images that are not thumbnails/icons to list view items? specifically, each item in my list view should include 5 star images (for a rating system). with just this code, the images all get pushed into the top left corner because they are picking up ui-li-thumb and ui-corner-tl classes:
i'd like to have a persistent navigation footer on my page (like here: http://jquerymobile.com/demos/1.0a2/#docs/toolbars/footer-persist-a.html ). i am using the exact code being used there, and yet the footer is rendering multiple times on one page (with different items selected). one bar is appearing right under my content and the other at the bottom of the page. clicking on either seems to work (takes me to the page i clicked on), though it is buggy.
the only difference between my code and that code is that i'm moving between # pages, and they're moving between .html pages. here's my code:
i'm trying to create a list using jquery mobile where the data is dynamically loaded from a database. i tried to echo out each list item, but the formatting completely breaks when i do this. here's my js code:
and here's the html: <ul data-role="listview" id="quest"></ul>
i also tried printing this in a div including the <ul>, but that didn't work either. the only thing that worked was printing just the $question inside the <a>, but this is not sufficient for what i'm doing.