Question

I am trying to issue a user name to each new user in the form user1, user2, user3 and so on.

As the result of my previous question, now I understand that I need to keep track of count in the app and not in the browser. So I created /counthandler (I am working with Google App Engine Python):

class CountHandler(webapp.RequestHandler):
    def get(self):
        count = count + 1

In /choice, I have this script:

function writeToStorage()
{ 
  var user = "user" + count;
  localStorage.setItem("chooser", user);

  document.getElementById("form_chooser").value = user;  
};

How do I get “count” from /counthandler to writeToStorage? I understand I need to use HMLHttpRequest, but not sure how. Thanks.

UPDATE

In response to jfriend00’s comment, I add more specific question about ajax call:

  var xhr = new XMLHttpRequest();
  xhr.open("POST", "http://localhost:8086/counthandler", true);
  xhr.onreadystatechange = function (aEvt) {
    if (xhr.readyState == 4 && xhr.status == 200){ 
      console.log("request 200-OK");
    }
    else {
      console.log("connection error");
    }
  };
  //I am not sure what to put in send()?
  xhr.send();

UPDATE 2

In response to jfriend00’s comment, and reference supplied, I changed the call to GET; but not sure what happens after this:

  var xhr = new XMLHttpRequest();
  xhr.open("GET", "http://localhost:8086/counthandler", true);
  xhr.onreadystatechange = function (aEvt) {
    if (xhr.readyState == 4 && xhr.status == 200){ 
      console.log("request 200-OK");
    }
    else {
      console.log("connection error");
    }
  };
  //changed this to "null". this now opens the connection.
  //what do I do after this?
  xhr.send(null);

Update to answer jfriend00’s updated answer:

Thanks for the detailed explanation. Now I understand. But there is still something that I am missing. It is easy to get the value of count:

query = Count.all()
query.get()
count = e.count
logging.info("count = %s" % count)
# gives count = 12

Now you are saying that, assign the value of python variable “count” which is 12 to the js variable “count” with

<script type="text/javascript">
var count = 12;
</script>

What I don’t understand is what happens next time when the count = 13?

It seems to me that

<script type="text/javascript">
var count = count;
</script>

will not work. Correct? What am I missing?

Thanks again.

---

Update to try the second option in jfriend00’s answer. It seems that I need to include a success function to get the “count” variable sent by /counthandler:

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function()
    {
        if (xhr.readyState == 4 && xhr.status == 200)
        {
            //get "count" sent by /counthandler?
            //var count = count;
        }
    };
    xhr.open("POST", "http://localhost:8086/counthandler", true);
    xhr.send(null);

But I still I don’t understand how /counthandler sends the “count” and how I can can get it inside the success function.

Answer 1

If you are keeping track of the variable server-side and you want to put it in your web page, then you just output a javascript variable to the web page with the value of count. Thus if your server has a count of 12, then you just output this to the web page from your web server app:

var count = 12;

Any client-side javascript code can then have access to the value of that count variable. If you want to modify the count variable from the client-side web page, you will have to make a server request in order to modify it on the server (a Post or Get) typically done with a form post or an ajax call.

---

There are two ways you could approach this problem:

Option 1:

You’ve said you have the value of count on your server. It’s stored on your server somewhere. It’s not in /counthandler or /choice – those are just scripts that run on your server. So, if you want the count value in the /choice web page, then you go modify the /choice python script and you obtain the value of count in that script and you insert it into the web page the same way you would put anything else in the web page from a python script (exactly how you do that depends upon what python environment you are using), but if you are already creating web pages from python scripts you must already be doing this. Then, in an appropriate place in that web page, you put this piece of javascript:

<script type="text/javascript">
var count = 12;
</script>

You do NOT get the value from /counthandler and put it in /count from the server. Within the /count script, you fetch the value of count and put it into that web page.

Option2:

In the /choice web page, you make an ajax request to some server page (perhaps /counthandler) to fetch the current count. The success handler from that ajax call will have the desired count value and you can then whatever you want with it in the web page.

As for writing it to localstorage, we still have no idea why you’re evening try to do that since you seem to be storing it on the server already. localstorage is browser-specific storage that only works in that specific browser and can be cleared at any time by the user.