Ajax form submit mootools what am I doing wrong - ajax

I have following js code:
window.addEvent('domready', function() {
var trigger = $('sendme');
trigger.addEvent( 'click', function(event){
event.preventDefault()
var sendform = new Form.Request($('newform'), {
onSend: function(){
console.log('sending');
},
onComplete: function(){
console.log('sent');
}
});
sendform.send();
});
});
and form with data:
<form action="index.php?option=com_mycomp&layout=edit&id=1" method="post" name="newform" id="newform" class="form-validate">...
the form submits just fine and I can see changes but I get no logs,
thus cant execute actions that I need
form action is not supposed to give me any response back , it is simple post but shouldn't this work? Do I need to send the form to another file that will give me responses like json and submit my form like that ?
what am I doing wrong ?
Any help is appreciated. Thnx!
small update since post ,
I change the form to send data and receive response via json file but still no response messages. everything is being updated so submit works 100%.

right way is new Form.Request($('newform'),console.log(),{
window.addEvent('domready', function() {
var trigger = $('sendme');
trigger.addEvent( 'click', function(event){
event.preventDefault()
var sendform = new Form.Request($('newform'),console.log(), {
onSend: function(){
console.log('sending');
},
onComplete: function(){
console.log('sent');
}
});
sendform.send();
});
});

Related

AJAX form redirecting on submit when using CKeditor

I am trying to submit an AJAX form with Laravel using the code shown below. After I submit the form, all the data is saved in the database as expected apart from the following field which is displayed as NULL in the database.
<textarea name="content" id="editor"></textarea>
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$(".btn-submit-add-video").each(function(){
$(this).on("click",function(e){
e.preventDefault();
let form = $(this).closest('form');
$.ajax({
type:'POST',
url: form.attr('action'),
data: form.serialize(),
success:function(data){
alert(data.successful);
}
});
})
});
</script>
public function addVideo(Request $request)
{
$addVideo = new cms_videos;
$addVideo->VideoStatus = $request->VideoStatus;
$addVideo->VideoTitle = $request->VideoTitle;
$addVideo->VideoStrapline = $request->VideoStrapline;
$addVideo->VideoURL = $request->VideoURL;
$addVideo->VideoDescription = $request->content;
$addVideo->VideoTags = $request->VideoTags;
$addVideo->MetaActName = $request->MetaActName;
$addVideo->MetaRegion = $request->MetaRegion;
$addVideo->MetaGenre = $request->MetaGenre;
$addVideo->MetaVenue = $request->MetaVenue;
$addVideo->VideoCoverPhoto = $request->VideoCoverPhoto;
$addVideo->save();
return response()->json(['successful'=>'Video successfully added']);
}
After doing some research I was told to add the following code to the top of the code shown above:
CKEDITOR.instances.SurveyBody.updateElement();
Now all the data is submitted to the database as expected. However when I now submit the form instead of an alert popping up saying "Successful" I am now redirected to the form action URL where it displays "Successful". How can I stop this redirection and display the alert on the page the form was submitted?
I'm not sure but I think the issue is here when you do e.preventDefault() because it works for the button click not for form submission. Try this out and hope it will help you.
Notice: you have to add upload_video class to your forms
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
// If the button is type of submit you can remove this part of code
$(".btn-submit-add-video").each(function(){
$(this).on("click",function(e){
e.preventDefault();
let form = $(this).closest('form.upload_video');
form.submit();
})
});
//
$("form.upload_video").on('submit',function(e){
e.preventDefault();
let form = $(this),data=form.serialize();
//
let content=FCKeditorAPI.GetInstance('content').getData();
data['content']=content;
//
$.ajax({
type:'POST',
url: form.attr('action'),
data: data,
success:function(data){
alert(data.successful);
}
});
});
</script>
This part
let content=FCKeditorAPI.GetInstance('content').getData();
May not be true because I don't work with CKEDITOR right now and i can't test it but you can console.log() it before you send the ajax request and make sure the content exists in the variable as you expected.

Ajax submit an image with form - pass the FormData - trigger submit

I simply want to use ajax to submit a form with an image from a phone.
If I use the below code as a simple function - the form data is not passed.
If I use the code as is - it works but the user has to click the submit button.
How do I either pass the FormData properly to a simple $.ajax({}); submit?
OR
How do I trigger the code below when a picture is taken or selected?
I have this - it works fine when user clicks submit:
// how do I trigger this when image file is selected?
$("#Upload_Form").submit(function(e){
e.preventDefault();
// OR - how do I get FormData with image without using: '$("#Upload_Form").submit(function(e)'
var formData = new FormData(this);
$.ajax({
// POST details are here etc.
});
});
Bind the change event for the file input like below and then trigger the submit event of the form or make an ajax call right away with the FormData see below demo.
If you want to know how to submit image using FormData and ajax see this answer
$("#my-form").on('submit', function(e) {
e.preventDefault();
// OR - how do I get FormData with image without using: '$("#Upload_Form").submit(function(e)'
var formData = new FormData(this);
console.log("sending Ajax call now");
$.ajax({
// POST details are here etc.
});
});
$("#my-file").on('change', function() {
//you can either trigger the form submit here
var form = $("#my-form");
$("#my-form").submit();
//OR
//use this to send the ajax call to upload the image
// var form=$("#my-form")[0];
// var formData = new FormData(form);
// $.ajax({
// type: "POST",
// url: 'your/url',
// data: formData,
// processData: false,
// contentType: false,
// success: function (data) {
// console.log("SUCCESS : ", data);
// },
// error: function (e) {
// console.log("ERROR : ", e);
// }
// });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form" enctype="multipart/form-data">
<input type="file" name="my-file" id="my-file" />
<input type="submit" name="submit" value="submit" />
</form>
Update
Note: if you want to use an ajax call to send the formData you need to set the processData and contentType to false. contentType: false only available from jQuery 1.6 onwards.

Laravel 5.2 post route returns plain html text

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')

Ember Put and Post Request without Ember-Data

I have built a model from GET request and display the content that I need into a form, mainly dropdown options. User then completes the form and 'POST' back to the api. The API that I am using isn't formatted in a way that I can use for ember-data so I have opted to render my model with Ember.Object
var Prequalification = Ember.Object.extend();
Prequalification.reopenClass({
template: function(){
return Ember.$.ajax({
url: "/prequalification",
dataType: 'json'
}).then(function(response){
var template = response.collection.template.data;
return template;
});
}
});
export default Prequalification;
My controller decorates the view:
var IndexController = Ember.ArrayController.extend({
businessType: function(){
var content = this.get('content');
console.log(this);
return content.get(10);
}.property('content'),
loanType: function(){
var content = this.get('content');
return content.get(5);
}.property('content')
});
export default IndexController;
So on form submit, what are my options for Posting back to the API?
Thanks!
Use an action and associate it with a button.
actions: {
save: function(){
alert('ajax save here');
}
}
http://emberjs.jsbin.com/jositowa/1/edit

Loading Content Via Ajax

Ok, so I'm pretty new to ajax and loading content externally and would appreciate any insight to my problem.
I currently have a hidden div that is empty where the ajax content should load in after a link is clicked.
<div id="#ajax-wrap"></div>
I currently have a list of links that all have the same class and I'd like to have, when clicked, the blank div do a slide toggle and then load in the content from the page that the link was to.
Link:
Current jQuery:
$("a.home-right").click(function () {
$('#ajax-wrap').slideToggle();
});
Being as I'm new to Ajax and loading the external content, I'd like to know how to load content from the linked page that's house in the #content tag. So essentially, I'd like a .home-right link, #ajax-wrap would slide toggle, and then Ajax would pull content from the linked page (which is always going to be a different random link) and it's #content div, placing that content in #ajax-wrap.
Thanks in advance for any help folks!
You want to set the ajax for the links. Requirements:
Writing a handler for links.
We must cancel the default behaviour of browser when somebody click on a link (that redirect to the page).
Removing old data ajax recieved from server and make the #ajax-wrap fresh.
Load the remote page via ajax and set it to #ajax-wrap.
Now slide it down.
// Document Ready
$(function () {
// attaching click handler to links
$("a.home-right").click(function (e) {
// cancel the default behaviour
e.preventDefault();
// get the address of the link
var href = $(this).attr('href');
// getting the desired element for working with it later
var $wrap = $('#ajax-wrap');
$wrap
// removing old data
.html('')
// slide it up
.slideUp()
// load the remote page
.load(href + ' #content', function () {
// now slide it down
$wrap.slideDown();
});
});
});
You can simply use the ajax like this:
$("a.home-right").click(function () {
$.ajax({
type: "get",
url: "YOUR URL HERE",
success: function(data){
$('#ajax-wrap').html(data);
$('#ajax-wrap').slideToggle();
},
error: function(){
alert("An error occured");
}
});
});
try this:
$(function(){
$("a.home-right").click(function () {
$('#ajax-wrap').slideUp();
var url = $(this).attr("href")
$.ajax({
type: "get",
url: url,
success: function(msg){
$('#ajax-wrap').html(msg)
$('#ajax-wrap').slideDown();
},
error: function(){
alert("An error occured");
}
});
})
})
Use get:
// Inside click handler
$.get('url_that_returns_data')
.done(function(response){
var $response = $(response);
$('#ajax-wrap').html($response.find('#content')).slideToggle();
});

Resources