Solved

Progressive Enhancement - Changing the way modules load with jQuery

Posted on 2011-02-18
3
251 Views
Last Modified: 2012-05-11
Hey people!

I am currently working on a new home page for our staff and students. I have been developing a page similar to iGoogle, BBC, etc with modules that can be added/edited/deleted and moved so a user can customise their home page.

I can't guarantee that all users will have JavaScript enabled so I have taken the progressive enhancement approach, using PHP to handle users and sessions as well as generating the pages. I have setup a class called init() that handles all the page initialisation (user checks, session setups, generating modules, etc) which also displays all the modules (in the right order).

Everything seems to work fine without any JavaScript needed; however the time has come to make the page more dynamic and user friendly. The first stage is to dynamically load each module, using AJAX requests to build the modules and fade them into view once loaded.

With all that in mind, my question is: How can I load each module dynamically, whilst still retaining the progressive enhancement approach?

I like to consider myself an intermediate level PHP developer; however JavaScript is quite new to me. I understand jQuery, however building a web application like this is a little daunting. If there is anything that appears wrong or badly coded in here then please let me know.

I don't particularly want to post all my source code so please let me know what else you would like to see and I'll post it for you.

Here is the code inside the index.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/text.css"></head>
<link rel="stylesheet" type="text/css" href="css/960.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.7.custom.css">
<link rel="stylesheet" type="text/css" href="css/desktop.css">

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="js/module-behaviour.js"></script>

<?php
ini_set('display_errors', 1);
require_once('includes/init.php');
require_once('includes/logs.php');
require_once('includes/curl.php');
require_once('includes/parseFeed.php');
$init = new init();

// Include the CSS for each of the modules
foreach($init->dashboard as $module)
	{echo '<link rel="stylesheet" type="text/css" href="modules/'.$module['name'].'/css/'.$module['name'].'.css">'."\n";}
?>

<title>Portal - Personalised Dashboard</title>

</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1 id="logo">Portal - Personalised Dashboard</h1>
    </div>
    <div id="dashboard">
		<?php foreach($init->dashboard as $module){$init->loadModule($module);} ?>
    </div>
    <div id="errors"></div>
</div>
</body>
</html>

Open in new window


The loadModule() method runs through some checks to get the config options and then includes default.php which I have included here:
        <div class="module <?php echo $mod_name; ?>" id="<?php echo $unique_id; ?>">
            <div class="module_wrap">
            	<h2><?php echo $mod_title; ?></h2>
                <div class="module_content">
            	<?php include $mod_file; ?>
                </div>
            
            </div>
        </div>

Open in new window


The $mod_file is the php file for the module that needs to be loaded. All the parsing of config options and dynamic data is done within each module's source.

Please let me know if you need any more code.

Thanks for your help,
James
0
Comment
Question by:nikez2k4
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 110

Assisted Solution

by:Ray Paseur
Ray Paseur earned 250 total points
ID: 34925307
I think you might want to make JavaScript a hard-and-fast requirement.  I do not know of any way you can get jQuery to work without it!
0
 
LVL 43

Accepted Solution

by:
Rob earned 250 total points
ID: 36447360
Ray is right but you could try using the <noscript> tags as a way of degrading gracefully

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_noscript
0
 
LVL 110

Expert Comment

by:Ray Paseur
ID: 36447425
Wow, I had forgotten about this question.  Maybe the Asker forgot, too!
0

Featured Post

The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question