Ajax Load on iPad

[benjamin777]

I am new to loading content with Ajax. I found this post very, very helpful:

https://css-tricks.com/8392-ajax-load-container-contents/

I was getting great results until I crossed checked some things on an iPad. My page won’t load the Ajax content. Even the demo Ajax content won’t load. However, it DOES work on an iphone. Is there something I can look into? Are there ground rules with Ajax/Jquery for the iPad that I need to apply?

Any and all advice and tips are appreciated. Thank you so much.

[pestbarn]

Are you only using .load() or do you also use any other code? Personally, I load using this method, and it works on the iPad (checked it yesterday):

You can delete the last two – .hide().fadeIn() – of course. I only use these for a slight effect on click.

[benjamin777]

Thank you for your advice. I am unclear on how to apply it. Here is the code I used straight from the demo:

https://css-tricks.com/examples/AJAXReplaceSamePart/script.js

I would use that code as is, but it doesn’t pull info on the ipad.

I have a long list of links. Lets say 20. They are all the same class. There is one div on the same page we’ll call #content. When I click each link I want to request data from separate files (index, about and contact in the example) and sub it into #content.

I may be completely wrong, but I am reading your answer as a click that pulls info from one file and puts info in a div. I would prefer multiple sources like in the example.

Any advice? Places to look? Books to read?

[pestbarn]

I’m merely freehanding this, and haven’t tested this code, but if you would like to pull info from multiple sources, you could probably make use of the rel-attribute of the links. Something like this, perhaps:

Link 1

Link 2

Let me walk you through this. First, you bind the click event to the anchors in #links. Second step is assigning a variable to the rel-attributes of the anchors (var content), which pulls the clicked anchor’s rel attribute ($(this).attr("rel");.

Last thing you do is load the content in $.ajax with url: content +'.php'. This will take the rel-attribute and add .php at the end, making my example links load from “content1.php” and “content2.php”.

Could that be what you’re looking for?

[Author]

Posts