Jump to content

AJAX LOADER:

roldahayes

By roldahayes
in PHP Coding Help

 Share

Recommended Posts

roldahayes Regular Member

roldahayes

Posted
Posted

Hi,

 

I have a page where members can edit their details and upload or edit their profile photos.

 

My question is, would it be possible to have an Ajax loader appear when they have submitted new photos?

 

The page takes a while to reload when a new photo is submitted and would like something like this to pop up.

 

http://www.gkmedia.co.uk/ajax-loader.gif

 

the code for my members page is:

<?PHP 

  session_start();
  header("Cache-control: private");

  include ("_common_functions.php");
  include ("_database_functions.php");

  loggedIn();
  
  //if admin
  if($_SESSION['level'] == '100')
  {
    $useroptions1 .= "<option value=\"\">SELECT";
    $useroptions2 .= "<option value=\"\">SELECT";

  $sql_query = "SELECT user_id, username FROM users ORDER by username";
$result = mysqli_query($db, $sql_query);
  
    while ($value = mysqli_fetch_object($result))
    {
      $username      = $value -> username;
      $userId        = $value -> user_id;
      $useroptions1 .= "<option value=\"$userId\">$username";
    }

$sql_query = "SELECT user_id, business_name FROM users ORDER by business_name";
$result = mysqli_query($db, $sql_query);
  
    while ($value = mysqli_fetch_object($result))
    {
      $business_name = $value -> business_name;
      $userId        = $value -> user_id;
      $useroptions2 .= "<option value=\"$userId\">$business_name";
    }

$adminSelect = "<div id=\"manage_users\">
                  <form action=\"\" method=\"post\">
                      <p><span>Select a user/business name to edit their details.</span>
		                <select id=\"userId1\" name=\"userId1\" onChange=\"clearSelect('userId2');\">$useroptions1</select> <select id=\"userId2\" name=\"userId2\" onChange=\"clearSelect('userId1')\">$useroptions2</select>
                      <input type=\"submit\" name=\"userEdit\" value=\"Submit\" />
                    </p>
                    </form>
	            </div>";

  }
  
  //if user is logged in, set top menu with user navigation.
  if(isset($_SESSION['valid_user']))
  { $topNav = $topNav = createTopNav('y'); }
  
  include('./html/header.html');
  
  echo "<script>$(window).load(function() {
   if(document.getElementById('b_postcode'))
   { 
     document.getElementById('postcode2').value = document.getElementById('b_postcode').value;
     usePointFromPostcode(document.getElementById('postcode2').value, placeMarkerAtPoint);
   }
  });</script>";
  
  if(isset($_POST['submit']))
  {
     //variables
    $user_id       = $_POST['userId'];
    $username      = trim($_POST['username']);
    $password      = md5($_POST['password']);
    $fullname      = addslashes($_POST['fullname']);
    $email         = $_POST['email'];
    $b_name        = addslashes($_POST['b_name']);
    $b_add_1       = addslashes($_POST['b_add_1']);
    $b_add_2       = addslashes($_POST['b_add_2']);
    $b_add_3       = addslashes($_POST['b_add_3']);
    $b_postcode    = $_POST['b_postcode'];
    $b_telephone   = $_POST['b_telephone'];
    $b_email       = $_POST['b_email'];
    $b_website     = $_POST['b_website'];
    $b_description = addslashes($_POST['b_description']);
    $b_profile     = $_POST['profile_image'];
    $lat           = $_POST['lat'];
    $lng           = $_POST['lng'];
    
    $err_flag = FALSE;
    
    //Checking mandatory fields are set
    if(!isset($username) || $username == '')
    { $error .= '<div class="error">Username is not set!</div>'; $err_flag = TRUE; }
    if(!isset($password) || $password == '')
    { $error .= '<div class="error">Please set a password.</div>'; $err_flag = TRUE; }
    if(!isset($fullname) || $fullname == '')
    { $error .= '<div class="error">No fullname set.</div>'; $err_flag = TRUE; }
    if(!isset($email) || $email == '')
    { $error .= '<div class="error">Please provide an email address.</div>'; $err_flag = TRUE; }
    if(!isset($b_name) || $b_name == '')
    { $error .= '<div class="error">Please provide a business name.</div>'; $err_flag = TRUE; }
    if(!isset($b_add_1) || $b_add_1 == '')
    { $error .= '<div class="error">Please supply address line 1 of your business.</div>'; $err_flag = TRUE; }
    if(!isset($b_add_2) || $b_add_2 == '')
    { $error .= '<div class="error">Please supply address line 2 of your business.</div>'; $err_flag = TRUE; }
    if(!isset($b_postcode) || $b_postcode == '')
    { $error .= '<div class="error">Please supply a postcode for your business.</div>'; $err_flag = TRUE; }
    if(!isset($b_description) || $b_description == '')
    { $error .= '<div class="error">Please provide a description about your business.</div>'; $err_flag = TRUE; }
    if($_POST['password'] == '')
    { $error .= '<div class="error">Password can not be blank. Please rectify</div>'; $err_flag = TRUE; }
    if($_POST['password'] != $_POST['password_cnf'])
    {  $error .= '<div class="error">Passwords do not match. Please rectify</div>'; $err_flag = TRUE; }
    
    if($err_flag == TRUE)
    { /* do nothing here...will show errors */ }
    else
    {
      $sql_update = "UPDATE users SET password = '$password', fullname = '$fullname', email = '$email', business_name = '$b_name', business_address_1 = '$b_add_1', business_address_2 = '$b_add_2', business_address_3 = '$b_add_3', business_postcode = '$b_postcode', business_telephone = '$b_telephone', business_email = '$b_email', business_website = '$b_website', business_description = '$b_description', profile_image = $b_profile, lat = '$lat', lng = '$lng' WHERE user_id='$user_id'";
      $return = doSql($sql_update);
      if($return[2] == TRUE)
      { echo '<div class="success"><p>Details successfully updated.</p></div>'; }
      
      //remove images
      //complicated code but best way to deal with dynamic generation
      $delete = $_POST['delete'];
      
      if (isset($delete))
      {
        $c ='0';
        foreach($delete as $id)
      {
         if(($c != '0') && ($c != count($delete)))
         { $string .= ', '; $string2 .= ', '; }
         else
         { $string .= ' '; }
         $string  .= $id;
         $string2 .= $id . ' = null';
         $c++;
        }
        
        //get current image id's
        $sql_query = "SELECT $string FROM users WHERE user_id = '$user_id' LIMIT 1";
        $result = doSql($sql_query);
        
        //remove images from user_images table
        foreach($delete as $field)
      {
          $$field = $result[3] -> $field;
          //echo $$field;  
          $sql_remove = "DELETE FROM user_images WHERE image_id = '".$$field."'";
          doSql($sql_remove);
        }
        
        //remove link from users table
        $sql_update = "UPDATE users SET $string2 WHERE user_id = '$user_id'";
        doSql($sql_update);
      }

      //image upload stuff
      if(isset($_FILES["userfile"]))
      {
       foreach ($_FILES["userfile"]["error"] as $key => $error2) 
       {
          if($error2 == UPLOAD_ERR_OK) 
          {
            $filename = $_FILES["userfile"]["name"][$key];
            if (substr($filename, -3) != 'JPEG' && substr($filename, -3) != 'jpeg' && substr($filename, -3) != 'JPG' && substr($filename, -3) != 'jpg' && substr($filename, -3) != 'bmp' && substr($filename, -3) != 'gif' && substr($filename, -3) != 'png')
            { $error .= '<div class="error">Not a valid image file. Only JPG, GIF or BMP images are allowed</div>'; }
            else
            {
              try
              {
                $returnid = upload('',$key);
                $k2 = $key+1;
                $sql_insert = "UPDATE users SET image_$k2 = $returnid WHERE user_id = '$user_id'";
                doSql($sql_insert);
                $success = '';
              }
              catch(Exception $e) 
              {
                echo $e->getMessage();
                $error .= '<div class="error">Sorry, could not upload file</div>';
              }
            }
          }
        }
      }
    }
    
    if(isset($success))
    {
      echo '<div class="success"><p>Files successfully updated.</p></div>';
    }
   
  //show any errors
  echo $error; 
  }
  
  if(isset($_POST['cancel']))
  { echo '<META HTTP-EQUIV="Refresh" CONTENT="0;URL=./index.php">'; }
  
  //import the scripts to run the map point locater
  echo '<script src="http://maps.google.com/maps?file=api&v=2&key='.GOOGLE_KEY.'" type="text/javascript"></script>';
  echo '<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key='.GOOGLE_KEY.'" type="text/javascript"></script>';
  echo '<script type="text/javascript" src="./javascript/gmap.js"></script>';
  
  //grab a user id. First if posted from another page, or if looking at page for first time use their session ID.
  $user_id = $_POST['userId'];
  if ($_POST['userId1']) $user_id = $_POST['userId1']; 
  if ($_POST['userId2']) $user_id = $_POST['userId2'];
  if (!isset ($user_id)) $user_id = $_SESSION['user_id'];
    
  $sql_query = "SELECT * FROM users WHERE user_id = '$user_id' LIMIT 1";
  $value = doSql($sql_query);
    
  $username      = $value[3] -> username;
  $fullname      = $value[3] -> fullname;
  $email         = $value[3] -> email;
  $date_joined   = $value[3] -> date_joined;
  $b_name        = $value[3] -> business_name;
  $b_address_1   = $value[3] -> business_address_1;
  $b_address_2   = $value[3] -> business_address_2;
  $b_address_3   = $value[3] -> business_address_3;
  $b_postcode    = $value[3] -> business_postcode;
  $b_telephone   = $value[3] -> business_telephone;
  $b_email       = $value[3] -> business_email;
  $b_website     = $value[3] -> business_website;
  $b_description = $value[3] -> business_description;
  $lat           = $value[3] -> lat;
  $lng           = $value[3] -> lng;
  $image_1       = $value[3] -> image_1;
  $image_2       = $value[3] -> image_2;
  $image_3       = $value[3] -> image_3;
  $image_4       = $value[3] -> image_4;
  $image_5       = $value[3] -> image_5;
  $profile_image = $value[3] -> profile_image;
  
  //hack out the filename being run
  $break = Explode('/', $_SERVER["SCRIPT_NAME"]);
  $file = $break[count($break) - 1]; 
   
  //Generate Images and create profile image selector dropdown
  for($i='1';$i<'6';$i++)
  {
    $n = 'image_' .$i;
  if($$n != '')
    {
      //imageResize setting max dimension for image at 200
      //hacking about the url to get getimagesize php function to work
      $img_size =  getimagesize("http://".$_SERVER['SERVER_NAME'] . str_replace($file, '', $_SERVER['PHP_SELF']) . "view_image.php?image_id=". $$n );
      $images  .= '<p><label>Image ' . $i . '</label><img class="members_image" src="view_image.php?image_id='. $$n . '"' . imageResize($img_size[0],$img_size[1], 400) .'></p>';
      $images  .= '<p><label>Delete image '. $i .'?</label><input type="checkbox" name="delete[]" value="image_'.$i.'" class="clear" /></p>
                   <p><label>Change image '. $i .':</label><input name="userfile[]" value="'.$$n.'" type="file"/></p>';
    $profile_image .= '<option value="image_'.$i.'">Image '.$i;
    }
    else
    {
      $images .= '<p><label>Upload image '. $i .':</label><input name="userfile[]" value="'.$$n.'" type="file"/></p>';
    }
  }
  
  echo $adminSelect;
  
?>

  <div id="membersSection" class="members">
  
  <h2>Your Profile Page</h2>
  <p>Here you can review your information and make updates to your viewable profile.</p>
  <p>Fields marked <span class="mandatory" title="Mandatory"> </span> are required.</p>
  
  <form action="" method="POST" enctype="multipart/form-data">
  <fieldset>
<legend><span>User Details</span></legend>
  <p>Enter details here to create an accout for logging into this website and for management of your business profile</p>
    <input type="hidden" name="userId" value="<?PHP echo $user_id; ?>" />
  <label>Username <span class="mandatory" title="Mandatory"> </span></label><input type="text" maxlength="255" id="" name="username" title="Select a username" value="<?PHP echo $username ?>">
  <label>Password <span class="mandatory" title="Mandatory"> </span></label><input type="password" maxlength="255" id="" name="password" title="Password" value="">
  <label>Confirm Password <span class="mandatory" title="Mandatory"> </span></label><input type="password" maxlength="255" id="" name="password_cnf" title="Password" value="">
  <label>Full Name <span class="mandatory" title="Mandatory"> </span></label><input type="text" id="" maxlength="255" name="fullname" title="Fullname" value="<?PHP echo $fullname; ?>">
  <label>Email Adress <span class="mandatory" title="Mandatory"> </span></label><input type="text" id="" maxlength="255" name="email" title="User contact email" value="<?PHP echo $email; ?>">
</fieldset>

<fieldset>
<legend><span>Business Details</span></legend>
  <p>Enter details here about your business that will be accessible to website visitors</p>
  <label>Business Name <span class="mandatory" title="Mandatory"> </span></label><input type="text" id="" maxlength="255" name="b_name" title="Enter the name of your business here" value="<?PHP echo $b_name; ?>">
  <label>Adress Line 1 <span class="mandatory" title="Mandatory"> </span></label><input type="text" id="" maxlength="255" name="b_add_1" title="Street Name" value="<?PHP echo $b_address_1; ?>">
  <label>Adress Line 2 <span class="mandatory" title="Mandatory"> </span></label><input type="text" id="" maxlength="255" name="b_add_2" title="Area" value="<?PHP echo $b_address_2; ?>">
  <label>Adress Line 3</label><input type="text" id="" maxlength="255" name="b_add_3" title="City" value="<?PHP echo $b_address_3; ?>">
  <label>Postcode <span class="mandatory" title="Mandatory"> </span></label><input type="text" id="" maxlength="255" name="b_postcode" id="b_postcode" title="Postcode" value="<?PHP echo $b_postcode; ?>">
  <label>Telephone Number</label><input type="text" id="" maxlength="255" name="b_telephone" title="Enter your business telephone here" value="<?PHP echo $b_telephone; ?>">
  <label>Contact Email Adress</label><input type="text" id="" maxlength="255" name="b_email" title="Enter your business email contact address here" value="<?PHP echo $b_email; ?>">
  <label>Website </label><input type="text" id="" maxlength="255" name="b_website" title="Enter your website URL address here" value="<?PHP echo $b_website; ?>">	  
    <label>Desription <span class="mandatory" title="Mandatory"> </span></label><textarea type="text" id=""  rows="20" maxlength="255" name="b_description" onblur="setbg('white')" title="Write a brief description of your business here"><?PHP echo $b_description; ?></textarea>
    <input type="hidden" name="lat" id="lat" value="<?PHP echo $lat ?>"><input type="hidden" name="lng" id="lng" value="<?PHP echo $lng ?>">
   </fieldset>
    
   <fieldset>
   <legend><span>Images</span></legend>
   <div id="images">
    <?PHP echo $images; ?>
    <input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
  </div>
    
  <p><label>Profile Picture</label>
    <select name="profile_image">
      <?PHP echo $profile_image; ?>
    </select>
    </p>
    <br/>
   </fieldset>

  <div id="mapsection">
    Postcode: <input type="text" id="postcode2" size="10" value="<?PHP if(isset($b_postcode)) echo $b_postcode; ?>"/> 
    <input type="button" value="Set Lat/Lng" onclick="javascript:usePointFromPostcode(document.getElementById('postcode2').value, setAll)" />

  <div id="markerMap" class="map" style="width:750px;height:450px; margin:auto;"></div>
  </div>
  
<input type="submit" class="regButton" name="submit" value="Submit"><input type="reset" class="regButton" value="Reset"><input type="submit" class="regButton" name="cancel" value="Cancel">
</fieldset>
  </form>
  </div>
  
  
<?PHP include('./html/footer.html'); exit; ?>

 

 

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.