6 Replies - 581 Views - Last Post: 10 August 2014 - 12:17 PM

#1 ssbodyrock  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 08-June 14

GET method using http request

Posted 09 August 2014 - 08:51 PM

So I am building this function that should get a file.htm. once a connection occurs and a user clicks on a webpage tab.


var reqCom = new XMLHttpRequest();
   
//tabname.htm needs to have a different name to reference different tabs
            
            reqCom.open("GET", "tabname.htm");
            reqCom.send("null");
            reqCom.onreadystatechange = function() {





But the web page has three different tabs. None of them are called tab name. If the names would be placed in an array allTabs why is this wrong?


//allTabs comes back not found/undefined
reqCom.open("GET", allTabs[i]);
            reqCom.send("null");




Sorry if the question did not make sense

Is This A Good Question/Topic? 0
  • +

Replies To: GET method using http request

#2 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 442
  • View blog
  • Posts: 1,890
  • Joined: 30-April 10

Re: GET method using http request

Posted 09 August 2014 - 09:52 PM

Where is the actual code you are using to accomplish this. If allTabs[i] is in a loop then this should work if it contains a file name and extention as a string.
Was This Post Helpful? 1
  • +
  • -

#3 ssbodyrock  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 08-June 14

Re: GET method using http request

Posted 09 August 2014 - 11:05 PM

So this should be ok



for (var i = 1; i < allTabs.length; i++) {
        allTabs.onclick = function() {


    var reqCom = new XMLHttpRequest();
   

            
            reqCom.open("GET", allTabs[i] +".htm");
            reqCom.send("null");



This post has been edited by laytonsdad: 09 August 2014 - 11:54 PM
Reason for edit:: fixed code tags

Was This Post Helpful? 0
  • +
  • -

#4 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 442
  • View blog
  • Posts: 1,890
  • Joined: 30-April 10

Re: GET method using http request

Posted 09 August 2014 - 11:54 PM

Where is your array?
Was This Post Helpful? 0
  • +
  • -

#5 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 442
  • View blog
  • Posts: 1,890
  • Joined: 30-April 10

Re: GET method using http request

Posted 10 August 2014 - 12:09 AM

In theory this will work, the problem lies with what you are doing with the onclick assignment. You are assigning it to the array allTabs.onclick = function() { instead of the element in question allTabs[i].onclick = function() { Do you see the difference?
Was This Post Helpful? 1
  • +
  • -

#6 ge∅  Icon User is offline

  • D.I.C Addict

Reputation: 80
  • View blog
  • Posts: 575
  • Joined: 21-November 13

Re: GET method using http request

Posted 10 August 2014 - 03:15 AM

allTabs[i] is a string according to this line reqCom.open("GET", allTabs[i] +".htm");.

Moreover, as the code is written, the variable i will always equal allTabs.length when the user clicks the link/button/some-very-wrong-non-semantic-element, because the click event will occur after the for loop has finished and the variable i has been incremented. I would suggest either using a closure or using some relative targeting. Typically, if the clickable element is a link (as it should be), and the allTabs[i] string is its href attribute (as it should be), one can write something like myLink.onclick = {/*blabla*/ reqCom.open("GET", this.href); /*blabla*/} which doesn't require the variable i at all and avoids the issue.

ssbodyrock, you should really watch your variables. You can't write allTabs.onclick and allTabs[i] +".htm" in the same code. How can a variable have two different values (of two different types) ? This is a careless mistake that could be avoided

And as laytonsdad pointed out, you shouldn't be writing allTabs.onclick at all because arrays and html collections do not have an onclick property (only html elements have one). This is a very common mistake so it's not surprising to find it in your code, but if you start being careful about the type of your variables, you will never do this mistake again. Moreover, knowing the type of an object is very useful. You can check the available methods and properties in a documentation (such as the Mozilla Developer Network), learn a lot of things and find sample codes showing the right syntax.

This post has been edited by ge∅: 10 August 2014 - 03:18 AM

Was This Post Helpful? 1
  • +
  • -

#7 felgall  Icon User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 148
  • Joined: 22-February 14

Re: GET method using http request

Posted 10 August 2014 - 12:17 PM

View Postssbodyrock, on 10 August 2014 - 05:05 PM, said:

So this should be ok



for (var i = 1; i < allTabs.length; i++) {
        allTabs.onclick = function() {


    var reqCom = new XMLHttpRequest();
   

            
            reqCom.open("GET", allTabs[i] +".htm");
            reqCom.send("null");




i will only have a value less than allTabs.length while the loop is running. The onclick functions will run much later.

If you want to pass the value of i at the time the onclick is created to the function called when it is triggered you need to create a closure.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1