We Keep Coding

Show all laravel validation errors in one div when using jQuery ajax

I'm using this ajax request to send request using jQuery:
$.ajax({type: 'POST',
url: '/send-review',
data: {
"_token": "{{ csrf_token() }}",
"_id": {{$item->id}},
},
success: function (data) {
console.log(data);
},
error: function (err) {if (err.status == 422) {
// when status code is 422, it's a validation issue
}
}
});
I can show get Laravel validation error in the bottom of each input, but
how can I show all of the Laravel validation errors format in one box of HTML using jQuery?

There are lots of way you can show messages . You can print error object . like as
var htmlErr= []
var err.errors.map((data,index)=>{
$(".comment").text(data.comment);
});
in html
<p class="comment"></p>
then you can try with like this. For more error message more class ..
Its just dummy code for accurate code i need to know details about your data/object.

laravel 8
I always use this :
$.ajax({type: 'POST',
...
success: function (data) {
console.log(data);
},
error: function (err) {
if (err.status == 422) {
toastError(err.responseJSON.message);
let details = res.responseJSON.errors ;
Object.keys(details).forEach(field => {
formatErrorUsingClassesAndPopover(field,details[field]);
});
}
}
});
And for Formatting the answer implement the formatErrorUsingClassesAndPopover( element , array_of_problems )
make it as abstract as possible .
for example (Using Bootstrap and jQuery):
function formatErrorUsingClassesAndPopover(element , array_of_problems ){
let someHTML = '';
array_of_problems.forEach(function(e){someHTML+='<li>'+e+'</li>'});
$('#'+element+'_error_section').html('<ul>'+someHTML+'</ul>');
$('#'+element).addClass('is-invalid');
}
...
//don't forget to use this in the ajax success function :
$('input').removeClass('is-invalid');//or you can let the client side validation do it
Note : To copy past this code you need that if your database column is `field` ,you need :
your error section's id to be field_error_section .
your input's id to be field .

Calling jQuery Get after Post

I am trying to call a jQuery GET request on the successful completion of a POST request. The functions work and the data is being fed through from the GET request, however, it is responding before the POST.
function getCartCount() {
var d = new Date().getTime();
$.get("/ajax/countCart.php", { "rand": d }, function(res) {
$("#view-cart").text(res);
alert(res);
});
}
$(".products form img").click(function() {
$.post("/ajax/addToCart.php", $(this).parent("form").serialize())
.done(function(data) {
alert(data);
})
.always(getCartCount());
});
The above code produces an alert box from the GET request first then an alert box from the POST which is not ideal as the value from the GET is dependent on the POST being completed first.
Please see http://www.cccomforts.co.uk/small-furries for the output.

.always(getCartCount());
^^
You are calling the function immediately and passing the return value to always.
Remove the () to pass the function itself.
.always(getCartCount);

This is because you are not waiting for POST request to complete successfully. Do this -
$(".products form img").click(function() {
$.post("/ajax/addToCart.php", $(this).parent("form").serialize())
.done(function(data) {
alert(data);
getCartCount();
})
});

Calling a function on JQUERY success

I have a custom function that I have defined and then I subsequently call when the the page loads. I need the function to run when the page loads because it is populating a group selectlists:
<!---Populate Custom Service Description select lists --->
<script type="text/javascript">
function PopulateSelectLists(){
// Important: Must append the parameter "&returnformat=json"
$.ajax({
url: 'cfcs/get_descriptions.cfc?method=getDescriptions&returnformat=json'
, dataType: 'json'
, success: function(response){
$.each(response.DATA, function(I, row){
// get value in first column ie "description"
var description = row[0];
// append new option to list
$("#descriptionDD1").append($('<option/>', {
value: description,
text : description
}));
$("#descriptionDD2").append($('<option/>', {
value: description,
text : description
}));
$("#descriptionDD3").append($('<option/>', {
value: description,
text : description
}));
$("#descriptionDD4").append($('<option/>', {
value: description,
text : description
}));
});
},
error: function(msg){
console.log(msg);
}
})
}
$(document).ready(PopulateSelectLists);
</script>
I am trying to call my custom function PopulateSelectLists() when another AJAX call successfully completes so I can refresh my selectlists but it never seems to call my function:
<!---Script to add new description to DB --->
<script>
$(function(){
//Add a new note to a link
$("#addDescriptionForm").submit(function(){
// prevent native form submission here
$.ajax({
type: "POST",
data: $('#addDescriptionForm').serialize(),
url: "actionpages/add_descriptions_modal.cfm",
success: function() {
PopulateSelectLists(); //Call Function to refresh selectlist
$("#addDescriptionResponse").append( "Successfully added description." );
}
});
return false;
});
});
</script>
Where am I going wrong here?

In the problematic case, does the request actually return successfully? Inspect the response with Firebug or Fiddler or whatever dev toolbar you are using. It may be that there is a server error, a connection error, or any other reason that can drop the request, so it is not successful.
You can also look into using the complete handler: http://api.jquery.com/jquery.ajax/.

JQuery Ajax Request returns no data

I am trying out JQuery Ajax methods. I wrote a simple Ajax request to fetch certain 'tagged' photos from Flickr. Following is the snippet I am using:
function startSearch() {
$(function() {
var tagValue = $("#tagInput").attr("value");
alert(tagValue);
$.ajax({
url: "http://api.flickr.com/services/feeds/photos_public.gne?tags=" + tagValue + "&tagmode=any&format=json&jsoncallback",
dataType: 'json',
async: false,
success: function(data) {
alert("Success");
$.each(data.items, function(i, item) {
var pic = item.media.m;
$("<img/>").attr("src", pic).appendTo("#images");
});
},
error: function(data, error) {
alert("Error " + error);
}
}); });
'startSearch' is associated with a Search button. User is supposed to input a 'tag' to search and on click this function gets called.
Problem is that I am not receiving any 'data' in response. Hence no images gets displayed.
What am I doing wrong here?
Thanks & Regards,
Keya

I think the problem is that you're trying to make a cross-site request, which doesn't work because of security concern. You could use JSONP instead, e.g. as described in http://www.viget.com/inspire/pulling-your-flickr-feed-with-jquery/
You can also try searching for "cross site ajax" on this site, there's plenty of discussion about it.

asp.net mvc how to save data from jquery control

I am using the TinyMCE control in a MVC page, and now I want to save the content of the control (hopefully with ajax so the page is not rendered again)... I have some javascript that looks like this:
mysave = function() {
var ed = tinyMCE.get('content');
// Do you ajax call here, window.setTimeout fakes ajax call
ed.setProgressState(1); // Show progress
window.setTimeout(function() {
ed.setProgressState(0); // Hide progress
alert(ed.getContent());
}, 3000);
};
What is the best way to pass the content back to the controller, save it, and return back to the same page?

well, use jQuery.ajax. http://docs.jquery.com/Ajax. I suggest you to use POST request so you can transfer arbitrary long texts.
How do you plan to save the text? Do you use any database engine? we need more information.
$.ajax({
url: "/controller/savetext",
cache: false,
type: "POST",
data: { text: ed.getContent() },
success: function(msg) {
alert("text saved!");
},
error: function(request, status, error) {
alert("an error occurred: " + error);
}
})
and on server side something like this:
string text = Request.Form["text"]