I have been following the example of some ajax functionality I got working earlier in my project, but I have come to a sticking point where my current functionality doesn't seem to work, the only difference that I can see that I am naming the partialView that I am returning and that I am trying to update images being displayed (although i'm guessing that wont make a difference).
Aim Allow user to select and upload images, and display newly uploaded images using ajax
Problem Images from both the temporary and final destination folders are displayed on initial page load, but partial page refresh does not appear to happen after upload is complete
controller
[HttpPost]
public ActionResult _Image(TakeOn to, IEnumerable<HttpPostedFileBase> FileUpload)
{
to.ImageUpload(FileUpload);//takes all files in FileUpload and places them in a temporary folder
return PartialView("_Rooms", to);
}
js (ajax)
$(".row").on("change", ".imgInput", function (e) {
var roomID = $(this).siblings("input:hidden").val();
$("#roomIdentifier").val(roomID);
var formData = new FormData(jQuery('#takeOn').get(0)) // store form data to pass on to the controller
$.ajax({
type: "POST",
url: "/Property/_Image",
contentType: false,
data: formData,
dataType: 'json',
encode: true,
async: false,
processData: false,
cache: false,
success: function (data) {
//$(".imgUploader").html(data);//first attempt, both tried by targetting .imgUploader and #accordion
$("#accordion").replaceWith(("#accordion", html));
},
error: function (request, status, error) {
}
});
//clear input value
var input = $(this);
input.replaceWith(input.val('').clone(true));
//clear identifier
$("#roomIdentifier").val('');
});
view (_Rooms.cshtml) - (this is a partial view which is held in #accordion div )
@model TjsPropertyPeople.Web.Admin.ViewModels.Property.TakeOn
@for (int i = 0; i < Model.Rooms.Count; i++)
{
<div class="panel panel-default room">
<div class="panel-heading">
<h4 class="panel-title">
@{ ViewBag.Title = Model.Rooms[i].Title == null ? "New Room" : Model.Rooms[i].Title; }
@{ ViewBag.titleID = "title" + i; }
<a id=@ViewBag.titleID data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="collapsed">@ViewBag.Title</a>
</h4>
</div>
<div class="panel-collapse collapse in" style="height: auto;">
<div class="panel-body">
<row class="col-lg-4">
@{ViewBag.roomID = "roomtitle" + i;}
@Html.TextBoxFor(m => m.Rooms[i].Title, null, new { @id = ViewBag.roomID, @class = "form-control roomTitle", @placeholder = "Title" })
</row>
<row class="col-lg-4">
@Html.TextBoxFor(m => m.Rooms[i].Width, null, new { @class = "form-control", @placeholder = "Width" })
</row>
<row class="col-lg-4">
@Html.TextBoxFor(m => m.Rooms[i].Length, null, new { @class = "form-control", @placeholder = "Length" })
<label class="checkbox-inline">
@Html.CheckBoxFor(m => Model.Rooms[i].Overall) Overall
</label>
</row>
<row class="col-lg-6">
@Html.TextAreaFor(m => m.Rooms[i].Description, new { @class = "form-control", @placeholder = "Description" })
</row>
<row class="col-lg-6">
<div class="imgUploader">
<div>
<div style="height: auto; width: auto; position: relative;">
@{ ViewBag.TempPath = Server.MapPath("~/App_Uploads/Images/Temp/" + Model.PropertyID + "/" + Model.Rooms[i].RoomID + "/"); }
@{ ViewBag.UploadedPath = Server.MapPath("~/App_Uploads/Images/Property/" + Model.PropertyID + "/" + Model.Rooms[i].RoomID + "/"); }
@{ ViewBag.TempExists = Directory.Exists(ViewBag.TempPath); }
@{ ViewBag.UploadedExists = Directory.Exists(ViewBag.UploadedPath); }
@{ List<string> files = new List<string>(); }
@if (ViewBag.TempExists)
{
string[] f = Directory.GetFiles(ViewBag.TempPath);
files.AddRange(f);
}
@if (ViewBag.UploadedExists)
{
string[] f = Directory.GetFiles(ViewBag.UploadedPath);
files.AddRange(f);
}
@foreach (var file in files)
{
string name = file.Substring(file.LastIndexOf("App_Uploads"));
name = @"~\" + name;
<img class="pull-left panel" src="@Url.Content(name)" height="50" />
@*<div class="delete">X</div>*@
}
</div>
</div>
</div>
<input class="imgInput" type="file" name="FileUpload" multiple accept="image/jpeg">
@Html.HiddenFor(m => m.Rooms[i].RoomID)
</row>
</div>
</div>
</div>
}
Note I realise that the view could be written MUCH better, I just don't know how to abstract all that unnecessary code from the view at this time and feel I should get the functionality working before "playing" with yet another area I don't fully understand (although I'm against any advice that can be offered in this area)
EDIT
in the error part of the script I added alert("Error: " + error) and it returned this
javascript error syntax: unexpected token <
I have googled it and found this answer, there seem to be a lot of places in my code that could be causing this (if this answer is applicable to me). So how would I start tracking down the root of the problem?
