Paperclip delete image via ajax - ruby-on-rails

I want to delete the image via Ajax.
I'm using Paperclip for the upload.
I learned that for deleting the image all I have to do is to set it to nil.
Example:
#meth.picture = nil # this works
Error msg:
Paperclip::AdapterRegistry::NoHandlerError (No handler found for "nil"):
app/controllers/meths_controller.rb:116:in `block in update'
app/controllers/meths_controller.rb:115:in `update'
code:
$(function() {
$('#delete_image').on("click", function() {
$('#image > img').remove();
//console.log("??");
var url = document.URL.split("/");
var meth_id = url[4];
console.log(meth_id);
$.ajax({
url: '/Methoden/'+meth_id,
type: 'PATCH',
dataType: 'json',
data: {"meth": {"picture": "nil"}},
complete: function (jqXHR, textStatus) {
},
success: function (data, textStatus, jqXHR) {
console.log(" ?? profit");
},
error: function (jqXHR, textStatus, errorThrown) {
}
});
});
});
With the help from Зелёный, I did the following:
data: {"meth": "delete_image"}
Then in my controller update method:
if params[:meth] == "delete_image"
#meth.picture = nil
#meth.save
end

Problem is what you pass string ((No handler found for "nil")) to the method #meth.picture.
Send instead "nil" something like "delete" or "clear" and check in controller if params[:meth] == "delete" do #meth.picture = nil else do something other.

Related

Why getting "Invalid JSON" added to my custom error message

Invalid JSON:
Error 1 : Non-MDX format found.
Why I am getting the Invalid JSON with my custom error message.
My code is given bellow:
$('#btnCreateView').click(function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: '#Url.Action("Create", "Mdx")',
data: $('form').serialize(),
dataType: "json",
success: function (result) {
alert("View Created Successfuly");
window.location = result.link;
},
error: function (jqXhr, textStatus, errorThrown) {
$('#ErrorMessageField').html(errorThrown);
}
});
})
In your controller action you seem to be returning a partial view:
return PartialView("Fail");
but in your AJAX request you inidicated
dataType: "json",
Obviously this is inconsistent. When jQuery attempts to parse the string returned from your controller action back into javascript object it fails because you are not sending JSON, you are sending partial HTML.

How to format response to jQuery AutoComplete

Im trying to use jQuery AutoComplete but all i get is a single item with all results all in it.
I have this ASP.Net WebMethod:
[WebMethod]
public static string FetchCompletionList(string term)
{
var json = JsonConvert.SerializeObject(CustomerProvider.FetchKeys(term, 8));
return json;
}
being called by this script:
$("[id$='txtLKey']").autocomplete({
minlength: 2,
source: function(request, response) {
$.ajax({
type: "POST",
url: "/Views/Crm/Json/Json.aspx/FetchCompletionList",
data: '{term: "' + $("[id$='txtLKey']") .val() + '", count: "8"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
response(data);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText);
alert(textStatus);
alert(errorThrown.toString());
}
});
}
});
And the result is this:
When what I actually want is a list of options the user can select i.e. each NZ should be an item in a list.
There are two problems here,
you need to pass data.d to response like response(data.d).
your value string is invalid it should be {"d":["NZ0008","NZ0015","NZ0017","NZ0018","NZ0026","NZ0027","NZ003??1","NZ0035"‌​]}

Success and Error functions not firing in Ajax call

Below is an Ajax call I'm using to determine which menu options to show to users (I know it's a flawed method, just up against a time crunch for a demo). When the page loads, I can step through the controller method in Visual Studio so I know it's hitting the controller and sending back the right information.
Looking at Chrome's Network console I can also see that the browser received the right response. However, neither the console.log or the alert are firing. Nothing in the success or error methods is executed either. Does anyone see what's going wrong?
View
$(document).ready(function ($) {
//Determine which links to show in navbar
window.onload = function () {
$.ajax({
type: 'GET',
url: '#Url.Action("CheckSecurity","Home")',
dataType: 'json',
succcess: function (data) {
console.log(data);
alert(data);
if (data == "admin") { $('#adminLink').show(); }
else if (data == "IT") { $('#ITLink').show(); }
else if (data == "viewer") { $('#viewerLink').show(); }
else if (data == "modifier") { $('#modifierLink').show(); }
},
error: function (data) {
alert("error");
}
});
};
Controller
[HttpGet]
public JsonResult CheckSecurity()
{
if (Security.IsAdmin(User)) return Json("admin", JsonRequestBehavior.AllowGet);
if (Security.IsItSupport(User)) return Json("IT", JsonRequestBehavior.AllowGet);
if (Security.IsViewer(User)) return Json("viewer", JsonRequestBehavior.AllowGet);
if (Security.IsModifier(User)) return Json("modifier", JsonRequestBehavior.AllowGet);
return Json("NA", JsonRequestBehavior.AllowGet);
}
Here are a couple screen shots of the Network and regular console in Chrome. Bother are from after I've stepped through the controller method and the program has returned a value back to the browser.
Network Console
Standard Console
There is an extra c in your
succcess:
So the response is a 200 request , but because you have no mapping for success defined, it is just never logged
It is success instead of succcess
NealR
Deprecation Notice:
The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks
will be deprecated in jQuery 1.8. To prepare your code for their
eventual removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always()
instead.
Check the done, fail and always callbacks below.
$.ajax({
url: 'Your Url',
data: JSON.stringify(Parameter list),
type: 'POST',
contentType: 'application/json, charset=utf-8',
dataType: 'json',
beforeSend: function (xhr, opts) {
}
}).done(function (data) {
debugger;
}).fail(function (data) {
debugger;
}).always(function(data) {
alert("complete");
});
.ajax().always(function(a, textStatus, b){});
Replaces method .complete() which was deprecated in jQuery 1.8.
In response to successful transaction, arguments are same as .done() (ie. a = data, b = jqXHR) and for failed transactions the arguments are same as .fail() (ie. a = jqXHR, b = errorThrown).
This is an alternative construct for the complete callback function above. Refer to deferred.always() for implementation details.
$.ajax({
url: 'Your Url',
data: JSON.stringify(Parameter list),
type: 'POST',
contentType: 'application/json, charset=utf-8',
dataType: 'json',
beforeSend: function (xhr, opts) {
}
}).always(function(data) {
alert("complete");
});
.ajax().done(function(data, textStatus, jqXHR){});
Replaces method .success() which was deprecated in jQuery 1.8.
This is an alternative construct for the success callback function above. Refer to deferred.done() for implementation details.
$.ajax({
url: 'Your Url',
data: JSON.stringify(Parameter list),
type: 'POST',
contentType: 'application/json, charset=utf-8',
dataType: 'json',
beforeSend: function (xhr, opts) {
}
}).done(function (data) {
debugger;
});
.ajax().fail(function(jqXHR, textStatus, errorThrown){});
Replaces method .error() which was deprecated in jQuery 1.8.
This is an alternative construct for the complete callback function above. Refer to deferred.fail() for implementation details.
$.ajax({
url: 'Your Url',
data: JSON.stringify(Parameter list),
type: 'POST',
contentType: 'application/json, charset=utf-8',
dataType: 'json',
beforeSend: function (xhr, opts) {
}
}).fail(function (data) {
debugger;
});
Check here for more details
Check here for the documentation details

Ajax Serialize Need to get value

I have the following ajax serialize:
$.ajax({
type: "POST",
url: $form.attr('action'),
data: $form.serialize(),
error: function (xhr, status, error) {
ConfirmDialog('The page save failed.');
},
success: function (response) {
// need to retrieve an output value from the controller here
}
});
When it does a post, I am doing to an ActionResult method. How do I pass a value from the ActionResult so that I can get the value of it in when it is successful (under where it says success:function(response).
The output is in the response
success: function(response) {
alert( response );
}

how do I get the form data in a javascript object so I can send it as the data parameter of an $.ajax call

How to return json after form.submit()?
<form id="NotificationForm" action="<%=Url.Action("Edit",new{Action="Edit"}) %>" method="post" enctype="multipart/form-data" onsubmit='getJsonRequestAfterSubmittingForm(this); return false;'>
<%Html.RenderPartial("IndexDetails", Model);%>
</form>
$.ajax({
url: '<%=Url.Action("Edit","Notification") %>',
type: "POST",
dataType: 'json',
data: $("#NotificationForm").submit(),
contentType: "application/json; charset=utf-8",
success: function(result) {
if (result.Result == true) {
alert("ghjghsgd");
}
},
error: function(request, status, error) {
$("#NotSelectedList").html("Error: " & request.responseText);
}
});
I guess what you're actually looking for is not the Submit method, but how to serialise the form data to a json object. To do this you have to use a helper method like here: Serialize form to JSON
Use this instead of running the submit() method, and you'll be fine.
Also, this question is a duplicate of this (even though the question text, and the title are completely misleading): Serialize form to JSON with jQuery
Posting the jQuery extender, just in case, so that it doesn't get lost :)
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
After you have this in your page, you can update your ajax call with this:
$.ajax({
url: '<%=Url.Action("Edit","Notification") %>',
type: "POST",
dataType: 'json',
data: $("#NotificationForm").serializeObject(),
contentType: "application/json; charset=utf-8",
success: function(result) {
if (result.Result == true) {
alert("ghjghsgd");
}
},
error: function(request, status, error) {
$("#NotSelectedList").html("Error: " & request.responseText);
}
});
UPD: If you want to POST the form, then get the response as a json object, and do another ajax call.. then you should look at the jquery.form plugin. you will be able to post your form using an ajax call, then get the response, and run some js when it will return.

Resources