search result in ajax tab

[elfyx]

1) Script Title: Ajax Tabs Content script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...axtabscontent/

3) Describe problem:
I'm going to create a game. I have a statistic page where you can do searches. I want to put the result in a new tab on the same page.

Any idea? track? or maybe solution if somebody has done this thing.

Thanks

[jscheuer1]

Is it server side? If so, you should be able to just have a PHP (or whatever server side type you are using) page with the appropriate server side code on it. Make that be the external page, use either the default method for inserting it into the desired tab, or use the expandtab method.

[elfyx]

I really want to do this with a new tab on the same page. It's like when you are on a search engine and the result of your search is on a new tab in the same page.

I have seen this on twerq, a search engine.

Help me to do in this way please.

[jscheuer1]

Well, it would be on the same page. What do you mean by a new tab?

[elfyx]

I'm french and I'm not sure about the traduction of the word "onglet", so tab is my traduction of "onglet", so I'm sorry if it isn't the best traduction for this word.

If this is the good traduction, I'm going to explain better than my last post.

jscheuer1

Well, it would be on the same page. What do you mean by a new tab?

"new tab" :
For every search the user do, a tab/"onglet" is printing on the page. Then, he can view all searches he did.
Tell me if it's a better explication of "new tab".

Thanks for your help.

[jscheuer1]

For that, you would need to create a new tab either via the DOM or by inserting the appropriate innerHTML to your target area. There could be problems with the DOM in some browsers - also with innerHTML but, that is less likely unless forms are being created. However you get your new tab onto the page, it will then have to be initialized to the script, or you might be able to create it already initialized. Once you get that taken care of, you would just have to fill it with your content page, as mentioned before.

This is quite a project though, really beyond a simple tweak to the script. To even test it out would require quite a bit of work owing to the fact that Ajax will not work cross domain and at least two pages, some server side and client side code would have to be developed.

Projects of this nature usually find no takers here in the forums but, you are welcome to wait and see if anyone else picks it up.

This really is more appropriate for the site owner and/or their employee(s) to develop.

An easier method might be to insert an iframe with the results page as its src. Then it would just be a matter of getting the design to look as desired:

function addResults(url){
var rf=document.createElement('iframe');
rf.src=url;
document.body.appendChild(rf);
}

Other attributes and/or style could be set for the iframe and it could be inserted virtually anywhere on the page.

[elfyx]

Thanks for your help.

[elfyx]

I made it, create tab with the name who is enter in the input tag!
I put the script here :

.js (I add some function in ajaxtabs.js)
function recup_donnee()
{
test = document.forms[0].elements["nom"].value;
create_li_in_ul();
startajaxtabs("maintab");
}

function create_li_in_ul()
{
//deselect all tabs
ul_child_list = document.getElementsByTagName("li");
for (var i=0; i<ul_child_list.length; i++)
ul_child_list[i].className="";

// create tag 'li' and attributes
ul_liste = document.getElementById("maintab");
create_li = document.createElement("li");
ul_liste.appendChild(create_li);
create_li.setAttribute("class", "selected");

// create tag 'a' and attributes
li_liste = ul_liste.lastChild;
create_a = document.createElement("a");
li_liste.appendChild(create_a);
create_a.setAttribute("href","external.htm");
create_a.setAttribute("rel","ajaxcontentarea");
create_a.innerHTML = test;
}

.htm (I add this in the demo.htm)

<form action="javascript:recup_donnee();">
Recherche:<input type="text" name="nom" value="" />
<input type="submit" name="button" value="Rechercher" />
</form>
<br />
<ul id="maintab" class="shadetabs"></ul>
<div id="ajaxcontentarea" class="contentstyle"></div>

[elfyx]

Now I want to increase the power of this script with three things.
- I want to make a function to close tab like firefox or IE with a cross on the tab.
- I want to move dynamically and horizontally my tabs (maybe drag and drop script?)
- Make a limit of the tab, because when I have a lot of tab, there is this PROBLEM

PS: Tell me if you think that I must create a new Post for this question.

Somebody can help me?
Thanks

[jscheuer1]

I've had some experience that would be useful with the first item, closing a tab. Be a little careful. You should be able to just fetch the element by id or whatever method and do:

element.parentNode.removeChilld(element)

However, if the element or its children you are eliminating has events attached to it, these should be set to null first, before removing it:

element.onclick=null

to prevent a memory drain.

And, if the element is an li, you should do some tests to make sure it has been removed in all target browsers from the getElementsByTagName('li').length of the parent ul element. If it has not been removed from that length, it will mess up any future script operations that use that length property in their calculations.

Dragging and dropping in this environment should be able to be done but, it will be tricky as, you will want the items to snap into place, while displacing (moving) other items, and to be limited to a certain range as to where they can go. Calculating that will be tricky.

Limiting the number of tabs is easy, for example - if these are li's added to a parent ul, just check the getElementsByTagName('li').length of the parent ul element prior to adding more, if too many are already open, pop up an alert telling them to close one first.