CODEWITHSUNDEEP
javascriptjqueryruby-on-railsjquery-mobilemobile
mtcrts70
mtcrts70

Reputation: 35

JQuery Mobile and link_to

The following code works on the desktop version of my website, that is to say clicking the button links to the langs_path:

<%= link_to "Continue Quiz!", langs_path, class: "btn btn-large btn-primary"%>

For the mobile version of my website using jQueryMobile I use this:

<%= link_to "Continue Quiz!", langs_path, "data-transition"=>"slide", class: "ui-btn ui-corner-all buttonMargin"%>

When I use the mobile version clicking the Continue Quiz! button shows a page loader animation that never goes away.

When I look at the rails server I get the following upon clicking the button on desktop version:

Started GET "/langs" for 127.0.0.1 at 2015-03-18 18:04:16 -0600
Processing by LangsController#index as HTML
  User Load (0.5ms)  SELECT "users".* FROM "users" WHERE "users"."id" = 2 LIMIT 1
  Lang Load (1.2ms)  SELECT "langs".* FROM "langs" ORDER BY id LIMIT 10 OFFSET 321
  Rendered shared/exercises/_learnEnglishSpeakSpanishWordScrambleSpanishTop.html.erb (0.7ms)
  Rendered shared/_indexAction.html.erb (35.6ms)
  Rendered langs/index.html.erb within layouts/application (36.5ms)
  Rendered layouts/_shim.html.erb (0.0ms)
  Rendered layouts/_header.html.erb (0.4ms)
  Rendered layouts/_footer.html.erb (0.3ms)
Completed 200 OK in 52ms (Views: 47.5ms | ActiveRecord: 1.7ms)

Followed by all the various assets being served.

When I look at the rails server I get the following upon clicking the button on mobile version:

Started GET "/langs" for 127.0.0.1 at 2015-03-18 18:17:25 -0600
Processing by LangsController#index as HTML
  User Load (1.0ms)  SELECT "users".* FROM "users" WHERE "users"."id" = 2 LIMIT 1
  Lang Load (0.8ms)  SELECT "langs".* FROM "langs" ORDER BY id LIMIT 10 OFFSET 321
  Rendered shared/exercises/_learnEnglishSpeakSpanishWordScrambleSpanishTop.mobile.erb (0.1ms)
  Rendered shared/_indexAction.mobile.erb (2.7ms)
  Rendered langs/index.mobile.erb within layouts/application (3.1ms)
  Rendered layouts/_shim.mobile.erb (0.0ms)
  Rendered layouts/_header.mobile.erb (0.3ms)
  Rendered layouts/_footer.mobile.erb (0.3ms)
Completed 200 OK in 22ms (Views: 16.6ms | ActiveRecord: 1.7ms)

Followed by a singular asset being served.

The only differences I can spot between the two are the number of assets that are being served and the mobile vs desktop views being served. The same controller code is used for both link_to methods.

Any thoughts on what could be causing this?

Edit1:

Another interesting behavior is this:

When I'm on the desktop version and click continue quiz the link works as mentioned above. If, while on the desktop version of the quiz page, I toggle to the mobile view the mobile view of the quiz page works. Clicking back to the mobile home page where the continue quiz link is, and clicking the continue quiz button now works where it didn't prior.

Here are some pictures to help illustrate the above:

First the issue, clicking continue quiz hangs on the home page. You can see the loading icon on the contact link:

enter image description here

Now starting on the desktop homepage: enter image description here

And clicking continue quiz:

enter image description here

Now toggling to mobile view: enter image description here

Yields the following: enter image description here

Now going back to the mobile home page and clicking continue quiz works: enter image description here

Any ideas? This one has got me stumped.

Upvotes: 3

Views: 219

Answers (3)

CodeTheorist
CodeTheorist

Reputation: 1672

Here's the error, I've encountered it myself. The animation supposed to be being triggered is not getting triggered because of a bug with jQuery animations and turbolinks. I think if you set pass remote: false to the link it should work. Failing that, you could disable turbolinks altogether in the mobile version or in the app. It's definitely turbolinks related and a remote: false passed to the link_to helper will prevent turbolinks from acting on that link, as it inserts data-remote="false" to the link that is rendered in the browser.

On another note, where are you loading the javascript, in <head> or before </body>? If your loading it in the head, move it to the lower body.

Upvotes: 2

aditya.pixelcrayons
aditya.pixelcrayons

Reputation: 11

Here is what you can do

  1. check in the browser console for js errors
  2. check the network tab of developer tools to see if there was a response from the server.And that the request did not fail.
  3. check if there is a callback in place for the when jQuery mobile would get the response. It needs to know what to do with the returned content. - probably in your case this is not required cause you are just trying to open a page.
  4. Does your rails controller returns something different for XHR requests? This could surely cause this issue.
  5. How about not using jquery and just do a simple redirect like: this.location.href = "" ?

Upvotes: 1

jrochkind
jrochkind

Reputation: 23317

The difference I see is that you added "data-transition"=>"slide" to the mobile version. Which apparently is supposed to trigger a jQueryMobile slide transition, but that's not working properly, which is why "you're stuck with a page loader animation that never goes away."

I couldn't tell you why it's not working, but that's the problem, the jQuery Mobile slide transition is not working. You can figure out why, or just remove the data-transition attribute.

JQuery Mobile transitions are probably incompatible with something else you have going on, perhaps Turbolinks which Rails installs by default in recent versions. You could try disabling Turbolinks, either just in the mobile version or everywhere. http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4

Upvotes: 1

Related Questions