I have a jquery file that dynamically creates input elements. One of the elements is for uploading an image file. When the user clicks save it will add it to a database via ajax. I want the ability to be able to upload on the same save click. I am not able to get the file element to submit.
Below is my jquery:
var trcopy;
var editing = 0;
var tdediting = 0;
var editingtrid = 0;
var editingtdcol = 0;
var inputs = ':checked,:selected,:text,textarea,select,:hidden,:checkbox,:file';
var notHidden = ':checked,:selected,:text,textarea,select,:file';
$(document).ready(function(){
// set images for edit and delete
$(".eimage").attr("src",editImage);
$(".dimage").attr("src",deleteImage);
// init table
blankrow = '<tr valign="top" class="inputform"><td></td>';
for(i=0;i<columns.length;i++){
// Create input element as per the definition
//First elements in array are hidden fields
if(columns[i] == '_fk_PO_Req_ID'){
input = createInput(i,'');
blankrow += input;
}else{
input = createInput(i,'');
blankrow += '<td class="ajaxReq" style="text- align:center;">'+input+'</td>';
}
}
blankrow += '<td><a href="javascript:;" class="'+savebutton+'"><img src="'+saveImage+'"></a></td></tr>';
// append blank row at the end of table
$("."+table).append(blankrow);
// Add new record
$("."+savebutton).on("click",function(){
// alert('save clicked');
var validation = 0;
var $inputs =
$(document).find("."+table).find(inputs).filter(function() {
// check if input element is blank ??
//if($.trim( this.value ) == ""){
// $(this).addClass("error");
// validation = 0;
// }else{
// $(this).addClass("success");
// }
validation = 1;
return $.trim( this.value );
});
var array = $inputs.map(function(){
console.log(this.value);
console.log(this);
return this.value;
}).get();
var serialized = $inputs.serialize();
alert(serialized);
if(validation == 1){
ajax(serialized,"save");
}
});
createInput = function(i,str){
str = typeof str !== 'undefined' ? str : null;
//alert(str);
if(inputType[i] == "text"){
input = '<input class="input-small" type='+inputType[i]+' name="'+columns[i]+'" placeholder="'+placeholder[i]+'" value="'+str+'" >';
}else if(inputType[i] == "file"){
input = '<input class="input-small" type='+inputType[i]+' name="new_receipt" placeholder="'+placeholder[i]+'" value="'+str+'" >';
}else if(inputType[i] == "textarea"){
input = '<textarea name="'+columns[i]+'" placeholder="'+placeholder[i]+'">'+str+'</textarea>';
}else if(inputType[i] == "hidden"){
input = '<input type="'+inputType[i]+'" name="'+columns[i]+'" value="'+hiddenVal[i]+'" >';
}else if(inputType[i] == "checkbox"){
input = '<input type="'+inputType[i]+'" name="'+columns[i]+'" value="'+str+'" >';
}else if(inputType[i] == "select"){
input = '<select class="input-medium" name="'+columns[i]+'">';
for(i=0;i<selectOpt.length;i++){
// console.log(selectOpt[i]);
selected = "";
if(str == selectOpt[i])
selected = "selected";
input += '<option value="'+selectOpt[i]+'" '+selected+'>'+selectOpt[i]+'</option>';
}
input += '</select>';
}
return input;
}
ajax = function (params,action){
// alert(params);
// alert(action);
$.ajax({
type: "POST",
url: "ajax.php",
data : params+"&action="+action,
dataType: "json",
success: function(response){
switch(action){
case "save":
var seclastRow = $("."+table+" tr").length;
// alert(response.success);
if(response.success == 1){
var html = "";
html += "<td>"+parseInt(seclastRow - 1)+"</td>";
for(i=0;i<columns.length;i++){
if(columns[i] == '_fk_PO_Req_ID'){
html += '';
}else{
html +='<td style="text-align:center" class="'+columns[i]+'">'+response[columns[i]]+'</td>';
}
}
html += '<td><a href="javascript:;" id="'+response["id"]+'" class="ajaxEdit"><img src="'+editImage+'"></a> <a href="javascript:;" id="'+response["id"]+'" class="'+deletebutton+'"><img src="'+deleteImage+'"></a></td>';
// Append new row as a second last row of a table
$("."+table+" tr").last().before('<tr id="'+response.id+'">'+html+'</tr>');
if(effect == "slide"){
// Little hack to animate TR element smoothly, wrap it in div and replace then again replace with td and tr's ;)
$("."+table+" tr:nth-child("+seclastRow+")").find('td')
.wrapInner('<div style="display: none;" />')
.parent()
.find('td > div')
.slideDown(700, function(){
var $set = $(this);
$set.replaceWith($set.contents());
});
}
else if(effect == "flash"){
$("."+table+" tr:nth-child("+seclastRow+")").effect("highlight",{color: '#acfdaa'},100);
}else
$("."+table+" tr:nth-child("+seclastRow+")").effect("highlight",{color: '#acfdaa'},1000);
// Blank input fields
$(document).find("."+table).find(inputs).filter(function() {
// check if input element is blank ??
this.value = "";
$(this).removeClass("success").removeClass("error");
});
}
break;
}
},
error: function(){
alert("Unexpected error, Please try again");
}
});
}