Hi community stackoverflow,
This is my first question on the site after he really helped with this!
I am building a mobile web application in Ruby On Rails by integrating the JQuery Mobile Framework for an existing desktop web application.
I used the Mobvious Gem to detect mobile devices ( https://github.com/jistr/mobvious ) and I use response_to format.mobile to differentiate the desktop than the mobile view.
So here is my problem: I have 2 problems, but I'm sure they are related.
- I had to set all my links with the attribute "data-ajax" => "false" to make sure my javascript is charged, otherwise I was not like that.
- After redirect_to from the controller or render or link "data-rel" => "back" the javascript of the page does not reload.
I would like to know if there is best practice using Rails and JQuery Mobile with Javascript. In addition, I would prefer to have only 1 JS file in app / assets / javascript with all my mobile JS content, but it does not work.
Thank you for your help!
EDIT: when I look in firebug when writing a live event object to the console:
- first time: the console shows the object 1 time and javascript is working correctly
- second time: the console shows the object 2 times, and I have the error "TypeError: value of the cyclic object" and javascript does not start
- third time: the console displays the object 3 times and javascript is executed correctly
Here is the structure of my mobile views:
My "rail 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
File _page_mobile.haml:
% 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 javascript page = javascript_content
The page rental "template" according to the above code:
- @pageId = "id_of_the_page"
- @pageContent = perform capture Place here page content
- @pageJS = execute capture: JavaScript
Put here the javascript for the page
= render 'page' ,: page_id => @pageId ,: page_content => @pageContent ,: javascript_content => @pageJs