Skip to content

banner ajax
The Complete Reference: Ajax

Examples: Page Generator

Home Examples Chapter 6 Page Generator
zip Download
This Example

Generate Webpages

Shortcut Options
All Page/Objects Size:
Bundled Level:

Object Type Total Size Spread Across Files (Traditional) Spread Across Files (Bundled)
HTML
JavaScript
CSS
Images  



 

 
  • Front End
view plainprint
<!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" />
<title>Chapter 6 : Networking Considerations - Create Webpages</title>
 
<link rel="stylesheet" href="https://ajaxref.com/ch6/global.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajaxref.com/ch6/ajaxtcr.js" >
</script>
<script type="text/javascript">
 
 
 
function prepareRequests(form)
{
    var url = "https://ajaxref.com/ch6/pagegenerator/createpages.php";
    var options = { method: "GET",
              outputTarget : "responseOutput",
            serializeForm: form
      };
    
    AjaxTCR.comm.sendRequest(url,options);
}
 
function updateSize(sizeSelect, form)
{
    var size = sizeSelect.options[sizeSelect.selectedIndex].value;
    switch(size)
    {
        case "small":
            form.jsSize.selectedIndex = 0;
            form.cssSize.selectedIndex = 0;
            form.htmlSize.selectedIndex = 0;
            form.imageSize.selectedIndex = 0;
            
            form.jsFilesTraditional.selectedIndex = 1;
            form.cssFilesTraditional.selectedIndex = 1;
        break;
        case "medium":
            form.jsSize.selectedIndex = 1;
            form.cssSize.selectedIndex = 1;
            form.htmlSize.selectedIndex = 1;
            form.imageSize.selectedIndex = 1;
            
            form.jsFilesTraditional.selectedIndex = 2;
            form.cssFilesTraditional.selectedIndex = 2;
        break;
        case "large":
            form.jsSize.selectedIndex = 2;
            form.cssSize.selectedIndex = 2;
            form.htmlSize.selectedIndex = 2;
            form.imageSize.selectedIndex = 2;
            
            form.jsFilesTraditional.selectedIndex = 3;
            form.cssFilesTraditional.selectedIndex = 3;
        break;
    }
}
 
function updateBundle(bundleSelect, form)
{
    var bundle = bundleSelect.options[bundleSelect.selectedIndex].value;
    switch(bundle)
    {
        case "inline":
            form.jsFilesBundled.selectedIndex = 0;
            form.cssFilesBundled.selectedIndex = 0;
            form.imageFilesBundled.selectedIndex = 0;
        break;
        case "medium":
            form.jsFilesBundled.selectedIndex = 1;
            form.cssFilesBundled.selectedIndex = 1;
            form.imageFilesBundled.selectedIndex = 0;
        break;    
    }
}
 
function toggleCustom(obj, form)
{
    var selected = obj.options[obj.selectedIndex].value;
    var customName = "custom" + obj.name.substring(0, 1).toUpperCase() + obj.name.substring(1);
    var customObj = form[customName];
    
    if (selected == "custom")
        customObj.style.display = "";
    else
        customObj.style.display = "none";
}
 
function handleCustom(obj)
{
    var form = document.requestForm;
    var customName = "custom" + obj.name.substring(0, 1).toUpperCase() + obj.name.substring(1);
    var customObj = form[customName];
    
    var retVal = -1;
    var customVal = customObj.value;
    if (isNaN(customVal) || customVal > 200 || customVal < 0)
        alert("Please choose a value between 0 and 200 for custom fields.");
    else
        retVal = customVal;
        
    return retVal;
}
 
window.onload = function () 
{ 
 
 //handle all the possible customs
 document.requestForm.jsFilesTraditional.onchange = function(){toggleCustom(this, this.form);};
 document.requestForm.jsFilesBundled.onchange = function(){toggleCustom(this, this.form);};
 document.requestForm.cssFilesTraditional.onchange = function(){toggleCustom(this, this.form);};
 document.requestForm.cssFilesBundled.onchange = function(){toggleCustom(this, this.form);};
 document.requestForm.imageSize.onchange = function(){toggleCustom(this, this.form);};
 document.requestForm.imageFilesBundled.onchange = function(){toggleCustom(this, this.form);};
 
 document.requestForm.size.onchange = function(){updateSize(this, this.form);};
 document.requestForm.bundleMode.onchange = function(){updateBundle(this, this.form);};
 document.requestForm.requestButton.onclick = function () { prepareRequests(this.form); };
};
</script>
 
</head>
<body>
<div class="content">
<h1>Generate Webpages</h1>
<form action="#" name="requestForm">
<fieldset>
 
<table width="100%">
    <tr class="row">
        <th colspan="2">Shortcut Options</th>
    </tr>
<tr class="row">
    <td width="150">All Page/Objects Size:</td>
    <td>
      <select name="size">
          <option value="small">Small</option>
        <option value="medium">Medium</option>
        <option value="large">Large</option>
        <option value="custom">Custom</option>
   </select>
    </td>
    </tr>
    <tr class="row">
    <td>Bundled Level:</td>
    <td>
      <select name="bundleMode">
          <option value="inline">2 files(html w/inline, image)</option>
        <option value="medium">4 Files (html, js, css, image)</option>
        <option value="custom">Custom</option>
   </select>
    </td>
</tr>    
</table>
 
<br />
<table width="100%" id="size">
    <tr class="row">
        <th width="125">Object Type</th>
        <th width="250">Total Size</th>
        <th width="250">Spread Across Files (Traditional)</th>
        <th>Spread Across Files (Bundled)</th>
    </tr>
    <tr class="row">
    <td>HTML</td>
    <td colspan="3">
      <select name="htmlSize">
          <option value="small">Small</option>
        <option value="medium">Medium</option>
        <option value="large">Large</option>
    </select>
    </td>
    </tr>
    <tr class="row">
    <td>JavaScript</td>
    <td>
      <select name="jsSize">
          <option value="small">Small (60-360 lines)</option>
        <option value="medium">Medium (300-1800 lines)</option>
        <option value="large">Large (600-3600 lines)</option>
    </select>
    </td>
    <td>
      <select name="jsFilesTraditional">
          <option value="0">Inline</option>
          <option value="1" selected="selected">1</option>
        <option value="5">5</option>
        <option value="12">12</option>
        <option value="custom">Custom</option>
        &nbsp;<input type="text" value="10" name="customJsFilesTraditional" style="display:none;" />
    </select>
    </td>
    <td>
      <select name="jsFilesBundled">
          <option value="0">Inline</option>
          <option value="1">1</option>
        <option value="custom">Custom</option>
        &nbsp;<input type="text" value="10" name="customJsFilesBundled" style="display:none;" />
    </select>
    </td>
    </tr>
    <tr class="row">
    <td>CSS</td>
    <td>
      <select name="cssSize">
          <option value="small">Small (60-100 lines)</option>
        <option value="medium">Medium (150-200 lines)</option>
        <option value="large">Large (300-400 lines)</option>
    </select>
    </td>
    <td>
      <select name="cssFilesTraditional">
          <option value="0">Inline</option>
          <option value="1" selected="selected">1</option>
        <option value="5">5</option>
        <option value="12">12</option>
        <option value="custom">Custom</option>
        &nbsp;<input type="text" value="10" name="customCssFilesTraditional" style="display:none;" />
    </select>
    </td>
    <td>
      <select name="cssFilesBundled">
          <option value="0">Inline</option>
          <option value="1">1</option>
        <option value="custom">Custom</option>
        &nbsp;<input type="text" value="10" name="customCssFilesBundled" style="display:none;" />
    </select>
    </td>
    </tr>
    <tr class="row">
    <td>Images</td>
    <td>
      <select name="imageSize">
          <option value="10">10 images</option>
        <option value="25">25 images</option>
        <option value="50">50 images</option>
        <option value="custom">Custom</option>
    </select>
    &nbsp;<input type="text" value="10" name="customImageSize" style="display:none;" />
    </td>
    <td>
      <select name="imageFilesTraditional">
          <option value="normal" selected="selected">1 per image</option>
    </select>
    </td>
    <td>
      <select name="imageFilesBundled">
          <option value="1">1</option>
        <option value="5">5</option>
        <option value="custom">Custom</option>
        &nbsp;<input type="text" value="10" name="customImageFilesBundled" style="display:none;" />
    </select>
    </td>
    </tr>    
</table>
<br />
 
</fieldset>
  
<br />
  <input type="button" name="requestButton" id="requestButton" value="Create Pages" />
</form>
<br />
</div>
<div id="response" class="results">
    <div id="pageLoadOutput">&nbsp;</div><br />
    <div id="responseOutput">&nbsp;</div>
</div>
 
</body>
</html>
McGraw Hill: Osborne This Site Sponsored by PINT Report a bug