?
Solved

Ajax Pagination not working with iframe

Posted on 2008-11-05
2
Medium Priority
?
845 Views
Last Modified: 2013-11-11
Hi

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">
          </ul>
  </div>

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.
0
Comment
Question by:timoteo70
  • 2
2 Comments
 

Author Comment

by:timoteo70
ID: 22890121
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.
0
 

Accepted Solution

by:
timoteo70 earned 0 total points
ID: 22900027
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:

                document.body.appendChild(ifrm);

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.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

569 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question