roldahayes Posted December 18, 2009 Share Posted December 18, 2009 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; ?> Quote Link to comment Share on other sites More sharing options...
steveboj Posted December 18, 2009 Share Posted December 18, 2009 You have to do this with jQuery and AJAX - there's a good tutorial which includes a bit on loaders image here = http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-13/ Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.