CODEWITHSUNDEEP
htmlgoogle-app-enginegopolymerpolymer-starter-kit
branco
branco

Reputation: 154

iron-ajax in tandem with polymer-starter-kit misbehaves or something. It sends requests to a different url than the one I am expecting

In the Firefox developer tools I get the following log output:

 GET XHR http://localhost:8080/localhost:8080/journal_tag

even though I want to go to:

http://localhost:8080/journal_tag

I try to data bind the server location from which the xhr response should come to the variable 'this.the_server_url'. But I am stumped because when I do either of

console.log(document.location.protocol+document.location.host+"/journal_tag")
console.log(this.the_server_url)

I get

"http:localhost:8080/journal_tag"

which is where server side go code should respond to the xhr request. So the Firefox developer tools log tells me that iron-ajax, or iron-ajax in conjunction with page.js from polymer-starter-kit is misbehaving even though it has the right xhr destination in the the_server_url variable. If anyone has any thoughts on this I would appreciate an answer.

This is my js code:

<dom-module id="journal-tag">
  <template>
    <paper-input value={{the_new_tag}}>
        Enter the new tag
    </paper-input>
    <paper-button raised on-tap="tap_new_tag">
        Submit tag
    </paper-button>
    <iron-ajax
        auto
        url={{the_server_url}}
        params={{ajax_new_tag}}
        handle-as="json"
        on-response="new_tag_response"
        last-response={{the_xhr_response}}
        debounce-duration="300">
    </iron-ajax>
  </template>
  <script>
  (function() {
    'use strict';

    Polymer({
      is: 'journal-tag',
        properties:{
            the_new_tag:{
                type:String,
                notify:true
            },
            the_server_url:{
                type:String,
                notify:true
            },
            ajax_new_tag:{
                type:String,
                notify:true
            },
            the_xhr_response:{
                type:String,
                notify:true
            }
        },
        ready : function(){
            this.the_server_url=document.location.protocol+document.location.host+"/journal_tag";
        },
        tap_new_tag : function(){
//parameter format for{{ajax_new_tag}}:
//'{"alt":"json", "q":"chrome"}'
//            this.the_new_tag="tadu";
            this.ajax_new_tag={"tag" : this.the_new_tag};
        },
        new_tag_response : function(){
            console.log("tada")
            console.log(this.the_xhr_response)
            alert(this.the_xhr_response)
        }
    });
  })();
  </script>
</dom-module>

Here is my server side go code, but it seems it never gets called:

...
http.HandleFunc("/journal_tag",journal_tag)
...
func journal_tag(w http.ResponseWriter, r *http.Request){
    c := appengine.NewContext(r)
    u := user.Current(c)
    if u == nil {
        io.WriteString(w, "strange_matter")
        return
    }
//    var tag=r.FormValue("tag")
//    io.WriteString(w, "{\"tag\":\"" + tag + "\"}")
    io.WriteString(w, "{\"tag\":\"tada\"}")
}

Upvotes: 0

Views: 116

Answers (2)

branco
branco

Reputation: 154

Seems like doing 

document.location.protocol+
"//"+
document.location.host+
"/journal_tag"

fixes everything.

Upvotes: 0

ModernDeveloperLLC
ModernDeveloperLLC

Reputation: 148

A couple of things. You are missing the slashes in http:localhost:8080/journal_tag It should be http://localhost:8080/journal_tag. Also, you can use the Developer tools for the browser you are in to see all the XHR requests that you are sending. Check there to see what the request headers being sent are.

Upvotes: 1

Related Questions