Ajax Pagination not working with iframe


My site  implements pagination of search results using mootools v1.11 pagination. Basically, the index.php  page with a search box has a div that looks like this:

<div id="pagecontainer">
          <ul class="paginater" id="rtable-tablePaginater">

followed by a table like this: <table id="rtable">

A script tag references the .js file.

The search has worked fine till now. However, if I add an iframe anywhere in the index.php file, it breaks the pagination in the .js file. As the javascript code is obfuscated it is hard to debug, but I know for sure that when it works, a javascript object is created with the classname = "paginater" and id = "rtable-tablePaginater", as you would expect.

However, when an iframe is added to index.php, that same object in the .js file is created but with different properties, without the classname or id, and causes the pagination to hang.

I've tried many tests and it seems that iframes are the problem.

Please let me know if further clarification or description of the problem is required.
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

timoteo70Author Commented:
After more testing, it seems that the object that is created when I am using an iframe is of type Window, when in fact it should be a javascript object is created with the classname = "paginater" and id = "rtable-tablePaginater".

Somewhere in the process the creation of an iframe is causing an incorrect Window object to be created.
timoteo70Author Commented:
I guess I'm edging closer to finding the exact cause of the problem.

Instead of adding the iframe in the main index.php file using the iframe tag, I added it like this:

            alert("creating iframe");      
               ifrm = document.createElement("IFRAME");
               ifrm.setAttribute("src", "http://somedomain.com/");
               ifrm.style.width = 640+"px";
               ifrm.style.height = 120+"px";
            ifrm.style.top = 300+"px";
            ifrm.style.left = 300+"px";

This doesn't cause a problem with the AJAX pagination. However, when I add the line:


that's when the AJAX code breaks. Looking at the javascript code there are dozens of references to the appendchild and even a firstchild function. Perhaps when I add the iframe as a child to document.body I am screwing with the expected order of the document children.

Is there a way I can change the order of the document children? That is, if the iframe child is the first child, can I make it the last?

Hope that makes sense.

By the way, I'll be happy to share the code with an expert who thinks they might be able to work with me to get a solution, I just cannot  paste it all here publicly.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.