I'm building a website with codeigniter and I'm creating a form for user submission.
I'm thinking about having the form submit with an javascript/AJAX call to a special controller intended just to handle form submissions and redirecting the user to an appropriate page based off the response from that controller.
Is this a good idea? I imagine my site will have lots of forms so I'm thinking a special controller just to handle their submission is a good idea. But obviously I will need to prevent users from ever directly accessing any of the methods in this controller.
Make sure your form works without javascript, and then you can use $this->input->is_ajax_request() to check if the form is being submitted with ajax, and do something different with your output.
This avoids the need for "ajax only" controllers, methods, and URLs, and keeps all your form processing logic together in one place. If it's not an ajax request, no one will ever be able to see the output so you don't need to worry.
Related
In Laravel when we using forms to store or delete a resource, the page is refreshed. What is the best technology to avoid refreshing the page while the request is being processed? AJAX, Vue.js, etc?
There are two main ways to handle http requests: synchronously and asynchronously.
Laravel is a PHP framework and therefore uses... PHP, which is a synchronous language. This implies a page refresh for every requests you make. The point is, every PHP framework have this behavior, this is the way PHP works.
So let's answer your question: indeed, you need an asynchronous technology to make a request to the server and get the response without refreshing the page. The technolodgy of choice in this case is Javascript, which will be able to make AJAX calls.
An AJAX (asynchronous JavaScript and XML) will, as stated in its name, make an asynchronous request. But an AJAX request is just the way of doing it, it's not really a technology. Yes, javascript frameworks like Vue.js are using AJAX, but that is overkill to just make some AJAX requests.
Using Axios or even jQuery is much easier and will allow you to make a request, grab the answer and modify your page without refresh very quickly :)
[EDIT]
The process to achieve what you are looking for is pretty simple:
Use Axios or jQuery to make an AJAX call (an asynchronous request)
Handle this request with Laravel, as you do for every other request
Returns something (or not, it depends of you) to alert your user that something happened
This response will be handled by Javascript
Vue is suitable for small projects where you just want to add a little bit of reactivity, submit a form with AJAX, show the user a modal, display the value of an input as the user is typing, or many other similarly straightforward things. It's scalable and also fantastic for huge project.
What is the best way to place 2 identical forms on the same page, but use the same form action and fields for each form? How can I keep response messages in the respective form area from which the data was submitted?
I'd have one form in the footer of my site, and one form in a popup on the home page of my site. I'm using a hidden div and Magnific to open the popup containing the same code from the form that is located at the footer. Essentially, both form do the same thing, and utilize the same form action.
I do not have access to the form action, or the code in the form action page.
Currently, the forms existing on the same "page" are no problem, but when I submit an email on one form, the errors and success messages show up on both the popup form as well as in the footer form.
I've read that this may be possible to do with ajax, but for completeness sake, I want to make sure that I'm building that I'm doing what I can with the form html, before moving on to studying ajax for this.
Sadly there is no nice html/liquid solution for this.
The only way is to use cookies in order to save information which form was submitted and show the error message only for that form instead of the two ones.
AJAX is not a good solution because of the Google Recaptch-a when you submit the form more than once, which is a real pain in the a** since there is no way to disable it and the form will fail if you try to submit it with ajax.
The easiest solution is to use cookies, other option is to rely on an APP for this, but it may be an overkill for this.
Forms in Shopify are... how to put it nicely... dumb... basic... not developer friendly or just not made to be tweaked in any sort of way ( excluding the front-end ).
I started integrating SecureSocial in my play/scala app, but I don't really like all the redirects it does between it's different views.
example - try to login from it's default login page and if you put in a wrong pass you will be redirected to a different page (url) but with the same login form. the only thing that is different is that there is an error message...
I want a simple login form (user/password provider) at the corner of my main page that submits it's data using ajax, this data is validated on the server and a response is made to either display error message/s or change the window.location.
Next to this form I will put a link to go to a more advanced login page that adds the option to use other providers like fb/twitter etc..
But from that page I also want to use ajax to submit the details and get the response.
I tried to browse into the SecureSocial source but got a little lost in there.
Can any one give me an idea how to use SecureSocial's but without using any of it's views?
NOTE: I'm not interested in customizing their views, It's not just a CSS/design issue, I want to handle the login details Ajaxly and not with normal form submission followed by redirects...
After some more rummaging around in SecureSocial code I got a better understanding of how it operates.
You can use any of the providers you listed in the play.plugins file seperatly to authenthicate the user's info from your own login/auth code. just make sure you send the right parameters that the provider needs.
I liked the way SecureSocial's ProviderController class dynamically decided what provider to use, based on a parameter. But I didn't like the responses it made - redirect.. I wanted to respond to an ajax request with some data and let the client side js handle it.
This is my solution:
pretty much copy all of ProviderController code to my own Auth.scala file (a Controller).
Changed the redirects related to "case ex, case _", kept the redirect on successful auth as it adds the SecureSocial session key related to the user.
Removed all the SecureSocial related routes from my routes file.
Put an additional hidden field with the logintype (userpass/google/fb/etc...) and configured my login ajax post to sent this along with the post to my Auth controller.
If you need more info comment here and I'll edit the answer.
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.
I have many forms that use AJAX (w/ jQuery) for validation and data submission. When a form is filled out correctly, I use window.location to redirect the page after I get an acceptable response from the PHP script. On the new page, I use a session variable (set after the AJAX calls) to display the appropriate content. Please tell me if this is standard practice or please give me some suggestions.
Thanks!
Is there a reason you would use a $_SESSION variable to store the post-submission content? Standard practice would be to validate the form via AJAX but submit it in the standard way (i.e. via $_GET or $_POST) after validation. This way you don't need to store anything to a session and you'll likely have less to debug as you'll be submitting the form and displaying its results in the most widely-accepted way.
The benefit of AJAX is typically so that you can submit the form without actually having to do the redirect/refresh. You could get the same functionality by simply having your form POST to the destination URL, redirect to the appropriate place from there or send them back to the form displaying any errors that may have occurred. You could use AJAX to validate the form before the submission to save your users a redirection back to the form to fix their errors, but this is really just a convenience for them. Also, you will have to validate any user data on the server side once it has been submitted, as you can't rely on client-side validation, so you might as well forget the AJAX validation.