2012年9月8日土曜日

Note that jquery.pageless on Rails3 and Twitter Bootstrap

Environment

ruby-1.9.3-p0, rails3.2.2, postgres, Twitter Bootstrap v2.1


If you want to implement data loading like twitter, I recommend that you use jquery.pageless.
But if you use jquery.pageless, you have to use care when set script file.
I was wrong when I had used with Twitter Bootstrap.

put the script file at the end of the document body

you should put the script file at the end of the document body so you don't block rendering of the page.

Twitter Bootstrap uses bootstrap.js. This file ought to put at the end the document body.
But jquery.pageless.js is not be so. jquery.pageless.js must put the under css link. otherwise, you fail to rendering.

how to put jquery.pageless.js and bootstrap.js

you should put script file like next way.

before

<head>   

  <link href="/stylesheets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" /> 
  <link href="/stylesheets/common.css" media="screen" rel="stylesheet" type="text/css" /> 
  <link href="/stylesheets/bootstrap-responsive.css" media="screen" rel="stylesheet" type="text/css" /> 

</head> 
<body> 
  // something

  <script src="/javascripts/jquery.min.js" type="text/javascript"> </script> 
  <script src="/javascripts/bootstrap.js" type="text/javascript"> </script> 
  <script src="/javascripts/jquery.pageless.js" type="text/javascript"> </script>     
</body> 

fixed code

<head>   

  <link href="/stylesheets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" /> 
  <link href="/stylesheets/common.css" media="screen" rel="stylesheet" type="text/css" /> 
  <link href="/stylesheets/bootstrap-responsive.css" media="screen" rel="stylesheet" type="text/css" />
  
  <script src="/javascripts/jquery.min.js" type="text/javascript"> </script>// download in head
  <script src="/javascripts/jquery.pageless.js" type="text/javascript"> </script>// download in head

</head> 
<body> 
  // something


  <script src="/javascripts/bootstrap.js" type="text/javascript"> </script> 
</body> 

Above code can work. jquery.pageless.js should put at the before of the document head

thanks for reading.

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

0 件のコメント:

コメントを投稿

Related Posts Plugin for WordPress, Blogger...