Draggable not defined error...

Discussion in 'JavaScript' started by Sleeping Troll, Jan 25, 2009.

  1. #1
    This is my script:

    <?php
    require_once('xxx');
    mysql_select_db(xxx);
    
    $Msg = $_GET["Msg"];
    $ClientID = $_COOKIE["Brag_Flag_user"];
    //Get Clients Current Project if Exist Else Create Project
    $SQL="Select * From Projects where ClientID = '$ClientID' and Status = 'Current'";
    $ProjectInfo = mysql_query($SQL);
    $Info = mysql_fetch_array($ProjectInfo);
    if ($Info['ClientID'] != $ClientID)// Does current project exist?
        {
            $TemplateName = $_GET['TemplateName'];// TemplateName passed from selection on "home" page
            $SQL="Select * From Projects where TemplateName = '$TemplateName' and Status = 'Template'";//Get template data
            $ProjectInfo = mysql_query($SQL);
            $Info = mysql_fetch_array($ProjectInfo);
            $TemplateProjectID = $Info['ProjectID'];
            
            //Create New Project
            $SQL="Insert Into Projects (ClientID, TemplateName, Status) Values ('$ClientID', '$TemplateName', 'Current')";
            mysql_query($SQL);
    
            //Freshen Project Info
            $SQL="Select * From Projects where ClientID = '$ClientID' and Status = 'Current'";
            $ProjectInfo = mysql_query($SQL);
            $Info = mysql_fetch_array($ProjectInfo);
            $NewProjectID = $Info['ProjectID'];
            
            $SQL="Select * From Templates where TemplateName = '$TemplateName'";
            $TemplateData = mysql_query($SQL);
            $Data = mysql_fetch_array($TemplateData);
    
            //Copy Template Project Cropped Image to New Project cropped Image
            $Source = "Images/Cropped_Images/$TemplateName.png";
            $Destination = "Images/Cropped_Images/$NewProjectID.png";
            copy($Source,$Destination);
            
            //Copy Template Project Photo to New Project Photo
            $Source = "Images/Project_Photos/$TemplateName.png";
            $Destination = "Images/Project_Photos/$NewProjectID.png";
            copy($Source,$Destination);
            
            //Copy Template Photo Overlay to Project Photo Overlay
            $Source = "Images/Photo_Overlays/$TemplateName.png";
            $Destination = "Images/Photo_Overlays/$NewProjectID.png";
            copy($Source,$Destination);
            
            //Copy Template Preview to Project Preview
            $Source = "Images/Previews/$TemplateName.png";
            $Destination = "Images/Previews/$NewProjectID.png";
            copy($Source,$Destination);
    
            $SQL = "Select * From ProjectTexts Where ProjectID = '$NewProjectID'";
            //Copy Template Text Overlay to Project Text Overlay
            $Source = "Images/Text_Overlays/$TemplateName.png";
            $Destination = "Images/Text_Overlays/$NewProjectID.png";
            copy($Source,$Destination);
    
            //Get Text(s) from Template Texts Table, Insert into New Project Texts Table
            $SQL="Select * From ProjectTexts where ProjectID = '$TemplateProjectID' Order by TextID";
            $ProjectTexts = mysql_query($SQL);
            while ($Texts = mysql_fetch_array($ProjectTexts))
                {
                    $TextID = $Texts['TextID'];
                    $Text = $Texts['Text'];
                    $SQL="Insert into ProjectTexts (ProjectID, TextID, Text) Values ('$NewProjectID','$TextID','$Text')";
                    mysql_query($SQL);
                }
        }
    
    //Load/Freshen Project Info
    $SQL="Select * From Projects where ClientID = '$ClientID' and Status = 'Current'";
    $ProjectInfo = mysql_query($SQL);
    $Info = mysql_fetch_array($ProjectInfo);
    $ProjectID = $Info['ProjectID'];
    $TemplateName = $Info['TemplateName'];
    $SQL="Select * From Templates where TemplateName = '$TemplateName'";
    $TemplateData = mysql_query($SQL);
    $Data = mysql_fetch_array($TemplateData);
    $Loader = $Data['Loader'];
    //Setup Page
    if ($Data['Photo'] == "checked")// Does project include photo?
        {
    
            //Calculate Aspect Ratio
            $SQL="Select * From Photos Where TemplateName = '$TemplateName'";
            $PhotoPos = mysql_query($SQL);
            $Pos = mysql_fetch_array($PhotoPos);
            $IntWidth = $Pos['Width']*100000;
            $IntHeight = $Pos['Height']*100000;
            $divisor = $IntWidth/$IntHeight;
                if ($divisor >=1)
                    {
                        $divisor = $IntHeight/$IntWidth;
                    }
            $IntWidth = round($IntWidth/$divisor/100000);
            $IntHeight = round($IntHeight/$divisor/100000);
    
            //Flag Photo Present
            $PhotoPresent = "True";//For later conversion to javascript var
        }
    
    
    $SQL = "Select * From ProjectTexts Where ProjectID = '$ProjectID'";
            if ($ProjectTexts = mysql_query($SQL))
                {
                    $TextsArray = array();
                    while ($Texts = mysql_fetch_array($ProjectTexts))
                        {
                            $Text = urldecode($Texts['Text']);
                            array_push($TextsArray,$Text);
                            mysql_query($SQL);
                        }
                    $TextPresent = "True";//For later conversion to javascript var
                }
    ?>
    
    <!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">
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
    <META HTTP-EQUIV="Expires" CONTENT="-1"> 
    <head>
    <title>Brag Flags! Current Project</title>
    <?php
    if ($PhotoPresent == "True")
        {
            echo("
                        <script type='text/javascript' src='scripts/cropper/lib/prototype.js' language='javascript'></script>
                        <script type='text/javascript' src='scripts/cropper/lib/scriptaculous.js?load=builder,dragdrop' language='javascript'></script>
                        <script type='text/javascript' src='scripts/cropper/cropper.js' language='javascript'></script>
                        <script type='text/javascript' src='scripts/PhotoPresent.js' language='javascript'></script>
                    ");
        }
    if ($TextPresent == "True")
        {
            echo("
                        <script type='text/javascript' src='scripts/TextPresent.js' language='javascript'></script>
                    ");
        }
    ?>
    <script type="text/javascript">
    <!--
    var ProjectID = "<?php echo $ProjectID ?>";
    var TextPresent = "<?php echo $TextPresent ?>";
    var TextsArray = new Array()
    <?php foreach($TextsArray as $ID => $Text){echo "TextsArray[$ID] = \"$Text\";";} ?>
    var TextsString = TextsArray.join("~");
    var TemplateName = "<?php echo $TemplateName ?>"; 
    var PhotoPresent = "<?php echo $PhotoPresent ?>";   
    var ProjectPhoto = "Images/Project_Photos/"+TemplateName+".png"
    var Width = "<?php echo $Pos['Width'] ?>";
    var Height = "<?php echo $Pos['Height'] ?>";
    var Divisor = "<?php echo $divisor ?>";
    var Ratiox = "<?php echo $IntWidth ?>";
    var Ratioy = "<?php echo $IntHeight ?>";
    var Loader = "<?php echo $Loader ?>";
    var UploadOK;
    var CropOverlay = null;
    var CropTop;
    var CropLeft;
    var CropWidth=Width;
    var CropHeight=Height;
    var Preview = "Images/Previews/"+TemplateName+".png";
    function Init(Element)
        {
                try
                  {  // Firefox, Opera 8.0+, Safari
                      xmlHttp=new XMLHttpRequest();
                  }
                        catch (e)
                          {  // Internet Explorer
                              try
                                {
                                      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                                }
                                          catch (e)
                                        {
                                                 try
                                              {
                                                  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                                              }
                                                    catch (e)
                                                      {
                                                          alert("Your browser does not support AJAX!");
                                                              }
                                            }
                          }
            return;
        }
        
    function PageInit()
        {
            alert("PageInit")
            if (TextPresent == "True")
                {
                    document.getElementById('texts').style.visibility = "visible";
                }
                        
            if (PhotoPresent == "True")
                {
                    document.getElementById("Prompt").innerHTML = "<div align='center'><input type='button' name='Crop' id='Crop' value='Crop on' onclick = 'AttachCrop()'/></div>";
                    document.getElementById('EditImage').src = ProjectPhoto;
                    document.getElementById('Prompt').style.visibility = 'visible';
                }
            TxttoImg();
            document.getElementById("PreviewImage").src = Preview;
            return;
        }
        
    function PageRefresh()
        {
            if (TextPresent == "True")
                {
                    document.getElementById('texts').style.visibility = "visible";
                }
                        
            if (PhotoPresent == "True")
                {
                    document.getElementById("testwrapheading").innerHTML = "<div align='center' id = 'testwrapheading' name = 'testwrapheading' class = 'style1'>Updating Image<br>&nbsp;</div>";
                    document.getElementById("testwrapheading").innerHTML = "<div align='center' id = 'testwrapheading' name = 'testwrapheading' class = 'style1'>Uploaded Image<br>&nbsp;</div>";
                    document.getElementById("Prompt").innerHTML = "<div align='center'><input type='button' name='Crop' id='Crop' value='Crop on' onclick = 'AttachCrop()'/></div>";
                    document.getElementById('Prompt').style.visibility = 'visible';
                    document.getElementById('EditImage').src = ProjectPhoto;
                }
        TxttoImg();
        document.getElementById("PreviewImage").src = Preview;
        return;
        }
    
    function Delete()
        {
            var Check = confirm("Are you sure you wish to Delete the current Flag?");
            if (Check == true)
                { 
                    Init();
                    ReqStr = "Delete.php";
                    xmlHttp.open("Get",ReqStr,false);
                    xmlHttp.send(null);
                    window.location = "index.php";
                }
            return;
        }
        
    function Save()
        {
                {
                    Init();
                    ReqStr = "Save.php";
                    xmlHttp.open("Get",ReqStr,false);
                    xmlHttp.send(null);
                    window.location = "index.php";
                }
            return;
        }
    
    function AddtoCart()
        {
                {
                    Init();
                    ReqStr = "AddtoCart.php";
                    xmlHttp.open("Get",ReqStr,false);
                    xmlHttp.send(null);
                    window.location = "Cart.php";
                }
            return;
        }
    
    function Error(Err)
        {
            alert(Err + " Please try again.");
            stopUpload(".."+ProjectPhoto,300,300);
            document.getElementById('testwrap').innerHTML = "<img src='"+ProjectPhoto+"' width='300' alt='Edit image' title='Edit image' name='EditImage' id='EditImage'>";
            return;
        }
    -->
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <link href="BragFlags.css" rel="stylesheet" type="text/css" />
    </head>
    <body onload= PageInit()>
    <table width="100%" border="0">
        <tr>
            <!-- Bumper -->
            <td>&nbsp;</td>
            <!-- Bumper -->
            <!-- Login Panel Start -->
            <td width="90" align = "center" nowrap id = "Message">
                <div class = "style1"> <?php echo $Msg ?>
                        <div class = "style2"> 
                                <a href = "#" onclick = "Save()">Save Flag</a><br />
                                <a href = "#" onclick = "Delete()">Delete Flag</a><br />
                                <a href = "#" onclick = "AddtoCart()">Add to Cart</a><br />
                        </div>
                </div></td>
            <!-- Login Panel End -->
            <!-- Bumper -->
            <td width="1">&nbsp;</td>
            <!-- Bumper -->
            <!-- Banner Panel Start -->
            <td id = "Banner" align="center" height="120"><div><img src="Images/Bnnr.png" alt="Brag Flags Designer" title="Brag Flags Designer"/></div></td>
            <!-- Banner Panel End -->
            <!-- Bumper -->
            <td>&nbsp;</td>
            <!-- Bumper -->
            <!-- Navigation Panel Start -->
            <td width="90" align="center" valign="middle" nowrap id = "Navigation">
                <div class="style2"><a href = "FAQ.php">FAQ</a><br />
                                <a href = "Contact.php">Contact Us</a><br />
                                <a href = "About.php">About us</a><br />
                                <a href = "Cart.php">My Cart</a><br />
                </div></td>
            <!-- Navigation Panel End -->
            <!-- Bumper -->
            <td>&nbsp;</td>
            <!-- Bumper -->
        </tr>
    </table>
    <table width="100%">    
        <tr>
    
                                            <!-- Left Panel Start -->
    <?php
    if ($TextPresent == "True")
        {
            $ID = '0';
            echo("
                        <td width='50%' height='60' align='center' valign='top' id = 'Left_Panel'>
                            <div id='texts' style='visibility:hidden' name='texts' align='center' class = 'style2'>
                            <div class = 'style1'>Edit Text</div>
                            <form id = 'Texts' name = 'Texts'>
                    ");
                        //Get Texts Info
                        foreach($TextsArray as $ID => $Text)
                            {
                                $DecodedText = urldecode($Text);
                                echo("    
                                            <input type='text' class = 'TextBox' id= '$ID' name= '$ID' value ='$DecodedText' onKeyup ='SetText(this.id,encodeURIComponent(this.value))'/>
                                        ");
                            }
            echo("
                            <div>
                            <input name='UpdateText' type='button' id='UpdateText' value='Update' onClick = 'TxttoImg();'>
                            </div>
                            </form>
                            </div>
                        </td>
                    ");
        }
    ?>        
                                            <!-- Left Panel End -->
                                            <!-- Right Panel Start -->
            <td width="50%" height="610" rowspan="4" align="right" valign="top" id = 'Right_Panel'>
    <?php
            echo("
                <div align='center' id='PreviewWrap' name='PreviewWrap'><img src='' alt='Preview image' title='Preview image' width='400' id='PreviewImage'>
                    ");
    ?>        
                </div>
            </td>
            <!-- Right Panel End -->    
        </tr>
    <?php
    if ($PhotoPresent == "True")
        {
            echo("
                        <tr>
                            <td id='UploadedImage' name='UploadedImage' width='50%' align='center' valign='middle' nowrap>
                                <div align='center' id = 'testwrapheading' name = 'testwrapheading' class = 'style1'>Select an Image to upload<br>&nbsp;</div>
                                <div id='testwrap'>
                                    <img src='' width='300' alt='Edit image' title='Edit image' id='EditImage' name='EditImage'/>
                                </div>
                                <div id='Prompt' name='Prompt' style='visibility:visible'></div>
                            </td>
                        </tr>
                        <tr>
                            <td align='center' valign='middle' nowrap></td>
                        </tr>
                        <tr>
                            <td width='50%' height='60' align='center' valign='bottom' nowrap>
                                <form id='UploadData' name = 'UploadData' action='Uploader.php' method='post' enctype='multipart/form-data' target='upload_target' >
                                    <div id='f1_upload_form' align='center'>
                                    <div>
                                        <input type='hidden' name='MAX_FILE_SIZE' value='5000000' />
                                        <input name='UploadFile' type='file' accept='image/*' size=0 onChange = 'StartUpload(this.value)'/>
                                    </div>
                                    </div>
                                </form>
                            </td>
                        </tr>
                    ");
            }
    ?>
    </table>
    <iframe border= "0" id = "upload_target" name = "upload_target" width = "0" Height = "0"></iframe>
    </body>
    </html>
    Code (markup):
    My javascript includes (in red)(cropper ui) is throwing a "draggable is not defined" error, this script was working and now is not. I have tried relocating scripts to no avail, please help.

    Url is http://www.bragflags.bravehost.com select "Xmas" template
    This is the line in cropper.js which throws error:

    Object.extend(Object.extend(CropDraggable.prototype,Draggable.prototype),{initialize:function(_1){
    this.options=Object.extend({drawMethod:function(){
    }},arguments[1]||{});
    Code (markup):
     
    Sleeping Troll, Jan 25, 2009 IP