Response title
This is preview!
Move this topic
The app i'm working on works in all browsers that i've tested in on the PC (chrome firefox opera safari), however on my iphone it works in Opera mini but not safari.
-- Kevin
In mobile safari, it seems to be getting the wrong href. Here's an example:
- .delegate(".content a", "click", function(e) {
- console.log($(this).attr(href));
- ...
- });
The console.log() gives #article?id=504 for all of the PC browsers and opera mini, however mobile safari gives me # instead which of course breaks my code because it can't get an ID.
Is there a reason it does this? For now I've switched to using data attributes, however that means deep-linking won't work directly to an article.
The anchor tags are built by this:
- // from elsewhere in code
- function buildListItem(data) {
- return '<li data-theme="c"><a href="' + data.url + '">' + (data.title ? data.title : '') + '</a></li>';
- }
- // this is inside of a $.getJSON() which is inside of a pageinit handler
- var contentHtml = "<ul data-role=\"listview\">";
- $.each(data, function(i, obj) {
- contentHtml += buildListItem({
- url: "#article?id=" + obj.id,
- title: obj.headline
- });
- });
- contentHtml += "</ul>";
- // console.log(contentHtml); returns list with anchor tags containing correct url
- $("#news .content").html(contentHtml).find("ul").listview();
Edit: corrected urls and updated code a little.
-- Kevin
1
Replies(21)
To save you time, here's a jsfiddle that recreates the scenario but does not have the same problem.
Leave a comment on Kevin B's reply
well iv got some good and bad news. good news thers nothing wrong with what your doing. bad news this is a JQM issue that i cant seem to pin down yet. im guessing it has to do with the linkhandeling and hash navigation but i cant imagine why even doing $(this).attr('href'); gives the same results.
Leave a comment on arschmitz's reply
AHH HA!!!
ok figured out whats going on it is the jqm hash navigation. i have NO IDEA why this only happens on phone and not desktop even changing user agent doesnt make a difference but anyway.....
when you click on a link it is updateing the hash in the browser and it is also changing the href on the link to be just # so that if you click it it doesnt do anything instead of reloading the page.
i set up a little demonstration at www.billdodgeautogroup.com/test/
there are 2 links both of them are set to lert the href of the first link alert($('#clicked').attr('href')); click on the second one first and it will work fine click it as many times as you want. next click the first link and it will show just # now click the second link again and now you will only get # aside from useing a data- attribute no idea of a way around this yet.
Leave a comment on arschmitz's reply
That really sucks. Basically, that means my app that is already working other than in mobile safari has to be re-structured to work a different way. I guess in this particular app deep-linking would almost never be used, i'll just go to data- attributes for now.
Thank you for looking into this.
-- Kevin
Leave a comment on Kevin B's reply
Somewhat related to this i guess,
-- Kevin
Lets say i have a list of categories that are dynamic.
- <ul data-role="listview">
- <li><a data-id="504" href="#catalog-504">Foobar</a></li>
- <li><a data-id="505" href="#catalog-505">Foobar</a></li>
- <li><a data-id="506" href="#catalog-506">Foobar</a></li>
- </ul>
I have a click event bound to each of those anchor tags that has e.preventDefault() and e.stopPropagation(). Also within that click event, i'm cloning the current page, replacing the ul with a new empty ul, populating it, then initializing the listview. After that, i perform a $.mobile.changepage to the page i just created and unbind the click event so that future clicks on that anchor tag will not rebuild the page (since it now exists in the DOM).
The problem is that when you click on the anchor, jqm creates a new empty page since the requested page doesn't exist yet, then, i populate the page, and transition to it, resulting in a double transition. How can i prevent jqm from creating the new empty page, and have it simply wait until i build the page and manually transition to it?
- $('[id^="catalog"]').live("pageinit", function() {
- var id = this.id.split("-")[1],
- $page = $(this),
- $pageul = $page.find("ul");
- id = id ? id : 0;
- $.getJSON("ajax/getCategories.cfm?category_id=" + id).done(function(data) {
- for (var i = 0; i < data.recordcount; i++) {
- $pageul.append(
- $("<li></li>").html("<a data-itemtype='" + (data.data.isproduct[i] ? "product" : "catalog") + "' data-id='" + data.data.id[i] + "' href='#" + (data.data.isproduct[i] ? "product-" : "catalog-") + data.data.id[i] + "'>" + data.data.name[i] + "</a>"));
- }
- $pageul.listview("refresh");
- $pageul.find("li a").bind("click", function(e) {
- e.preventDefault();
- e.stopPropagation();
- var id = $(this).data("id"),
- itemtype = $(this).data("itemtype"),
- pageId = itemtype + "-" + id,clone;
- if ($('#' + pageId).length === 0) {
- clone = $page.clone();
- clone.appendTo("body");
- if (itemtype === "product") {
- clone.find("ul").remove();
- clone.find(".content").before("<div class='header-image'></div>");
- }
- else {
- clone.find("ul").replaceWith("<ul data-role='listview'></ul>");
- }
- clone.attr("id", pageId);
- }
- $.mobile.changePage("#" + pageId);
- $(this).unbind("click");
- });
- });
- });
PS: i know i'm still using .live() .bind() and .unbind(), i had to keep it compatible with older versions of jquery for now just in case.
-- Kevin
Leave a comment on Kevin B's reply
found an open critical issue on this
Leave a comment on arschmitz's reply
That would be the cause, the event.preventDefault() and event.stopPropagation() are no longer being honored. Really no way to work around that...
-- Kevin
-- Kevin
Leave a comment on Kevin B's reply
Yup sadly both your issues are the same with no work around. Well unless you do all your links with jquery and use spans instead of a that should work. It's a bit of extra work but not to bad could all be handled reuse ably with not much work let me know if you want details of this workaround
Leave a comment on arschmitz's reply
Using spans is a great idea, that also means I won't have to unbind the click event anymore. I won't get to implement that change until monday (i'm at home now) but i'll post back here when it's implemented.
-- Kevin
-- Kevin
Leave a comment on Kevin B's reply
Using spans is actually going to take a little work to get working right, i have to create custom CSS and hover events to make it mimic what the anchor tag would do. Since it's a span and not an anchor tag, JQM doesn't automatically style it and it's li as a button.
-- Kevin
-- Kevin
Leave a comment on Kevin B's reply
you can just attach data-role="button" to the span and it will style it as a jqm button
Leave a comment on arschmitz's reply
you can just attach data-role="button" to the span and it will style it as a jqm button
More than likely due to the way the list is built on the pageinit event.
-- Kevin
-- Kevin
Leave a comment on Kevin B's reply
could be i tested and it works on its own. depending on whats easier you could trigger('create'); on the parent to get it to see the data attribute and enhance it.
Leave a comment on arschmitz's reply
I did try a similar solution, i called .button() on the spans, but that resulted in actual buttons being placed in the list items rather than making the list items act as-if they contained links instead of spans. using .trigger("create") gives the same result (but makes more sense than manually calling .listview() and .button())
-- Kevin
-- Kevin
Leave a comment on Kevin B's reply
After changing to spans (without styling, just to see if this method will even work) i'm still not getting a good transition, so maybe the actual problem isn't related to this. What i'm seeing is the current page instantly gets replaced with the next page, then the next page disappears and fades in. So whats happening is the current page is not sliding out.
-- Kevin
-- Kevin
Leave a comment on Kevin B's reply
The real problem is that the new page i'm appending is instantly visible. I tried .hide() to fix it, however, then the page isn't visible when i change to it.
-- Kevin
Edit: I found a hackish solution, still looking for something better.
I hide the clone, append it to the body, change to it with changePage, then show it after 300ms using a setTimeout.
-- Kevin
Leave a comment on Kevin B's reply
yeah i think that's an unrelated problem . the original problems had to do with event handling on links. this sounds like something different.
When you build your new page are you cloning the current page or constructing it from scratch?
if your cloning which from your previous posts and the problem your describing im guessing you are thats the problem. your also cloning the class ui-page-active this is what makes the pages show in viewport vs being hidden. so as soon as you assign this to another page that comes after the current on in the dom it will show visible.
then your calling change page which runs the actual page transition between the two (as far as jqm is concerned the original page is still the current active page despite the class having been added to the other page JQM tracks history internally) so now it runs its normal transition between the original and new pages.What i'm seeing is the current page instantly gets replaced with the next page
rather then clone you will have to actually construct the page i think. you MIGHT be able to just remove the active page class and have it work but im not sure there will be a lot of other enhancements that may double up as well.
Leave a comment on arschmitz's reply
yeah the timeout should work but i still think constructing the page from scratch in your javascript will be much more reliable. let jqm enhance and do its thing the way it normally would.
Leave a comment on arschmitz's reply
Ah, good point. That and the page itself is pretty basic, i can easily abstract that into a function.
-- Kevin
-- Kevin
Leave a comment on Kevin B's reply
Since 1.1.0RC1, jQuery Mobile change the href of any link to be '#' immediately when it is clicked, only on iOS Mobile Safari, in order to make the address bar stay hidden. However, they set a data-href attribute during this time that you can use. Instead of:
- console.log($(this).attr('href'));
You can use:
- console.log($(this).data('href') || $(this).attr('href'));
This will solve the OP problem of being able to get the correct href in a click handler.
FWIW I've blogged a bit more about this with some links to github issues discussing this here: http://scottwb.com/blog/2012/06/29/jquery-mobile-breaks-your-hrefs-on-ios-mobile-safari/
Leave a comment on scottwb's reply
Thanks scott, I ended up taking a completely different approach because with this approach i couldn't get the transition i wanted.
-- Kevin
-- Kevin
Leave a comment on Kevin B's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to Kevin B's question
{"z8696387":[14737000003187230,14737000003187238,14737000003187324,14737000003186177,14737000003187718,14737000003187722,14737000003187740,14737000003187742],"z3123152":[14737000003187203,14737000003187210,14737000003187318,14737000003187320,14737000003187328,14737000003185425,14737000003191556,14737000003191570,14737000003191620,14737000003191630,14737000003191632,14737000003190625,14737000003479657],"z2968257":[14737000003463209]}
Statistics
- 21 Replies
- 26650 Views
- 1 Followers