Ajax post to PHP redirects instead of return result -


i'm trying make php-page uploading user avatars, want selected picture updated automatically after file-selection (possibly dialog confirm change of avatar). far i've got auto-upload bit working, i'm having trouble using post-function external php-file. while testing, instead of returning results ajax, redirects external php-file , echoes result there. i'm sure there basic thing i'm overlooking, love can't seem head around it. i've managed results ajax in success-function, here doesn't alert (only redirects). i've yet implent file-uploading bit, have working on section of site need code working.

so want answered is;

  • how can callback without redirecting?
  • how (and where) should implement confirm-dialog before post uploadavatar.php?

here code.

html / javascript / ajax

<?php include_once 'includes/db_connect.php'; include_once 'includes/functions.php'; sec_session_start(); include_once 'header.php'; ?> <!doctype html> <html> <head> <link rel="stylesheet" href="style.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>  <script> function chooseavatar() { $("#avatarinput").click();}  $('form#avatarform').submit( function( e ) { e.preventdefault();    var formdata = new formdata($(this)[0]);    $.ajax( {   url: 'uploadavatar.php',   type: 'post',   data: formdata,   async: false,   cache: false,   contenttype: false,   processdata: false,   success: function (returndata) {   alert(returndata); } }); return false; });   </script> </head> <body> <section>  <h1>edit profile: <?php echo htmlentities($_session['username']) ?></h1> <article> <div style="height:0px;overflow:hidden"> <form action="uploadavatar.php" method="post" enctype="multipart/form-data" name="avatarform" id="avatarform"> <input type="file" id="avatarinput" name="avatarinput" /> <script> $("input[name='avatarinput']").change(function() {   $( 'form#avatarform' ).submit(); }); </script> </form> </div> <p><span class='label_viewprofile'>avatar (65x65):</span><img src="avatar/avatar.jpg" class="avatar-box" onclick="chooseavatar();"></p> <hr class="editprofile-line">  </article> </section> </body> </html>

external 'uploadavatar.php' file

<?php echo  "working!"; print_r ($_files); print_r ($_post); ?>

thank or input! i'm new programming in these languages, feedback appreciated.

edit 29/4-15: - posted full code now. had 2 other forms , more code on page removed check if there conflict, code i'm working now. still redirecting , not giving 'returndata' ajax, , i've had no luck removing form "action=" part either (didn't appear post or redirect). again, grateful time , effort people put helping me. have little experience js , ajax, i'm ordering book learn more, again!

welcome so. called wrong event (e), not (event):

$('form#avatarform').submit( function( e ) {   e.preventdefault();

this prevent page being submitted, , use $.ajax().

edit:

https://jsfiddle.net/twisty/0feqyqmw/

made few changes overall, should work:

$(function () {     $("#avatarbtn").click(function () {         $("#avatarinput").click();     });      $("input[name='avatarinput']").on("change", function(){         $('form#avatarform').submit();     });      $('form#avatarform').submit(function (e) {         e.preventdefault();          var formdata = new formdata($(this)[0]);          $.ajax({             url: 'uploadavatar.php',             type: 'post',             data: formdata,             async: false,             cache: false,             contenttype: false,             processdata: false,             success: function (returndata) {                 alert(returndata);             }         });         return false;     }); });

i moved script jquery ease of use. added bit of wrapping in html:

<section>      <h1>edit profile: username</h1>      <article>         <div style="height:0px;overflow:hidden">             <form action="uploadavatar.php" method="post" enctype="multipart/form-data" name="avatarform" id="avatarform">                 <input type="file" id="avatarinput" name="avatarinput" />             </form>         </div>         <p> <span class='label_viewprofile'>avatar (65x65):</span>              <label id="avatarbtn">                 <img src="avatar/avatar.jpg" class="avatar-box" />             </label>         </p>         <hr class="editprofile-line">     </article> </section>

Comments

Post a Comment

Popular posts from this blog

java - Spring Data JPA: Why findOne(id) executing delete query internally? -

i have 1 application using @manytomany annotation link 2 different entities 1 parent entity. not sure if have implemented properly. when execute .findone() on parent entity's repository find it, @ first fetch data along executing delete queries internally delete record mapping table (a table jpa creates after adding @manytomany annotation.). following generated sql queries , code snippet: java class @entity @table(name = "inventory") public class inventory { @id long id; // many other properties @manytomany(fetch=fetchtype.lazy) private list<stream> streams; @manytomany(fetch=fetchtype.lazy) private list<subject> subjects; } there no other annotation i've put in stream , subject entity class link inventory class. when run app, create following tables: inventory stream subject inventory_stream inventory_subject (inventory_stream , inventory_subject, 2 tables created automatically, don't k...
Read more

python - Mongodb How to add addtional information when aggregating? -

i beginner , wrote line pipeline works, wanna add other information output, screen name , or number of tweets.i tried add under $group gave me syntax error everytime here pipeline: def make_pipeline(): # complete aggregation pipeline pipeline = [ { '$match': { "user.statuses_count": {"$gt":99 }, "user.time_zone": "brasilia" } }, { "$group": { "_id": "$user.id", "followers": { "$max": "$user.followers_count" } } }, { "$sort": { "followers": -1 } }, { "$limit" : 1 } ]; i using on example : { "_id" : objectid("5304e2e3cc9e684aa98bef97"), "text" : "first week of school on :p", "in_reply_to_status_id" : null, "retweet_count" : null, ...
Read more

java - Incorrect order of records in M-M relationship in hibernate -

Image
i have 4 records in bridge table in mysql database. using @manytomany in hibernate, accurate order of employees incorrect incorrect of projects. following required material figure out doing mistake. this source. @entity @table(name="project") public class projectbean { @id @generatedvalue @column(name="project_id") private int projectid; @column(name="title") private string projecttitle; @manytomany(mappedby="projects") private collection<employeebean> employees; public projectbean() { employees = new arraylist<employeebean>(); } //getters & setters } @entity @table(name="employee") public class employeebean { @id @generatedvalue @column(name="employee_id") private int employee_id; @column(name="first_name") private string ...
Read more