Jump to content

imgrooot

Members
  • Posts

    383
  • Joined

  • Last visited

  • Days Won

    1

Everything posted by imgrooot

  1. The thing is, if I have 10 records on a page and I use the above javascript code to show the hidden div, it will show the div for all 10 records at the same time. I don't want that. I just want it show a div for each unique record one at a time as I hover my mouse over them. So that is why I am asking what the javascript code will look like to make that work?
  2. Here's what I'm trying to do. I retrieve results using php foreach loop. Within that loop results, I want to show a div(.show-details) on mouse over only. How do I do that? This is my code so far. <style> .show-details { display: none; } </style> $get_records = $db->prepare("SELECT * FROM records WHERE record_id = :record_id"); $get_records->bindParam(':record_id', $record_id); $get_records->execute(); $result_records = $get_records->fetchAll(PDO::FETCH_ASSOC); if(count($result_records) > 0){ foreach($result_records as $row) { $get_record_title = $row['record_title']; $get_record_details = $row['record_details']; $get_record_price = $row['record_price']; ?> <div class="product"> <div class="product-title"> <?php echo $get_record_title; ?> </div> <div class="product-price"> <?php echo $get_record_price; ?> </div> </div> <div class="show-details"> <?php echo $get_record_details; ?> </div> <?php } } else { echo 'no results.'; } <script> $(document).ready(function() { $(".product").mouseover(function(){ $(".show-details").css("display", "block"); }); }); </script>
  3. Say I have this loop. foreach($record as $row) { <div class="hello">Hello World!</div> } I want to loop through and add a letter alongside the "Hello World!" above. To do that, I found this code. $azRange = range('A', 'Z'); foreach ($azRange as $letter) { print("$letter\n"); } How can I combine the two loops so that I get a result like this? A Hello World! B Hello World! C Hello World! D Hello World! E Hello World! F Hello World!
  4. I am trying out a new script that lets me resize an image before uploading. It is based on this script. http://www.w3bees.com/2013/03/resize-image-while-upload-using-php.html Basically what happens is, it resizes and makes 3 thumbnails and puts them in their relative folder. That works. The part that's giving me the problem is when inserting it into the database. Error says the "image_path" cannot be null. Since it's creating an array of 3 different thumbnails, should I create 2 more fields in the database tabel to account for that? If so, how would I insert the 3 different thumbnail paths into the query? What would it look like? Below is my code. <?php $db_userid = intval($row['user_id']); $get_item_id = intval($row['item_id']); // settings $max_file_size = 5242880; // 5mb $valid_exts = array('jpeg', 'jpg', 'png', 'gif'); // thumbnail sizes $sizes = array(100 => 100, 150 => 150, 250 => 250); // dir paths $target_dir = 'images/'.$db_userid.'/items/'.$get_item_id.'/'; if ($_SERVER['REQUEST_METHOD'] == 'POST' AND isset($_FILES['image'])) { if(!empty($_FILES['image']['name'])) { if($_FILES['image']['size'] < $max_file_size ){ // get file extension $ext = strtolower(pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION)); if(in_array($ext, $valid_exts)) { function resize($width, $height){ global $db_userid; global $get_item_id; /* Get original image x y*/ list($w, $h) = getimagesize($_FILES['image']['tmp_name']); /* calculate new image size with ratio */ $ratio = max($width/$w, $height/$h); $h = ceil($height / $ratio); $x = ($w - $width / $ratio) / 2; $w = ceil($width / $ratio); /* new file name */ $path = 'images/'.$db_userid.'/items/'.$get_item_id.'/'.$width.'x'.$height.'_'.$_FILES['image']['name']; /* read binary data from image file */ $imgString = file_get_contents($_FILES['image']['tmp_name']); /* create image from string */ $image = imagecreatefromstring($imgString); $tmp = imagecreatetruecolor($width, $height); imagecopyresampled($tmp, $image, 0, 0, $x, 0, $width, $height, $w, $h); /* Save image */ switch ($_FILES['image']['type']) { case 'image/jpeg': imagejpeg($tmp, $path, 100); break; case 'image/png': imagepng($tmp, $path, 0); break; case 'image/gif': imagegif($tmp, $path); break; default: exit; break; } return $path; /* cleanup memory */ imagedestroy($image); imagedestroy($tmp); } /* resize image */ foreach($sizes as $w => $h) { if(!is_dir($target_dir)){ mkdir($target_dir, 0775, true); } $files[] = resize($w, $h); } $insert_image = $db->prepare("INSERT INTO images(user_id, item_id, image_path, date_added) VALUES(:user_id, :item_id, :image_path, :date_added)"); $insert_image->bindParam(':user_id', $db_userid); $insert_image->bindParam(':item_id', $get_item_id); $insert_image->bindParam(':image_path', $path); $insert_image->bindParam(':date_added', $item_date_added); if(!$insert_image->execute()) { $errors[] = 'There was a problem uploading the image!'; } else { if(empty($errors)) { $db->commit(); $success = 'Your item has been saved.'; } else { $db->rollBack(); } } } else { $errors[] = 'Unsupported file'; } } else{ $errors[] = 'Please upload image smaller than 5mb'; } } else { $errors[] = 'An image is required!'; } }
  5. Basically the "title" and "details" inputs are for showing text on a page. I need CKEditor for the "details" input so that the user can modify the text. That seo_description input is suppose to have the same value as the "details" input. So instead of making the user write the same text again in the seo_page_description textarea, I am having it so that it automatically adds to it from the "details" input. And since seo_page_description is only going to showing in the meta details in the header, I only need it in plain text. One thing I noticed. The textarea that has the CKeditor; it inserts the text(with tags) into the MySql database fine. I can also retrive it from the database fine. It includes all the html tags. However the text is not styled by default. I have to style the tags with css for the text to appear as the user has intended in the Ckeditor. Is this normal?
  6. Yes since it's the meta title and description, I only require the plain text. Your method works perfectly now. Thank you so much!
  7. Perfect! That's what I was looking for. One minor thing. Is it possible to remove/hide the "<p>" tag that shows up in the seo_page_description textarea?
  8. So can you show me the reverse of what you did? Like switch the "details" with "seo_page_description"?
  9. That works, but I think my original question might have been a bit misunderstood. I already have the ckeditor in the details textarea. I don't have the ckeditor in the seo description textarea and I don't need one either. Your example works, but it's the opposite of what I am looking to do.
  10. Can you please show me how I would use the "setData method" within my code above?
  11. Oh I see why it wasn't working. I am also using "ckeditor(http://ckeditor.com/)" in the textarea field. Once I removed it, it worked. Though I really need to use that editor. How can I make it work with having that editor as well?
  12. You know when you type text into a form input and it automatically types the same text in another div? Well I am trying to do the same thing but instead show the same text value from the div 1 to div 2. Here is my code. It works with the input text field but not with the textarea. Can you tell me why? <input type="text" name="title" id="title" value="" maxlength="55" /> <textarea name="details" id="details" value="" maxlength="160" ></textarea> <!-- Values show up in these inputs --> <input type="text" name="seo_page_title" id="seo_page_title" value="" maxlength="55" /> <textarea name="seo_page_description" id="seo_page_description" maxlength="160" ></textarea> <script> $('#title').on("input", function() { var dInput = this.value; console.log(dInput); $('#seo_page_title').val(dInput); }); $('#details').on("input", function() { var dInput = this.value; console.log(dInput); $('#seo_page_description').val(dInput); }); </script>
  13. Your comment made me think of something. So I added this code and now it works. if(!is_dir($target_dir)){ mkdir($target_dir, 0775, true); }
  14. I am using a simple image upload. http://www.w3schools.com/php/php_file_upload.asp It gives me 2 errors like this. Warning: move_uploaded_file(C:/xampp/htdocs/home/upload/images/grandpix 2.jpg): failed to open stream: No such file or directory in C:\xampp\htdocs\home\upload\post.php on line 174 Warning: move_uploaded_file(): Unable to move 'C:\xampp\tmp\phpF915.tmp' to 'C:/xampp/htdocs/home/upload/images/grandpix 2.jpg' in C:\xampp\htdocs\home\upload\post.php on line 174 This is my code. Post.php . I see that it's the "$target_dir" issue. How can I fix it? if(isset($_FILES['fileToUpload'])){ if(!empty($_FILES['fileToUpload']['name'])) { $target_dir = $_SERVER['DOCUMENT_ROOT'].'/home/upload/images/'; $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]); $uploadOk = 1; $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION); $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]); if($check !== false) { $uploadOk = 1; } else { $errors[] = 'File is not an image.'; $uploadOk = 0; } // Check if file already exists if (file_exists($target_file)) { $errors[] = 'Sorry, file already exists.'; $uploadOk = 0; } // Check file size if ($_FILES["fileToUpload"]["size"] > 500000) { $errors[] = 'Sorry, your file is too large.'; $uploadOk = 0; } // Allow certain file formats if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif" ) { $errors[] = 'Sorry, only JPG, JPEG, PNG & GIF files are allowed.'; $uploadOk = 0; } // Check if $uploadOk is set to 0 by an error if ($uploadOk == 0) { $errors[] = 'Sorry, your file was not uploaded.'; // if everything is ok, try to upload file } else { if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) { echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded."; } else { $errors[] = 'Sorry, there was an error uploading your file.'; } } $insert_image = $db->prepare("INSERT INTO images(user_id, item_id, image_path, date_added) VALUES(:user_id, :item_id, :image_path, :date_added)"); $insert_image->bindParam(':user_id', $userid); $insert_image->bindParam(':item_id', $item_id); $insert_image->bindParam(':image_path', $target_file); $insert_image->bindParam(':date_added', $date_added); if(!$insert_image->execute()) { $errors[] = 'There was a problem uploading the image!'; } else { if(empty($errors)) { $db->commit(); $success = 'Your post has been saved.'; } else { $db->rollBack(); } } } else { $errors[] = 'An image is required!'; } }
  15. I am trying out a new script for image upload and resize using ajax method. All the ones I've found so far process the php file through the form action="". Since I am inserting other data into the database and calling the other php code directly on the same page as a the html form, I would like to know if there is another way I can run that specific image upload php code through ajax. This is one the scripts I have looked at . http://www.sanwebe.com/2012/05/ajax-image-upload-and-resize-with-jquery-and-php This is what their html form looks like. <form action="processupload.php" method="post" enctype="multipart/form-data" id="MyUploadForm"> <input name="image_file" id="imageInput" type="file" /> <input type="submit" id="submit-btn" value="Upload" /> <img src="images/ajax-loader.gif" id="loading-img" style="display:none;" alt="Please Wait"/> </form> <div id="output"></div> I would like to process the "processupload.php" above through the ajax code below and leave the form action="" empty, as I am running other php code on the same page to insert other data as well. How would you do that? <script> $(document).ready(function() { var options = { target: '#output', // target element(s) to be updated with server response beforeSubmit: beforeSubmit, // pre-submit callback success: afterSuccess, // post-submit callback resetForm: true // reset the form after successful submit }; $('#MyUploadForm').submit(function() { $(this).ajaxSubmit(options); // always return false to prevent standard browser submit and page navigation return false; }); }); function afterSuccess() { $('#submit-btn').show(); //hide submit button $('#loading-img').hide(); //hide submit button } //function to check file size before uploading. function beforeSubmit(){ //check whether browser fully supports all File API if (window.File && window.FileReader && window.FileList && window.Blob) { if( !$('#imageInput').val()) //check empty input filed { $("#output").html("Are you kidding me?"); return false } var fsize = $('#imageInput')[0].files[0].size; //get file size var ftype = $('#imageInput')[0].files[0].type; // get file type //allow only valid image file types switch(ftype) { case 'image/png': case 'image/gif': case 'image/jpeg': case 'image/pjpeg': break; default: $("#output").html("<b>"+ftype+"</b> Unsupported file type!"); return false } //Allowed file size is less than 1 MB (1048576) if(fsize>1048576) { $("#output").html("<b>"+bytesToSize(fsize) +"</b> Too big Image file! <br />Please reduce the size of your photo using an image editor."); return false } $('#submit-btn').hide(); //hide submit button $('#loading-img').show(); //hide submit button $("#output").html(""); } else { //Output error to older browsers that do not support HTML5 File API $("#output").html("Please upgrade your browser, because your current browser lacks some new features we need!"); return false; } } //function to format bites bit.ly/19yoIPO function bytesToSize(bytes) { var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; if (bytes == 0) return '0 Bytes'; var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024))); return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i]; } </script>
  16. Ahh yes, so that's what you were saying before. Makes sense. Thank you so much for help me out.
  17. That's great. It works. One last thing. How would you add my original date string into your new option value? I tried it like this and it gives me error like this. Parse error: syntax error, unexpected '$expiry_n' (T_VARIABLE), expecting identifier (T_STRING) foreach($expiry_options as $arr){ $sel = !empty($_POST['expiry_date']) && $_POST['expiry_date'] == $arr ? 'selected' : '';\ $date = date('Y-m-d H:i:s'); $expiry_n = date("Y-m-d H:i:s", strtotime("$date + $arr")); ?><option value="<?php echo $expiry_n; ?>" <?php echo $sel; ?>><?php echo $arr; ?></option><?php }
  18. Your options input code works great. That solves that problem. For the expiry date. I should mention that I also have expiry dates listed in hours as well. Like this. <select name="expiry_date"> <?php $date = date('Y-m-d H:i:s'); $expiry_1 = date("Y-m-d H:i:s", strtotime("$date + 12 hours")); $expiry_2 = date("Y-m-d H:i:s", strtotime("$date + 24 hours")); $expiry_3 = date("Y-m-d H:i:s", strtotime("$date + 1 week")); $expiry_4 = date("Y-m-d H:i:s", strtotime("$date + 2 weeks")); ?> <option value="0">Expires In</option> <option value="<?php echo $expiry_1; ?>" <?php if(empty($_POST['expiry_date'])) {} else { if($_POST['expiry_date'] == $expiry_1) { echo 'selected'; } } ?> >1 week</option> <option value="<?php echo $expiry_2; ?>" <?php if(empty($_POST['expiry_date'])) {} else { if($_POST['expiry_date'] == $expiry_2) { echo 'selected'; } } ?> >2 weeks</option> <option value="<?php echo $expiry_3; ?>" <?php if(empty($_POST['expiry_date'])) {} else { if($_POST['expiry_date'] == $expiry_3) { echo 'selected'; } } ?> >1 week</option> <option value="<?php echo $expiry_4; ?>" <?php if(empty($_POST['expiry_date'])) {} else { if($_POST['expiry_date'] == $expiry_4) { echo 'selected'; } } ?> >2 weeks</option> </select>
  19. 1. That was a mistake when I was adding the code in the message. My normal expiry_date has many more fields, so I simplified it to only 2 options. But rest assured, they have correct variables. Normally I would get the data list from the db, but in this case I have no other option. I need to insert an expiry date into the db and this is the best method I found that worked. 2. I did follow the instruction on the provided link. It works..in a sense that I can get a new row of the inputs data by clicking + or delete it with -. Still have the same issue regarding them disappearing after submit. Just to make it clear, this is the for loop I am using. for($i = 0; $i < count($_POST['option_title']); $i++) { if(trim($_POST['option_title'][$i]) != '' && trim($_POST['option_quantity'][$i]) != '' && trim($_POST['option_retail_price'][$i]) != '' && trim($_POST['option_discount_price'][$i]) != '') { $insert_options->execute(array( $get_item_id, $_POST['option_title'][$i], $_POST['option_quantity'][$i], $_POST['option_retail_price'][$i], $_POST['option_discount_price'][$i] )); } }
  20. There are two parts to my question. Part 1. I have a form. You know when you submit a form and if there is an error, the form will reset the input values unless you have the them "selected"? Well I have an issue with one of those inputs. Here is the code. For some reason the input value doesn't get selected on form reset. It inserts to the database fine. <fieldset> <label>Expiry Date</label> <select name="expiry_date"> <?php $date = date('Y-m-d H:i:s'); $expiry_1 = date("Y-m-d H:i:s", strtotime("$date + 1 week")); $expiry_2 = date("Y-m-d H:i:s", strtotime("$date + 2 weeks")); ?> <option value="0">Expires In</option> <option value="<?php echo $expiry_1; ?>" <?php if(empty($_POST['expiry_date'])) {} else { if($_POST['expiry_date'] == $expiry_1) { echo 'selected'; } } ?> >1 week</option> <option value="<?php echo $expiry_2; ?>" <?php if(empty($_POST['expiry_date'])) {} else { if($_POST['expiry_date'] == $expiry_1) { echo 'selected'; } } ?> >2 weeks</option> </select> </fieldset> This is another example of select drop down. But this one below works fine. // this select option's input values get selected on form reset. <fieldset> <label>City</label> <select name="city_id"> <option value="0">Select City</option> <?php $get_city = $db->prepare("SELECT city_id, city_name FROM cities WHERE city_id > :city_id"); $get_city->bindValue(':city_id', 0); $get_city->execute(); $result_city = $get_city->fetchAll(PDO::FETCH_ASSOC); if(count($result_city) > 0){ foreach($result_city as $row) { $get_city_id = intval($row['city_id']); $get_city_name = $row['city_name']; ?><option value="<?php echo $get_city_id; ?>" <?php if(empty($_POST['city_id'])) {} else { if($_POST['city_id'] == $get_city_id) { echo 'selected'; } } ?> ><?php echo $get_city_name; ?></option><?php } } else {} ?> </select> </fieldset> Part 2. This relates to my previous topic. I am trying to do the same thing as above, which is show input values on form reset. But this is slightly more complicated as it is an array. Looking at the code, you can see that you can add more fields through jquery. That all works. Inserting their values from multiple groups of fields into the db also works fine. But once again, if the form resets or submits, only the 1st group of fields show the selected values in the input fields. The 2nd or 3rd group of fields generated through the jquery disappear after submit. But again, their values do insert into the db fine. Here's the html and jquery code. <div id="options-parent"> <h2>Add Options</h2> <button class="add_field_button">Add More Fields</button> <div class="options-child-row"> <div class="option-float"> <label>Quantity</label> <input type="number" name="option_quantity[]" multiple min="1" max="1000000" step="1" value="<?php if(!empty($_POST['option_quantity'])) { echo $_POST['option_quantity'][0]; } else {}; ?>" /> </div> <div class="option-float"> <label>Retail Price</label> <input type="number" name="option_retail_price[]" multiple min="5" max="1000000" step="1" value="<?php if(!empty($_POST['option_retail_price'])) { echo $_POST['option_retail_price'][0]; } else {}; ?>" /> </div> <div class="option-float"> <label>Discount Price</label> <input type="number" name="option_discount_price[]" multiple min="1" max="1000000" step="1" value="<?php if(!empty($_POST['option_discount_price'])) { echo $_POST['option_discount_price'][0]; } else {}; ?>" /> </div> </div> </div> <script> $(document).ready(function() { var max_fields = 20; //maximum input boxes allowed var wrapper = $("#options-parent"); //Fields wrapper var add_button = $(".add_field_button"); //Add button ID var x = 1; //initlal text box count $(add_button).click(function(e){ //on add input button click e.preventDefault(); if(x < max_fields){ //max input box allowed x++; //text box increment $(wrapper).append( '<div class="options-child-row">'+ '<div class="option-float">'+ '<label>Quantity</label>'+ '<input type="number" name="option_quantity[]" min="1" max="1000000" step="10" value="" />'+ '</div>'+ '<div class="option-float">'+ '<label>Retail Price</label>'+ '<input type="number" name="option_retail_price[]" min="1" max="1000000" step="10" value="" />'+ '</div>'+ '<div class="option-float">'+ '<label>Discount Price</label>'+ '<input type="number" name="option_discount_price[]" min="1" max="1000000" step="10" value="" />'+ '</div>'+ '</div>' ); //add input box } }); $(wrapper).on("click",".remove_field", function(e){ //user click on remove text e.preventDefault(); $(this).parent('.options-child-row').remove(); x--; }) }); </script> What do you think?
  21. I take it it's something like this? If so, it doesn't work. $insert_options = $db->prepare("INSERT INTO item_options(item_id, option_title, option_quantity, option_retail_price, option_discount_price) VALUES(?,?,?,?,?)"); for($i = 0; $i < count($_POST['option_title']) && $i < count($_POST['option_quantity']) && $i < count($_POST['option_retail_price']) && $i < count($_POST['option_discount_price']); $i++) { $insert_options->execute(array( $get_item_id, $_POST['option_title'][$i], $_POST['option_quantity'][$i], $_POST['option_retail_price'][$i], $_POST['option_discount_price'][$i] )); }
×
×
  • 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.