prototype AJAX loading blank page onSuccess

Question

I'm working on a magento project, and I'm trying to load more products on the click of the more button.

I can see them loading but then it will just load a blank page after it.

I have no idea what is happening or why.

This is the code I have

    var loadMore = Class.create({
        initialize: function (list, href, pattern) {
            var that = this;

            this.list = list;
            this.list.insert({ after : '<div class="more"><span id="more_button" class="more-button">More</span></div>'});
            this.href = href.readAttribute('href');
            this.button = $('more_button');
            this.holder = new Element('div', { 'class': 'response-holder' });

            this.button.observe('click', function () {
                if ( !that.button.hasClassName('loading') ) {
                    new Ajax.Request(that.href, {
                        onCreate: function () {
                            that.button.addClassName('loading');
                        },
                        onSuccess: function(response) {
                            if (200 == response.status) {
                                   that.holder.update(response.responseText).select(pattern).each(function(elem) {
                                   that.list.insert({ bottom : elem });

                                }),



  that.href = that.holder.select('.next-page')[0].readAttribute('href');
                                that.button.removeClassName('loading');

                                if ( !that.href ) {
                                    that.button.up().remove();
                                }

                            }

                        }
                    });
                }
            });
        }
    });

If anyone can help me out that would be awesome!

Thanks in advance.

Answer 1

I've having the same problem in my magento Iphone orginal theme, but the error is because of code injection, mostly "script" tags from google analytics, clicktale and similar stuff.

what i've done to fix it was to "parse" the ajax response and modify the opening "script" tag with the html entity:

below the line 117 (aprox in iphone.js)

if (200 == response.status) {
that.holder.update(response.responseText).select(pattern).each(function(elem) {

replace with this:

str = response.responseText;                                
str  = str.replace(/<script/gi, '&lt;script');

that.holder.update(str).select(pattern).each(function(elem) {

Answer 2

Might I suggest you rewrite your code and use thiz for that ? Your code is extremely hard to read.

I do not see any reason to use the onCreate event of the Ajax Request, which by the way is reserved for Ajax Responders (per spec: http://prototypejs.org/doc/latest/ajax/Ajax/Request/ )

Instead, you can add this classname at the moment you enter into !that.button.hasClassName('loading') ...

if ( !that.button.hasClassName('loading') ) {
    that.button.addClassName('loading');
    new Ajax.Request(that.href, {
....

There is a lot more going on behind the scene, like your CSS, magento of course, but also containing and parent html elements so it is very difficult to give any sound advice. What have you done in order to debug this?

Karl..