Angularjs form with and without refresh - javascript

I would like to use an Angularjs form directive in the following way: if it's in /home redirect to /search/term and if already in /search process the submit without page refresh just changing the location. I know how to do both, but I don't know how to write a reusable code which works in both examples.

You won't be able to submit form data without a page refresh, unless you submit the data asynchronously via XHR.
It sounds like you are submitting synchronously via HTTP POST or GET at /home, which would result in a page refresh. You will need to write some Angular code to take the values from the form controls and submit it via XHR POST or GET.
It's two quite different approaches so may be difficult to write something reusable.
Essentially one is a plain old HTML methodology whereas the other requires a a bit more sophistication and some Javascript.

Related

Any way to know if form POST destination generates an error

I have a webform that gets submitted to an endpoint/URL that I cannot access, to make any changes.
I would like to know if there is any way to listen for or capture errors that could come from the POST URL. An example would be if the URL is no longer valid, or there is a network issue, so it takes a long time or times out.
So specifically, once the form is submitted, is there any way in Javascript, on the client, to listen for or be aware of any errors due to issues with the server side URL the form is posting to. And to clarify, the form is submitted as a standard web form, not using Ajax or any newer JS implementation.
Thanks

What is the pros and cons of using ajax to submit form?

I have been using a lot of AJAX to submit forms such as register user, log in user form and so on.. Now, I want to know is it safe to use AJAX for such sensitive information such as userID and password forms ? What is the pro and cons of using AJAX when submitting form ? (security wise and so on).. Thank you again for any kind explanation and enlightenment..
PROS:
AJAX definitely has the advantage over the User Experience and Convenience. AJAX allows you to do checks with the server without refreshing the page. For example, it allows you to check if the username has already been used or not without resetting the form. However, since the users information is processed in Javascript first, Cross Site Scripting attacks can easily grab data from your script. However, even without AJAX your Cross Site Scripting can still be used.
CONS:
However, since AJAX is fetches data asynchronously, it usually renders the browser back button completely useless. Also, people who don't understand "web tech" sometimes turn Javascript off due to their own paranoia, thus AJAX can no longer run. I also heard that content rendered through AJAX are not usually visible to search engines, but I'm no SEO prof.
It's the exact same as using a normal form there is 0 differences. The pro and cons are the same as a normal html form.
I think you can use SSL or TLS if you want better security but don't hold me to that :)

Captcha check - Form is submitting to a server page I do not have access to

My client needs me to implement captcha on his form. The form's action is set to an external page, to which we do not have access.
I wanted to use Google's reCaptcha but it seems that piece of code (which does the checking) needs to be placed in the targed page (which we cannot access).
What is the solution? I tried with using some simple Javascript array and jQuery checking of the value but it seems that spammers after couple of months learned how to dig the values out of the page code (yes, the values are written there, it's javascript - and I do not know better way) because the spam is arriving again.
A good client-side way would be even better. If you know a script or some code to be used here it'd be very appreciated.
Host another server with captcha and submit your form there. In case of success, submit the form from the captcha server to the one you don't have access to.

Best way to include interactive external content in a page (JavaScript, AJAX, jQuery)

I'm going to be creating a widget style tool that will work as follows:
It can be included in any page by putting a script/button combo on that page.
The button, when clicked, will load a form from my site, which can be filled out and submitted.
Depending on the submitted information, there may be another form displayed - for example, a second page with a captcha, or a confirmation page with some action required, or maybe just have the form close, or some other action I add later.
If I was to open a popup window, this would be easy, just build it as a regular page. However, including this in a calling page, presents a few issues.
If I actually load the form content into a local div on the calling page, it becomes part of the page content. I know I can manipulate that content to some extent using the script (it will load a script from my site for that particular version of the widget), repost forms and load them into the same div, hide the div when I'm done with it, etc. But it seems like it would complicate things.
My other option is to make it all happen in an iframe, so it's not really part of the loading page calling page. This way I sort of feel like I'm losing some functionality I may need later. This is probably the way I will go anyway.
However, before I start down that road, I thought I would ask if anyone has any tips on the best way to include a complex series of pages in another page?
Whatever I do, I want to be sure I don't close doors on my ability to change the way the widget functions, I will definitely be adding functionality later - so keeping my options open for change is important.
Thanks!
Edit
Regarding JotaBe's question, on the server side, I will be using PHP.
However, I'm pretty sure that doesn't matter, as the PHP processing will (as always) happen on the server. All the client (requesting page), will know is that it requested, and then received JS/HTML/CSS/JSON/ETC assets via HTTP. It won't know, or care, how the server generated those resources.
If it helps you to picture it though, this is the basic idea of how the client and server will (if I don't think of a better way) work together:
The client page will (at load) request a .js file from my site. This file will be generated dynamically based on the requested URL. For example, account #74 would request http://mysite.com/widget/js/74.js and receive JavaScript assets customized for that account.
When the "widget button" is clicked, it will use the JavaScript to request an HTML form from my site, and include it in the page, one way or another (which way is best is the whole question). The HTML form will be generated dynamically and customized for account # 74 based on the request (ie: http://mysite.com/widget/form/74.php).
Once filled by the user, the form will be submitted to my site. The post will be processed and stuff will happen, again based on the requesting account (ie: action=http://mysite.com/widget/post/74.php). At this point, I may need to reject the form and request a re-post for failed validation, captcha verification, etc., or I may need to serve a confirmation page, or simply close the form, or some other action.
Any way you do this (language / platform / etc), the best practice is to use mvc, or hmvc, to keep the various logical components of the application separate. You can create popups by having some view templates which don't render their containing tags, designed for javascript / jquery .load() statements. You could then design a series of components designed to be loaded with arguments passed over the uri.
here is an article that might help explain one possible design pattern for what you are going for:
http://www.phpied.com/ajax-mvc/

Is auto post back in ASP.net and AJAX are the same?

Is auto post back in ASP.net and AJAX are the same??? I want to send data to server and store that data in XML file without refreshing the page. I dont want to use ajax.. If there is any other way to do this with plain javascript then do let me know... thanks in advance...
Is auto post back in ASP.net and AJAX are the same???
Not from a users perspective. When doing a postback, the user will see his entire page getting refreshed. When using AJAX, the user will not see his page get refreshed
I want to send data to server and store that data in XML file without
refreshing the page. I dont want to use ajax.. If there is any other way
to do this with plain javascript
If you want to interact with the server without refreshing the page, you have to use AJAX.
Note: You may be confusing AJAX with the various AJAX controls / libraries like AjaxControlToolKit etc. If that is the case, then you can definitely use AJAX without using any of the libraries / controls. That is done by using the XMLHTTPRequest and XMLHTTPResponse objects directly via Javascript. However, that in itself is AJAX. Sample code of how to do it can be seen in this page
So, atleast as far as i know, you need to use AJAX to go to the server without appearing to the user that your page has gotten refreshed.
as InSane said PostBack is quite different in AJAX and asp.net. AJAX mostly use Partial postback using XMLHTTPRequest Objects while full page postback sends complete Page's data to server resulting in complete page recycle.
For Your second question.. if you don't want to postback and still want to send some data to server there is only one way to do this by AJAX. AJAX in javascript is quite obscure i'll prefer using some javascript library like JQuery. Here is a link that shows how to call WebMethod on an ASPX page from JQuery.
http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/
Hope this will help.
Regards.

Categories