python,html,google-app-engine , GAE/Python best practice for a pop-up alert?


GAE/Python best practice for a pop-up alert?

Question:

Tag: python,html,google-app-engine

I need to have an alert pop-up in Google App Engine when the user inputs a value that would create a duplicate item. What is the best way to do this?

I found a way to do it, but it's far from elegant:

When the user inputs a duplicate project code I show a new page "error-message.html" which explains the user what happenned and provides a "back" button. However, I would rather show an alert on the "add-project.html" page. Javascript would be a good idea but it can't validate in the database, so it's no use.

What is the best practice in GAE/Python to show an alert box triggered from code?

So any help or suggestions would be appreciated!

Thanks!

CODE:

The app I'm working on now is a simple project manager's tool. I'm using the webapp2 included with GAE.

Current workflow: 1) In AddProject I show the user a page to input new project data ("add-project.html). This page is based on a JINJA template. User fills in data and Clicks on submit. 2) Submit calls SaveAddedProject which checks in the NDB if the project code already exists. 3) If project code is not in the NDB yet, the new project is saved in the NDB and the code re-directs to the general projects page. 4) If the project exists I show a new page called "error-message.html" which tells the user he/she is inputting a duplicate value and provides a button to go back. The user can then change his value and retry.

Model:

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)

Dispatchers:

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 for 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 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 for 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, an error ocurred!</h3>    
  {{ error_message }}
  <br>
  <br>
  <button onclick="goBack()">Back</button>
</body>

{% endautoescape %}


Answer:

You should use both approaches. The approach where you simply show an error page is the right way to handle the issue both from a security perspective (validation needs to happen on the server, because the form can be submitted in a way that bypasses validation in JavaScript) and from a compatibility perspective (browsers may disable JavaScript and access your form without it).

However, from a user experience perspective, it is nice to get validation errors on the same page as the form without having to navigate to some new page just to see the error (and have to fill out the form again). Note that you can still do this validation in the UI via JavaScript even if your validation check has to happen on the server; you can do this by using an XMLHttpRequest to submit the form in JavaScript so that your JavaScript code is capable of seeing/handling the response. Then, you can have your response message indicate this as one of the various possible errors.

For an example, see how the "Feedback" mechanism works on my website; you'll note that there is a version of the form that works without JavaScript (the "/feedback" page), but if you have JavaScript enabled, the button actually opens a dialogue in JavaScript that submits the form using XMLHttpRequest, and if the form fails to submit, the error is reported directly in the dialogue without navigating to a new page (by reading the status code of the response or looking at the detailed error message included in the JSON response that was returned by the server).


Related:


Dynamically select from a dynamically generated dropdown


php,html,select,drop-down-menu
I have a dynamically generated dropdown list - list of course identifiers and names. On the basis of a variable, “assigned_course_id”, I would like to preselect the appropriate value from the dropdown list. My best attempt is as follows. Thanks in advance for your assistance. <select name="course_id" id="course_id"> <?php $assigned_course_id...

How to change the IP address of Amazon EC2 instance using boto library


python,amazon-web-services,boto
How can I assign a new IP address (or Elastic IP) to an already existing AWS EC2 instance using boto library.

Python: histogram/ binning data from 2 arrays.


python,histogram,large-files
I have two arrays of data: one is a radius values and the other is a corresponding intensity reading at that intensity: e.g. a small section of the data. First column is radius and the second is the intensities. 29.77036614 0.04464427 29.70281027 0.07771409 29.63523525 0.09424901 29.3639355 1.322793 29.29596385 2.321502 29.22783249...

submitting form then showing loading image by javascript


javascript,html
I am submitting a form and loading loading gif in the same div by replacing html of form by html of loading image. I am first submitting the form then loading gif, because I have to replace the content of div(in which form exist) with loading image. Logs 1,2,3 are...

Using counter on array for one value while keeping index of other values


python,collections
After reading the answers on this question How to count the frequency of the elements in a list? I was wondering how to count the frequency of something, and at the same time retreive some extra information, through something like an index. For example a = ['fruit','Item#001'] b = ['fruit','Item#002']...

bootstrap - dynamically changing jumbotron background image


javascript,jquery,html,css,bootstrap
I'm trying to change the background image of the jumbotron div with jQuery when a new tab is clicked, like this: $(".about").click(function(){ $('.active').toggleClass('active'); $('.about').toggleClass('active'); $('.jumbotron').fadeOut(500); //change background image $('.jumbotron').fadeIn(500); }); I tried using $('.jumbotron').css('background-image',url('/path/to/new/image')); but when I include that line, the jumbotron background image doesn't display at all even before...

How to remove unmatched row in html table using jquery


jquery,html
I have two tables. I want to delete unmatching rows. Compare with first column in Table1 and compare with first column in Table2. Table1 111 aaa 222 bbb 333 ccc Table2 333 xxx 444 zzz 111 vvv result of Table2 333 xxx 111 vvv I tried some thing here Please...

SQLAlchemy. 2 different relationships for 1 column


python,sqlalchemy
I have a simple many-to-many relationship with associated table: with following data: matches: users: users_mathces: ONE user can play MANY matches and ONE match can involve up to TWO users I want to realize proper relationships in both "Match" and "User" classes users_matches_table = Table('users_matches', Base.metadata, Column('match_id', Integer, ForeignKey('matches.id', onupdate="CASCADE",...

Top header 100% of screen, but body only 70%?


html,css
Pretty new to CSS and just having quite a bit of trouble, I've tried everything, searched here, but can't seem to make it work. Right now my header/body are both 70% of the screen. However I want my top header (.mainheader) to be 100% of the screen, but have the...

How to remove all the borders of a selectbox?


jquery,html,css,drop-down-menu
How can I remove the all the borders of the selectbox using css or Jquery ? My code, <select id="doctor_ch"> <option value="1" selected>One</option> <option value="2">Two</option> </select> CSS #doctor_ch{ background-color: #88AFF2; color:#fff; margin-top: 15px; } When I use this code it only changes the arrow style. I want to remove the...

Detect when the jQuery UI slider is being moved?


jquery,html,css,jquery-ui
I have this custom video time UI slider to change the time of the YouTube video when scrubbed. My problem is that when the video is trying to load when the user is moving the slider, it causes the handle to jerk around and flip around. What I'm trying to...

change css dynamically by selecting dropdown list item


jquery,html,css,drop-down-menu
I have the following Dropdownlist with yes or no options-:` <asp:DropDownList ID="ddlchangecss" runat="server"> <asp:ListItem Text="yes">yes</asp:ListItem> <asp:ListItem Text="no"></asp:ListItem> </asp:DropDownList> i want to add a css dynamically like that-: .imgFullWidth { width: 100%; height: auto; float: left; margin: 0px 0px 20px 0px; } when I select yes option in Dropdownlist. How can...

tag in HAML


html,css,haml
How do I create a I-tag in haml? Example: <i class="fa fa-search"></i> ...

HTML elements in Angular bindings expression


html,angularjs
Is that possible to insert HTML elements in an Angular expression ? Let's take a few example. I would like to do something like this: <table> <tr ng-repeat="employee in employees"> <td>{{employee.firstname ? employee.firstname : '<p style="color:red">No name</p>'}}</td> <td>{{employee.job}}</td> </tr> </table> In our controller, we have: $scope.employees = [{firstname:'Bob', job:'Developer'}, {firstname:'Paul',...

Adding horizontal space between 2 buttons using javascript


javascript,jquery,html,css
I am dynamically creating submit buttons using javascript. I wanted to know how to introduce horizontal spacing between every other button in the process. My code is var allFields = commonButtons.concat(extraFields); for (var i = 0; i < allFields.length; i++) { var node = document.createElement("input"); var btName = document.getElementById("submit-buttons"); node.setAttribute('data-value',...

Identify that a string could be a datetime object


python,regex,algorithm,python-2.7,datetime
If I knew the format in which a string represents date-time information, then I can easily use datetime.datetime.strptime(s, fmt). However, without knowing the format of the string beforehand, would it be possible to determine whether a given string contains something that could be parsed as a datetime object with the...

show/hide an overflow div on anchor


javascript,jquery,html,scroll
I'm trying to make a div appear (if not already visible) and be scrolled to a specific anchor. I found this answer and try to use it but it looks like it doesn't work well... http://stackoverflow.com/a/7513110/3703099 My code : http://jsfiddle.net/0sq2rfcx/9/ As you can see, when you click on button it...

Find the tf-idf score of specific words in documents using sklearn


python,scikit-learn,tf-idf
I have code that runs basic TF-IDF vectorizer on a collection of documents, returning a sparse matrix of D X F where D is the number of documents and F is the number of terms. No problem. But how do I find the TF-IDF score of a specific term in...

In sklearn, does a fitted pipeline reapply every transform?


python,scikit-learn,pipeline,feature-selection
Apologies if this is obvious but I couldn't find a clear answer to this: Say I've used a pretty typical pipeline: feat_sel = RandomizedLogisticRegression() clf = RandomForestClassifier() pl = Pipeline([ ('preprocessing', preprocessing.StandardScaler()), ('feature_selection', feat_sel), ('classification', clf)]) pl.fit(X,y) Now when I apply pl on a new set, pl.predict(X_classify); is RandomizedLogisticRegression going...

why i don't get return value javascript


javascript,jquery,html,json,html5
When i debug my code i can see i have value but i don't get value to createCheckBoxPlatform FN function createCheckBoxPlatform(data) { var platform = ""; $.each(data, function (i, item) { platform += '<label><input type="checkbox" name="' + item.PlatformName + ' value="' + item.PlatformSK + '">' + item.PlatformName + '</label>' +...

Setting radio button checked true on button click


javascript,jquery,html
I have a table cell that lights up when selected. There will be many buttons on the page but only one choice can be made at a time. How can I make them mutually exclusive using hidden input radio tags? (in order to handle the group later) <td class="choice-option"> <input...

Website showing differently in windows xp and mobile


html,css
I made a website for one of my clients, and I change the background and font color. Now on windows xp and smartphones the background changed color to the default color and the fonts remained the same. The website is simfest.ro I don't know what to do to make it...

How do I display my mysql table column headers in my php/html output?


php,html,mysql,table,data
2 Questions... Scenario: I would like to query my database table via a form and then display the results that occur(if there are results) and my current situation is that it does work but it clears the form completely and leaves my to an empty page with just the results...

Sort when values are None or empty strings python


python,list,sorting,null
I have a list with dictionaries in which I sort them on different values. I'm doing it with these lines of code: def orderBy(self, col, dir, objlist): if dir == 'asc': sorted_objects = sorted(objlist, key=lambda k: k[col]) else: sorted_objects = sorted(objlist, key=lambda k: k[col], reverse=True) return sorted_objects Now the problem...

Sum of two variables in RobotFramework


python,automated-tests,robotframework
I have two variables: ${calculatedTotalPrice} = 42,42 ${productPrice1} = 43,15 I executed ${calculatedTotalPrice} Evaluate ${calculatedTotalPrice}+${productPrice1} I got 42,85,15 How can I resolve it?...

Automatically calling server side class without


javascript,html,ajax
I have an anchor which calls a server side class when clicked, but I want to modify it so that the class is called as soon as the page loads, without having to click an anchor. <a href="#" class="_repLikeMore" data-id="1234" data-type="pid" data-app="forums"> ...

Calling function and passing arguments multiple times


python,function,loops
I want to call the function multiple time and use it's returned argument everytime when it's called. For example: def myfunction(first, second, third): return (first+1,second+1,third+1) 1st call: myfunction(1,2,3) 2nd call is going to be pass returned variables: myfunction(2,3,4) and loop it until defined times. How can I do such loop?...

trying to understand LSH through the sample python code


python,similarity,locality-sensitive-hash
the concise python code i study for is here Question A @ line 8 i do not really understand the syntax meaning for "res = res << 1" for the purpose of "get_signature" Question B @ line 49 (SOLVED BY myself through another Q&A) "xor = r1^r2" does not really...

HTML CSS Two 2-column tables side by side with same height and width


html,css
I'm quering a MySQL database and use a script to put results into an automatically generated HTML-file. I have two tables with 2 columns and 4 rows each that need to be put side-by-side. I have put my html & css in fiddle. http://jsfiddle.net/mika6891/7b0k049r/1/ My HTML code: <!-- gene description...

Python - Opening and changing large text files


python,replace,out-of-memory,large-files
I have a ~600MB Roblox type .mesh file, which reads like a text file in any text editor. I have the following code below: mesh = open("file.mesh", "r").read() mesh = mesh.replace("[", "{").replace("]", "}").replace("}{", "},{") mesh = "{"+mesh+"}" f = open("p2t.txt", "w") f.write(mesh) It returns: Traceback (most recent call last): File...

How to set DIV's width based on CSS indexes


html,css
I have 6 floated DIVs in two rows. I use PocketGrid as CSS framework (in particular its "automatic rows" feature) and I would like to size each one using CSS indexes and not specific class name. I tried it in this jsFiddle but even if first 3 blocks (first row)...

Get elements containing text from array


javascript,jquery,html,arrays,contains
I want to search all the elements containing any string in the array. For example I have following list of items <ul> <li>cricket bat</li> <li>tennis ball</li> <li>golf ball</li> <li>hockey stick</li> </ul> and this array var arr = ['bat', 'ball']; It should select all the elements having text bat and ball....

Click on link next link should be display on same page


javascript,php,jquery,html,css3
I have a single page website and need to link the navigation to IDs in the page. I have three links: "About us", "Our Project", "contact". So if user clicks on "About ", the About section will be displayed, same with other links. Inside Our project there is Two buttons...

How do I read this list and parse it?


python,list
I'm using requests and the output I get from the sites API is a list, I've been stuck trying to parse it to get the data from it. I use r = requests.get(urlas, params=params) r.json() to get the data I want. Here is a snippet of the list [{'relation_type': None,...

How to make background body overlay when use twitter-bootstrap popover?


html,css,twitter-bootstrap
Currently I used this twitter-bootstrap popover: <button type="button" class="btn btn-default" style="margin-top:11px; padding-bottom:4px; padding-top:4px;" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Upgrade The output: How I can make the background overlay like bootstrap modal? My expected output I use this jquery to popover $(function(){ $('[data-toggle="popover"]').popover({ placement...

CSS :hover that shows more than one image


html,css,css3
I have an icon on my website. I want to change the icon to 4 different images when ever I hover over the first one. So I know how to switch between the regilar image to yellow0.png, but how do I continue to the next one (after half a second...

Target next instance of an element/div


javascript,jquery,html
I have the following HTML structure and JavaScript file: .html <li> <button class="show-more"></button> some more elements <div class="hidden"></div> </li> JavaScript $( ".show-more" ).click(function() { event.preventDefault(); $( this ).next().slideToggle( "fast", function() { }); }); I need the click event to toggle the next first instance of .hidden, however the click event...

Background-image style with JS not working in ie9


javascript,jquery,html,internet-explorer
I'm working on a site and im having some issues with my slider in IE9. What I've done is that I've made a div that gets the background image changed every few seconds depending on the img tags within. You can see it in function here: http://diakondk.quine.pil.dk/ It works wonders...

copy last column of one table to another table based on some condition


jquery,html
I have two tables. I want to take last column of table3 and put in to table4 eg:- table3 Names Process_id total construction 1 1111 construction_1 1 0000 engineering 1 2222 permitting 1 3333 eg:- table4 Names Process_id construction 1005 engineering 1005 permitting 1005 final result of table4 output will...

CSS - Linear Gradient Background Color no-repeat is not working for if it has multiple tds


html,css,css3
I want to apply css3 gradient (left and right transparent) background color for a TR element like below. Below code is working fine if it has only one TD element, where as more than one td, background gradient started repeating for each td... Am I missing something? Online Demo CSS...

Dynamically resize side-by-side images with different dimensions to the same height


javascript,html,css,image
I have two images side-by-side within a block-level container with arbitrarily different dimensions (as in, they could be any two images) that I want to dynamically adjust the width of so that the overall height of the two images is the same. I don't think this can be done in...

How does the class_weight parameter in scikit-learn work?


python,scikit-learn
I am having a lot of trouble understanding how the class_weight parameter in scikit-learn's Logistic Regression operates. The Situation I want to use logistic regression to do binary classification on a very unbalanced data set. The classes are labelled 0 (negative) and 1 (positive) and the observed data is in...

Strange Behavior: Floating Point Error after Appending to List


python,python-2.7,behavior
I am writing a simple function to step through a range with floating step size. To keep the output neat, I wrote a function, correct, that corrects the floating point error that is common after an arithmetic operation. That is to say: correct(0.3999999999) outputs 0.4, correct(0.1000000001) outputs 0.1, etc. Here's...

How do variables inside python modules work?


python,module,python-module
I am coming from a Java background with Static variables, and I am trying to create a list of commonly used strings in my python application. I understand there are no static variables in python so I have written a module as follows: import os APP_NAME = 'Window Logger' APP_DATA_FOLDER_PATH...

How to remove structure with python from this case?
python,python-2.7
How to remove "table" from HTML using python? I had case like this: paragraph = ''' <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem molestiae consequuntur officiis corporis sint.<br /><br /> <table> <tr> <td> text title </td> <td> text title 2 </td> </tr> </table> <p> lorem ipsum</p> ''' how...

Centering navbar pills vertically within the navbar using flexbox


html,css,twitter-bootstrap,flexbox
I am terrible at CSS so I am having trouble centering my <li> (navbar pills) vertically for my navbar. This navbar is from twitter bootstrap Here is the HTML for my navbar: <div class="container"> <nav class="navbar navbar-default navbar-fixed-top"> <ul id="nav_pills" class="nav nav-pills" role="tablist"> <li role="presentation"> <a href="/">About</a> </li> <li role="presentation">...

Python recursive function not recursing


python,recursion
I'm trying to solve a puzzle, which is to reverse engineer this code, to get a list of possible passwords, and from those there should be one that 'stands out', and should work function checkPass(password) { var total = 0; var charlist = "abcdefghijklmnopqrstuvwxyz"; for (var i = 0; i...

Count function counting only last line of my list


python,python-2.7
Count function counting only last line of my list N = int(raw_input()) cnt = [] for i in range(N): string = raw_input() for j in range(1,len(string)): if string[j] =='K': cnt.append('R') elif string[j] =='R': cnt.append('R') if string[0] == 'k': cnt.append('k') elif string[0] == 'R': cnt.append('R') print cnt.count('R') if I am giving...

Div with the form of a pencil [duplicate]


html,css,css-shapes
This question already has an answer here: CSS triangle custom border color 2 answers How can i create a div with the form of a pencil, just like this: It seems a basic thing but im trying to do it since some time ago and still couldnt do it....

show div only when printing


javascript,html,css
Let's say that I have <div id="printOnly"> <b>Title</b> <p> Printing content </p> </div> Is it possible to hide this div when page rendering and to show only when printing this div?...