I am an undergraduate student ,
and working on my Final Year project these days.
I have some queries related to Custom Controls as follows:
I am designing a text box field which will have three or more functions as follows :
Either it will allow numeric characters only
Or it will allow an email address to be taken as input
Or it will be a file Upload text box
I am using jQuery to validate this text box .for eg. for checking whether the user has entered numeric characters only or not!!
My Question is
What is the better approach to build such custom controls ? Either make it pure client side or pure Server side or both?
Also , I need to include AJAX functionality in file uploader.
If the client browser doesnot support JavaScripting for some reason then how we can avoid this constraint ?
Thank you very much for your time !
Kindly help me.
First of all you have to decide if you need both client-side and server-side functionality for your control. It will depend on your needs. If you are writing it as part of a large application, I would suggest going for both, because it's much easier to manage. If you decide that you do want both, ASP.NET includes exact functionality that you are looking for. It's called Extender controls. They will allow you to create a custom server-side control and extend that control to include some client-side functionality. You can get more information about Extenders here.
Graceful failing AJAX controls are rare, majority of the developers that create AJAX controls assume that all clients will have JavaScript turned on. However, they are not that hard to do. Actually they are very easy to do, if you are using ASP.NET AJAX Update Panel. Update Panel itself will automatically switch to full post-back if JavaScripts are disabled. If you are using custom implementation of AJAX, or jQuery (as you mentioned above), you have to follow a few simple rules. First of all, avoid binding events from inside scripts, use onclick, onmouseover, etc. This way, if a link has onclick event, and a valid href tag, if JavaScript are on, you will process onclick event handler, but if they are off, you will just follow href attribute value. For the uploader, you can put your uploader inside the FORM element, and add onsubmit event to it. If JS is on, you will process onsubmit, and do an AJAX call to save the file, if JS is off, you will do a full page post-back and save the file from the server-side.
Related
I am developing a cakephp (2.5.6) application where user can entry comments, blog posts and more. The users can use html markup (h1, h2.., quote, ..).
How can i add security to the form inputs so a user can not add javascript code like <script>alert('foo');</script> or anything else.
I have tested it with a simple $this->Form->input('description');. Now if i display the description with echo $data['Post']['description'] the alert is displayed on page refresh.
What is the common way to prevent this? Does cakephp provide any helpers or functions?
Well, you should push all output on a webpage through h() which is the Cake shortcut for htmlspecialchars. Even output you've fetched from an API or a hardware sensor. Who tells you they can't give you malicious data? Most fundamental security rule: Don't trust any data input in your system.
If you need a more detailed sanitizer HTML Purifier which is a lib and CakePHP plugin for it that allows you to come up with specific filtering. For example disallow <script> but allow <b> and <a>. It can even filter allowed HTML attributes. Read the documentation.
I am having the next scenario (I can't change it). I have an classic asp page. In it, I have the asp code, the javascript code, and the VBscript code. When the user clicks the button confirm, the javascript function "confirm" is executed. In it, the page submits a form to itself.
What I want to accomplish is the next thing. Inside that javascript function confirm, I can easily get the web page html as a string. But what I want is to get that string in the VBScript part when the page processes the self-submit done. I have tried the next things:
Inserting in an asp input hidden control in the page, and load from JavaScript the needed string in that input. Afterwards I expected to get it in VBScript by Request("controlId/controlName"). But it fails me because the input hidden control can't have strings that large.
In the JavaScript confirm function, to load in a session variable in the string. But it looks like I can't write a client-side variable in a session variable.
To store through the JavaScript function a temporary file and passing it through a input file control. This I only have thought about it. Because i don't think that it is a good solution to store a temporary file in the client-side, and I still have the believe to find a better solution than this. Also I don't know exactly how to write files with JavaScript in the client-side.
I remember that I have tried all this, if I remember another thing that I tried, I will post it here.
I have slammed my face repeatedly against the desktop, but I can't find a solution to this. Any idea would be really helpful.
But it fails me because the input hidden control can't have strings
that large.
Use method="post" instead of method="get" in the form, and the data size is practically limitless. I.e. the limit changes from a few kilobyte to several megabyte.
But it looks like I can't write a client-side variable in a session
variable.
That is correct. The session variables only exist on the server side.
To store through the javascript function a temporary file and passing
it through a input file control.
That is a process in two steps, where each step in itself is generally impossible. You can't access the local file system using Javascript, and you can't set the file name of an input file control using Javascript.
So you want to get html page in your ASP using javascript?
Why do you want to do that. You can use your a form with a post method to send big string.
I have an ASP.NET MVC3 app that features a form with a nested-table input
(Ie on each row I can add a sub-table, with no limit on depth)
To handle this for my MVC app, I've created 2 javascript classes(using this term loosely with js:) that mirror my MVC3 model and post the data to an action method. Everything works great...Except that right now the only way that I know how to do this is with jquery $.ajax or $.post --- How can I do a postback in javascript?
I have the URL, and the custom JSON data, and want to do a page postback... Any suggestions? I can't use the normal form submit due to the nested table scenario described above.
Also, I just want to say, that MVC has made this so simple to render! :) For rendering a recursive view did everything without any script required, only on the saving did I need to screw around with json.
Update:I guess another solution would be -- can I change the contents of my form data on submit? My method takes a JSON object, is there any way I can stuff that in my request while my form submit is happening normally?
You can use the XML Http Request to do this. This is eventually what jQuery and other JS libraries use.
But why don't you just stick to jQuery AJAX or POST?
Maybe I'm misunderstanding your question, but it seems like what you want to do is post to the same page you are on, which means if you have the URL (and it sounds like you do), you just need to specific that in the $.ajax method? Maybe you can clarify what you mean a little bit for us.
Edit: Per comment suggested looking at http://jquery.malsup.com/form/
Well, I found that with the MVC3 binding, the table in my form could be normally bound if I named the fields such as Item[0].Children[1].Children[0].FieldA... etc, everything matched up fine without having to convert to javascript objects/json. I changed my code to fix this naming before a form submit, and it binds pretty well without having to do any json calls at all. Less elegant, but I guess it works.
Now, this requirement may seem weird. But i would like to know how to achieve this?
I am having an HTML file, which is having few input box, check box, radio button etc. I would like to retain the changes a user [ actually i ] performs on this page. Like if the user has ticked a checkbox then next time anybody open that file should see that checkbox as ticked.
This thing can be done easily using HTTP cookies. But i don't want to use cookies.
The answer can be as simple as "No you can not do that" :)
Edit
That's the problem with not phrasing the question correctly.
I guess i can't use DB as if i will send my HTML page to someone then he/she will not be able to see my changes. I want my changes to be reflected on other systems also. [ thats the reason i was not going for cookies ]. Other solution what i was thinking was, using FileSystemObject. Any other solution ? again the answer can be "No you can not do that" :D
You could bind the change events of your form elements to an AJAX submit, log the submits to the db and then on any page load grab the latest states from the db for rendering.
Edit
If you want these changes to appear "simultaneously" for other users then you could use jQuery polling to update the page - have the page periodically poll the server for the latest state.
Having said that, if you give them a server link and not the actual file they will see your db changes.
However, it sounds like you want to actually send the file (not send someone to a web server) in which case you could do something like one of these approaches:
Your PHP/whatever file (can possibly even do this with javascript) outputs a HTML file with appropriate checked="checked", selected="selected", value="blah" etc. You send this file.
Your PHP/whatever file outputs a static reference file. Your HTML file has javascript referencing and using the values stored in this file. You send both of these files around (although value updates only require a changed static reference file).
I sounds like you want to change the actual file using Javascript - this should be rather difficult. Javascript was designed from scratch as a web scripting language and as such it doesn't have any built in file/IO functionality.
What you can do in Javascript is load ActiveX objects and plug ins. How this works depends a lot on which browser you're using. For instance in IE you could load an ActiveX object (written in VB or whatever) that could edit your file:
var fileWriter = new ActiveXObject("My.FileWriter");
fileWriter.Update("myFile.htm", "inputName", "newValue");
You'd have to write your FileWriter utility though.
Alternatively you could use HTML5's new data storage stuff - but then you're still limited on browser.
You need some method to identify the user when he or she visits again. A browser cookie is useful, because it is stored on the user's computer, which serves as identification. The other serious option is to store the user's preferences in a database. This would, at least, require a server-side language. In addition, you need some way to identify the user, such as username, or, less reliably, IP address.
I hear other options may exist in HTML5, but I don't think those can be used seriously at this time. You can read about it here in Offline Web Applications. It seems to me like something very similar in spirit, although much more powerful, than cookies.
I’m in the process of developing pretty basic web application, that is mostly so I could learn jQuery/ajax/php on the way (and have some fun). I want to make it as accessible to users as possible so it should work with Javascript disabled, validate to AAA and all that. With JS disabled would be of course without all the bells and whistles, but nevertheless should do the job.
I would like to make good use of Ajax, but I don’t fully understand how should I cope when JS is off.
So let’s say JS is on, user submits the form, clicks submit button and thru ajax, data is submitted to register.php (register.php is specified in forms action attribute). register.php returns data and jQuery displays appropriate message. All without reloading the page.
Now, if JS is disabled, submitting form to register.php won’t do much good.
The way I understand it, solution would be to create one php script for JS enabled, other for JS disabled. So by default form would have action attribute with nonjs_register.php, and if JS would be enabled, it would force the form to be submitted to js_register.php rather than default nonjs_register.php.
I can imagine that would be quite tedious to create two scripts pages for each user interaction with the application but that’s the only way I can think of at the moment.
I hope all that makes sense but please let me know if my explanation is not quite clear.
Now if anyone could explain to me what is the common practice to deal with that kind of problem that would be great.
Take a look at the Hijax technique, it's a way of using AJAX as a progressive enhancement.
The way I would deal with this sort of thing is to use an event with javascript that cancels the default action of the form. The default action of the form is to submit to a different url:
html
<form id="AjaxForm" action="/nonJS_register.php" method="POST">
<!-- form input elements -->
</form>
js
document.getElementById("AjaxForm").onsubmit = function ()
{
//- do ajax posting...
ajaxPostForm();
//- Cancel the default action of the form
event.preventDefault();
return false;
}
The ajax function could submit to nonJS_register or you could even just add a parameter that tells the script to return the data in a different format and not encapsulated by HTML.
the recipe is very basic:
always pull everything on the page
before JS is even called.
then change everything via JS - e.g. hide
elements as required etc.
AJAX needs to hook up on the events and cancel
the original events (e.g. clicking
the link will get you to another
HTML/PHP generated page without JS
available, but with JS available you
can change targets to pull AJAX only
and return false, so click won't
actually change the page)
The best thing I could suggest would be to build it how you would want it to work without the AJAX calls. That way you can get an accurate portrayal of how it will work with JavaScript disabled. Then start to work in your JavaScript and continue to test with/without JavaScript enabled.
If you use AJAX to implement some ESSENTIAL part of a page, then the whole page will have to require Javascript.
This is a thing you have to point out BEFORE you start implementing it.
If you want to make Javascript optional, then you can't use AJAX to implement all the communication. You'll have to use postbacks, and eventually override the "click" events of buttons to make the postback asynchronous (a.k.a. with AJAX).
So, I would suggest you to write the page as if you don't have Javascript, then override some functionalities later on if Javascript is enabled.
One solution would be to have your register.php file recognize the HTTP header: Accept in requests it receives and it would respond one of several ways:
If the incoming request has
Accept: application/xhtml+xml, text/html, multipart/mixed, */*
Then return an HTML page as a response.
Or if it's something else, such as
Accept: application/json, application/javascript, text/javascript
It would return JSON (in this case), or XML if it had the appropriate mime types listed for example.
Then in your Javascript code, you'd handle the onsubmit event and override the normal behavior to perform what you suggest in your question (but also changing the Accept header, like above). If javascript is disabled, the form will submit normally and will pass along a header that should trigger your PHP to return a web page.