Ajax works well for pre-existing forms. But if I add a new form using it and submit it, then I get to the method page.
Added a new form, filled in the field and clicked Submit: http://joxi.ru/DmBOW4KUzep962
I get to the method page, instead of displaying the result in the console: http://joxi.ru/EA4P710TOekbOA
After reloading the page, everything works well.
What could be the matter, tell me please.
Front:
$('.add-answer-form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: `/admin/courses/48/lessons/96/answerAdd`,
data: $(this).serialize(),
success: function (data) {
console.log('!!!!!', data);
}
});
});
Back:
public function answerAdd(Request $request, Course $course, Lesson $lesson, Test $test, Answer $answer){
$this->answer->fill($request->all())->save();
return response ()->json ($this);
}
I solved this issue as follows:
Instead of this:
$ ('.add-answer-form').on('submit', function (e) {
Added this:
$ ('#quest-add-form').on('submit', '.add-answer-form', function (e) {
This is suitable in cases where you need to work with the form that was added by Ajax.
Related
I wanted to submit a for using ajax call in laravel 5.
In view i wrote something like
$("#updateSubmit").on('submit',function(e){
e.preventDefault();
var csrfToken = $('meta[name="csrf-token"]').attr("content");
$.ajax({
method:'POST',
url: '/account/updateForm',
//dataType: 'json',
data: {accountId:'1111', _token: '{{csrf_token()}}'},
success: function( data )
{
alert(data)
return false;
}
},
error: function(error ){
alert("There is some error");
}
});
and on controller side
public function update(Request $data )
{
return Response()->json(['success' => true],200);
}
while in route for post method
Route::post('account/updateForm', 'AccountController#update')->name('account/updateForm');
its working till ajax. on Submission of ajax it goes to controller action.
but it does not retrun back as ajax comes back in normal form submisson.
it just go to controller and stops there with {"success":true} line.
I want ajax to come back to view form so that I can perform different dependent actions.
Do you mean that when you submit your form, you just have a white page with {"success": true} ?
If that's the case, maybe the error is on your javascript.
Maybe your jQuery selector is wrong, or maybe your js isn't compiled ?
whenever I send a post request to 'tasks/add' i want the user to return to a new page, but all I get is plain html text in a popup.
Route.php code
Route::post('tasks/add', function() {
return view('secrets');
});
this is my ajax request :
$("#frm").submit(function(e){
e.preventDefault();
var customer = $("input[name=customer]").val();
var details = $("input[name=details]").val();
var dataString = 'customer='+customer+'&details='+details;
$.ajax({
url: "tasks/add",
type:"POST",
beforeSend: function (xhr) {
var token = $('meta[name="csrf_token"]').attr('content');
if (token) {
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
}
},
data : dataString,
success:function(data){
console.log(dataString);
alert(data);
},error:function(){
alert("error!!!!");
}
}); //end of ajax
});
});
Anybody has had this issue before?
You are using Ajax to call your Route method. So when Route::post(...) returns the view 'secrets', it returns it to the Ajax method and becomes held by the data variable. Saying return in your Routes file doesn't magically mean redirect to a certain view, it is just like any other function that returns a value.
You currently have alert(data) which just says make an alert with whatever is held by data which in this case is the html text of your view.
Instead, take out the alert() and put
window.location.replace('<path/to/secrets>')
to redirect to the page you want upon success.
Assuming your Routes file has something like :
Route::get('/secrets', function() {
return view('secrets');
});
You could say
window.location.replace('/secrets')
I have the following ajax code that takes in 3 variables and passes them to a php file, and this is all fine and dandy. I want to do a redirect using the value stored in one of these variables. I figured I could just do window.location.href = within the success in the ajax call, but for some reason, it doesn't seem to respond to the click, and simply does nothing.
Here is the ajax function, hope y'all can help!
$("#findItem").click(function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
$.ajax({
type: 'get',
url: 'http://plato.cs.virginia.edu/~aam3xd/cabbage/closestBuildingWeb.php',
data: {
foodItemId: $('#foodItem').val(),
sentLongitude: position.coords.longitude,
sentLatitude: position.coords.latitude
},
success: function(data){
//$('#answer').html(data);
//the following line doesn't seem to be executing....
window.location.href = foodItemId+"/"+sentLatitude+"/"+sentLongitude;
}
});
});
I think you should use your url into that window.location
window.location.href = "www.example.com/"+foodItemId+"/"+sentLatitude+"/"+sentLongitude;
I have made a custom module in magento. I am using ajax in it(prototype.js).i can find the post variable on ajax page. But I am unable to find the file array on ajax page.
I am using following code for this.Please let me know where i am wrong?
//Ajax code on phtml page
new Ajax.Request(
reloadurl,
{
method: 'post',
parameters: $('use-credit-Form').serialize(),
onComplete: function(data)
{
alert(data.responseText);
}
});
//Php code on ajaxpage
public function ajaxAction()
{
$fileData = $_FILES;
echo '<pre>';
print_r($fileData);die;
}
It always print blank. but when I added this line
"VarienForm.prototype.submit.bind(usecreditForm)();"
I can get the value of file array. but draw back now page starts refreshing.
Please give me some suggestion.
Try this:
Event.observe('use-credit-Form', 'submit', function (event) {
$('use-credit-Form').request({
onFailure: function () {
alert('fail.');
},
onSuccess: function (data) {
alert(data.responseText);
}
});
Event.stop(event); // stop the form from submitting
});
Credit: submit a form via Ajax using prototype and update a result div
I am using a cakephp form. I have a dropdown select box. If dropdown value changes then the form should submit.Is there any method similar to form submission like this.form.submit for ajax forms. Any help?
If jquery is okay for you you can do
$('#myDropdown').change(function() {
$(this).closest('form').submit();
});
if you want ajax replace line 2 as follows
var myForm = $(this).closest('form');
$.post(myForm.attr('action'), myForm.serialize(), function(data)
{
/*do something on success*/
}
If you use jQuery you could use the .serialize() method and AJAXify a form like this:
$(function() {
$('#myform').submit(function() {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function(result) {
// TODO: process the results
}
});
return false;
});
});
Another possibility is to use the excellent jQuery form plugin.
You can use dropdown elemnts onChange event
Example
$('.target').change(function() {
alert('Handler for .change() called.');
});