Ajax with in Ajax. Is this possible

Question

I have a php page. This has multiple images which looks like tabs. With in this php page i have a div which will load different PHP pages on click of different images i mentioned before. This is done using Ajax. This much of it works fine with no page reload. This is done to simulate the tab operation without page reload. This much of it is working fine.

But now i need to have a search operation into one of the inner php file. When i use this using Ajax on kepup to do a search operation and display the result in another div with in the inner php, it becomes a php, within php and another php into it. Totally 3 layers php with all loaded using ajax.

I am facing a problem at this stage. The first layer that is the tab operation works fine with AJAX. the next layer of search using ajax also works but reloads the outer php aswell. So it looks as if the tab is clicked instead of the search operation. So now i run into a confusion as if the concept of loading a form by ajax and then having a ajax search within itself to display the result with keyup, would it be right? will this be possible?

So is is that i have done it wrong or it is not possible to have this option? Because when i load the inner php directly with url without ajax, the search works perfectly fine. Is this possible in a simpler way using code igniter. Please let me know your comments on this and also u'r suggessions. I am sure you would have many questions on what i have asked. Please let me know your questions i will try to reply to them. All suggessions appreciated. Thanks in advance.

Answer 1

Theoretically, the idea should work. If possible, can you provide me more information?

Questions:

Is your setup similar to this?

Parent HTML (parent) > (innverdiv1) DIV where tabs load pages by ajax appear > (innerdiv2) DIV inside the loaded pages

Cause, by theory, you can make an Ajax-loaded page (innverdiv1) do ajax as well, but the new page's (innerdiv2) domain should only be limited to the DIVS inside the first ajax-loaded page.

Answer 2

You said your outer page reloads aswell, do you have form action parameter set to page you want to make request to? If this is the case, your browser redirects you after hitting the submit button.

Answer 3

This should work.

I think somewhere you're causing it to reload the entire page instead of just the DIV. Things like submit buttons will do this.

Do you have anywhere in the javascript part of the search reference to the parent window? or parent object? You might actually be calling the entire page when you're trying to call the corresponding tab.

Answer 4

Does the "search" button make a fosrm submit?:) Your ideea works (i already did something like this), but you must have a bug in your code

Answer 5

The content returned by the AJAX call to give the tab has to contain the javascript AJAX code for it's own operation and get itself executed. Most frameworks should allow this using something like "evalScripts: true".

For example contained in the tab is the result of the first AJAX call (AFTER the form itself):

<script>
   $('ajaxpostform').addEvent('submit', function(e) {
        new Event(e).stop();
        var update = $('ajax_content');
        this.send({
            update: update,
            evalScripts: true,
        });
   });
</script>

This is written using Mootools and assuming the id of the form is 'ajaxpostform'. The only caveat is to make sure that the original AJAX call that got the tab also has "evalScripts: true" in it. This should work, I've used it before.

Answer 6

I think you're confusing AJAX with frame here.

When using frames, you are loading pages inside parent page, and normal operations in child pages does not affect parent. When using AJAX, think it as inserting content into current page, and whatever content inserted becomes part of the page and whatever action performed there will affect the page, there is no concept as child page in ajax.

For your problem, as many have mentioned, you must have initiated a post-back (like form submit) when clicking Search, which causes the page to reload.