JQuery Mobile - Appling 'Loading' to image hyperlinks

If I set up a hyperlink as a button and I click on the link I get the LOADING icon in the middle, which also helps to stop end users for double pressing a link, for example -->

<a href="somelink.html" data-theme="#session.datatheme#" data-role="button" data-icon="back" data-iconpos="left" >Back to somelink</a>

I just noticed that when I hyperlink an IMG that I don't get the LOADING, and this also allowed end users to double click, messing up my stats, so I had to add some extra code to pick this up, I'd really like the LOADING so they know that they have indeed pressed the button.

Is there any code I can put into the code below to make that happen?

<a href="clk.cfm" target="cb">
<img src="images/banners/#GetCamp.camp_uid#.#GetCamp.camp_image_type#" border="0"></a>

I THINK that this might be related to the fact that I have target="cb" in there. I do need this because without the following page will not work, I'm guessing some sort of security rule in javascript because the following page just writes stats and then uses coldfusions cflocation to redirect the user to the banner that they clicked on (the image I served), the page is also inside an Iframe, without the target in the link, I get an error loading page, with it, it works, so no removing that, but could that be causing the missing LOADING? And if so, any way around this??


Thanks

Mark

Hi Mark,

Using the target attribute prevents jQuery Mobile from handling the link via Ajax, since you can't load a page via Ajax into a separate window or frame.

From p193 in my book:

---
You can also turn off Ajax handling for specific links and forms by using the data- ajax="false" attribute. See Appendix B for details. Adding the attribute rel="external" to a link, or using the target attribute, will also disable Ajax handling for the link.
---

Since the "Loading" message is part of jQM's Ajax loading process, you won't see the message if you use the target attribute.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Hi Matt

Thanks for the reply. I am sure you are right, but just to clarify the situation.

I have a page, popup.cfm a coldfusion page, inside popup.cfm is a little HTML to display some Jquery Mobile, namely a button at the top, and also an IFRAME.

Inside the IFRAME is a link to popup_center.cfm which displays a banner, the code for the IFRAME also includes NAME="CB"

The page popup_center.cfm has Juqery code inside it, headers etc,etc. The banner inside this frame has a link to the 3rd party web site, as a simple A HREF.

Now the problem I had was that if I did not have the target="cb" the same name as the frame that it was already in, the code would not work, it was screwing up, I spent a day or more figuring this out, although I would need to test again as I can't remember the problem I had as I've been in debug mode for a solid 14 days and nights.

So because I refer it to the same window, just because of the reference to a target the LOADING is not going to work?

I am going to remove that target so I can remind myself what the problem was, but I don't believe it will function without it

Any idea if there is any way around this?

Thanks

Mark

I just went back and double checked.

Here's the situation

The initial page that has the banner on it which inside the IFRAME. If I take out the target="cb" (Same frame as where the banner is placed, the IFRAME it sits inside is also called CB, so basically stay inside that window, it will show a jquery error of ERROR LOADING PAGE when the banner is clicked on because the page that it goes to has a CFLOCATION URL="" Coldfusion redirect on there that tells the client to go redirect.

If I put in the target="cb" then it all works fine, but I lose the LOADING

I tried removing the CFLOCATION and using a simple Meta Refresh set to 0, but nothing at all happens no redirect.

I then took out the redirect and put in some jquery code, and it displays fine

So basically what I have is a situation where, if I have a redirect on the page the hyperlink goes to, and it is in a frame, even as in this case it is staying inside the same frame then it will throw a Jquery error loading page unless I name the frame and add the target

That really sucks

Any ideas if there is any potential for work arounds for this?

Thanks

Mark

@markaspirenet: Very hard for me to follow your explanation without seeing the actual code I'm afraid. Maybe you could post an example on http://jsbin.com/ ?

I don't get why you need a target attribute if your banner is linking to a URL in the same iframe?

How's CF doing the redirect? If it's a 301 or 302 then I think the browser should transparently redirect to the second URL, the response from which is then returned via Ajax and displayed correctly using jQM.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/