Search jQuery

jQuery Forum

Page or layout not rendering correctly.

in jQuery Mobile • 10 years ago

I am developing using rails and jQuery mobile and have run into a problem where I am linking from a :show action to a :intro action within the same controller. The layout should be changed in the :intro action as I set
'render :layout => "intro_screen"' at the bottom of the method.

But when I go to:

myurl.com/foo/bar/show

and click the jQuery mobile button which is a button like so:

<a class="landing_button" href="intro" data-role="button" data-inline="true" >
<div style="white-space:normal">Continue onto Mobile Web</div>
</a>

I am presented with a blank page as my intro action/page. When I hit Crtl-r (refresh page) the page displays properly, so I am boggled.

I am guessing this is an issue with jQuery mobile and how it links somehow? When I use firebug to check out the source for the page when it doesn't render it seems that my page is getting written over some how. Some code is greyed out while the bottom div tag is normal. Here is the source of the blank pages body tag.

<body class="ui-mobile-viewport">
<div data-role="page" data-url="/FOO/BAR/show" tabindex="0" class="ui-page ui-body-c" style="min-height: 858px;">
<div id="mobile_header">
<div data-role="header" class="ui-header ui-bar-a" role="banner">
</div>
</div>
<div id="mobile_content">
<div class="landing_content">
<img src="/images/FOO_logo.png?1329839690" id="landing_logo" alt="FOO_logo">
<div id="landing_description">
</div>
<a data-inline="true" data-role="button" href="intro" class="landing_button ui-btn ui-btn-inline ui-btn-corner-all ui-shadow ui-btn-up-c" data-theme="c"><span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true"><span class="ui-btn-text">
<div style="white-space:normal">Continue onto Mobile Web</div>
</span></span></a>
<a data-inline="true" data-role="button" href="" class="landing_button ui-btn ui-btn-up-c ui-btn-inline ui-btn-corner-all ui-shadow" data-theme="c"><span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true"><span class="ui-btn-text">
<div style="white-space:normal">Download iPhone App</div>
</span></span></a>
<br>
<br>
</div>
</div>
<div id="mobile_footer">
</div>
</div>
<div class="ui-loader ui-body-a ui-corner-all" style="top: 429px;"><span class="ui-icon ui-icon-loading spin"></span><h1>loading</h1></div>
<div data-role="page" data-url="/SPREE/SPREE-2012/intro" data-external-page="true" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 583px;">
</div></body>

Replies(4)

watusiware

Re: Page or layout not rendering correctly.

10 years ago

Please show your page SOURCE (not the enhanced DOM elements) as well as your layout.

I don't see a <head> section here at all.

tapwalkma..

Re: Page or layout not rendering correctly.

10 years ago

This is what I get when I just right click and click show source, but if I inspect with Firebug, it doesn't seem that this is the only html there. If that makes sense?

<!DOCTYPE html>
<html>
  <head>
    <title> our Mobile App </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="some base url(changed as this is sensitive info)" /> 
  </head>
  <body bgcolor="Grey">
    
  <html>
	<body>
        <br><br>
		<h1 style="color: #C33; display: block; font-family: Verdana; font-size: 20px; font-weight: bold; height: 18px; letter-spacing: 1px; line-height: 18px; margin-bottom: 13px; margin-top: 13px; text-align: center;">
			Welcome to SPREE 2012
		</h1>
		<p style= "display: block; font-family: Verdana; font-size: 12px; line-height: 18px; margin-bottom: 12px; margin-top: 12px; text-align: left;">
			SPREE 2012 is the world’s largest event for the $12 billion specialty retail industry!
		</p>
		<p style= "display: block; font-family: Verdana; font-size: 12px; line-height: 18px; margin-bottom: 12px; margin-top: 12px; text-align: left;">
			Whether you are a retailer, specialty leasing manager or prospective entrepreneur looking for the newest concepts, locations or services to start or grow your specialty retail business, or an exhibitor seeking new sales opportunities, SPREE is designed with you in mind!
		</p>
		<p style= "display: block; font-family: Verdana; font-size: 12px; line-height: 18px; margin-bottom: 12px; margin-top: 12px; text-align: left;">
			Come for the new products showcased in the exhibit hall, the educational seminar program, the opportunity to conduct business and develop ongoing relationships, the fun and entertaining social events and all of the excitement of Las Vegas. SPREE offers all this and more!
		</p>
	</body>
</html>

  

  </body>
</html>

tapwalkma..

Re: Page or layout not rendering correctly.

10 years ago

Here is the source for the html I see when I view it in Firebug and not right click view source. The first two div tags in the body are greyed out.

<html class="ui-mobile"><head><base href="http://localhost:3000/foo/bar/intro">
    <title> our Mobile App </title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/master.css?1329947434">
    
    <link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript">
    </script>
    <script type="text/javascript" src="/javascripts/prototype.js?1329231646"></script>
<script type="text/javascript" src="/javascripts/effects.js?1329231646"></script>
<script type="text/javascript" src="/javascripts/dragdrop.js?1329231646"></script>
<script type="text/javascript" src="/javascripts/controls.js?1329231646"></script>
<script type="text/javascript" src="/javascripts/rails.js?1329231646"></script>
<script type="text/javascript" src="/javascripts/application.js?1329231646"></script>
    <meta content="authenticity_token" name="csrf-param">
<meta content="+lKth7tsgkguiUcMpMYoWqujJbjEiYUlQoRpBHMTv3c=" name="csrf-token">

</head>
<body class="ui-mobile-viewport">

    <div data-role="page" data-url="/Foo/bar/show" tabindex="0" class="ui-page ui-body-c" style="min-height: 858px;">
      <div id="mobile_header">
    <div data-role="header" class="ui-header ui-bar-a" role="banner">

    
    </div>
      </div>

      <div id="mobile_content">
    <div class="landing_content">
    <img src="/images/our_logo.png?1329839690" id="landing_logo" alt="our_logo">
    <div id="landing_description">
      <p>SPREE, the Specialty Retail Entrepreneur Expo and Conference, is the specialty retail industry’s largest event–exclusively bringing retailers together with wholesalers, property managers and service providers from across the country.</p>

<p>Brought to you by Specialty Retail Report, attendance at SPREE means you can hear from industry experts at our seminar program, network with your peers at our social events and explore the hottest products, locations and services in our exhibit hall—all for FREE!</p>
    </div>

    <a data-role="button" data-inline="true" class="landing_button ui-btn ui-btn-inline ui-btn-corner-all ui-shadow ui-btn-up-c" href="/foo/bar/intro" data-theme="c"><span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true"><span class="ui-btn-text">Continue onto Mobile Web</span></span></a>
    <a data-inline="true" data-role="button" href="intro" class="landing_button ui-btn ui-btn-inline ui-btn-corner-all ui-shadow ui-btn-up-c" data-theme="c"><span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true"><span class="ui-btn-text">
      <div style="white-space:normal">Continue onto Mobile Web2</div>
    </span></span></a>

    <a data-inline="true" data-role="button" href=" no link yet " class="landing_button ui-btn ui-btn-up-c ui-btn-inline ui-btn-corner-all ui-shadow" data-theme="c"><span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true"><span class="ui-btn-text">
      <div style="white-space:normal">Download iPhone App</div>
    </span></span></a>

    <br>
    <br>
</div>

      </div>

      <div id="mobile_footer">

      </div>

    </div>

<div class="ui-loader ui-body-a ui-corner-all" style="top: 429px;"><span class="ui-icon ui-icon-loading spin"></span><h1>loading</h1></div><div data-role="page" data-url="/foo/bar/intro" data-external-page="true" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 320px;">


    </div></body></html>

tapwalkma..

Re: Page or layout not rendering correctly.

10 years ago

Never mind, went with a different way of structuring my application which is working, so disregard this. Thanks for trying though!

Top Reply

Response title

Attachments

jQuery Forum

Page or layout not rendering correctly.

Replies(4)

Re: Page or layout not rendering correctly.

Re: Page or layout not rendering correctly.

Re: Page or layout not rendering correctly.

Re: Page or layout not rendering correctly.

Statistics

Tags

Actions