Saving tinyMCE value before submiting to php - javascript

I am trying to accomplish this. it does work but I have to submit the form twice before tinyMCE value get stored.
$("form#data").on('submit',function(e){
e.preventDefault();
tinymce.init({
selector: "textarea",
statusbar: false,
setup: function (editor) {
editor.on('change', function () {
editor.save();
});
}
});
var formData = new FormData($(this)[0]);
$.ajax({
url: 'includes/new_post.php',
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
The Ajax part of the code works perfectly its just that the form like wise other forms but the tinyMCE text area wont submit on first go. if i click the button twice then it will save please assist.

Looks like you're doing the initializing in the wrong place.
The first time you submit the form, the tinymce gets initialized. Instead you should initialize it on page load.

you should do it like this:
tinymce.init({
selector: "textarea",
statusbar: false,
setup: function (editor) {
editor.on('change', function () {
editor.save();
});
}
});
$("form#data").on('submit',function(e){
e.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
url: 'includes/new_post.php',
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});

Related

Jquery is not submitting the form with the custom button

My requirement is to upload a file from a form upon clicking the custom button by using Jquery stuff.
My form details are below:
<form id="CreateAttachmentForm" method="post" enctype="multipart/form-data" action="../../FileUploadServlet" >
My file is defined as below:
<input type="file" id="fileupload1" name="fileupload1" accept="image/*,application/pdf" "/>
My custom button related code is below:
<contact:contactbutton
id="printButton"
style="position:relative; width:90px; top:27px; height:30px; left:160px;"
textTop="7px"
defaultButton="false"
tabindex=""
accesskey="C"
onClickEx="createAttachmentRequest();"
onfocus="if(event.altKey){click();}">
<u>C</u>reate
</contact:contactbutton>
Whenever the user clicks on the custom button, the form should be submitted.I have registered an onClick event event where the control should reach the function named createAttachmentRequest()
The following is my createAttachmentRequest() function:
function createAttachmentRequest() {
alert("test ");
$("#CreateAttachmentForm").submit(function() {
var formData = new FormData($(this)[0]);
$.ajax({
url: 'http://HDDT0214:8080/pqawdTestWebApp/FileUploadServlet',
type: 'POST',
data: formData,
async: false,
success: function(data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
}
But the form is not submitted when I click the custom button. I have searched various questions on SO, but no suitable solution found so far.However I could see the alert message printed which confirms that the control is reaching the function createAttachmentRequest().What's wrong with my code?
The issue is because you're attaching a submit event handler in the function - not actually submitting the form.
It would be best to remove the createAttachmentRequest() function entirely and use unobtrusive JS code to attach the event. To do that, remove the onClickEx attribute from your <contact:contactbutton> element, then use this JS code:
$(function() {
$("#CreateAttachmentForm").submit(function(e) {
e.preventDefault();
$.ajax({
url: 'http://HDDT0214:8080/pqawdTestWebApp/FileUploadServlet',
type: 'POST',
data: new FormData(this),
success: function(data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
});
});
Also note that I removed async: false as it's incredibly bad practice to use it. If you check the console you'll even see warnings about its use.
You can do one of the following:
Take the submit event outside the function and remove the function like so:
$("#CreateAttachmentForm").submit(function(e) {
e.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
url: 'http://HDDT0214:8080/pqawdTestWebApp/FileUploadServlet',
type: 'POST',
data: formData,
async: false,
success: function(data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
OR
inside the function remove the submit listener like so:
function createAttachmentRequest() {
alert("test ");
var formData = new FormData($(this)[0]);
$.ajax({
url: 'http://HDDT0214:8080/pqawdTestWebApp/FileUploadServlet',
type: 'POST',
data: formData,
async: false,
success: function(data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
}

Bootstrap popover content via Ajax

i have a next code about popover, it works fine with content, but popovers doesn't create. is all ok with this code?
$.ajax({
url: url,
type: 'POST',
data: data,
dataType: 'html',
success: function(answer) {
$(element).popover({
container: 'body',
html: true,
content: function (answer) {
return answer;
}
});
$(element).popover('show')
},
})
element is A tag. and answer is html as string.
When it comes to popover part looks like nothing happens.
You should set value to content directly. Not a function.
$.ajax({
url: url,
type: 'POST',
data: data,
dataType: 'html',
success: function(answer) {
$(element).popover({
container: 'body',
html: true,
content: answer
});
$(element).popover('show')
},
})

Add confirm (yes no) in submit with preventDefault

i have code submit with preventDefault. this my code
//submit terima barang
$("form.form_terima").submit(function (event) {
if (confirm('Submit Terima Barang ?')) {
$(".loader").show();
//disable tombol submit supaya tidak reload
event.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
url: 'po_req/po_req_crud.php', //type='add_terima'
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (data) {
console.log(data);
//action if success
}
});
return false;
}
});
but, it's not working. how to solve it ? thanks buddy :)
In your code, the event.preventDefault() will run only when the user has clicked "OK"/"Yes". If the user has clicked "No", then the form will submit.
You must add the event.preventDefault() outside of the if block to make it work as you expect.
$("form.form_terima").submit(function (event) {
if (confirm('Submit Terima Barang ?')) {
$(".loader").show();
//disable tombol submit supaya tidak reload
var formData = new FormData($(this)[0]);
$.ajax({
url: 'po_req/po_req_crud.php', //type='add_terima'
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (data) {
console.log(data);
//action if success
}
});
}
// prevent default regardless of user's response
event.preventDefault();
return false;
});

AJAX Multiple Form Submission

I'm not a Javascript master however I tried hard to prevent this. This script keeps randomly sending multiple posts. I couldn't manage to stabilize it. Usually works fine and sends one post per click. However sometimes it just decides that it should be posted like 5-6 times... Note that using async: false did not really make any difference. And it prevents me from disabling the button after the submission and its not because of "number of clicks" either. Thanks in advance!
$('#submit').click(function () {
$('#submit').attr("disabled", true);
var personal_text_data = document.getElementById('personal_text').value;
var lang_option_data = document.getElementById('language_option').checked;
$.ajax({
type: "POST",
url: 'send.php',
cache: false,
// async: false,
data: ({
notification_type: notification_type_data,
customer_id: customer_id_data,
personal_text: personal_text_data,
language_option: lang_option_data
}),
success: function () {
delete customer_id_data;
delete personal_text_data;
delete notification_type_data;
delete lang_option_data;
location.reload();
}
});
});
Use e.preventDefault(); to avoid the ajax submission and normal form submit from happening. Also change the click event and make it $('[yourForm]').submit().
$('[selectorToYourForm]').submit(function (e) {
$('#submit').prop("disabled", true);
e.preventDefault();
var personal_text_data = document.getElementById('personal_text').value;
var lang_option_data = document.getElementById('language_option').checked;
$.ajax({
type: "POST",
url: 'send.php',
cache: false,
// async: false,
data: ({
notification_type: notification_type_data,
customer_id: customer_id_data,
personal_text: personal_text_data,
language_option: lang_option_data
}),
success: function () {
location.reload();
}
});
});

Inserting image to an editor

I am using summer note editor and I want to upload an image to a folder when an user select an image file and at the same time I want to insert the image into the editor, How can achieve that, now I have the code that only upload the image to a folder but not into the editor...
$(document).ready(function() {
$('#summernote').summernote({
height: 510,
onImageUpload:function(files, editor, welEditable) {
sendFile(files[0], editor, welEditable);
}
});
function sendFile(file, editor, welEditable) {
data = new FormData();
data.append("file",file);
$.ajax({
data: data,
type: "POST",
url: 'savetheuploadedfile.php',
cache: false,
contentType: false,
processData: false,
success: function(url) {
editor.insertImage(welEditable, url);
}
});
}
});
I got the answer, rather than using an editor object, replace the
editor.insertImage(welEditable,url);
with
$('#summernote').summernote('editor.insertImage',url);
Summer note new version passes only one argument. So you can use this script
$('.summer').summernote({
height: "200px",
onImageUpload: function(files) {
sendFile(files[0], $(this));
}
});
function sendFile(file, editor) {
var data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: "POST",
url: 'savetheuploadedfile.php',
cache: false,
contentType: false,
processData: false,
success: function(upload_file_url) {
editor.summernote('insertImage', upload_file_url);
},
error: function(jqXHR, textStatus, errorThrown)
{
}
});

Categories

Resources