I am attempting to make an AJAX contact form with Webscript (http://webscript.io), but I am running into a problem. Without AJAX, the form worked well and the email was delivered. After trying to add AJAX functionality, I stopped receiving emails through the form, yet the AJAX appears to run successfully. Here is a JS Bin with my example code: http://jsbin.com/aqahok/1/edit. I have a feeling the problem doesn't lie in the Webscript (which I believe you cannot view) but in the JS since the form worked without AJAX.
Thank you for taking a look at my problem and feel free to ask me any questions you may have.
Your JavaScript is looking for input[name="message"], but it should be looking for textarea[name="message"]. I changed that and tried to send an email. It appears to have worked (no error), so hopefully that's it.
The JS Bin you created makes webscript.io return 500 Internal Server Error (you can see it in Firebug or Chrome Dev Tools). AJAX part just does not check response and show the "Contact Form Submitted!". So problem is on their side.
Related
Here's what I'm trying to achieve with my Chrome extension and the issue I'm facing:
My extension runs an ajax call every x minutes to a server and based on the result, displays the updated information in the extension pop-up window.
I was able to implement all of this logic with my ajax call made from popup.js and it works perfectly fine.
The only limitation I currently face is that the extension user has to click on the extension icon for the popup.js/html script to be triggered and executed (which is expected).
- I'm trying to figure how to trigger the ajax call function when the browser is launched.
Solution trial 1: I moved my ajax call and response logic from popup.js to background.js and included a chrome.runtime.onStartup.addListener. The problem with this approach is that background.js can't access my popup DOM and thus I cannot display my updated information.
Solution trial 2: I kept my ajax call and response logic in popup.js. In background.js, I added a chrome.runtime.sendMessage within the chrome.runtime.onStartup.addListener. The problem with this approach is that popup.js is not triggered obviously (no user click on extension icon yet) and thus apparently not able to get the message from background.js to execute the ajax call.
I'm pretty confused with what is the right approach to follow, it feels a bit like an chicken & egg problem.
Any help or feedback would be very much appreciated. Thanks in advance!
P.S: I'm using Manifest V3
I am working on a build for a new website which includes the Wordpress plugin Contact Form 7 to handle the submission of the form & (is supposed) to display a response via AJAX.
I simply cannot get the AJAX side of this to work. Upon submission the form works fine, but the page reloads and displays the 404 page... not cool!
Following the FAQ page I have run a number of tests. I can confirm:
The page is correctly referencing wp_head and wp_footer.
The page has no JavaScript errors in the console.
Whilst the page has one or two validation errors (created by another plugin), I don't believe this to be the issue. I have attempted to test this by stripping out everything except the form (and the header & footer).
I have deactivated each plug-in for conflicts & the problem persists.
I have flushed the permalinks (by re-saving via settings > permalinks) & tested.
I have created new form instances & tested.
Reinstalled the Contact Form 7 plug-in & tested.
After all that I'm still no closer to a solution. Can anyone shed any light on this issue as I'm very keen to avoid using an alternative plugin.
I can provide more details if needed. Thanks!
I tried clicking on the URL you provided for your website and it did not work.
I would check to ensure there are no conflicts with the jQuery as this could be the cause of the form not submitting with AJAX.
Bear with me as this is my first question here. I will try to format it as best I can.
I have installed a contact form plugin to my wordpress site and after setting everything up, I am now getting an error when I load the page that states this:
AJAX CALL ERROR
Error: 0 error
Verify the attribute action of the form. It seems there is an error
I spoke with the developer and he is able to load it on his demo site, I ran the site in debug mode, and looked at the .htaccess information. He is telling me that there must be something wrong with the server configuration since it only shows on the front end. I don't see anything in the htaccess file which would cause this. I am not very familiar with Ajax or htaccess(a little but not much) so That is why I'm asking this here. Does anyone have a suggestion, because I'm at a loss right now. Thanks
Open up Chrome, go to "Tools" then "Developer Tools", then click on the "Network" tab, try to load the page and monitor the AJAX calls the form is making. You can click on them and look at the request and response headers and the content returned by all the AJAX calls. Find the one that is broken. Start your debugging there.
If the server is returning some sort of error, like a 500 error, then look at the contents of the page being returned, there may be a better error message there. If it's a 404 error, then you're form is trying to make an AJAX call to something the server can't find.
I've search high and low for an answer to this but unfortunately I'm stuck. The problem is only occuring in Firefox (tested IE, Chrome and Safari also - works fine, no errors of any sort). I'll detail the sequence of events to save posting all my code.
ASP.NET MVC 3 application, basic form loads into a jQuery UI dialog
Custom jQuery to hijax the form submit (serialize the form and then $.post to the server - no compiler errors when debugging and post shows up in Firebug without errors)
Http GET (automatically happens) getting the response object from the server (+ success text and XHR), response is plain HTML in this case (again, shows up in Firebug with no errors)
Custom jQuery to change the HTML of the UI dialog from it's current HTML to the response Html - this is where it fails.
I've used javascript alerts to debug the sequence of events and as soon as the post (and get) is complete, everything just... sort of stops.
As I say, only in firefox! Very odd, just wondering if there's any known bugs with ajax and firefox or anybody has heard of a similar situation?
I must also add, that on other parts of my site, this works perfectly in all browsers! The only difference between this form and the other forms that do successfully complete the function is that the response from this form is the same "page" again but updated rather than a new "page". (I use "page" as I got all this working with Javascript turned off first and for graceful degredation)
HELP! Or laugh, either is fine.
UPDATE
I have tried sending a view with a blank model back as the action result - works in every browser except firefox - firefox retains the values from the previous post! And then I got to thinking - that's a trait of firefox isn't it? And maybe that's why the original "re-direct" html response doesn't work?? I think it's time to give up and let people know they can't use Firefox for that particular function!
Ok so I'm answering my own question.
The only way I found to get round it is to use $.ajax instead of $.post and to use the option async : false
Hope this helps somebody.
Rob
Have you tried adding the attribute [OutputCache(Location = System.Web.UI.OutputCacheLocation.None)] to your Action for your GET? It sounds to me like a caching issue.
I read some paragraphs in a book saying that it is not possible to do a partial postback for web, even AJAX is employed. Ajax will postback everything and update only ajaxfied controls.
However, on pages I made using ajax, I used Fiddler to monitor the transportation. I found when the page initial load, it loaded everything include pictures .... However, when I click a button and do a ajax postback. I can only see the some data were loaded.... Looks like it doesn't need to reload the whole page again.
I don't know if what I see is correct? Or the book I read is correct?
Thank you guys.
That depends what you put in the term "postback".
The AJAX call will send the complete form data back to the server, just as if the form was posted normally. The server will answer with a partial response that only contains the parts of the page that should be updated.
So, the request is not partial, but the response is.
I am not sure how you are posting back from the client side. I am guessing you are using UpdatePanels. How well you 'AJAX-ify' a web page depends on what method you employ.
UpdatePanels - Read Dave Ward's posting on them - http://encosia.com/2007/07/11/why-aspnet-ajax-updatepanels-are-dangerous/
PageMethods to post back to a web service, get the data and update the DOM to display the result
JQuery and other such AJAX frameworks to post back to a web service
I am sure the link above should clear things up a bit
I'm having a hard time understanding your terminology. I'm not really sure what a "postback" is, much less a "partial" one. I do know that one of the basic ways to transmit information to an HTTP server is via a POST request, which is usually used when submitting forms. If you mean to say that the entire form is transmitted when you click a submit button, I believe you'd be right.
You also seem to be doing something with AJAX, but it's difficult to tell. The whole point of AJAX is to have dynamic data displayed on a page without resorting to reloading it. Defining what to send and what to do with the results is entirely up to your own JavaScript. So unless you're using a framework, which you don't specify, there is no such thing as "ajaxified controls."
In any case, "AJAX" usually means using the XMLHttpRequest() method of modern browsers to send data to servers without refreshing the page. When you call this function, you specify exactly what data to send. This has nothing to do with HTML forms. One caveat: if you are indeed using a library for AJAX, it might impose additional limits on how you structure information to send.