4

Hi stackoverflow community,

this is my first question on the site after being helped a lot by this one!

I'm building a mobile web application in Ruby On Rails integrating the JQuery Mobile Framework for an existing desktop web application.

I've used Mobvious Gem for the mobile detection (https://github.com/jistr/mobvious) and I'm using respond_to format.mobile to differentiate desktop than mobile view.

So, here is my problem : I've 2 problems but I'm sure they're related.

  1. I had to set all my link with the attribute "data-ajax" => "false" to be sure my javascript charged after otherwise I wasn't the case
  2. After a redirect_to from a controller or a render or a link "data-rel" => "back" the javascript of the page isn't reload.

I would like to know if there is a best practice using Rails and JQuery Mobile with Javascript. Also, I would prefer to have only 1 JS file in app/assets/javascript with all my mobile JS content but it doesn't work.

Thank your for your help!

EDIT : when I look into firebug, when writing into the console the live event object:

  1. first time : console show the object 1 time and javascript run correctly
  2. second time : console show the object 2 times and I've an error "TypeError: cyclic object value" and javascript doesn't run
  3. third time : console show the object 3 times and javascript run correctly

Here is the structure of my mobile's views :

My "rails layout" :

!! %html{..html tag content..}

%head

/render the head with all includes & metatag
  = render 'head'

%body

/render here each page made by the layout _page_mobile.haml

  = yield

The _page_mobile.haml file :

%div{:id => "#{page_id}", :style => "padding-bottom:0px;", :data => {:role => "page", :theme => "b"}} 

/Common header bar for all pages  
%div#headerBar{:class => "main-header", :data => {:role => "header",:theme => "b"}}
   = render 'header'   

/content of the page   
 %div.mainContainer{:style => "padding: 0px;", :data => {:role =>"content"}} 
   = page_content   

 /Common footer bar for all pages   
 %div#footerBar{:data => {:role => "footer", "tap-toggle" => "false",:theme => "b", :position => "fixed"}}
    = render 'footer'

/Insert the javascript of the page = javascript_content

The "template" of a page rent by the code above :

- @pageId = "id_of_the_page"

- @pageContent = capture do
Put here the content of the page

- @pageJS = capture do
:javascript

Put here the javascript for the page

= render 'page', :page_id => @pageId, :page_content => @pageContent, :javascript_content => @pageJs

Andrea
  • 41
  • 4

1 Answers1

0

When you redirect to page with JqueryMobile, it doesn't load the head and meta_tags of the new page, it only pre-loads the body. So, when you place your .js inside the body, after the data-role = page. Your javascript will, most-likely, be loaded.

UPDATE:

@Gajotres, makes a wonderful answer about the same subject: Why I have to put all the script to index.html in jquery mobile

Community
  • 1
  • 1
ScieCode
  • 1,706
  • 14
  • 23