javascript - How to run a function inside AJAX success with process data and content type set to false? -
i'm playing around php, boostrap, ajax , jquery. on form submit, use ajax upload image , store data in database. data consists of firstname, middlename, lastname , image.
it works fine , stored in database , image uploaded no error or warnings, modal function inside success isn't called. due processdata , contenttype being set false? how can make work?
html
<form enctype="multipart/form-data" method="post" id="form-info"> <input type="text" class="form-control" placeholder="firstname" name="fname" id="fname"> <input type="text" class="form-control" placeholder="middlename" name="mname" id="mname"> <input type="text" class="form-control" placeholder="lastname" name="lname" id="lname"> <input type="text" class="form-control" placeholder="biography" name="biog" id="biog"> <input type="file" name="profpic" id="profpic" class="none"> <input type="file" name="coverphoto" id="coverphoto" class="none"> <input type="submit" class="btn btn-primary btn-sm" value="submit" id="submitprofile"> <button id="cancelme" class="btn btn-danger btn-sm">cancel</button> </form> php
<?php // require connection require_once(dirname(__file__).'/includes/dbconnect.php'); // set selected database $db_selected = mysqli_select_db($dbcon,"profilecreator"); // sql query $sql = "insert profiles (firstname,middlename,lastname,biography,profpic,coverphoto) values(?,?,?,?,?,?)"; // prepare , bind $stmt = mysqli_prepare($dbcon,$sql); mysqli_stmt_bind_param($stmt,'ssssss',$firstname,$middlename,$lastname,$biography, $profpic, $coverphoto); // set upload directory $uploads_prof = 'uploads/prof/'; $uploads_cover = 'uploads/cover/'; // set variable values javascript or jquery ajax post data $firstname = $_post['fname']; $middlename = $_post['mname']; $lastname = $_post['lname']; $biography = $_post['biog']; $profpic_filename = $_files['profpic']['name']; // profile pic filename $profpic_tmp_name = $_files['profpic']['tmp_name']; // tempory filename $profpic_target_file = $uploads_prof.basename($_files['profpic']['name']); // target file of profile pic $coverphoto_filename = $_files['coverphoto']['name']; // profile pic filename $coverphoto_tmp_name = $_files['coverphoto']['tmp_name']; // tempory filename $coverphoto_target_file = $uploads_cover.basename($_files["coverphoto"]["name"]); // target file of coverphoto $profpic = $uploads_prof.$profpic_filename; $coverphoto = $uploads_cover.$coverphoto_filename; $uploadprof_flag = 1; $uploadcover_flag = 1; // create associative array of profile without values $json_profile = array( 'firstname'=>'', 'middlename'=>'', 'lastname'=>'', 'biography'=>'', 'profpic'=>'', 'coverphoto'=>'' ); // check if profile picture valid image if(isset($profpic_filename)){ $check = getimagesize($profpic_tmp_name); if($check!==false){ $uploadprof_flag = 1; } else{ echo 'file not image'; $uploadprof_flag = 0; } } else{ $profpic = null; } // check if coverphoto valid image if(isset($coverphoto_filename)){ $check = getimagesize($coverphoto_tmp_name); if($check!==false){ $uploadcover_flag = 1; } else{ echo 'file not image'; $uploadcover_flag = 0; } } else{ $coverphoto = null; } /*check if profile pic exists*/ if(file_exists($profpic_target_file)){ echo 'sorry, file exists.'; $uploadprof_flag = 0; } /*check if coverphoto exists*/ if(file_exists($profpic_target_file)){ echo 'sorry, file exists.'; $uploadprof_flag = 0; } // check if flag 1 upload file else not upload if($uploadprof_flag === 1){ move_uploaded_file($profpic_tmp_name, $profpic_target_file); } else{ echo 'sorry file not uploaded'; } if($uploadcover_flag === 1){ move_uploaded_file($coverphoto_tmp_name, $coverphoto_target_file); } else{ echo 'sorry file not uploaded'; } // execute prepared statement mysqli_stmt_execute($stmt); // or $stmt->execute(); echo "new records created successfully"; // set values associative array , encode json format, write $json_profile['firstname'] = $firstname; $json_profile['middlename'] = $middlename; $json_profile['lastname'] = $lastname; $json_profile['biography'] = $biography; $json_profile['profpic'] = $profpic; $json_profile['coverphoto'] = $coverphoto; file_put_contents('api/profile.json',json_encode($json_profile),file_append); // close connection mysqli_close($dbcon); ?> here's jquery code
$("#form-info").on('submit',function(e){ e.preventdefault(); var fname = $("#fname").val(); var mname = $("#mname").val(); var lname = $("#lname").val(); var biog = $("#biog").val(); var profpic = $("#profpic")[0].files[0]; var coverphoto = $("#coverphoto")[0].files[0]; var formdata = new formdata(); formdata.append('fname',fname); formdata.append('mname',mname); formdata.append('lname',lname); formdata.append('biog',biog); formdata.append('profpic',profpic); formdata.append('coverphoto',coverphoto); if(fname!==''||mname!==''||lname!==''){ $.ajax({ url:'createprofile.php', type:'post', data: formdata, processdata: false, // tell jquery not process data contenttype: false, // tell jquery not set contenttype success:function(response){ console.log(response); $("#myprofile").modal('show'); }, error: function(xmlhttprequest, textstatus, errorthrown) { alert(textstatus+' '+errorthrown); } }); } else{ alert("fields must not empty except upload files"); } }); here's code modal
$("#myprofile").modal('shown.bs.modal',function(){ $.getjson('api/profile.json',displayprofile,'json'); }); var displayprofile = function(data){ // initialize values var firstname = data.firstname; var middlename = data.middlename; var lastname = data.lastname; var biography = data.biography; var prof_pic = data.profpic; var cover_photo = data.coverphoto; // set values $("#myfirstname").text(firstname); $("#mymiddlename").text(middlename.substr(0,1)+"."); $("#mylastname").text(lastname); $("#mybiography").text(biography) $("#myprofpic").attr('src',prof_pic); $("#mycoverphoto").css("background-image",cover_photo); }; the bootstrap modal isn't showing up.
Comments
Post a Comment