closures I think..

[markbrown4]

Hi,

I think my question is about closures, but i'm not 100% sure.
I have a function within an object, and within it I want to override another function of the same object.

var Ajax = {
...
  updatePanel: function(panel, file) {
    Ajax.request('Text', file);
    Core.emptyElement(panel);
    Ajax.showLoading(panel);
    Ajax.displayResponse = function() {
      Core.emptyElement(panel);
      // Don't copy Ajax.response yet - it hasn't been set.  When it has been, 
      // displayResponse will be called and then copy it across.
      panel.innerHTML = Ajax.response;
      Ajax.fadeIn(panel);
    };
  },
...
}

So displayResponse is another function of Ajax, if updatePanel is called I want the displayResponse function to replace an element with the variable Ajax.response.

The problem is that panel.innerHTML is set to Ajax.response set when updatePanel is called, And not when displayResponse is called.

I hope that makes some sense,


Thanks,

[kyberfabrikken]

Why do you think, that displayResponse is called immediately? Most likely, there is a flaw in the logic, which invokes displayResponse.

[markbrown4]

Hello,

I don't doubt there's a problem with the logic, I wrote it

Here's the live example if you'd be able to take a look,
http://www.yellowshoe.com.au/example...ass_test2.html

I'm trying to package the request / response in one function updatePanel.

Here's an example of what it should look like,
http://www.yellowshoe.com.au/example...lass_test.html


Thanks,

[kyberfabrikken]

First of all, Ajax.xhr is false. I looks like your init function is never called. Running Ajax.init(); fixes this. Secondly, the following code makes no sense:

Ajax.displayResponse = function() {
  Core.emptyElement(panel);
  function(panel) {
    panel.innerHTML = Ajax.response;
  }
  Ajax.fadeIn(panel);
}

Change it to:

Ajax.displayResponse = function() {
  Core.emptyElement(panel);
  panel.innerHTML = Ajax.response;
  Ajax.fadeIn(panel);
}

In the first case, you're declaring an anonymous function, but never assigning it to anywhere, and never calling it.

[brothercake]

You want multiple instances of Ajax that don't interfere with each other?

Remember how we talked about object-orientation ..?

[markbrown4]

Hey brothercake,

Where abouts am I setting up multiple instances of Ajax?
Yes, I remember our talk and I found it very insightful.

I'm wanting the updatePanel() function to empty the panel element, display a loading indicator, make a request, and overwrite the displayResponse() function - so that it, when called will remove the loading indicator, update the panel with response and fade in.

I only intended one Ajax object to be created and used. Remember, i'm beginning in all of this

[brothercake]

You're not, I misunderstood what you wanted and drew the wrong conclusion Let me have another read of your question...

[markbrown4]

I misunderstood what you wanted

That's very understandable, I'm near incomprehensible a lot of the time but I try hard.

[brothercake]

Not sure I really understand - you want panel.innerHTML to be Ajax.response in one situation, and something else in another? In which case, you could pass Ajax.response as an argument to display response:

Ajax.displayResponse = function(html) {
    ...  
    panel.innerHTML = html;
    ...
    };

And then pass something else in the different situation.

Is that it?

[markbrown4]

hmm, can you believe it was a silly mistake

kyberfabrikken, you were correct - But I did actually try that first, it's just I broke something else at the same time.

It was the same problem that I had in the last thread would you believe - using 'this' within an event handler

Note to self:
Use this for Object Oriented methods - when you need multiple instances of the object.
Use the objects name when there's only one and you won't run into problems.

Thanks for your help you two. My function's really growing on me -
It makes Ajax, a one liner. - And it even looks all 2.0 and stuff

Ajax.updatePanel(panel, 'documents/ajax_text.html');

This is probably the most common Ajax feature - A partial update of the page with the response sent back from the server. Is there anything wrong with it?

[markbrown4]

One more thing,

I'm just testing this out in IE7
http://www.yellowshoe.com.au/example...ass_test2.html

The first time it works for me, then when I refresh the page, it's showing the old, (what I wanted overriden) displayResponse function. You have to restart the browser to fix the issue.

Any clues to this odd behaviour? Can anyone confirm this is a problem in IE6?

The first time it works for me, then when I refresh the page, it's showing the old, (what I wanted overriden) displayResponse function. You have to restart the browser to fix the issue.

Any clues to this odd behaviour? Can anyone confirm this is a problem in IE6?

[kyberfabrikken]

The first time it works for me, then when I refresh the page, it's showing the old, (what I wanted overriden) displayResponse function. You have to restart the browser to fix the issue.

I'm not sure, what you mean by "showing the old displayResponse function"?

Can anyone confirm this is a problem in IE6?

It doesn't work in IE6. Instead of loading the content via XHR, the Javascript fails, and the browser just navigates to the link.