html - GAE/Python best practice for a pop-up alert? -
i need have alert pop-up in google app engine when user inputs value create duplicate item. best way this?
i found way it, it's far elegant:
when user inputs duplicate project code show new page "error-message.html" explains user happenned , provides "back" button. however, rather show alert on "add-project.html" page. javascript idea can't validate in database, it's no use.
what best practice in gae/python show alert box triggered code?
so or suggestions appreciated!
thanks!
code:
the app i'm working on simple project manager's tool. i'm using webapp2 included gae.
current workflow: 1) in addproject show user page input new project data ("add-project.html). page based on jinja template. user fills in data , clicks on submit. 2) submit calls saveaddedproject checks in ndb if project code exists. 3) if project code not in ndb yet, new project saved in ndb , code re-directs general projects page. 4) if project exists show new page called "error-message.html" tells user he/she inputting duplicate value , provides button go back. user can change value , retry.
model:
class project(ndb.model): # models , individual project entry proj_id = ndb.stringproperty(required = true) proj_desc = ndb.stringproperty(required = true) proj_status = ndb.stringproperty(required = true) dispatchers:
class addproject(webapp2.requesthandler): # displays template fill-in data new project, # calls saveaddedproject def post(self): user = users.get_current_user() # use google's login system logout_url = users.create_logout_url(self.request.url) template_values = { 'user_id': user, 'logout_url': logout_url, } template = jinja_environment.get_template('add-project.html') self.response.write(template.render(template_values)) class saveaddedproject(webapp2.requesthandler): # saves new project. called addproject def post(self): proj_id_str = self.request.get('proj_id') proj_desc_str = self.request.get('proj_desc') proj_status_str = self.request.get('proj_status') # add template validates required fields aren't empty :-) # verify don't duplicate project_id pq = project.query(ancestor = get_projects_key()) pq = pq.filter(project.proj_id == proj_id_str) pq_result = pq.fetch(limit=1) if len(pq_result) > 0: # notify user template_values = {'error_message': 'project id ' + proj_id_str + ' exists', } template = jinja_environment.get_template('error-message.html') self.response.write(template.render(template_values)) else: # create new project project = project(parent=get_projects_key()) # use root ancestor key # populate fields, save ndb project.proj_id = proj_id_str project.proj_desc = proj_desc_str project.proj_status = proj_status_str project.put() self.redirect('/projects') html add-project.html:
<!doctype html> {% autoescape true %} <html> <head> <link type="text/css" rel="stylesheet" href="/stylesheets/pages.css" /> <title>action list</title> <script> function validateform() { var count = 0; var x = document.forms["form1"]["proj_id"].value; if (x == null || x == "") { count = 1; } var x = document.forms["form1"]["proj_desc"].value; if (x == null || x == "") { count = 1; } if (count == 1) { document.getelementbyid('alertmsg').innerhtml = '<font color="red">please fill in fields marked *</font>'; return false; } } </script> </head> <body> <h2>add project</h2> <br> <b>user: {{ user_id }} </b> <br><br> <form name="form1" action="/p-save-add" onsubmit="return validateform()" method="post"> <div> id * <input value="" name="proj_id" size="15"> description * <input value="" name="proj_desc" size="50"> status: <select name='proj_status'> <option value='open'>open</option> <option value='closed'>closed</option> </select> </div> <br> <div><input type="submit" value="save"></div> </form> <br> <br> <b id='alertmsg' > </b> </body> </html> {% endautoescape %} html error-message.html:
<!doctype html> {% autoescape true %} <script> function goback() { window.history.back(); } </script> <html> <head> <title>actionlist</title> <link type="text/css" rel="stylesheet" href="/stylesheets/messages.css" /> </head> <body> <h3> sorry, error ocurred!</h3> {{ error_message }} <br> <br> <button onclick="goback()">back</button> </body> {% endautoescape %}
you should use both approaches. approach show error page right way handle issue both security perspective (validation needs happen on server, because form can submitted in way bypasses validation in javascript) , compatibility perspective (browsers may disable javascript , access form without it).
however, user experience perspective, nice validation errors on same page form without having navigate new page see error (and have fill out form again). note can still validation in ui via javascript if validation check has happen on server; can using xmlhttprequest submit form in javascript javascript code capable of seeing/handling response. then, can have response message indicate 1 of various possible errors.
for example, see how "feedback" mechanism works on my website; you'll note there version of form works without javascript (the "/feedback" page), if have javascript enabled, button opens dialogue in javascript submits form using xmlhttprequest, , if form fails submit, error reported directly in dialogue without navigating new page (by reading status code of response or looking @ detailed error message included in json response returned server).
Comments
Post a Comment