I'm not terribly experienced with AJAX and so am using some tools and attempting to integrate and customize them. First, this is a wordpress site using an AJAX form to submit a post. It all works great! Now, of course, I have to add a WYSIWYG editor to the mix and need to figure out how to get the html content to submit properly.
Here's the submit code:
jQuery("form.pfs").submit(function() {
// vvv I ADDED THIS LINE!!! vvv
jQuery('textarea#postcontent').val(jQuery('div.workzone iframe').contents().find('body').html());
jQuery(this).ajaxSubmit({
type: "POST",
url: jQuery(this).attr('action'),
dataType:'json',
beforeSend: function() {
jQuery('.pfs-post-form #post').val('posting...');
},
complete: function(request,textStatus,error) {
data = jQuery.parseJSON(request.responseText);
if (data && data.error) {
jQuery('#pfs-alert').addClass('error').html('<p>'+data.error+'</p>').show();
jQuery('.pfs-post-form #post').val('Post');
} else {
jQuery('form.pfs').reset();
location.reload();
}
}
});
return false;
});
As you can see, I've added that first line where I take the content of the HTML in the WYSIWYG (http://elrte.org/) and set it as the value of what would have been the original textarea (#postcontent).
The AJAX works perfectly if there's an error, so it is only the "else" portion of the routine that is throwing the error:
Uncaught SyntaxError: Unexpected token < jquery.js:2
e.extend.parseJSON jquery.js:2
jQuery.submit.jQuery.ajaxSubmit.complete pfs-script.js:31
F
So as you see, I need to validate for malicious code (not part of this help request!!) but more importantly I just want to be able to accept HTML in my form posts. Ideas? I am not 100% sure I understand what is failing and where...
turns out there was a conflict with another Plugin. tracing out the request.responseText revealed it. This code works just fine.
Related
I have an ajax function like so:
function RunSubmit() {
$.ajax({
url: '#Url.Action("Contact", "Public")',
type: "POST",
data: $('#contactForm').serialize(),
dataType: 'jsonp',
crossDomain: true,
success: function (result) {
alert("hit success function");
if (result.validForm) {
alert("At redirect. Url is: " + result.url);
window.location.assign(result.url);
//console.log("valid form");
} else {
$('#registerForForm').html(result);
//console.log("BAD FORM");
alert("ELSE CALLED");
}
},
error : function(ob1, ob2, ob3)
{
},
complete: function(val)
{
//This is being hit but it appears no value is being returned from the controller (FireFox)
}
});
Strange thing is it works in IE and Chrome but not FF. I have tried running the post with dataType: 'json' without the dataType and without the crossDomain property. Looking at the console on FF I can see that we are having numerous cross domain request errors mainly coming from google fonts. (This does not happen on chrome or ie). In our controller we are making a hardcoded http request to another server on a different host so I can see where the issue might be arising. The way we have dealt with this issue before is by adding a crossdomain.xml file to the root of our project. Something like this
<?xml version="1.0" encoding="utf-8" ?>
<cross-domain-policy>
<allow-access-from domain="*.xyz.com"/>
<allow-access-from domain="*.abc.com"/>
<allow-access-from domain="*.123.net"/>
<allow-access-from domain="http://university.abc.com"/> //this is the site we are sending a request to in our controller
</cross-domain-policy>
So I have searched and come across multiple posts on SO where the success function was not being called on an ajax post. Check my error objects the only information I am getting back is "error". This javascript should be receiving a url back and redirecting; however, what it is doing is rendering the JSON return value to the screen.
This is the line of code that returns our Json from our controller.
return Json(new { validForm = true, url = "/Public/ContactComplete" }, JsonRequestBehavior.AllowGet);
The line looks fine to me and the Json being returned is perfect json so it should not be a parsing error on the jquery side.
This was an interesting situation. I'm adding this to my list of reasons as to why a form may not post back in MVC. The outside firm we hired to develop our product created a 'hack' to get around an issue where Chrome would not post back if you wished to disable the submit button (to prevent double post) on the click of the button itself. To get around this the developer wrote an ajax script submitting the form manually on click. This in turn blew up functionality in firefox. There was some weird double posting going on and for whatever reason FF would render JSON to the screen instead of catching the Json back and running the success function.
Long story short:
If you are disabling a submit button to prevent double post then disable it on the form submit event.
pseudo code
$('#submit-button').on('click', function() { this.attr('disabled', true);}
Is not the way to go. The below is what fixed it for me
$('form').on('submit', function() { $('#submit-button').attr('disabled', true);}
So i I have a page that contains links that call an httpRequest. The request calls a php file that grabs data from mysql and pre populates a form which is then returned to the browser/webpage. My problem is that when the page is returned to the browser via the httpRequest/ajax the text area does not display the tinymce editor, it just displays a normal text area. It looks like my request and ajax is working fine the text area just doesn't have the tinycme editor on it.
When i don't use ajax it works fine but when i put it in a separate file and call it via ajax it doesn't bring in the tinymce editor.
Does anyone know how to fix this problem so that my ajax generated page displays the text area with the tinymce editor. Thank you.
Lets presume that your thinyMCE instance is initialized with code below
// initialize tinyMCE in page
tinyMCE.init({
mode: "textareas",
theme: "advanced"
});
and you have some kind of button somewhere in the page. For purpose of this tip, i will not give it any ID but you may. Now, using jQuery you can easily attach event handler to that button which will call through AJAX your server and take content which you want to put tinyMCE editor. Code which will do such job would look somehow like below.
$(function() {
$("button").bind("click", function() {
var ed = tinyMCE.get('content');
ed.setProgressState(1); // Show progress
$.getJSON('/page/12.json', { /* your data */
}, function(data) {
ed.setProgressState(0); // Hide progress
ed.setContent(data["body"]);
}
});
});
});
You can see that on button.click ajax will call url /page/12.json which will return JSON as response. bare minimum of that response could be:
{
title: "Page title",
body: "<html><head><title>Page title</title>......</html>"
}
I attached anonymous function as callback which will handle response from server. and hide progress indicator which is shown before ajax call.
About JSON
JSON is shorten of JavaScript Object Notation. It is JavaScript code!!! So don't be confused about it. Using JSON you can make javascript object which can have attributes you can use later in your code to access particular peace of data which that object "holds". You can look at it as some kind of data structure if it is easier to you.
Anyway, to show you how this JSON can be created by hand look at examples below
var data = new Object();
data.title = "Page title";
data.body = "<html....";
or
var data = {
title: "page title",
body: "<html...."
};
it is very same thing.
If you want to learn more about JSON point your browser to http://json.org.
===== alternative =====
Alternative to json solution could be just plane ajax call to server and response can be plain HTML (from your question I can assume that you have something like this already). So instad of calling $.getJSON you can use $.get(url, callback); to do same thing. The code at the top of my answer will not dramatically change. Instead of geting JSON in response you will get string which is HTML.
----------- BOTTOM LINE -------
I prefer JSON since it can be easily extended later with other attributes, so there is no painful code changes later ;)
Problem here will be that when you return the full page and render it using the ajax response, your tinymce instance has not been shut down before.
In order to do this you can call this small piece of code before you render the ajax response:
tinymce.execCommand('mceRemoveControl',true,'editor_id');
In this case the editor should initialize correctly. You are not allowed to initialize a tinymce editor with the same id before shutting the first one down.
Strangely i ran into this problem yesterday. Following code should work, but YMMV. Trick is to use the correct steps in ajax events. I used the Regular TinyMCE and made use of the jQuery library already included.
Following goes into your tinyMCE initialization tinyMCE.init() . All of the below block should be outside the document.ready.
myTinyInit = {
//.......All essential keys/values ...........
setup : function(ed) {
ed.onChange.add(function( ed ) {
tinyMCE.triggerSave();
}) }
//.....................
};
// Init the tinyMCE
tinyMCE.init(myTinyInit);
This ensures the content is being saved regularly onto the textarea that holds the value. Next step is setting up the request events.
Normally tinyMCE mceAddControl before the ajax post and mceRemoveControl after the ajax success should do the trick. But I found that often does not work.
I used the form as the jQuery selector in my case.
jQuery( '.myForm' )
.find( 'textarea#myTextArea' )
.ajaxStart(function() {
// If you need to copy over the values, you can do it here.
// If you are using jQuery form plugin you can bind to form-pre-serialize event instead.
// jQuery( this ).val( tinyMCE.get( jQuery( this ).attr( 'id' )).getContent() );
}).ajaxSend( function() {
// ! - step 2
// My case was multiple editors.
myEds = tinyMCE.editors;
for( edd in myEds ) {
myEds[ eds ].remove();
}
// tinyMCE.get( 'myTextarea' ).remove();
// strangely mceRemoveControl didnt work for me.
// tinyMCE.execCommand( 'mceRemoveControl', false, jQuery( this ).attr('id'));
}).ajaxSuccess(function() {
// Now we got the form again, Let's put up tinyMCE again.
txtID = jQuery( this ).attr( 'id' );
// ! - step 3
tinyMCE.execCommand( 'mceAddControl', false, txtID );
// Restore the contents into TinyMCE.
tinyMCE.get( txtID ).setContent( jQuery( this ).val());
});
Problems i came across :
Using mceRemoveControl always gave me r is undefined error persistently.
If you get a blank tinyMCE editor, check the DOM whether the ID of the textarea is replaced with something like mce_02, this means that TinyMCE is being initialized again or something is wrong with the order. If so, the tinyMCE is duplicated with each save.
if you are new to JS, I recommend using jQuery with the form plugin, it might be easier for you. But do use the regular non-jquery tinyMCE, as it is well documented.
I fixed this problem by recalling the function after the ajax call. In this part of my ajax:
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("Content").innerHTML=xmlhttp.responseText;
tinymce();
Now it works fine.
I have a page which needs to use $.post() but for some reason the exact code works when I run it from the firebug console but not from my script? My script is:
$(document).ready(function () {
$('#dl_btn').click(function () {
$.post(
"news_csv.php",
$("#dl_form").serialize(), function (data) {
alert('error');
if (data == 'success') {
alert('Thanks for signing up to our newsletter');
window.open("<?php echo $_GET['link']; ?>");
parent.Shadowbox.close();
} else {
alert(data);
}
});
});
});
It isn't the link as that does get printed properly but it gives me an error on line 140 of jquery min, I have tried using different versions of jquery and to no avail. I really dont understand why this isn't working.
When I changed from $.post to $.ajax and used the error callback I did receive an error of 'error' and the error is undefined?
Don't suppose anyone has any ideas? Would be much appreciated.
Thanks,
Tom
Is your click button placed inside a form element?
Cause doing so, clicking on it will not only trigger the onClick event you have binded to, but form submit as well, so you will end up in a case where your browser is executing both requests in parallel - with unpredicted outcome, of course.
I tried the same code with an element that does not trigger form submit and it worked as expected.
One point though: if you plan to use simple string as a return value and to do something with it (display it or so) then is ok to do what you do right now. However, if you have more complex response from the ajax request, you should specify the response type (xml, json..) as the last parameter of the post method.
Hope this helps.
Given so much different options to submit sth to the server, I feel a little confused.
Can someone help me to clear the idea when I should use which and why?
1> $.ajax()
2> $('#myForm').ajaxForm
3> ajaxSubmit
4> $('#myForm').submit
Thank you
I personally prefer creating a function such as submitForm(url,data) that way it can be reused.
Javascript:
function submitForm(t_url,t_data) {
$.ajax({
type: 'POST',
url: t_url,
data: t_data,
success: function(data) {
$('#responseArea').html(data);
}
});
}
HTML:
<form action='javascript: submitForm("whatever.php",$("#whatevervalue").val());' method='POST'> etc etc
edit try this then:
$('#yourForm').submit(function() {
var yourValues = {};
$.each($('#yourForm').serializeArray(), function(i, field) {
yourValues[field.name] = field.value;
});
submitForm('whatever.php',yourvalues);
});
Here is my understanding
$.ajax does the nice ajax way to send data to server without whole page reload and refresh. epically you want to refresh the segment on the page. But it has it's own limitation, it doesn't support file upload. so if you don't have any fileupload, this works OK.
$("#form").submit is the javascript way to submit the form and has same behaviour as the input with "submit" type, but you can do some nice js validation check before you submit, which means you can prevent the submit if client validation failed.
ajaxForm and ajaxSubmit basically are same and does the normal way form submit behaviour with some ajax response. The different between these two has been specified on their website, under FAQ section. I just quote it for some lazy people
What is the difference between ajaxForm and ajaxSubmit?
There are two main differences between these methods:
ajaxSubmit submits the form, ajaxForm does not. When you invoke ajaxSubmit it immediately serializes the form data and sends it to the server. When you invoke ajaxForm it adds the necessary event listeners to the form so that it can detect when the form is submitted by the user. When this occurs ajaxSubmit is called for you.
When using ajaxForm the submitted data will include the name and value of the submitting element (or its click coordinates if the submitting element is an image).
A bit late, but here's my contribution. In my experience, $.ajax is the preferred way to send an AJAX call, including forms, to the server. It has a plethora more options. In order to perform the validation which #vincent mentioned, I add a normal submit button to the form, then bind to $(document).on("submit", "#myForm", .... In that, I prevent the default submit action (e.preventDefault() assuming your event is e), do my validation, and then submit.
A simplified version of this would be as follows:
$(document).on("submit", "#login-form", function(e) {
e.preventDefault(); // don't actually submit
// show applicable progress indicators
$("#login-submit-wrapper").addClass("hide");
$("#login-progress-wrapper").removeClass("hide");
// simple validation of username to avoid extra server calls
if (!new RegExp(/^([A-Za-z0-9._-]){2,64}$/).test($("#login-username").val())) {
// if it is invalid, mark the input and revert submit progress bar
markInputInvalid($("#login-username"), "Invalid Username");
$("#login-submit-wrapper").removeClass("hide");
$("#login-progress-wrapper").addClass("hide");
return false;
}
// additional check could go here
// i like FormData as I can submit files using it. However, a standard {} Object would work
var data = new FormData();
data.append("username", $("#login-username").val());
data.append("password", $("#login-password").val()); // just some examples
data.append("captcha", grecaptcha.getResponse());
$.ajax("handler.php", {
data: data,
processData: false, // prevent weird bugs when submitting files with FormData, optional for normal forms
contentType: false,
method: "POST"
}).done(function(response) {
// do something like redirect, display success, etc
}).fail(function(response) {
var data = JSON.parse(response.responseText); // parse server error
switch (data.error_code) { // do something based on that
case 1:
markInputInvalid($("#login-username"), data.message);
return;
break;
case 2:
markInputInvalid($("#login-password"), data.message);
return;
break;
default:
alert(data.message);
return;
break;
}
}).always(function() { // ALWAYS revert the form to old state, fail or success. .always has the benefit of running, even if .fail throws an error itself (bad JSON parse?)
$("#login-submit-wrapper").removeClass("hide");
$("#login-progress-wrapper").addClass("hide");
});
});
I use JQuery to insert a form into a div, the form is in a php file.
function show(id){
var content = $("#layer1_content");
$("#layer1").show();
var targetUrl = "mouse.php?cat="+id;
content.load(targetUrl);
}
Everything works, but when I submit it goes to that php page. Ff I call the same form within the same php then it works fine. The response is handled by:
$('#layer1_form').ajaxForm({
target: '#content',
success: function()
{
$("#layer1").hide();
}
});
Your question is not super clear but my hunch is that in the case when it does not work, you are actually submitting the form. This would cause the page reload.
Try grabbing the form and attaching a submit handler that cancels the submit:
$('form').submit(function(){ return false; });
hey, thanks for reply, i just fixed it but in a very cheap manner.
Il try explain again, my jquery gets the contents from a php file like so:
stuff....here..
this calls a div that pops up:
function show(id)
{ var content = $("#layer1_content");
$("#layer1").show();
var targetUrl = "mouse.php?cat="+id;
content.load(targetUrl);}
and this is supposed to submit and send back the results from the php "savesettings"
$('#layer1_form').ajaxForm({
target: '#content',
success: function()
{
$("#layer1").hide();
}
});
above : #content is were the output will show.
layer1 is the div that holds the form.
if #layer1 div is were my javascript is then, everything works, and the #content div receives the info. But i cant put it the form in the same file cause it will contain alot of settings that will fill the page horribly.
so what i did was (and this is cheap of note i am sure)
this, i took all the stuff inside the form, and called it externally, so that did the trick but it feels cheap :
Iput i new div hre
you think my solution is pathetic?