Apache Friends Support Forum

Skip to content

MOD_REWRITE: HTML is served to browser but page is blank

Problems with the Windows version of XAMPP, questions, comments, and anything related.
Forum rules
Post a reply

MOD_REWRITE: HTML is served to browser but page is blank

Postby TomXampp » 12. March 2015 08:48

I'm trying to use mod_rewrite in .htaccess to allow elegant and clean "static" URLs to replace the verbose and ugly "dynamic" URLs of my site.

I've found a rewrite rule that *works*, except ONLY if I append an "R" flag (e.g. R=301), which makes the ugly "dynamic" versions of the URL appear in the URL bar, rather than retaining the input "static" URL. If I omit the "R" flag, the correct code is sent to the browser (viewing the source confirms this), but the page is BLANK.

Using AAA, BBB, CCC, and DDD for simplicity of reading, here is the rewrite:

Code: Select all
Options +FollowSymLinks
RewriteEngine on
RewriteRule ^b([0-9-]+)/d([0-9-]+)/?$ /aaa.php?bbb=$1#ccc.php?ddd=$2 [NE,NC,L,R]


Thus, if I enter:

Code: Select all
mysite/b123/d456


...it will translate correctly to:

Code: Select all
mysite/aaa.php?bbb=123#ccc.php?ddd=456


Notice I have to use the NE flag because of the # character in the dynamic URL; NC allows case insensitivity; and L stops subsequent rewrites from being considered.

The problem is that if I omit the R flag, the browser screen goes blank; viewing the source reveals that everything was delivered to the browser correctly (i.e. all the webcode is there), but nothing displays...and refreshing makes no difference.

When the R flag is included, the same webcode is served to the browser, but magically everything displays as it should...yet, unfortunately, the "static" (shorthand) URL is replaced with the "dynamic" (longhand) URL in the URL bar. I want the "static" URL to remain.

I've checked the error logs and no errors are reported.

What could be causing this problem?
TomXampp
 
Posts: 59
Joined: 12. March 2015 03:58
Operating System: Windows 8.1
Top

Re: MOD_REWRITE: HTML is served to browser but page is blank

Postby gsmith » 12. March 2015 18:41

2.4.12 x86 / php 5.6.6

With or without the R it works for me on a simple stupid php script both on Firefox 31.5 and IE9.

aaa.php I used
Code: Select all
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title> AAA.PHP </title><head><body>
This is <?php echo $_SERVER["PHP_SELF"]; ?><br/>
<?php echo $_SERVER["REDIRECT_URL"];?><br/>
<?php echo $_SERVER["REDIRECT_QUERY_STRING"];?><br/>
<?php phpinfo(); ?>
</body></html>


If the above works for you need to look at your script.
gsmith
 
Posts: 278
Joined: 29. November 2013 18:04
Location: San Diego
XAMPP version: 0.0.0
Operating System: Win 10/2012R VS 14,15,16
Top

Re: MOD_REWRITE: HTML is served to browser but page is blank

Postby TomXampp » 13. March 2015 02:45

As I wrote above, the browser is served the correct code, but the display is blank, even after a refresh. After a line-by-line comparison of the resulting code with what is delivered with the dynamic URL showed that the two were the same, I did an extra text by copying the code served to the browser to an X.HTML file and then loaded it...and it displayed just fine.

My theory now is that it has something to do with the Javascript within the served code that makes the page display when the code is fetched normally vs. via mod_rewrite.

So...here is the code. Without my database and the other files called, it shouldn't have a meaningful display, but perhaps a Javascript expert here could examine that code--which is at the bottom--and see if there's something about the way mod_rewrites deliver code to a page (or perhaps what this Javascript routine--which was written by someone else--does in terms of referencing the dynamic URL, which isn't in place when the static URL remains) that would explain this odd behavior (again, adding the R flag allows the page to display, albeit with the dynamic URL; this is where I'm thinking that the Javascript may expect there to be posted variables in the URL to work with, and since there aren't with the rewrite, the page can't display...?)

Code: Select all
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
   <meta charset="utf-8" />
<meta name="description" content="Works from 2009 by the artist XXX." />
   <title>Gallery: 2009</title>
   <link rel="icon" href="./favicon.ico" />
   <link rel="stylesheet" type="text/css" href="./css/reset.css" />
   <link rel="stylesheet" type="text/css" href="./css/fonts.css" />
   <link rel="stylesheet" type="text/css" href="./css/site.css" />
   <style type="text/css"> body { visibility: hidden; } </style>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-49657331-2', 'auto');
  ga('send', 'pageview');

</script></head>

<body>
   <div class="main cl">
      <div class="cl">
         <header id="page_header" class="page_header">
            <h1>Artist</h1>
            <h2>Artwork</h2>
         </header>
         <nav id="main_nav" class="main_nav">
            <ul class="cl">
               <li><a href="./">Home</a></li>
               <li>
                  <a id="main_nav_galleries" href="#">Galleries</a>
                  <ul>
                     <li><a href="gallery.php?gallery_id=36#artwork.php?artwork_id=237">New and notable</a></li>
                     <li><a href="gallery.php?gallery_id=34#artwork.php?artwork_id=40">Abstract Works</a></li>
                     <li><a href="gallery.php?gallery_id=3#artwork.php?artwork_id=237">All Works</a></li>
                  </ul>
               </li>
               <li><a href="contact.php">Contact</a></li>
               <li><a href="merchandise.php">Merchandise</a></li>
               <li><a href="info.php">Info</a></li>
            </ul>
         </nav>
      </div>

      <h1 id="thumb_carousel_title" class="thumb_carousel_title">2009</h1>
      <div class="thumb_carousel cb">
         <div class="arrow_column arrow_left">
            <a id="prev" class="icon-left-open-1" href="#"></a>
         </div>
         <div class="list_carousel cb">
            <ul id="thumb_gallery_preview" class="thumb_gallery_preview cl">
               <li><a href="#artwork.php?artwork_id=42" id="w42"><img src="./images/artwork/thumb/Monkey--2009_tn.jpeg?t=1426210342" alt="Monkey" width="250" height="217" /></a></li>
            </ul>
         </div>
         <div class="arrow_column arrow_right">
            <a id="next" class="icon-right-open-1" href="#"></a>
         </div>
      </div>
      <div class="bbq-content">
      
         <div class="bbq-loading" style="display:none; margin: 2em 0 0 2em;">
            <img src="./images/loader_white_bg.gif" alt="Loading..." />
         </div>
         <div class="bbq-item artwork cb"></div>
      </div>
   </div>
      <div class="cb">
         <footer>
            <p>All images and text Copyright &copy; 2009&ndash;2015 Artist</p>
         </footer>
      </div>

<script type="text/javascript" src="./javascript/jquery.min.js"></script>
<script type="text/javascript" src="./javascript/jquery.ba-bbq.min.js"></script>
<script type="text/javascript" src="./javascript/jquery.carouFredSel-6.2.1-packed.js"></script>
<script type="text/javascript">

$(function(){
   $.fn.preload = function() {
      var pathPrepend = './images/artwork/thumb/';
      this.each(function(){
         $('<img/>')[0].src = pathPrepend + this;
      });
   }
      
   
         var thumbImg = new Array("TouchMyMonkey--ThomasBrodhead--2009_tn.jpeg");
      $(thumbImg).preload();
         
   $('a[href="#"]').on('click', function(e) {
      e.preventDefault();
   });
      
   var wloc = String(window.location);
   var hashStr = '#artwork.php?artwork_id=';
   if (wloc.indexOf(hashStr) === -1) {
      window.location = '/gallery.php?gallery_id=28' + hashStr + '42';
   }

   $(window).on('load', function() {
      var prevHidden = true;
      var nextHidden = false;
      $('#thumb_gallery_preview').carouFredSel({
         onCreate: function() {
            $(this).trigger('currentPosition');
            $('#prev').addClass('hidden');

            $(window).on('resize', function() {
               if (prevHidden) {
                  $('#prev').addClass('hidden');
               }
               else {
                  $('#prev').removeClass('hidden');
               }
               if (nextHidden) {
                  $('#next').addClass('hidden');
               }
               else {
                  $('#next').removeClass('hidden');
               }
            });
         },
         circular: false,
         infinite: false,
         width: '100%',
         items: {
            visible: { min: 2 }
         },
         auto: false,
         prev: {
            button: '#prev',
            key: 'left'
         },
         next: {
            button: '#next',
            key: 'right'
         },
         scroll: {
            onAfter : function( data ) {
               $(this).trigger('currentPosition', function(pos) {
                  var visibleLength = data.items.visible.length;
                  var galleryLength = $('> *', this).length;
                  if (pos == 0) {
                     $('#prev').addClass('hidden');
                     $('#next').removeClass('hidden');
                     prevHidden = true;
                     nextHidden = false;
                  }
                  else if (pos == galleryLength - visibleLength) {
                     $('#next').addClass('hidden');
                     $('#prev').removeClass('hidden');
                     prevHidden = false;
                     nextHidden = true;
                  }
                  else {
                     $('#prev, #next').removeClass('hidden');
                     prevHidden = false;
                     nextHidden = false;
                  }
               });
            }
         }
      });

     // Keep a mapping of url-to-container for caching purposes.
     var cache = {
       // If url is '' (no fragment), display this div's content.
       '': $('.bbq-default')
     };
    
     // Bind an event to window.onhashchange that, when the history state changes,
     // gets the url from the hash and displays either our cached content or fetches
     // new content to be displayed.
     $(window).on( 'hashchange', function(e) {
      
       // Get the hash (fragment) as a string, with any leading # removed. Note that
       // in jQuery 1.4, you should use e.fragment instead of $.param.fragment().
       var url = $.param.fragment();
      
       // Remove .bbq-current class from any previously "current" link(s).
       $( 'a.bbq-current' ).removeClass( 'bbq-current' );
      
       // Hide any visible ajax content.
       $( '.bbq-content' ).children( ':visible' ).hide();
      
       // Add .bbq-current class to "current" nav link(s), only if url isn't empty.
       url && $( 'a[href="#' + url + '"]' ).addClass( 'bbq-current' );
      
       if ( cache[ url ] ) {
         // Since the element is already in the cache, it doesn't need to be
         // created, so instead of creating it again, let's just show it!
         cache[ url ].show();
        
       } else {
         // Show "loading" content while AJAX content loads.
         $( '.bbq-loading' ).show();
        
         // Create container for this url's content and store a reference to it in
         // the cache.
         cache[ url ] = $( '<div class="bbq-item"/>' )
          
           // Append the content container to the parent container.
           .appendTo( '.bbq-content' )
          
           // Load external content via AJAX. Note that in order to keep this
           // example streamlined, only the content in .infobox is shown. You'll
           // want to change this based on your needs.
           .load( url, function(){
             // Content loaded, hide "loading" content.
             $( '.bbq-loading' ).hide();
           });
       }
     });

      // Since the event is only triggered when the hash changes, we need to trigger
      // the event now, to handle the hash the page may have loaded with.
      $(window).trigger( 'hashchange' );
      $('body').css('visibility', 'visible');
  });
});

</script>
</body>
</html>
TomXampp
 
Posts: 59
Joined: 12. March 2015 03:58
Operating System: Windows 8.1
Top
Post a reply

Return to XAMPP for Windows

Who is online

Users browsing this forum: No registered users and 118 guests

Powered by Bitnami phpBB
Privacy Policy