Database Pages Are Flicking

MySQL database
#1

Hi guys. I am currently working on my first ever PHP MYSQL website (for my brother’s first book), and I am very excited about it.

The site is PHP site, with a MySQL database. It all takes place on a single Index page where a couple of functions pull a Navigation menu from a CSS style-sheet, and the content pages from MySQL. Again, the images are not stored in the database. They are in a folder and the menu function pulls the CSS to display them.

The content function displays the text coming straight from from MySQL. The issue that I am having is that every time I click in any of the menu buttons (left side of the page), there’s a page flick or flash, which is very annoying. It seems that everything is being reloaded on each page click, which I guess causes the flick.

I even tried pre-loading all site images in a hidden div (hidden with css). Here’s the website: http://www.javierbooks.com/index.php

and here’s the code for the menu function:
[php]function menuDisplay(){
$query = mysql_query(“SELECT id, title, linklabel FROM mybooks WHERE showing =‘1’ ORDER BY id ASC”) or die(mysql_error());

// DETERMINE which page ID to USE in our query below ********************************************************************------------------------------
if (!isset($_GET['pid'])) {
	$pageid = '1';
} else {
	$pageid = preg_replace('#[^0-9]#i', '', $_GET['pid']); // filter everything but numbers for security(new)
	//preg_replace($pattern, $replacement, $string);//preg_replace() Function structure

//***********************************************************************************************************************
}
$menuDisplay = ‘’;
while ($row = mysql_fetch_assoc($query)) {
$pid = $row[‘id’];
$postLinkLabel = $row[‘linklabel’];

	//Prepare to Show and Highlight buttons
	if($pageid==$pid){
	//$pid = mysql_real_escape_string($pid);
	//$menuDisplay .= '<a href="index.php?pid=' . $pid . '">' . $linklabel . '</a><br />';//original link
	
	
	//DISPLAY BUTTONS - HIGHLIGHTED STATE
	if( ($row['title']) == 'Inicio'){		
			$menuDisplay .= '<li class="inicio_selected"> <a href="index.php?pid='.$pid. '">' . $postLinkLabel. '</a></li>';}	
	
	if( ($row['title']) == 'Autor'){		
			$menuDisplay .= '<li class="autor_selected"> <a href="index.php?pid='.$pid. '">' . $postLinkLabel. '</a></li>';}	

	if( ($row['title']) == 'Libros'){		
			$menuDisplay .= '<li class="libros_selected"> <a href="index.php?pid='.$pid. '">' . $postLinkLabel . '</a></li>';}

	if( ($row['title']) == 'Discusion'){		
			$menuDisplay .= '<li class="discusion_selected"> <a href="index.php?pid='.$pid. '">' . $postLinkLabel . '</a></li>';}

	if( ($row['title']) == 'Ventas'){		
			$menuDisplay .= '<li class="ventas_selected"> <a href="index.php?pid='.$pid. '">' . $postLinkLabel . '</a></li>';}	

	if( ($row['title']) == 'Contacto'){		
			$menuDisplay .= '<li class="contacto_selected"> <a href="index.php?pid='.$pid. '">' . $postLinkLabel . '</a></li>';}											
	}

//DISPLAY BUTTONS - NORMAL STATE
else{
if( ($row[‘title’]) == ‘Inicio’)
$menuDisplay .= ’

  • ’ . $postLinkLabel.’’ . ‘
    • ’; 
    if( ($row['title']) == 'Autor')
$menuDisplay .= '<ul class="menu"><li class="autor_but"> <a href="index.php?pid='.$pid. '">' . $postLinkLabel . '</a></li>';

if( ($row['title']) == 'Libros')
$menuDisplay .= '<ul class="menu"><li class="libros_but"> <a href="index.php?pid='.$pid. '">' . $postLinkLabel . '</a></li>';

if( ($row['title']) == 'Discusion')
$menuDisplay .= '<ul class="menu"><li class="discusion_but"> <a href="index.php?pid='.$pid. '">' . $postLinkLabel . '</a></li>';

if( ($row['title']) == 'Ventas')
$menuDisplay .= '<ul class="menu"><li class="ventas_but"> <a href="index.php?pid='.$pid. '">' . $postLinkLabel. '</a></li>';

if( ($row['title']) == 'Contacto')
$menuDisplay .= '<li class="contacto_but"> <a href="index.php?pid='.$pid. '">' . $postLinkLabel . '</a></li>';	
}
	
}
	
echo $menuDisplay;		
	}[/php]

    The content function is similar:
    [php]function bookContent(){

    // DETERMINE which page ID to USE in our query below ********************************************************************
if (!isset($_GET['pid'])) {
	$pageid = '1';
} else {
	
	$pageid = preg_replace('#[^0-9]#i', '', $_GET['pid']);} // filter everything but numbers for security(new)
	//preg_replace($pattern, $replacement, $string);//preg_replace() Function structure

// Query the body section for the proper page
$query = mysql_query ("SELECT content,title,author FROM mybooks WHERE id = '$pageid' LIMIT 1") or die (mysql_error());  
while ($row = mysql_fetch_array($query)) { 

echo $row['title'].' by ';
echo '<b>'.$row['author']. '</b><br>';
echo $row['content'].'<br><p>';
}

    }[/php]

    Can anybody help me figure out why the page flick is occurring?
    Thanks in advance for your help.

    #2

    Hi there,

    The page flick is the page reloading. The method you are using must reload the page. If you want to avoid this then you will need to look into dynamically changing the content of the website using AJAX.

    #3

    Yeah, I know AJAX is more suited to do this, but I was hoping to avoid it since I have never used AJAX.

    What I don’t understand is that I have an html version of the site, and this does not occur as frequently, especially if I am working on my local machine. Usually, things will flick or wait the first time they are loaded. But I guess using databases is always much slower.

    Another thing is that the entire page flicks, not just the images… even the background color.

    Thanks for your inside, though.

    #4

    You can try putting any javascript at the end of your body tag. This is the slowest thing for the browser to process, so provided the CSS and HTML is before it, the page should load much quicker - this should lead to less noticeable page refreshes.

    #5

    Thanks for your help.

    I am basically a PHP newbie, and I am just learning. Not sure how to implement the javascript thing, though.

    #6

    OK figured out how to accomplish loading dynamic menu and content without page refresh. So, for those interested here’s how I did it:

    1) As mentioned before, I had two main functions – one that creates the dynamic PHP and MySQL buttons Menu, and another the Content to use when menu links are clicked. I had to make one minor modification to this structure.I converted the menu function menuDisplay() to a separate PHP file file. The reason why is I am not sure a PHP function can bee passed through jQuery for no refresh effect.

    So, before the links generated by the menuDisplay function would look like this:
    [php]$menuDisplay .= ‘


    ’;}[/php]. A call the same home page was performed.

    Now it looks like this:[php] $menuDisplay .= ‘


    ’;}[/php]. This is a call to the new content php file. So this was the main change to the PHP code, aside from the fact that now the current menu item highlighted is not performed within PHP, but rather from jQuery itself.

    2) I created an external javascript file that contains the jQuery code to be rendered on the page. So in the home page (spanish.php) header, I load the javascript

    [code]

    [/javascript]

    [/code]

    and here’s the actual jQuery file: import_j-Query_code.js.
    3)

    [code]$(document).ready(function() {

    //highlighs first button on page load	
$("#MENU li a").eq(0).addClass("JJ_selected");

//create click href function that will add jQuery NO REFRESH functionality
$(".fontLI").click(function() {
									
	$("#CONTENT").load($(this).attr('href'));
	return false;
	});
																																					
	$("#MENU a").click(function(){
	
	//HIGHLIGHT CURRENT BUTTON ON CLICK
	$('#MENU a').removeClass('JJ_selected'); //removes highlics when next item is clicked
	$(this).toggleClass('JJ_selected'); //highlights the item
	//HIGHLIGHT ON CLICK ENDS
	
	//adding nice animation effects to CONTEN div
	$('#CONTENT').hide();
	$('#CONTENT').slideDown(1000);																				
	
	});
});[/code]

    It all works great and you can see it in action here: http://www.javierbooks.com

    However, the only down turn is that this will not work if the user has javascript disabled. Now if javascript is disabled, the content will load in its own page, andit will break the flow of the website. still need to figure how to make jQuery code to render when javascript is disabled, or artenately have the old website, without jQuery code, load if javascript is disabled on the User Machines.

    If anyone has questions or comments, please post.
    Thanks

    #7

    I found this priceless piece of code. It detects whether javascript is disabled in your browser, and if so it can refresh to or redirect to an alternate javascript-safe page. This is great because now you don’t have to worry about using javascript or how you code it, as long as you are willing to create an alternate page for that 3-5% user population that may have javascript disabled (our using a browser that does not support it).

    You must place the script in between the tags of your page. Here’s the code:
    [php]

    Your browser does not support JavaScript or you have javascript disabled.

    You must re-enable JavaScript for a richer experience of this site

    You will be redirected to a javascript-safe website in about 5 SECONDS!

    Learn how to enable javascript
    [/php]

    It all happens in a single line of code, enclosed by the tag:

    [php][/php]
    Then you can add any html valid code to let the users know of what’s happening (This is optional). Also, you can change the refresh time you want the message to be displayed before it jumps to the new no javascript page.

    This No Script code will alert visitorsr about being redirected to a new page.
    This comes in especially handy for web designers and developers using jQuery/AJAX. So now your site can be as dynamic and sleek as you want it to be.

    Good Luck!

    Sponsor our Newsletter | Privacy Policy | Terms of Service