2015-05-31 1 views
0

Мне нужно, чтобы в Google App Engine появилось предупреждение, когда пользователь вводит значение, которое создавало бы дублирующийся элемент. Каков наилучший способ сделать это?Практика GAE/Python для всплывающего предупреждения?

Я нашел способ сделать это, но это далеко от элегантна:

Когда пользователь вводит дубликат кода проекта я показать новую страницу «ошибка-message.html», который объясняет пользователю, что и обеспечивает Произошло «назад». Тем не менее, я бы предпочел показать предупреждение на странице «add-project.html». Javascript был бы хорошей идеей, но он не может проверяться в базе данных, так что это бесполезно.

Какова наилучшая практика в GAE/Python, чтобы показать окно предупреждения, вызванное кодом?

Так что любая помощь или предложения будут оценены!

Спасибо!

КОД:

приложением Я работаю сейчас является инструментом простого менеджера проекта. Я использую webapp2, включенный в GAE.

Текущий рабочий процесс: 1) В AddProject я покажу пользователю страницу для ввода новых данных проекта («add-project.html»). Эта страница основана на шаблоне JINJA. Пользователь заполняет данные и клики на отправке. 2) Отправить вызовы SaveAddedProject, который проверяет в NDB, если код проекта уже существует. 3) Если код проекта еще не находится в NDB, новый проект сохраняется в NDB, а код перенаправляется на страницу общих проектов 4) Если проект существует, я показываю новую страницу с именем «error-message.html», которая сообщает пользователю, что он вводит дублирующее значение, и предоставляет кнопку для возврата. Пользователь может затем изменить свое значение и повторить попытку .

Модель:

class Project(ndb.Model): 
    # Models and individual Project entry 
    proj_id = ndb.StringProperty(required = True) 
    proj_desc = ndb.StringProperty(required = True) 
    proj_status = ndb.StringProperty(required = True) 

диспетчеры:

class AddProject(webapp2.RequestHandler): 
# Displays template to fill-in data for new project, 
# then calls SaveAddedProject 
    def post(self): 
    user = users.get_current_user() # We 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 a new project. Is called from 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') 
    # The add template already validates required fields aren't empty :-) 

    # Verify we don't duplicate the 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 the user 
      template_values = {'error_message': 'Project ID ' + proj_id_str + ' already 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 to 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 для надстройки 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 all fields marked with *</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 для ошибок-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, an error ocurred!</h3>  
    {{ error_message }} 
    <br> 
    <br> 
    <button onclick="goBack()">Back</button> 
</body> 

{% endautoescape %}

+0

Bootstrap модальный. – voscausa

ответ

0

Вы должны использовать оба подхода. Подход, в котором вы просто показываете страницу с ошибкой, - это правильный способ справиться с проблемой как с точки зрения безопасности (проверка должна выполняться на сервере, так как форма может быть отправлена ​​способом, который обходит проверку в JavaScript) и из совместимости (браузеры могут отключить JavaScript и получить доступ к вашей форме без него).

Однако, с точки зрения удобства пользователей, полезно получить ошибки проверки на той же странице, что и форма, без необходимости переходить на новую страницу, чтобы увидеть ошибку (и снова заполнить форму). Обратите внимание, что вы все равно можете выполнить эту проверку в пользовательском интерфейсе через JavaScript, даже если ваша проверка проверки должна произойти на сервере; вы можете сделать это, используя XMLHttpRequest, чтобы отправить форму на JavaScript, чтобы ваш JavaScript-код мог видеть/обрабатывать ответ. Затем вы можете указать свое ответное сообщение как одну из возможных возможных ошибок.

Например, посмотрите, как работает механизм «Обратная связь» на my website; вы заметите, что существует версия формы, которая работает без JavaScript (страница «/ feedback»), но если у вас включен JavaScript, кнопка фактически открывает диалог в JavaScript, который отправляет форму с помощью XMLHttpRequest, и если форма не представляется, ошибка сообщается непосредственно в диалоге без перехода на новую страницу (путем считывания кода состояния ответа или просмотра подробного сообщения об ошибке, включенного в ответ JSON, который был возвращен сервером).

+0

благодарит за ценную обратную связь. Я начну работать над двойным решением. – kxtronic

Смежные вопросы